@media screen and (min-width:641px) and (max-width:1304px){.hide-m, .hide-l-m, .hide-m-s, .hide{display:none;}
html{}
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:25px;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;}
#header > .logos{width:30%;height:auto;float:left;}
#header > .logos > .logo{display:block;width:100%;height:auto;padding-top:10px;margin-left:10px;}
#header > .logos > .logo img{width:100%;height:auto;}
#header > .logos > .res-soc{padding-top:10px;padding-bottom:10px;margin-left:10px;}
#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{float:left;padding-top:36px;padding-left:80px;}
#header > .mail > a{display:block;height:35px;padding-left:30px;line-height:37px;font-size:13px;background-image:url(../images/charte/enveloppe.png);background-position:left center;background-repeat:no-repeat;text-transform:uppercase;color:#fff;text-decoration:none;}
#header > .mail > a:hover{color:#adb186;}
#header > .droite{padding-top:10px;padding-right:10px;float:right;}
#header > .droite > a{color:#fff;text-decoration:none;margin-left:15px;font-size:12px;}
#header > .droite > a:hover{text-decoration:underline;}
#menu{width:100%;height:50px;}
#menu > .menu-content{width:100%;background-color:#60c3d6;z-index:99999999;}
#menu > .menu-content > .logo{display:none;float:left;}
#menu > .menu-content.scroll{position:fixed;}
#menu > .menu-content.scroll > .logo{height:50px;}
#menu > .menu-content.scroll > .logo img{height:100%;width:auto;}
#menu > .menu-content.scroll > .items > a{font-size:1.2vw;margin-left:10px;margin-right:10px;}
#menu > .menu-content > .items{float:left;text-align:center;}
#menu > .menu-content > .items > a{color:#fff;display:inline-block;line-height:50px;text-decoration:none;text-transform:uppercase;margin-left:20px;margin-right:20px;font-size:1.5vw;}
#menu > .menu-content > .items > a:hover{color:#7a7a7a;}
#menu > .menu-content > .lang{width:60px;height:50px;line-height:48px;text-align:center;float:right;color:#fff;background-color:#adb186;display:block;}
#menu > .menu-content > .lang a{color:#7a7a7a;font-size:1.5vw;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:14px;padding:0;margin:0;margin-bottom:12px;font-weight:normal;text-decoration:none;color:#fff;}
footer a.titre:hover{font-weight:bold;}
footer > .footer-top{width:90%;padding:30px 5% 40px 5%;background-color:#363636;}
.footer-top .col3-01{width:33%;float:left;text-align:center;}
.footer-top ul{padding:0;list-style:none;}
.footer-top ul li{font-size:12px;line-height:13px;}
footer > .footer-bottom{width:100%;height:77px;background-color:#1b1b1b;text-align:center;}
footer > .footer-bottom a{line-height:77px;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:40%;float:left;padding-left:5%;padding-right:5%;text-align:justify;font-size:14px;}
.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:12px;margin-bottom:40px;}
#infra > .items{width:570px;margin-left:auto;margin-right:auto;}
#infra .item-infra{position:relative;width:170px;height:170px;border-radius:50%;background-color:#d6d6d6;float:left;margin-left:10px;margin-right:10px;}
#infra .item-infra > a > img{width:100%;height:auto;-moz-transition:all 100ms linear;-o-transition:all 100ms linear;-webkit-transition:all 100ms linear;transition:all 100ms linear;}
#infra .item-infra:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms 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:12px;text-transform:uppercase;}
#cloud > .items{width:620px;margin-left:auto;margin-right:auto;}
#cloud .item-cloud{position:relative;width:145px;height:145px;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;}
#fournisseurs{position:relative;background-image:url(../images/charte/fond-fournisseurs.jpg);background-size:cover;text-align:center;padding-bottom:70px;}
#fournisseurs p{color:#ededed;font-size:12px;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 500ms linear;-o-transition:all 500ms linear;-webkit-transition:all 500ms linear;transition:all 500ms linear;}
#fournisseurs .item-fournisseurs:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms 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;}
#studio{position:relative;background-image:url(../images/charte/fond-studio.jpg);background-size:cover;text-align:center;padding-bottom:70px;}
#studio p{color:#ededed;font-size:12px;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 500ms linear;-o-transition:all 500ms linear;-webkit-transition:all 500ms linear;transition:all 500ms linear;}
#studio .item-studio:hover > a > img{margin-left:0;width:80%;height:auto;-moz-transition:all 250ms linear;-o-transition:all 250ms linear;-webkit-transition:all 250ms linear;transition:all 250ms 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;}
#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{width:calc(30% - 15px);float:left;font-size:2vw;text-transform:uppercase;text-align:right;padding-right:15px;padding-top:85px;}
#contact > .contact-content > .detail{width:calc(70% - 60px);float:left;background-color:#2e2d2c;color:#fff;padding:30px;background-image:url(../images/charte/fleche-contact.png);background-position:left center;background-repeat:no-repeat;}
#contact > .contact-content > .detail p{font-size:18px;margin:0;}
#contact > .contact-content > .detail p b{font-size:24px;}
#contact > .contact-content > .detail .tel{font-size:18px;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:18px;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;height:140px;}
#res-soc > div{padding-top:52px;width:540px;margin-left:auto;margin-right:auto;}
#res-soc p{color:#3c3c3b;font-size:24px;margin:0;float:left;margin-right:90px;}
#res-soc .items{float:left;}
#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:53%;padding-left:1%;padding-right:1%;float:left;}
.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{width:35%;margin-left:1%;margin-right:1%;float:left;background-color:#2e2d2c;color:#fff;padding:4%;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:16px;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:400px;}
}