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%;
}	*/

/* ---------- NAV 2 ---------- */

nav{
	z-index: 999;
	display: block;
	min-height: 70px;
	position: relative;
	background: #729CC4 /*#CCCCCC*/;
}

nav li{ /*menu principal*/
	padding: 2%;
    position: relative; 
    float: left;
}

	nav li:hover{
		background-color: white;
		transition: all 1s ease;
	}

nav a{
	text-decoration: none;
	color: black; /*#80809A*/;
	display: block;
} 

nav ul ul {
    position: absolute;
    z-index: 999;
    /*top: 800;??????*/
    left: 0;
    width: 100%;
    display: none;
}

nav li:hover ul{ /* ul dans les li*/
	display: block;
	line-height: 35px;
	background-color: white;
	transition: all 1s ease;
}

nav li li{ /*sous menu*/
	float: none;
}	

nav li li a{
	padding-left: 20px;
} 		

	nav li li a:hover{
		color: white;
		background: darkgray;
		opacity: ;
	} 


/* ---------- 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%;
}


/* ---------- 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%;
}

/* ---------- SLIK NAV---------- */
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 576px) {
	/* #menu is the original menu */
	 #menu {
		display:none;
	}
	
	 .slicknav_menu {
		display:block;
	}
}