body{
	font-size: 17px;
	font-family: 'Roboto' ;
	font-weight: 300;
	color: black;
	line-height: 24px;
	text-align: justify;
}

.retour{
	clear: both;
}

.container{
	width: 1000px;
	margin: auto;
}

.col2_left{
	width: 42%;
	padding-right: 2%;
	display: block;
	float: left;
}

	.col2_right{
		width: 42%;
		padding-left: 2%;
		display: block;
		float: left;
	}

h1{
	font-family: 'Roboto' ;
	font-weight: 100;
	color: white;
	padding: 5% 3% 5% 3%;
	text-transform: uppercase;
	font-size: 50px;
}

	h2{
		font-family: 'Kalam' ;
		font-weight: 400;
		color: white;
		text-transform: uppercase;
		font-size: 40px;
		padding-bottom: 3%;
		padding-top: 3%;
	}

		
/* ---------- NAV ---------- *//*skave*/
nav{
	position: fixed;
	top: 0;
	right: 0;
	font-size: 30px;
	margin-top: 2%;
	z-index: 999;
	background: rgba(0, 0, 0, 0.3);

}
	nav i{
		color: white;
	}

	nav li{
		float: left;
		width: 130px;
	}
		nav a{
			display: block;
			text-align: center;
			padding: 30px 10px 30px 10px;
			transition: all 0.5s;
		}

			nav a:hover, nav .active{
				background: rgba(0, 0, 0, 0.5);
				font-size: 50px;
			}

.sticky a{
	padding: 1%;
}	

		



/* ---------- ICONE ---------- */
.icon_bottom { /* icon bas-droite section */
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: black;
	font-size: 300px;
	opacity: 20%;
}

.scroll_centre {
	position: absolute;
	bottom: 0;
	right: 50%; 
	z-index: 999;
	font-size: 40px;
	padding: 3%;
}

	.scroll_centre i{
		color: white;
	}

.scroll_right {
	position: fixed;
	bottom: 0;
	right: 0; 
	z-index: 999;
	font-size: 40px;
	color: white;
	padding: 3%;
	display: none;
}

	.scroll_right i{
		color: white;
	}
/* ---------- SECTION BLEU ---------- */
#bleu{
	background: #729CC4;
	height:100vh;
	position: relative;
	bottom: 0;
	right: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
	margin: 1% 0 1% 0 1%;
}

.textplus{ /* div texte à dérouler */
	display: none;
}

	.plus{ /* flèche déroulement dde la div */
		text-align: center;
		padding-top: 5%;
		font-size: 25px;
	}

		.plus a{ /* href de la flèche pour réroulement texte */
			color: white;
		}

			.reverse{ /* class jquery pour deroulement du texte */
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}

	

		.unn{ /* img div droite à dérouler*/
			max-width: 80%;
			margin: auto;
			display: block;
			padding: 3% 3%;
		}

.col2_fleche{
	text-align: left;
	padding-top: 15%;
	padding-left: 2%;
	font-size: 25px;
	width: 18%;
	display: block;
	float: left;	
}

	.col2_fleche i{
		color: white;
	}
	.col2_text{
		width: 80%;
		display: block;
		float: left;
	}

		.col2_text p{
			padding-top: 10%;
		}
.plus_left{ /* deroullement div droite*/

}
.plus_left a{
		color: white;
	}
/* ---------- SECTION VERT---------- */
#vert{
	background:#BCC45E;
	height:100vh;
	position:  relative;
	bottom: 0;
	right: 0;
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
	margin: 1% 0 1% 0 1%;
}

/* ---------- SECTION ORANGE---------- */
#orange{
	background:#C4514B;
	height:100vh;
	position:  relative;
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
	margin: 1% 0 1% 0 1%;
}

.slideshow{

}
/* ---------- SECTION MARRON---------- */
#marron{
	background:#783734;
	height:100vh;
	position:  relative;
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
	margin: 1% 0 1% 0 1%;
}