*{position:relative;box-sizing:border-box;margin:0;padding:0;border:0;}

body{font-family:'PT Sans', Arial;background-color:white;color:#333;padding-top:77px;}
a{text-decoration:none;color:inherit;}
h1, h2, h3, h4{text-decoration:inherit;font-size:inherit;display:inline-block;font-weight:inherit;}
label, button{cursor:pointer;}
input, select, textarea, button{width:100%;font-family:inherit;outline:none;}
input[type="text"], input[type="email"], textarea, select{height:36px;padding:0px 8px;font-size:14px;}
textarea{padding:8px;height:160px;resize:vertical;}

.bloc{display:block;width:100%;top:0px;left:0px;}
.blow{display:inline-block;vertical-align:middle;line-height:normal;}
.abs{position:absolute;}
.fl{float:left;} .fr{float:right;} .h{height:100%;}
.p6{padding:6px;} .p12{padding:12px;} .p24{padding:24px;}
.w50{width:50%;} .tac{text-align:center;}
.clear{clear:both;} .auto{margin:0px auto;} .center{max-width:1400px;margin:0px auto;}
.oh{overflow:hidden;} .u:hover{cursor:pointer;text-decoration:underline;}
.content{background-color:white;box-shadow:0px 0px 4px 3px rgba(0, 0, 0, 0.1);z-index:100;}
.cover{background:no-repeat center center;background-size:cover;}
.hover{position:fixed;background-color:rgba(0, 0, 0, 0.5);overflow-y:auto;cursor:pointer;display:none;z-index:10000;}
.mi{display:inline-block;font-family:'Material Icons';font-style:normal;font-weight:normal;vertical-align:sub;}
.anim-wait, .anim-wait *{transition:none !important;}

@keyframes clignote{from{opacity:0;}50%{opacity:1;}to{opacity:0;}}

#menu{position:fixed;height:77px;line-height:77px;z-index:1000;}
#menu .bars{display:none;background-color:white;width:50px;margin:12px;padding:12px;cursor:pointer;transition:all 0.5s;}
#menu .bar{width:100%;background-color:#004e9e;padding:3px;margin-bottom:4px;transition:all 0.5s;}
#menu .bars:hover{background-color:#004e9e;}
#menu .bars:hover .bar{background-color:white;}
#menu .link{font-size:14px;padding:6px 20px;}
#menu .link:hover{color:black;}
#menu .underline{position:absolute;bottom:0px;height:4px;background-color:#004e9e;transition:0.5s;}

#menu-list{position:absolute;top:77px;background-color:#004e9e;color:white;display:none;z-index:200;padding:12px 0px;box-shadow:0px 2px 2px 0px rgba(0,0,0,0.5);}
#menu-list .link{padding:6px 20px;transition:all 0.5s;}
#menu-list .link:hover{color:black;}

#content{overflow:auto;}

#alert{padding:100px 50px;}
#alert .content{max-width:500px;margin:0 auto;background-color:white;padding:20px 30px;color:#333;text-align:center;cursor:auto;}
#alert h3{padding-top:20px;font-size:20px;}
#alert p{padding:5px 0px;}
#alert a{color:#888;}
#alert a:hover{text-decoration:underline;}

#animation{overflow:hidden;}
#animation .ground{transition:opacity 0.5s;}
#animation .surface{position:absolute;width:27.5%;top:10.143%;left:47.344%;}
#animation .aura{position:absolute;width:27.5%;top:10.143%;left:47.344%;display:none;animation:clignote 2s infinite;}
#animation .cursor{position:absolute;border-radius:50%;width:20%;height:54.85714%;overflow:hidden;margin:-10% 0px 0px -10%;will-change:transform;}
#animation .reverse-cursor{position:absolute;width:500%;height:182.292%;margin:50% 0px 0px 50%;}
#animation .texts{position:absolute;top:0px;left:0px;width:40%;height:100%;padding:6% 4%;}
#animation .text-around{padding:4%;}
#animation .text{display:inline-block;top:0px;background-color:rgba(0, 78, 158, 0.7);color:white;padding:2% 4%;font-size:1.8vw;transition:opacity 0.8s, top 0.8s;}
#animation:hover .ground{opacity:0;} 
#animation:hover .aura{display:block;}
#animation.anim-wait .text{top:-30px;opacity:0;}
#animation .agrement{position:absolute;bottom:5%;right:5%;width:100px;height:100px;}
#animation .agrement img{transition:all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;}
#animation .agrement img:hover{transform:scale(1.2);}

#presentation{padding:50px 20px;}
#presentation .center{margin:0px auto;max-width:1200px;perspective:1700px;}
#presentation .intro{font-size:22px;}
#presentation .avantage{left:0px;padding:12px 16px;font-size:18px;cursor:pointer;transition:opacity 0.5s, left 0.5s, color 0.5s, background-color 0.5s;}
#presentation .avantage.current{background-color:#004e9e;color:white;}
#presentation .p-right{border:24px solid transparent;color:white;transition:transform 0.5s, width 0s;transform-style:preserve-3d;backface-visibility:hidden;}
#presentation .p-right .back{position:absolute;padding:24px;backface-visibility:hidden;transform:rotateY(180deg);background-color:#004e9e;}
#presentation .p-right .argument{text-align:justify;display:none;}
#presentation.anim-wait .avantage{left:-30px;opacity:0;}

#implantation .title{background-color:#004e9e;color:#fff;font-size:22px;text-align:center;padding:24px;}
#implantation .images{height:400px;overflow:hidden;}
#implantation .move{top:0px;left:-100%;width:100%;white-space:nowrap;font-size:0;}
#implantation .slide{display:inline-block;height:500px;width:100%;background-size:cover;background-position:center center;}
#implantation .nav{position:absolute;top:50%;transform:translateY(-50%) scale(0.5);opacity:0;cursor:pointer;border-top:40px solid transparent;border-bottom:40px solid transparent;transition:all 0.5s, transform 0.5s cubic-bezier(0,1,.6,4);}
#implantation .images:hover .nav{opacity:1;transform:translateY(-50%) scale(1);}
#implantation .nav.l{left:20px;border-right:40px solid #004e9e;}
#implantation .nav.r{right:20px;border-left:40px solid #004e9e;}

#fonctionnement{padding:24px;}
#fonctionnement .center{margin:0px auto;max-width:771px;border:24px solid transparent;}
#fonctionnement .intro{text-align:center;font-size:22px;}
#fonctionnement .show{display:block !important;}
#fonctionnement .hide{display:none !important;}
#fonctionnement .arrow{position:absolute;transition:opacity 0.5s;}
#fonctionnement .arrow-e-1{width:17.43%;left:00.27%;top:17.27%;transition-delay:1.5s;}
#fonctionnement .arrow-e-2{width:14.66%;left:21.02%;top:47.61%;transition-delay:1.8s;}
#fonctionnement .arrow-e-3{width:05.67%;left:33.37%;top:41.80%;transition-delay:2.1s;}
#fonctionnement .arrow-e-4{width:10.10%;left:56.02%;top:42.24%;transition-delay:2.4s;}
#fonctionnement .arrow-e-5{width:03.46%;left:52.84%;top:47.90%;transition-delay:2.7s;}
#fonctionnement .arrow-e-6{width:15.08%;left:84.37%;top:90.57%;transition-delay:3.0s;}
#fonctionnement .arrow-a-1{width:08.71%;left:83.68%;top:06.39%;transition-delay:3.3s;}
#fonctionnement .arrow-a-2{width:25.03%;left:44.54%;top:66.47%;transition-delay:3.6s;}
#fonctionnement .arrow-a-3{width:04.01%;left:57.95%;top:44.99%;transition-delay:3.9s;}
#fonctionnement .arrow-a-4{width:17.98%;left:33%;top:9%;transition-delay:4.2s;}
#fonctionnement .info{position:absolute;text-align:center;color:white;width:8.5%;height:8.92%;opacity:0.9;transform:scale(0.6);transition-property:transform, opacity;transition-duration:0.4s, 0.5s;}
#fonctionnement .info-e{background-color:#004e9e;}
#fonctionnement .info-a{background-color:#4e4e4e;}
#fonctionnement .info-m{background-color:#d1d1d1;color:#004e9e;}
#fonctionnement .info-e-1{top:26%;left:01%;transition-delay:0s, 5.0s;}
#fonctionnement .info-e-2{top:49%;left:25%;transition-delay:0s, 5.1s;}
#fonctionnement .info-e-3{top:48%;left:65%;transition-delay:0s, 5.2s;}
#fonctionnement .info-e-4{top:84%;left:90%;transition-delay:0s, 5.4s;}
#fonctionnement .info-a-1{top:01%;left:90%;transition-delay:0s, 5.5s;}
#fonctionnement .info-a-2{top:10%;left:45%;transition-delay:0s, 5.6s;}
#fonctionnement .info-m-1{top:62%;left:50%;transition-delay:0s, 5.3s;}
#fonctionnement .info-calc{position:absolute;left:-50%;top:-50%;width:100%;height:200%;background-color:#d1d1d1;}
#fonctionnement .info-icon{transform:rotate(180deg);top:10px;font-size:40px;}
#fonctionnement .info-text{display:none;font-size:3px;padding:10% 10%;}
#fonctionnement .info-cross{display:none;position:absolute;top:0;right:0;padding:12px 20px;font-weight:bold;font-size:20px;}
#fonctionnement .info:hover{z-index:10;transform:scale(6);transition-timing-function:cubic-bezier(.39,.06,.25,1.58);}
#fonctionnement .info:hover .info-icon{display:none;}
#fonctionnement .info:hover .info-text{display:block;}
#fonctionnement .legend{position:absolute;text-align:center;font-size:20px;transform:rotate(20deg);transition:opacity 0.5s;}
#fonctionnement .legend-1{left:15%;top:74%;transition-delay:0.5s;}
#fonctionnement .legend-2{left:44%;top:85%;transition-delay:1.0s;}
#fonctionnement .legend-title{font-weight:bold;}
#fonctionnement .legend-1 .legend-subtitle{color:#4e4e4e;}
#fonctionnement .legend-2 .legend-subtitle{color:#004e9e;}
#fonctionnement.anim-wait .arrow{opacity:0;}
#fonctionnement.anim-wait .info{opacity:0;visibility:hidden;}
#fonctionnement.anim-wait .legend{opacity:0;visibility:hidden;}

#contact{padding:100px 50px;overflow:hidden;background-color:#004e9e;}
#contact .parallax{position:absolute;top:0px;left:0px;width:100%;height:100%;box-sizing:content-box;padding-bottom:125px;background:url(images/contact.jpg) center center;background-size:cover;}
#contact .form{top:0px;display:block;background-color:rgba(0, 78, 158, 0.7);max-width:500px;margin:0px auto;transition:1s 0.5s;}
#contact .title{text-align:center;font-size:28px;font-weight:bold;color:white;}
#contact .button{height:42px;background-color:#004e9e;color:white;font-size:20px;font-weight:bold;padding:0px 12px;transition:0.2s;}
#contact .button:hover{color:#004e9e;background-color:white;}
#contact.anim-wait .form{opacity:0;top:-100px;}

#foot{background-color:#222;padding:24px 12px}
#foot .center{margin:0px auto;max-width:1200px;padding:12px;}
#foot .col{float:left;width:25%;padding:12px;}
#foot .title{font-size:18px;color:#b0b0b0;padding-bottom:10px;}
#foot .link{font-size:14px;color:#808080;padding:2px 0px;}

@media (max-width:1200px){
	#presentation .p-right{transform:rotateY(180deg) !important;}
	#presentation .p-right img.bloc{display:none;}
	#presentation .p-right .back{position:relative;}
}

@media (max-width:1050px){
	#fonctionnement .info{cursor:pointer;}
	#fonctionnement .info.click{transform:scale(1);width:100%;height:100%;top:0;left:0;z-index:10;transition:transform 0s;}
	#fonctionnement .info:hover{transform:none;}
	#fonctionnement .info:hover .info-icon{display:block;}
	#fonctionnement .info:hover .info-text{display:none;}
	#fonctionnement .info-text{font-size:3.6vw;}
}

@media (max-width:1000px){
	#menu .bars{display:inline-block;}
	#menu .link, #menu .underline, #menu .hqeaux{display:none;}
}

@media (max-width:800px){
	#presentation .w50{width:100%;}

	#fonctionnement .info-icon{font-size:30px;}
	#fonctionnement .legend{font-size:2.5vw;}
}

@media (max-width:600px){
	#fonctionnement .w50{width:100%;}
	#fonctionnement .info-icon{font-size:20px;}
	#fonctionnement .legend{font-size:2vw;}
}