@charset "utf-8";

/* -- Reset ------------------------------------------------- */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{-webkit-text-size-adjust: none;}
body {line-height: 1;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
header, section, footer,aside, nav, article, figure {display: block;}
label, input[type=button], input[type=submit], button {cursor: pointer;}
button {width: auto;overflow: visible;}
img {-ms-interpolation-mode: bicubic;}
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
html{-webkit-text-size-adjust: none;}
::selection {color:white;background:#2354a1;}
::-moz-selection {color:white;background:#2354a1;}

/* -- font ------------------------------------------------- */

/* Fontello */
@font-face {
	font-family: 'fontello';
	src: url('font/fontello.eot?51507754');
	src: url('font/fontello.eot?51507754#iefix') format('embedded-opentype'),
	   url('font/fontello.woff?51507754') format('woff'),
	   url('font/fontello.ttf?51507754') format('truetype'),
	   url('font/fontello.svg?51507754#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
}
 
.icon-mobile:before { content: '\e800'; } /* '' */
.icon-qualite:before { content: '\e801'; } /* '' */
.icon-techno:before { content: '\e802'; } /* '' */
.icon-global:before { content: '\e803'; } /* '' */
.icon-gestion:before { content: '\e804'; } /* '' */
.icon-juridique:before { content: '\e805'; } /* '' */
.icon-conseil:before { content: '\e806'; } /* '' */
.icon-eye:before { content: '\e807'; } /* '' */
.icon-economique:before { content: '\e808'; } /* '' */
.icon-finance:before { content: '\e809'; } /* '' */
.icon-discours:before { content: '\e80a'; } /* '' */
.icon-temps:before { content: '\e80b'; } /* '' */
.icon-plan:before { content: '\e80c'; } /* '' */
.rep{
	display:block;
	text-align:center;
	font-size:45px;
	padding-bottom:20px;
}

/* -- gen elements ------------------------------------------------- */
.block1,.block2,.block3,.block4{
	padding:10px;
}
.block2{
	text-align:center;
}
/* -- structure ------------------------------------------------- */
body{
	background:#F4F4F4;
	font:14px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#666666;
}
/* header */
header{
	background:#FFFFFF;
}
#headerTop{
	text-align:center;
}
#headerCallUs, #headerSeal{
	display:inline-block;
	height:35px;
	background:#e71b02;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
		 -o-border-radius: 5px;
			border-radius: 5px;
	margin:5px 5px;
	color:#FFFFFF;
	vertical-align:top;
	text-decoration:none;
}
#headerCallUs{
	padding:7px;
	font-family: 'Muli', sans-serif;
	font-size:16px;
	background:#104876;
}
#headerCallUs i{
	font-size:10px;
}
#headerSeal{
	padding:5px;
	padding-right:76px;
	text-align:right;
	background:url("ui/oec.jpg") no-repeat top right #e71b02;
	font-size:11px;
}
#headerLogo{
	margin-top:10px;
	display:block;
	background:url("ui/back-menu.jpg") top left;
	
}

