@keyframes rotation{100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }}
@keyframes vibre{0%{top:calc(50% - 33px);}93%{top:calc(50% - 33px);}94%{top:calc(50% - 28px);}95%{top:calc(50% - 33px);}96%{top:calc(50% - 38px);}97%{top:calc(50% - 33px);}98%{top:calc(50% - 31px);}99%{top:calc(50% - 33px);}100%{top:calc(50% - 35px);}}
@keyframes vibre2{0%{margin-top:0;}93%{margin-top:0;}94%{margin-top:-5px;}95%{margin-top:0;}96%{margin-top:5px;}97%{margin-top:0;}98%{margin-top:-2px;}99%{margin-top:0;}100%{margin-top:2px;}}
@keyframes vibreHaut{0%{top:calc(30% - 33px);}93%{top:calc(30% - 33px);}94%{top:calc(30% - 28px);}95%{top:calc(30% - 33px);}96%{top:calc(30% - 38px);}97%{top:calc(30% - 33px);}98%{top:calc(30% - 31px);}99%{top:calc(30% - 33px);}100%{top:calc(30% - 35px);}}
@keyframes sound{0%{height:3px;}25%{height:14px;}50%{height:6px;}75%{height:14px;}100%{height:3px;}}
@keyframes moving{0%{bottom:50px;}50%{bottom:60px;}100%{bottom:50px;}}
@-webkit-keyframes scroll{0%{opacity:1;}100%{opacity:0;-webkit-transform:translateY(25px);transform:translateY(25px);}}
@keyframes scroll{0%{opacity:1;}100%{opacity:0;-webkit-transform:translateY(25px);transform:translateY(25px);}}
#fondMouton:after{position:absolute;z-index:4;width:100%;height:100%;top:0;left:0;content:"";background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNzUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);background:-moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 19%, rgba(0,0,0,0.75) 99%, rgba(0,0,0,0.75) 100%);background:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 19%,rgba(0,0,0,0.75) 99%,rgba(0,0,0,0.75) 100%);background:radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 19%,rgba(0,0,0,0.75) 99%,rgba(0,0,0,0.75) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#bf000000',GradientType=1);}
#fondapropos:after/*,#tarif:after*/{position:absolute;z-index:4;width:100%;height:100%;top:0;left:0;content:"";background:-moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 39%, rgba(0,0,0,0.6) 100%);background:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 39%,rgba(0,0,0,0.6) 100%);background:radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 39%,rgba(0,0,0,0.6) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#99000000',GradientType=1);}
.icon-scroll{position:absolute;left:100%;width:22px;margin-left:-11px;bottom:50px;margin-top:-18px;box-shadow:inset 0 0 0 1px #999;border-radius:10px;height:36px;background-color:rgba(0,0,0,0.4)}
.icon-scroll:before{position:absolute;left:50%;content:'';width:6px;height:6px;background:#FD3F26;box-shadow:0 0 3px 0 #FD3F26;margin-left:-3px;top:4px;border-radius:4px;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:scroll;animation-name:scroll;}
.icon-scroll:hover div{color:#FD3F26}
#logoHome{top:100px;-webkit-transition:0.8s ease 0s;-moz-transition:0.8s ease 0s;-o-transition:0.8s ease 0s;-ms-transition:0.8s ease 0s;transition:0.8s ease 0s;}
#logoHome.active{top:-100px;}
.moving{animation:moving 1.5s linear infinite;}
#txtHome{top:80px;-webkit-transition:0.8s ease 0s;-moz-transition:0.8s ease 0s;-o-transition:0.8s ease 0s;-ms-transition:0.8s ease 0s;transition:0.8s ease 0s;}
#txtHome.active{top:-100px}
.menu li.active{color:#FD3F26 !important;}
.menu li.no{color:transparent !important;text-shadow:0 0 3px #999}
#logo{height:66px;width:72px;top:35%;left:calc(50% - 36px);opacity:1;-webkit-transition:2s ease 1s;-moz-transition:2s ease 1s;-o-transition:2s ease 1s;-ms-transition:2s ease 1s;transition:2s ease 1s;transform-style: preserve-3d;}
#logo.transition2{-webkit-transition:0.5s ease 0s;-moz-transition:0.5s ease 0s;-o-transition:0.5s ease 0s;-ms-transition:0.5s ease 0s;transition:0.5s ease 0s;}
.vibre2{top:calc(50% - 33px);animation-name:vibre;animation-delay:10s;animation-duration:5s;animation-play-state:running;animation-iteration-count:infinite;}
.rotation{-webkit-animation:rotation 2s linear;-moz-animation:rotation 2s linear;animation:rotation 2s linear;animation-iteration-count:infinite;}
#logo{top:calc(50% - 33px);perspective: 850px;}
#logo.haut{top:calc(30% - 33px)}
#logo.active{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:4s ease 1s;-moz-transition:4s ease 1s;-o-transition:4s ease 1s;-ms-transition:4s ease 1s;transition:4s ease 1s;opacity:0;filter:blur(20px);-webkit-filter:blur(20px);-moz-filter:blur(20px);-o-filter:blur(20px);-ms-filter:blur(20px);}
#menu{left:-24px;top:45px;}
.hexagon{height:78px;width:72px;background:url('../images/hexagon.png') no-repeat scroll 0 0;}
.hexagon.noir{height:78px;width:72px;background:url('../images/hexagon_noir.png') no-repeat scroll 0 0;}
.panel{perspective:600px;position:relative;-ms-transform:scale(0.8);-webkit-transform:scale(0.8);transform:scale(0.8);}
.panel .front{backface-visibility:hidden;transform:rotateY(0deg);transform-style:preserve-3d;transition:all 0.4s ease-in-out 0s;left:0;top:0;position:absolute;z-index:3;}
.panel .back{backface-visibility:hidden;transform:rotateY(-180deg);transform-style:preserve-3d;transition:all 0.4s ease-in-out 0s;left:0;top:0;position:absolute;z-index:2;}
#logo:hover .panel .front,.panel.flip .front{transform:rotateY(180deg);z-index:2;}
#logo:hover .panel .back,.panel.flip .back{transform:rotateY(0deg);z-index:3;}
#methodologie{background-image:url('../images/methodologie.jpg');background-repeat:no-repeat;background-position:50% 90%;background-size:cover;background-attachment:fixed}

#competence{background-image:url('../images/competence1.jpg');background-repeat:no-repeat;background-position:right bottom;background-size:cover;background-attachment:fixed}
#competence2{background-image:url('../images/competence2.jpg');background-repeat:no-repeat;background-position:left bottom;background-size:cover;background-attachment:fixed}


#service2{background-image:url('../images/service1.jpg');background-repeat:no-repeat;background-position:right bottom;background-size:cover;background-attachment:fixed}
#service{background-image:url('../images/service2.jpg');background-repeat:no-repeat;background-position:left bottom;background-size:cover;background-attachment:fixed}


#contact{background-image:url('../images/contact.jpg');background-repeat:no-repeat;background-size:cover}
#competence::after{background-color:#000;content:"";height:100%;left:0;opacity:0.7;position:absolute;top:0;width:100%;}
#competence2::after{background-color:#fff;content:"";height:100%;left:0;opacity:0.7;position:absolute;top:0;width:100%;}
#service::after{background-color:#000;content:"";height:100%;left:0;opacity:0.65;position:absolute;top:0;width:100%;}
#service2::after{background-color:#fff;content:"";height:100%;left:0;opacity:0.7;position:absolute;top:0;width:100%;}
#contact::after{background-color:#000;content:"";height:100%;left:0;opacity:0.8;position:absolute;top:0;width:100%;}
#methodologie::after{background-color:#000;content:"";height:100%;left:0;opacity:0.7;position:absolute;top:0;width:100%;}
#fond_tarif{background-image:url('../images/fond_tarif.png');background-repeat:no-repeat;background-size:cover}
#tarif{background-image:url('../images/fond_tarif1.png');background-repeat:no-repeat;background-position:right bottom;background-size:cover;background-attachment:fixed}
#tarif2{background-image:url('../images/fond_tarif2.png');background-repeat:no-repeat;background-position:left bottom;background-size:cover;background-attachment:fixed}
/*#tarif{background-image:url('../images/tarif3.jpg');background-repeat:no-repeat;background-position:50% bottom;background-size:cover;background-attachment:fixed}*/
.box,.avenir{padding-top:24.9%;border:1px solid #fff}
.box,.avenir{perspective: 850px;}
.vignette{padding-top:8%;border:1px solid #222;opacity:0.5}
.vignette:hover{opacity:1}

.product-card {
    position: absolute ;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;

}
.box .back{box-shadow: 0 0 50px rgba(0,0,0,0.5);transition-property: color,opacity, left,top,width,height;
           -webkit-transition-property: color,opacity, left,top,width,height;
           -moz-transition-property: color,opacity, left,top,width,height;
           -o-transition-property: color,opacity, left,top,width,height;
           -ms-transition-property: color,opacity, left,top,width,height;
           transition-duration: 0.3s,0.3s,0.3s,0.3s,0.3s,0.3s;
           -webkit-transition-duration: 0.3s,0.3s,0.3s,0.3s,0.3s,0.3s;
           -o-transition-duration: 0.3s,0.3s,0.3s,0.3s,0.3s,0.3s;
           -ms-transition-duration: 0.3s,0.3s,0.3s,0.3s,0.3s,0.3s;
           -moz-transition-duration: 0.3s,0.3s,0.3s,0.3s,0.3s,0.3s;background-color:transparent;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}
.box.gray img{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);}
.box:hover .back,.box.over .back{background-color:#fff;content:"";height:calc(100% - 80px);left:40px;opacity:0.8;position:absolute;top:40px;width:calc(100% - 80px);z-index:1}
.box.dev:hover .back,.box.over.dev .back{background-color:#222}
.box .legende{
    transition-property: color,opacity, left,bottom,width,height;
    -webkit-transition-property: color,opacity, left,bottom,width,height;
    -moz-transition-property: color,opacity, left,bottom,width,height;
    -o-transition-property: color,opacity, left,bottom,width,height;
    -ms-transition-property: color,opacity, left,bottom,width,height;
    transition-duration: 0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    -webkit-transition-duration: 0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    -o-transition-duration: 0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    -ms-transition-duration: 0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;
    -moz-transition-duration: 0.5s,0.5s,0.5s,0.5s,0.5s,0.5s;bottom:20px;left:20px;z-index: 20}

.trans3d{-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
.trans10{-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);transform: translateZ(10px);}
.trans20{-webkit-transform: translateZ(20px);-moz-transform: translateZ(20px);transform: translateZ(20px);}
.trans30{-webkit-transform: translateZ(30px);-moz-transform: translateZ(30px);transform: translateZ(30px);}
.trans40{-webkit-transform: translateZ(40px);-moz-transform: translateZ(40px);transform: translateZ(40px);}
.trans50{-webkit-transform: translateZ(50px);-moz-transform: translateZ(50px);transform: translateZ(50px);}
.trans100{-webkit-transform: translateZ(100px);-moz-transform: translateZ(100px);transform: translateZ(100px);}

.box img{-ms-transform:scale(1.05);-webkit-transform:scale(1.05);transform:scale(1.05);}
.box:hover img,.box.over img{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);}
.box:hover .legende,.box.over .legende{bottom:60px;left:60px;width:calc(100% - 100px)}
.box.dev:hover .legende .futura,.box.dev.over .legende .futura{color:#fff;filter:blur(0);-webkit-filter:blur(0);-moz-filter:blur(0);-o-filter:blur(0);-ms-filter:blur(0);}
.box:hover .legende .mission,.box.over .legende .mission{color:#666 !important;text-shadow:none !important;}
.box.dev:hover .legende .mission,.box.dev.over .legende .mission{color:#ccc !important}
.box .legende .futura{-webkit-transition:0.5s ease-out 0.4s;-moz-transition:0.5s ease-out 0.6s;-o-transition:0.5s ease-out 0.6s;-ms-transition:0.5s ease-out 0.6s;transition:0.5s ease-out 0.6s;filter:blur(20px);-webkit-filter:blur(20px);-moz-filter:blur(20px);-o-filter:blur(20px);-ms-filter:blur(20px);margin-bottom:-40px;font-size:50px;margin-left:-20px;opacity:0}
.box:hover .legende .futura,.box.over .legende .futura{filter:blur(0);-webkit-filter:blur(0);-moz-filter:blur(0);-o-filter:blur(0);-ms-filter:blur(0);margin-bottom:0;font-size:20px;margin-left:0;opacity:1;-webkit-transition:0.5s ease-out 0.4s;-moz-transition:0.5s ease-out 0.4s;-o-transition:0.5s ease-out 0.4s;-ms-transition:0.5s ease-out 0.4s;transition:0.5s ease-out 0.4s;}
.box .legende .type{-webkit-transition:0.5s ease-out 0s;-moz-transition:0.5s ease-out 0s;-o-transition:0.5s ease-out 0s;-ms-transition:0.5s ease-out 0s;transition:0.5s ease-out 0s;opacity:0}
.box:hover .legende .type,.box.over .legende .type{-webkit-transition:0.5s ease-out 0.8s;-moz-transition:0.5s ease-out 0.8s;-o-transition:0.5s ease-out 0.8s;-ms-transition:0.5s ease-out 0.8s;transition:0.5s ease-out 0.8s;opacity:1}
#divinfos{left:calc(-100% - 60px);top:0;z-index:20;background: #2b2b2b url("../images/fond.png") repeat fixed 0 0;}
#divinfos.transition6{-webkit-transition:0.6s ease-out 0s;-moz-transition:0.6s ease-out 0s;-o-transition:0.6s ease-out 0s;-ms-transition:0.6s ease-out 0s;transition:0.6s ease-out 0s;}
#divinfos.active{left:0}
.slide{min-height:200px;min-width:200px;text-align:center;}
#disc{bottom:15px;cursor:pointer;position:fixed;right:15px;z-index:21;}
#disc:before,
#disc:after {
    right:0;
    content: "";
    position: absolute;
    width: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    z-index: -1;
}

#disc:before {
    bottom: 100%;
    border-bottom: 8px solid #ffffff;
}

#disc:after {
    top: 100%;
    width: 0;
    border-top: 8px solid #ffffff;
}



#disc:hover{color:#FD3F26;}
.sound-toggle{position: relative}
.sound-toggle .line{background:#fd3f26 none repeat scroll 0 0;bottom:1px;height:3px;left:0;position:absolute;transition:background 0.2s ease 0s, height 0.5s ease 0s;width:2px;}
.sound-toggle .line:nth-child(2){left:4px;}
.sound-toggle .line:nth-child(3){left:8px;}
.sound-toggle .line:nth-child(4){left:12px;}
.sound-toggle .line:nth-child(5){left:16px;}
.sound-toggle:hover .line{background:#999 none repeat scroll 0 0;}
.sound-toggle.is-playing .line{animation:2.5s linear 0s normal none infinite running sound;}
.sound-toggle.is-playing .line:nth-child(2){animation-duration:3s;left:4px;}
.sound-toggle.is-playing .line:nth-child(3){animation-duration:3.5s;left:8px;}
.sound-toggle.is-playing .line:nth-child(4){animation-duration:2s;left:12px;}
.sound-toggle.is-playing .line:nth-child(5){animation-duration:2.8s;left:16px;}
.sound-toggle.is-visible{display:block;}
.sound-toggle[alt]:hover::after{background-color:#fff;opacity:0.7;color:#222;content:attr(alt);font-size:12px;font-weight:500;right:30px;padding:4px;position:absolute;text-align:left;bottom:0;white-space:nowrap;z-index:999;}
#isotope li.pointer:hover{color:initial}
#isotope li.pointer.no{color:transparent !important;text-shadow:0 0 3px #999}
.icon.close:hover{color:#FD3F26}
#container,.sections{height:100%;width:100%;position:relative}.horizontal{width:82px;position:fixed;list-style:none;margin:auto;left:0;right:0;bottom:15px}.horizontal>li{display:block;width:8px;height:8px;border-radius:50%;background:#fff;margin:0 10px 0 0;float:left}.horizontal>li.active{width:14px;height:14px;border:2px solid #fffe00;background:0;margin-top:-5px}.vertical{position:fixed;list-style:none;right:5px;top:50%}.vertical>li{width:10px;height:10px;border-radius:50%;background-color:#494949;margin:5px;cursor:pointer}.vertical>li.active{background-color:#fd3f26;cursor:default}
.pie_progress{text-align:center;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.pie_progress svg{margin:0 auto}.pie_progress__content,.pie_progress__number,.pie_progress__label,.pie_progress__icon{width:100%;position:absolute;top:45%;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}
.serv li:before{position:absolute;left:0;line-height: 30px;font-family:"Flaticon";font-style:18px;vertical-align:middle;content:"\f103";color:#FD3F26;}
.infobulle:hover span{opacity: 1;visibility: visible}

.popbulleRight{bottom: 40px;right:-8px;z-index: 10;width: 300px;}
.popbulleLeft{bottom: 40px;left:-8px;z-index: 10;width: 300px}
.popbulleRight::before{
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid #fff;
    bottom: -10px;
    content: " ";
    height: 0;
    right: 5px;
    position: absolute;
    width: 0;
}
.popbulleLeft::before{
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid #fff;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 5px;
    position: absolute;
    width: 0;
}