@media screen and (max-width:640px){.hide-s, .hide-l-s, .hide-m-s, .hide{display:none;}
html{min-width:320px;}
body{margin:0;padding:0;font-size:12px;color:#000;}
input[type="text"],
input[type="password"],
textarea,
select{margin:0;padding:3px;width:230px;border:solid 1px #999;outline:none;}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{border:solid 1px #555;}
input[type="text"]:active,
input[type="password"]:active,
textarea:active,
select:active{border:solid 1px #555;}
input[type="checkbox"] + label{padding-left:10px;}
input[type="radio"] + label{padding-left:10px;padding-right:20px;line-height:20px;}
.float-left{float:left;}
.float-right{float:right;}
.clear{clear:both;height:0;overflow:hidden;}
.center{margin:auto;}
.txt-left{text-align:left;}
.txt-right{text-align:right;}
.txt-center{text-align:center;}
.txt-justify{text-align:justify;}
.txt-top{vertical-align:top;}
.txt-bottom{vertical-align:bottom;}
.txt-middle{vertical-align:middle;}
#loading-bg{z-index:99999999;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:#fff;opacity:0;-ms-filter:"alpha(opacity=0)";filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(opacity=0);}
h1.h1-01{font-size:20px;font-weight:normal;text-transform:uppercase;padding-bottom:23px;background-image:url(../images/charte/trait-titre-black.jpg);background-repeat:no-repeat;background-position:bottom center;text-align:center;margin-top:0;padding-top:50px;margin-bottom:30px;}
h1.h1-01.white{color:#ededed;background-image:url(../images/charte/trait-titre-white.jpg);}
h1.h1-01.blue{background-image:url(../images/charte/trait-titre-blue.jpg);}
h3.h3-01{font-size:16px;padding:0;margin:0;font-weight:bold;text-transform:uppercase;}
a.btn-01{display:inline-block;height:20px;background-color:#60c3d6;color:#fff;text-transform:uppercase;padding:10px 25px;font-size:13px;text-decoration:none;}
.anchor{position:absolute;}
header{background-color:#1b1b1b;}
#header{width:100%;margin-left:auto;margin-right:auto;text-align:center;}
#header > .logos > .logo{display:block;width:50%;height:auto;padding-top:10px;margin-left:auto;margin-right:auto;}
#header > .logos > .logo img{width:100%;height:auto;}
#header > .logos > .res-soc{width:160px;padding-top:10px;padding-bottom:10px;margin-left:auto;margin-right:auto;}
#header > .logos > .res-soc > a{background-color:#333333;display:block;width:35px;height:35px;float:left;margin-left:5px;-webkit-transition:background 250ms linear;-moz-transition:background 250ms linear;-ms-transition:background 250ms linear;-o-transition:background 250ms linear;transition:background 250ms linear;}
#header > .logos > .res-soc > a:hover{background-color:#adb186;-webkit-transition:background 500ms linear;-moz-transition:background 500ms linear;-ms-transition:background 500ms linear;-o-transition:background 500ms linear;transition:background 500ms linear;}
#header > .mail{width:200px;margin-left:auto;margin-right:auto;}
#header > .mail > a{display:block;height:35px;padding-left:30px;line-height:37px;font-size:12px;background-image:url(../images/charte/enveloppe.png);background-position:left center;background-repeat:no-repeat;text-transform:uppercase;color:#fff;text-decoration:none;text-align:left;}
#header > .mail > a:hover{color:#adb186;}
#header > .droite{padding-top:10px;padding-bottom:20px;}
#header > .droite > a{color:#fff;text-decoration:none;margin-left:20px;font-size:12px;}
#header > .droite > a:hover{text-decoration:underline;}
#menu{width:100%;}
#menu > .menu-content{width:100%;background-color:#60c3d6;z-index:99999999;}
#menu > .menu-content > .logo{display:none;margin-right:auto;margin-left:auto;width:30%;height:auto;}
#menu > .menu-content > .logo img{width:100%;height:auto;}
#menu > .menu-content.scroll{position:fixed;}
#menu > .menu-content > .items{text-align:center;}
#menu > .menu-content > .items > a{display:block;color:#fff;text-decoration:none;text-transform:uppercase;margin-left:20px;margin-right:20px;padding-top:3%;padding-bottom:3%;font-size:12px;border-bottom:1px solid #fff;}
#menu > .menu-content > .items > a:last-of-type{border-bottom:none;}
#menu > .menu-content > .items > a:hover{color:#7a7a7a;}
#menu > .menu-content > .lang{margin-top:-35px;padding:5px 10px;height:25px;line-height:25px;text-align:center;float:right;color:#fff;background-color:#adb186;display:block;}
#menu > .menu-content > .lang a{color:#7a7a7a;font-size:9px;text-transform:uppercase;text-decoration:none;padding-left:3px;padding-right:3px;}
#menu > .menu-content > .lang a:hover,
#menu > .menu-content > .lang a.active{color:#fff;}
#menu > .menu-content > .lang span{width:20px;vertical-align:top;}
footer .content{width:100%;color:#fff;}
footer a.titre{font-size:9px;padding:0;margin:0;margin-bottom:12px;color:#999;text-decoration:none;}
footer a.titre:hover{font-weight:bold;}
footer > .footer-top{width:96%;padding-left:2%;padding-right:2%;background-color:#363636;padding-top:20px;}
.footer-top .col3-01{width:31%;float:left;padding-left:1%;padding-right:1%;text-align:center;}
.footer-top ul{padding:0;list-style:none;}
.footer-top ul li{font-size:9px;line-height:11px;}
footer > .footer-bottom{width:100%;height:50px;background-color:#1b1b1b;text-align:center;font-size:10px;}
footer > .footer-bottom a{line-height:50px;margin-right:15px;color:#fff;text-decoration:none;}
footer > .footer-bottom a:hover{text-decoration:underline;}
.page-content > .content{width:100%;}
.page-content > .content > img{display:block;width:100%;}
#vision{background-color:#eee;}
#vision .col2-01{width:90%;padding-left:5%;padding-right:5%;text-align:justify;font-size:12px;}
.separateur{position:relative;margin:50px auto -14px auto;width:50px;height:55px;background-image:url(../images/charte/separateur.png);background-repeat:no-repeat;background-position:bottom center;z-index:99999;}
#infra{position:relative;background-image:url(../images/charte/fond-infra.jpg);background-size:cover;text-align:center;padding-bottom:70px;}
#infra p{color:#ededed;text-transform:uppercase;font-size:10px;margin-bottom:30px;}
#infra > .items{width:320px;margin-left:auto;margin-right:auto;}
#infra .item-infra{position:relative;width:100px;height:100px;border-radius:50%;background-color:#d6d6d6;float:left;margin-left:3px;margin-right:3px;}
#infra .item-infra > a > img{width:100%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms linear;}
#infra .item-infra:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 500ms linear;-o-transition:all 500ms linear;-webkit-transition:all 500ms linear;transition:all 500ms linear;}
#infra .item-infra .gris-hover{opacity:0;position:absolute;top:0;bottom:0;right:0;left:0;border-radius:50%;background-image:url(../images/charte/gris.png);-moz-transition:all 50ms linear;-o-transition:all 50ms linear;-webkit-transition:all 50ms linear;transition:all 50ms linear;}
#infra .item-infra .gris-hover img{width:100%;height:auto;}
#infra .item-infra:hover .gris-hover{opacity:1;-moz-transition:all 100ms linear;-o-transition:all 100ms linear;-webkit-transition:all 100ms linear;transition:all 100ms linear;}
#cloud{position:relative;background-color:#eee;text-align:center;}
#cloud p{font-size:10px;text-transform:uppercase;}
#cloud > .items{width:320px;margin-left:auto;margin-right:auto;}
#cloud .item-cloud{position:relative;width:70px;height:70px;border-radius:50%;background-color:#fff;float:left;margin-left:5px;margin-right:5px;overflow:hidden;}
#cloud .item-cloud > a > img{width:100%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms linear;}
#cloud .item-cloud:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 500ms linear;-o-transition:all 500ms linear;-webkit-transition:all 500ms linear;transition:all 500ms linear;}
#cloud .item-cloud .gris-hover{opacity:0;position:absolute;top:0;bottom:0;right:0;left:0;border-radius:50%;background-image:url(../images/charte/gris.png);-moz-transition:all 50ms linear;-o-transition:all 50ms linear;-webkit-transition:all 50ms linear;transition:all 50ms linear;}
#cloud .item-cloud .gris-hover img{width:100%;height:auto;}
#cloud .item-cloud:hover .gris-hover{opacity:1;-moz-transition:all 100ms linear;-o-transition:all 100ms linear;-webkit-transition:all 100ms linear;transition:all 100ms linear;}
#studio{position:relative;background-image:url(../images/charte/fond-studio.jpg);background-size:cover;text-align:center;padding-bottom:30px;}
#studio p{color:#ededed;font-size:10px;text-transform:uppercase;}
#studio > .items{width:170px;margin-right:auto;margin-left:auto;}
#studio .item-studio{position:relative;width:170px;height:170px;border-radius:50%;background-color:#fff;}
#studio .item-studio > a > img{width:100%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms linear;}
#studio .item-studio:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 500ms linear;-o-transition:all 500ms linear;-webkit-transition:all 500ms linear;transition:all 500ms linear;}
#studio .item-studio .gris-hover{opacity:0;position:absolute;top:0;bottom:0;right:0;left:0;border-radius:50%;background-image:url(../images/charte/gris.png);-moz-transition:all 50ms linear;-o-transition:all 50ms linear;-webkit-transition:all 50ms linear;transition:all 50ms linear;}
#studio .item-studio .gris-hover img{width:100%;height:auto;}
#studio .item-studio:hover .gris-hover{opacity:1;-moz-transition:all 100ms linear;-o-transition:all 100ms linear;-webkit-transition:all 100ms linear;transition:all 100ms linear;}
#fournisseurs{position:relative;background-image:url(../images/charte/fond-fournisseurs.jpg);background-size:cover;text-align:center;padding-bottom:30px;}
#fournisseurs p{color:#ededed;font-size:10px;text-transform:uppercase;}
#fournisseurs > .items{width:170px;margin-right:auto;margin-left:auto;}
#fournisseurs .item-fournisseurs{position:relative;width:170px;height:170px;border-radius:50%;overflow:hidden;background-color:#55ADB7;}
#fournisseurs .item-fournisseurs > a > img{width:100%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms linear;}
#fournisseurs .item-fournisseurs:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 500ms linear;-o-transition:all 500ms linear;-webkit-transition:all 500ms linear;transition:all 500ms linear;}
#fournisseurs .item-fournisseurs .gris-hover{opacity:0;position:absolute;top:0;bottom:0;right:0;left:0;border-radius:50%;background-image:url(../images/charte/gris.png);-moz-transition:all 50ms linear;-o-transition:all 50ms linear;-webkit-transition:all 50ms linear;transition:all 50ms linear;}
#fournisseurs .item-fournisseurs .gris-hover img{width:100%;height:auto;}
#fournisseurs .item-fournisseurs:hover .gris-hover{opacity:1;-moz-transition:all 100ms linear;-o-transition:all 100ms linear;-webkit-transition:all 100ms linear;transition:all 100ms linear;}
#contact{background-color:#eee;}
#contact > .contact-content{width:80%;margin-right:auto;margin-left:auto;padding-top:100px;padding-bottom:100px;}
#contact > .contact-content > .titre{font-size:20px;text-transform:uppercase;text-align:center;}
#contact > .contact-content > .detail{background-color:#2e2d2c;color:#fff;padding:30px;}
#contact > .contact-content > .detail p{font-size:18px;margin:0;text-align:center;}
#contact > .contact-content > .detail p b{font-size:24px;}
#contact > .contact-content > .detail .tel{font-size:15px;line-height:36px;height:36px;padding-left:50px;background-image:url(../images/charte/tel.png);background-position:left center;background-repeat:no-repeat;margin-top:20px;}
#contact > .contact-content > .detail .mail{font-size:14px;line-height:36px;height:36px;padding-left:50px;background-image:url(../images/charte/enveloppe-big.png);background-position:left center;background-repeat:no-repeat;margin-top:20px;display:block;color:#fff;text-decoration:none;}
#contact > .contact-content > .detail .mail:hover{text-decoration:underline;}
#res-soc{background-color:#adb186;text-align:center;padding-top:20px;padding-bottom:20px;text-align:center;}
#res-soc p{color:#3c3c3b;font-size:24px;margin:0;margin-bottom:15px;}
#res-soc .items{width:270px;margin-right:auto;margin-left:auto;}
#res-soc .items > a{background-color:#363636;display:block;width:35px;height:35px;float:left;margin-left:26px;-webkit-transition:background 250ms linear;-moz-transition:background 250ms linear;-ms-transition:background 250ms linear;-o-transition:background 250ms linear;transition:background 250ms linear;}
#res-soc .items > a:hover{background-color:#000;-webkit-transition:background 500ms linear;-moz-transition:background 500ms linear;-ms-transition:background 500ms linear;-o-transition:background 500ms linear;transition:background 500ms linear;}
.recrutement{background-color:#eee;padding-left:15px;padding-right:15px;}
.recrutement .titre{color:#000;text-decoration:none;font-size:24px;padding:0;margin:0;margin-top:40px;font-weight:normal;padding-right:45px;background-image:url(../images/charte/plus-recrutement.png);background-position:right center;background-repeat:no-repeat;}
.recrutement p{margin:0;}
.recrutement .texte{padding-top:12px;padding-bottom:12px;font-size:14px;}
.recrutement ul{margin:0;padding-left:15px;}
.recrutement .texte a{color:#60c3d6;text-decoration:none;}
.recrutement .texte a:hover{text-decoration:underline;}
.recrutement .cache{display:none;}
.contact{background-color:#eee;padding-bottom:50px;}
.contact > iframe{width:100%;height:auto;}
.contact > .cols{padding-left:15px;padding-right:15px;}
.contact > .cols > .form{width:100%;padding-bottom:15px;}
.contact > .cols > .form > input[type=text],
.contact > .cols > .form > textarea{width:calc(100% - 32px);padding:15px;background-color:transparent;margin-bottom:20px;font-size:15px;}
.contact > .cols > .form > input[type=text]:nth-child(2n){margin-right:0;}
.contact > .cols > .detail{background-color:#2e2d2c;color:#fff;padding:30px;background-image:url(../images/charte/fleche-contact.png);background-position:left center;background-repeat:no-repeat;}
.contact > .cols > .detail p{font-size:18px;margin:0;}
.contact > .cols > .detail p b{font-size:24px;}
.contact > .cols > .detail .mail{font-size:14px;line-height:36px;height:36px;padding-left:42px;background-image:url(../images/charte/enveloppe-big.png);background-position:left center;background-repeat:no-repeat;margin-top:20px;display:block;color:#fff;text-decoration:none;}
.contact > .cols > .detail .mail:hover{text-decoration:underline;}
.contact #map_canvas{width:100%;height:300px;}
}