/* Section / article / content */
section{
	background:#FFFFFF;
	padding:30px 0;
}
article{
	padding:0 20px;
}
article p{
	padding:10px 0;
	font-weight: normal;
}
article strong{
	font-weight:bold;
}
article a{
	color:#104876;
	text-decoration:none;
}
article h2{
	text-align:center;
	font: 19px 'Muli', sans-serif;
	color:#FF0000;
	padding:30px 0;
}
article h3{
	font-weight:bold;
}
article ul{
	padding: 10px 0;
	padding-left: 25px;
}
/* Form */
article label{
	border-bottom:solid 1px #e1e1e1;
	position:relative;
	display:block;
	padding: 8px;
	padding-right: 0;
	margin-bottom: 7px;
}
article input{
	width:100%;
	border:0;
	background:#CCCCCC;
	color: #666666;
	padding: 4px;
}
article .check{
	width:100%;
	background:#CCCCCC;
	color: #666666;
	padding: 5px;
	font-size: 13px;
}
article .check input{
	width:10px;
	float:none;
	padding: 0;
	margin: 0;
	margin-right: 5px;
	vertical-align: bottom;
}
article textarea{
	font:14px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	height: 250px;
	min-width: 100%;
	min-height: 250px;
	max-width: 100%;
	max-height: 250px;
	resize: none;
	border:0;
	background:#CCCCCC;
	color: #666666;
	padding: 4px;
}
/* Résultat */
.result .red{
	background:#e71b02;
	color:#FFFFFF;
	padding:20px;
	position:relative;
}
.result .redresult{
	position:absolute;
	top:8px;
	right:15px;
}
.result .redresult b{
	font-size:20px;
}
.result .detail span{
	display:inline-block;
	width:350px;
}
.result i{
	font-size:12px;
}
article button{
	display:block;
	width:220px;
	color:#FFFFFF;
	border:0;
	background:#104876;
	padding:10px;
	margin:auto;
}
input::-webkit-input-placeholder { color:#666666; }
input::-moz-placeholder { color:#666666; } /* firefox 19+ */
input:-ms-input-placeholder { color:#666666; } /* ie */
input:-moz-placeholder { color:#666666; }
textarea::-webkit-input-placeholder { color:#666666; }
textarea::-moz-placeholder { color:#666666; } /* firefox 19+ */
textarea:-ms-input-placeholder { color:#666666; } /* ie */
textarea:-moz-placeholder { color:#666666; }

#contentHero{
	padding-top:65%;
	position:relative;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		 -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	margin-bottom:30px;
	background: no-repeat center center #B3B3B3;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
}
.block1{
	position:relative;
	padding-top:55%;
}
/* Footer */
footer{
	background:#104876;
	text-align:center;
	color:#FFFFFF;
	line-height:200%;
	padding:20px 0;
}
footer a{
	color:#FFFFFF;
	text-decoration:none;
}
footer b{
	font-size:15px;
}
#contentHero iframe,
#contentHero object,
#contentHero embed {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	left: 0%;
}


/* -- Responsive ------------------------------------------------- */
@media only screen and (max-width: 555px){
	#headerCallUs i{
		display:none;
	}
}
@media only screen and (min-width: 680px){
	#contentHero{
		padding-top:36%;
	}
	#contentHero iframe,
	#contentHero object,
	#contentHero embed {
	    position: absolute;
		top: 0;
		height: 100%;
		width: 64%;
		left: 18%;
	}
	.block4{
		width:50%;
		float:left;
	}
}
@media only screen and (max-width: 719px){
	header #callMenu{
		display:block;
		padding:10px;
		font-weight:bold;
		color:#FFFFFF;
		text-decoration:none;
		background:#104876;
		text-align:center;
	}
	header nav{
		max-height: 0;
		overflow: hidden;
		-webkit-transition: max-height .4s ease-in 0s;
		-moz-transition: max-height .4s ease-in 0s;
		-o-transition: max-height .4s ease-in 0s;
		transition: max-height .4s ease-in 0s;
	}
	header nav.open{
		max-height: 225px;
	}
	header nav a{
		display:block;
		padding:10px;
		font-weight:bold;
		color:#104876;
		text-decoration:none;
		background:#FFFFFF;
		text-align:center;
		border-bottom:solid 1px #104876;
	}
}
@media only screen and (min-width: 720px){
	#headerTop{
		position:absolute;
		top:0;right:0;left:0;
		text-align:right;
	}
	#headerCallUs, #headerSeal{
		margin:10px 5px;
	}
	#headerLogo{
		background:none;
		margin-top:0;
	}
	#headerLogo img{
		margin-top:20px;
	}
	header nav{
		position:absolute;
		left:220px;
		right:0;
		top:58px;
		background:#104876;
		height:31px;
		color:#FFFFFF;
	}
	header #callMenu{
		display:none;
	}
	header nav a{
		display:inline-block;
		font-family: 'Muli', sans-serif;
		color:#FFFFFF;
		text-decoration:none;
		padding:7px;
		border-right:solid 1px #FFFFFF;
	}
	header nav a.last{
		border:0;
	}
	header nav a.mep{
		background:#4b7598;
	}
	header nav a:hover{
		background:url("ui/sel-menu.jpg") no-repeat center center;
		color:#e7b2ab;
	}
		.block1{
		position:relative;
		width:30%;
		float:left;
		padding-top:15%;
	}
	.block3{
		position:relative;
		width:70%;
		float:left;
	}
}
@media only screen and (min-width: 1000px){
	header,section,footer{
		width:1000px;
		margin:auto;
		position:relative;
	}
	.block2{
		position:relative;
		width:50%;
		float:left;
	}
	.block4{
		width:25%;
	}
	article input{
		width:300px;
		float:right;
	}
	article .check{
		width:300px;
		float:right;
		display: inline-block;
	}
	.block4{
		width:25%;
	}
}
.play-mov{
	text-decoration:none;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:url("ui/play-mov.png") no-repeat center center;
}
/* Testimonial */
.testimonialContainer{
	background:#cfdae4;
	margin: auto;
	width:100%;
	height:200px;
	overflow:hidden;
	position:relative;
	margin-top: 30px;
}
.testimonial{
	position:absolute;
	-webkit-animation:round 80s infinite;
	 -moz-animation:round 80s infinite;
	   -o-animation:round 80s infinite;
		  animation:round 80s infinite;
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	top:75px;
	background:url("ui/quote.jpg") no-repeat top left #cfdae4; 
	padding:30px;
	padding-top:0;
	left:10px;
	font-style:italic;
}
.testimonial h4,.testimonial h6{
	font-style:normal;
	text-align:right;
}
.testimonial h4{
	padding-top:10px;
	color:#104876;
}
@-webkit-keyframes round{   
	0%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
	3%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	22%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	25%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
}
@-moz-keyframes round{   
	0%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
	3%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	22%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	25%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
}
@-o-keyframes round{   
	0%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
	3%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	22%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	25%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
}
@keyframes round{   
	0%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
	3%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	22%{
	-khtml-opacity:1;
	  -moz-opacity:1;
		   opacity:1;
	}
	25%{
	-khtml-opacity:0;
	  -moz-opacity:0;
		   opacity:0;
	}
} 

.t4{-webkit-animation-delay: 0s;animation-delay:0s;}
.t3{-webkit-animation-delay: 20s;animation-delay:20s;}
.t2{-webkit-animation-delay: 40s;animation-delay:40s;}
.t1{-webkit-animation-delay: 60s;animation-delay:60s;}

.timer{
	height:5px;
	width:0%;
	position:absolute;
	bottom:0;
	left:0;
	background:#104876;
	-webkit-animation:roll 20s infinite;
	 -moz-animation:roll 20s infinite;
	   -o-animation:roll 20s infinite;
		  animation:roll 20s infinite;
}
@-webkit-keyframes roll{
	0%{width:0%;}
	100%{width:100%;}
}
@-moz-keyframes roll{
	0%{width:0%;}
	100%{width:100%;}
}
@-o-keyframes roll{
	0%{width:0%;}
	100%{width:100%;}
}
@keyframes roll{
	0%{width:0%;}
	100%{width:100%;}
}