@charset "utf-8";

/*CSS3 Élément principaux*/

html {
	font-size: 100%;
	padding: 0em;
	margin: 0em;
	background-image:url(../images/background/back.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment:fixed;
	background-size:cover;
	font-family: 'encode_sansregular', Arial, Helvetica, sans-serif;
}

body {
	font-size: 75%;
	width: 100%;
	height: auto;
	padding: 0em;
	margin: 0em;
}

img{
	padding: 0em;
	margin: 0em;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}

h1, h2, h3, h4, h5, h6, p{
	margin: 0em;
	padding: 0em;
	color:#051F39;
}

h1{
	font-size:300%;
	margin:0em;
	margin-bottom:0.75em;
	line-height:1.25em;
	font-family: 'encode_sansblack', Arial, Helvetica, sans-serif;
	text-align:center;
}

h2{
	font-size:185%;
	line-height:1.5em;
	font-family: 'encode_sansbold', Arial, Helvetica, sans-serif;
	text-align:center;
}

h3{
	font-size:150%;
	line-height:1.45em;
	font-family: 'encode_sansmedium', Arial, Helvetica, sans-serif;
	text-align:center;
}

h4{
	font-size:125%;
	line-height:2em;
	font-family: 'encode_sanslight', Arial, Helvetica, sans-serif;
	text-align:center;
	color:#95c11e;
}

h4 a{
	text-decoration:none;
	color:#95c11e;
}

h4 a:hover{
	text-decoration:underline;
}


h5{
	font-size:100%;
	line-height:1em;
	font-family: 'encode_sanslight', Arial, Helvetica, sans-serif;
	text-align:center;
}

h6{
	font-size:110%;
	margin:1.5em;
	line-height:1.5em;
	color:#051F39;
	font-family: 'encode_sansthin', Arial, Helvetica, sans-serif;
	text-align:justify;
}

p{
	margin-bottom:1em;
	font-size:125%;
	line-height:1.75em;
	font-family: 'encode_sansregular', Arial, Helvetica, sans-serif;
	text-align:justify;
}

strong{
	color:#95c11e;
}

a{
	cursor:pointer;
}

/*CSS3 Fin Élément principaux*/

/*CSS3 du header*/

header {
	display:block;
	float:left;
	width: 100%;
	height: 8em;
	margin: 0em;
	padding: 0em;
	background-color:rgba(10,43,74,0.85);
}

.logo_content {
	float:left;
	display:block;
	width:9em;
	height:auto;
	margin:0em;
	padding:2.4em 0em 2em 0em;
}

.logo{
	width:5em;
	height:3.5em;
	margin:0em;
	margin-left:3em;
	padding:0em;
}

/*CSS3 Fin du header*/

/*CSS3 des menu*/

.header_menu{
	width: 100%;
	height: 6.5em;
	margin: 0em;
	padding: 0em;
}

.menu{
	float:right;
	display:block;
	width:46em;
	height:3.75em;
	margin:0em;
	margin-top:2.5em;
	padding:0em;
}

.menu4{
	float:right;
	display:block;
	width:29em;
	height:3.75em;
	margin:0em;
	margin-top:2.5em;
	padding:0em;
}

.menu ul, .menu4 ul {
	padding: 0em;
	margin: 0em;
	list-style: none;
}

.menu ul li,.menu4 ul li {
	text-align:center;
	font-size:110%;
	display:block;
}

.menu ul li a, .menu4 ul li a{
	float:left;
	width:7em;
	height:3em;
	margin:0em;
	margin-right:1em;
	padding:0em;
	color:#fff;
	text-decoration:none;
	text-align:center;
	line-height:3.25em;
	font-family: 'encode_sansbold', Arial, Helvetica, sans-serif;
}

.menu ul li a:hover, .menu4 ul li a:hover{
	background-color:#A6CE38;
	color:#253A5D;
}

.menu_responsive, .menu_responsive2{
	float:left;
	width:100%;
	margin:0em;
	padding:1em 0em;
	background-color:rgba(166,206,57,0.85);
	display:none;
}

.menu_responsive p{
	text-align:center;
	float:left;
	display:block;
	width:20%;
	height:1.5em;
	margin-bottom:0em;
}
.menu_responsive2 p{
	text-align:center;
	float:left;
	display:block;
	width:33.3333333%;
	height:1.5em;
	margin-bottom:0em;
}


.menu2{
	float:right;
	display:block;
	margin-right:2em;
}

.menu2 ul{
	padding: 0em;
	margin: 0em;
	list-style: none;
}

.menu2 ul li{
	text-align:center;
	display:block;
	float:left;
	width:2em;
	height:2em;
}

.menu2 ul li a{
	float:left;
	margin:0em;
	padding:0em;
	text-decoration:none;
	text-align:center;
}

.reseau_menu{
	margin:1em auto;
	padding:0em;
	width:15.75em;
	height:auto;
}

.reseau_menu ul{
	padding: 0em;
	margin: 0em;
	list-style: none;
}

.reseau_menu ul li {
	text-align:center;
	display:block;
}

.reseau_menu ul li a{
	float:left;
	width:4.25em;
	height:4.25em;
	margin:0em 0.5em;
	padding:0em;
	opacity:0.5;
	text-decoration:none;
	
	
	-webkit-transition: all 0.75s ease;
	-o-transition: all 0.75s ease;
	-moz-transition: all 0.75s ease;
	transition: all 0.75s ease;
}

.reseau_menu ul li a:hover{
	opacity:1;
}


.content_blue, .content_blue2, .content_white, .content_green{
	float:left;
	display:block;
	height:auto;
	margin:0em;
	padding:5em 7.5%;
	width:85%;
}

.content_blue2{
	float:left;
	display:block;
	height:auto;
	margin:0em;
	padding:5em 15%;
	width:70%;
}

.scolaire{
	float:left;
	display:block;
	height:auto;
	margin:0em;
	padding:3em 15%;
	width:70%;

}

.scolaire .enveloppe3{
	margin-top:0em;
}


.content_blue, .content_blue2{
	background-color:rgba(10,43,74,0.85);
}

.content_white{
	background-color:rgba(255,255,255,0.85);
}

.content_green{
	background-color:rgba(166,206,57,0.85);
}

.content_works{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:100%;
	height:auto;
	background-image:url(../images/background/white.png);
	background-repeat:repeat;
}

.works{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:25%;
	height:auto;
}

.works2{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:50%;
	height:auto;
}

.works_logo{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:100%;
	height:auto;
}

footer{
	display:block;
	float:left;
	margin:0em;
	padding:0em;
	width:100%;
	height:auto;
	background-color:rgba(166,206,57,0.85);
}

.enveloppe{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:100%;
	height:auto;
}

.enveloppe2{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:100%;
	height:auto;
}

.enveloppe3{
	float:left;
	display:block;
	margin-top:2em;
	padding:0em;
	width:100%;
	height:auto;
}

.enveloppe4{
	float:left;
	display:block;
	padding:0em;
	width:100%;
	height:auto;
}

.colonne_2{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:50%;
	height:auto;
}

.colonne_4{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:25%;
	height:auto;
}

.colonne_6{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:25%;
	height:auto;
}

.colonne_3{
	float:left;
	display:block;
	margin:0em;
	padding:0em;
	width:33.3333333333%;
	height:auto;
}

.icone{
	display:block;
	margin:1em auto;
	padding:0em;
	width:4em;
	height:4em;
}

.icone2{
	display:block;
	margin:1em auto;
	padding:0em;
	width:4em;
	height:4em;
}

.icone3{
	display:block;
	margin:1em auto;
	padding:0em;
	width:4em;
	height:4em;
}

.description{
	float:left;
	display:block;
	width:100%;
	height:12em;
	margin:0em;
	padding:0em;
}

.description2{
	float:left;
	display:block;
	width:100%;
	height:auto;
	margin:0em;
	padding:0em;
}

.portfolio {
	float:left;
	display:block;
	width: 100%;
	height: auto;
	margin: 0em;
	padding: 0em;
	background-image:url(../images/background/white.png);
}



/*CSS3 Fin Contenant responsive*/

/*CSS3 Changement selon les contenants*/

.content_blue h1, .content_blue h2, .content_blue2 h1, .content_blue2 h3, .content_blue h3, .content_blue p{
	color:#fff;
}

.content_white h3 a{
	color:#051F39;
}

.content_green h4{
	color:#ffffff;
	text-align:right;
}

.content_green .enveloppe{
	margin-top:4em;
}

footer p{
	color:#253A5D;
	text-align:center;
	line-height:5em;
	margin-bottom:0em;
}

footer p strong{
	color:#022A4A;
	font-family: 'encode_sansbold', Arial, Helvetica, sans-serif;
}

.content_green strong{
	color:#fff;
}

.description p{
	text-align:center;
	margin-bottom:0em;
}

.description h6{
	margin:0.5em 2em;;
}

.description2 p{
	text-align:center;
	margin-bottom:0em;
}

h3 a{
	color:#fff;
	text-decoration:none;
}

h3 a:hover{
	color:#95c11e;
}


.works_logo img{
	opacity:1;
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	
	-webkit-transition: all 0.75s ease;
	-o-transition: all 0.75s ease;
	-moz-transition: all 0.75s ease;
	transition: all 0.75s ease;
}

.works_logo img:hover{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
}

.google-maps {
	display:block;
	float:left;
	width:100%;
	height:40em;
	overflow:hidden;
}

.google-maps iframe {
	width:100% !important;
	height:100% !important;
}

@media screen and (max-width: 1023px) {

.content_works{
	display:block;
}

.logo{
	width:4.5em;
	height:3.5em;
	margin:0em auto;
}	

.logo_content {
	width:100%;
	height:auto;
	margin:0em;
	padding:2.4em 0em 2em 0em;
}

.menu{
	display:none;
}
.menu4{
	display:none;
}

.menu_responsive, .menu_responsive2{
	display:block;
}

.works_logo img{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}

.colonne_6{
	width:50%;
}

.colonne_3{
	width:50%;
}

.colonne_4, .colonne_6, .colonne_2, .colonne_3{
	margin:1em 0em;

}

.reseau_menu ul li a{
	opacity:1;
}

}
@media screen and (max-width: 1120px) {
	
.colonne_4{
	width:50%;
}	
	
}	
@media screen and (max-width: 700px) {
	
.works{
	width:50%;
}

.works2{
	width:100%;
}

.colonne_2{
	width:100%;
}

.colonne_6{
	width:100%;
}

.colonne_3{
	width:100%;
}

.colonne_4{
	width:100%;
}

.description {
	height:auto;
	margin-bottom:2em;
}

.reseau_menu{
	width:12em;
}


.reseau_menu ul li a{
	width:3em;
	height:3em;

}
}
@media screen and (max-width: 420px) {

.content_blue, .content_blue2, .content_white, .content_green{
	float:left;
	display:block;
	height:auto;
	margin:0em;
	padding:2em 6%;
	width:88%;
	background-repeat:repeat;
}

h1{
	margin:0.5em 0em;
	font-size:225%;
	line-height:1.5em;
}

p{
	text-align:center;
	font-size:115%;
	line-height:1.5em;
}

h6{
	text-align:center;
	font-size:115%;
}

.works{
	width:50%;
}

footer p{
	font-size:100%;
}

.icone2, .icone {
	width:4em;
	height:4em;
}


}