@charset "UTF-8";
/* CSS Document */

html, body {height:100%;}
html{font-size: 62.5%;}
body{margin: 0 auto;padding: 0;overflow-x:hidden;position: relative;width:100%;background:#232f61;font-family: 'Open Sans', sans-serif;font-weight:300;color:#232f61; }

.container, .contDemi, .contSml{position:relative;display:block;margin:0 auto;width:100%}
.container{max-width:1200px;}
.contSml{max-width:1000px;}
.contDemi{max-width:600px;}

.pad{padding:50px;}
.bigPad {padding: 100px;font-size: 14px}

a{color:inherit;text-decoration: none}
a:focus{outline:0;}
a[href^=tel]{color:inherit;text-decoration:none;} 


img{max-width:100%;}
hr{border:none;border-top:3px dotted #ccc;margin:40px 0}


.center{text-align:center;} .left{text-align:left;} .right{text-align:right;} .justify{text-align:justify;} .uppercase{text-transform:uppercase;}

.block{display:block;}
.inline{display:inline-block}
.none{display:none;} 

.down{margin-bottom:40px;}
.up{margin-top:40px;}

.flt-lf{float:left}
.flt-rg{float:right}
.clear{clear:both;}



/* COULEUR */

.blanc{color:#fff;}
.bleu{color:#232f61;}
.jaune{color:#f9d900}

.cyan{color:#0d4dff;}

.bckBlanc{background:#fff;}
.bckpale{background:#f5f9ff;}
.bckJaune{background:#f9d900;}
.bckBleu{background:#232f61;}


/* TEXTE */

h1, h2, h3, h4, h5, h6{line-height:1.1;text-transform:uppercase;}

h1{font-size:36px;font-weight:800;}h1 span{font-size:50px}
h2{font-size:22px;font-weight:800;text-transform: none}
h3{font-size:18px;font-weight:800;letter-spacing:1px;color:#0d4dff;}
h4{font-size:16px;text-transform: none}

.modal-content h3 {
	margin-top: 40px;
	margin-bottom: 20px;
}

.modal-content h4 {
	margin-top: 25px;
	margin-bottom: 15px;
}

.modal-content p {
	margin-bottom: 15px;
}
	
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6{margin-top:0}
h1 + p{margin:20px 0}

.blanc p{color:#fff}

p, li{font-size:16px;line-height:1.6;}
ul{list-style-type:none;} 
ul li{margin:0 0 5px 0px;}
ul li:before{content:" • ";display: inline-block;font-weight:bold;width: 15px;color:#0d4dff}

.bt{position:relative;display:block;margin:30px 0 0;}
.bt a{font-size:15px;padding:15px 20px;border:none;border-radius: 10px; display:inline-block;text-decoration:none!important;font-weight: 800;color:#232f61;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.bt a.bckBleu{color:#fff;}
.bckpale .bt a:hover.bckBleu{background: #f9d900;color:#232f61}
.bt a:hover.bckJaune, .bckJaune .bt a:hover.bckBleu{background: #0d4dff;color:#fff}


header{width:100%;margin:0;height:auto;z-index:100;background:rgba(0, 0, 0, 0); position: absolute;top: 0;padding:15px 30px}
header .logo{float:left;margin-top:10px;width:auto}


#headhome{position:relative;background:url("../img/slider/fond-head.png") no-repeat center bottom / cover ;height:100%;overflow:visible;margin:0}
#headhome .container{height:100%;text-align:center;z-index:1;}
#headhome .centerBloc{width:100%;left:0; position: absolute; top: 50%; transform: translateY(-50%); }
#headhome h1{font-size:45px;font-weight: 800;text-align: left;padding:0 80px}
#headhome h1 span{font-size:75px}


.balise{margin:0 0 15px}
.circuit{background:url("../img/picto/circuit.svg") no-repeat center bottom / 100% auto ;padding-bottom:130px}


/*.avantage .col{width: 20%}*/
.avantage img{margin:0 auto 30px}
.poste{color:#fff;background:url("../img/slider/fond-poste.jpg") no-repeat center center /cover fixed;padding:60px 0}

table{margin:15px 0;vertical-align: top}
table tr td:first-child{font-weight: 800;width:45%}
table tr td{vertical-align: top}
table tr td{padding:5px}

.buttonModal {font-family: 'Open sans', sans-serif;background:none;border:0;color:inherit;cursor:pointer;padding:10px 20px;margin:20px 0;border:3px solid #232f61;border-radius: 10px; text-decoration: none;outline:none;}
.buttonModalJaune {font-family: 'Open sans', sans-serif;background: none;border: 0;color: inherit;cursor: pointer;padding: 10px 20px;margin: 20px 0;border: 3px solid #f9d900;border-radius: 10px;text-decoration: none;outline: none;}
.mySlides {display:none}

.modal{z-index:900;display:none;padding-top:0;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(35, 47, 97, 0.8);}
.modal .container{background:#fff;padding:60px;max-width: 1000px}
.modal-content{margin:auto;position:relative;padding:30px;outline:0;width:100%}
.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.closeModal{font-size: 40px;font-weight: 400;position:absolute;top:0px;right:40px;color:#fff;z-index: 999;background: #0d4dff;padding:10px;line-height: 1;margin:0}

/* FOOTER */

footer{width:100%}
footer.circuit{padding-bottom:0}
#credits{background:#0d4dff;padding:10px 30px;}
#credits .container *{margin:0}
#credits p, #credits a{margin:0;font-size:11px;color:#fff}
#credits a{font-size:10px;text-transform:uppercase;text-decoration:none;font-weight: normal;padding:2px 5px 0 0;}



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

.pad{padding:40px;}
.bigPad{padding:80px;}

}


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

.pad{padding:30px;}
.bigPad {padding: 60px;font-size: 12px}


h1{font-size:28px;}h1 span{font-size:40px}
h2{font-size:18px;}
h3{font-size:13px;}


p, li{font-size:14px;}
p.sml, ul.sml li, ol.sml li {font-size: 12px}

.logo img{width:120px}

#headhome{background:url("../img/slider/fond-head.png") no-repeat right 20% bottom / cover ;}
#headhome h1{font-size:32px;padding:0 40px}
#headhome h1 span{font-size:60px}

.avantage .col{width:100%;text-align: center;}
.avantage img{margin-bottom:15px}

.row .flt-lft, .row .flt-rg{float:none}

.modal .container{padding:30px;}

}


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

.pad{padding:20px;}
.bigPad {padding: 50px;font-size: 11px}


h1{font-size:20px;}h1 span{font-size:32px}
h2{font-size:16px;}
h3{font-size:12px;}


p, li{font-size:13px;}
p.sml, ul.sml li, ol.sml li{font-size:11px}

.logo img{width:100px}
#headhome h1{font-size:24px;padding:0 30px}
#headhome h1 span{font-size:40px}
}