body 
{
	/* TYPO */
	font-family: 'Archivo', sans-serif;
	font-size: 1.2em;
	color: #f2f2f2;
	line-height: 1.4em;
	font-weight: 300;

	/* FOND */
	background-color: #121212;
	min-height: 100%;
	max-width: 100%;
}

#conteneur
{
	display: flex;
	max-width: 100%;
	min-height: 100%;
	overflow-x: hidden;
}

header
{
	padding-left: 20px;
}

/**********************************************************************/
.about /* TXT-GAUCHE*/

{
  position: fixed;
  left: 0;
  top: 0;
  max-width: 25%;
  border-right: 1px #f2f2f2 solid;
  border-bottom: 1px #f2f2f2 solid;

  padding-top: 10px;
  padding-bottom: 10px;

  overflow-y: auto;
  height: 100%;

  scrollbar-width: thin;
}

.txt

{
	padding-left: 20px;
	padding-right: 20px;
}

.info /* border a propos + contact + footer */
{
	border-top: 1px #f2f2f2 solid;
}

footer
{
	font-size: 0.7em;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 20px;
}

h1
{

font-weight: 300;
font-size: 1.6em;
padding-left: 20px;

}

h2
{

font-weight: 900;
padding-left: 20px;

font-size: 2.2em;
line-height: 1.4em;

}

.description /*1*/
{
	padding-left: 20px;

	font-size: 1.2em;
	line-height: 1.4em;

	width: 65%;
}

/* MENU NAVIGABLE PROJETS */
nav 
{
	font-size: 1.2em;
	line-height: 1.4em;
	padding-left: 20px;
	padding-right: 20px;
}

a
{
	text-decoration: none;
	color: #f2f2f2;
}


a:hover
{
	color: #717171;
	font-style: italic;
}

.en-cours
{
	color: #FF5733;
}

/**********************************************************************/

.projets /* IMG-DROITE*/
{
	max-width: 75%;
	padding-left: 5px;
	padding-right: 10px;
	overflow-x: hidden;

	position: relative;
	left: 25%;

	display: flex;
	flex-direction: column;

}

img
{
	max-width: 100%;
	margin-bottom: 20px;
}

.bouton
{
	display: none;
}

.fleche-gauche
{
	display: inline-block;
	width: 50px;
	margin-left: 20px;
}

.fleche-droite
{
	display: inline-block;
	width: 50px;
	margin-right: 30px;

	position: absolute;
	right: 0px;
}

.fleche-gauche:hover
{
	opacity: 25%;
}

.fleche-droite:hover
{
	opacity: 25%;
}

.wrap
{
	display: flex;
}

.wrap > div
{
	width: 50%;
	padding: 10px;
}

/**********************************************************************/

/* GRANDE TABLETTE - PETITE FENETRE*/
@media all and (max-width: 1280px)
{
	body 
	{
	/* TYPO */
	font-family: 'Archivo', sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	}

	header
	{
	padding-left: 10px;
	}

	h1
	{
	font-size: 1.4em;
	padding-left: 10px;
	}

	h2
	{
	font-size: 2em;
	}

	.description /*2*/
	{
	font-size: 1em;

	width: 75%;
	}


	nav 
	{
	font-size: 1em;
	line-height: 1.2em;
	padding-left: 10px;
	}

	.txt
	{
	padding-left: 10px;
	}

	footer
	{
	padding-left: 10px;
	}

	.bouton
	{
	display: none;
	}

	.fleche-gauche
{
	display: inline-block;
	width: 40px;
	margin-left: 20px;
}

.fleche-droite
{
	display: inline-block;
	width: 40px;
	margin-right: 30px;

	position: absolute;
	right: 0px;
}

}

/* SMARTPHONE + PETITE TABLETTE */
@media all and (max-width: 833px)
{
	.about
	{
		display: none;
	}

	.projets /* IMG-DROITE*/
	{
	position: relative;
	left: 0;
	min-width: 100%;
	padding-left: 2px;
	padding-right: 3px;
	}

	.bouton
	{
	display: inline;
	position: fixed;
	width: 2.5em;
	right: 1em;
	top: 1em;
	}

	.bouton:hover
	{
		opacity: 25%;
	}

	h2
	{

	font-size: 1.8em;
	line-height: 1.4em;
	}

	.description /*3*/
	{
	font-size: 1.2em;

	width: 85%;
	}

}

/* TOUTS PETITS ECRANS */
@media all and (max-width: 320px)
{

	.description
	{
	padding-right: 20px;

	font-size: 1em;
	}

	.fleche-gauche
{
	display: inline-block;
	width: 30px;
	margin-left: 20px;
}

.fleche-droite
{
	display: inline-block;
	width: 30px;
	margin-right: 30px;

	position: absolute;
	right: 0px;
}

}