/* CLASS QUI SE RAJOUTE POUR LES ANIMATIONs */
.fleche-over{bottom: 40px !important;transition: all 0.7s;}
.texte-transparent{opacity: 0 !important;padding-top: 40px !important;}
.transition-anime{transition: all 0.7s;}
body, html {min-width: 320px}
.animated > * {opacity: 0; -webkit-transition:opacity 1s ease-in-out 0.2s; -moz-transition:opacity 1s ease-in-out 0.2s; transition:opacity 1s ease-in-out 0.2s; }
.animated > .device-laptop, .animated > .device-mobile .animated > .device-tabet {opacity: 0; -webkit-transition:opacity 1s ease-in-out 0.3s; -moz-transition:opacity 1s ease-in-out 0.3s; transition:opacity 1s ease-in-out 0.3s; }
.animated > .layout {opacity: 0; -webkit-transition:opacity 0.75s ease-in-out 0s; -moz-transition:opacity 0.75s ease-in-out 0s; transition:opacity 0.75s ease-in-out 0s; }
.animated > *.scrolled {opacity: 1}
.animated.browser-template img {bottom: -15%; -webkit-transition:bottom 0.8s ease-in-out 0.2s; -moz-transition:bottom 0.8s ease-in-out 0.2s; transition:bottom 0.8s ease-in-out 0.2s;}
.animated.browser-template .browser-text {top: 35%; -webkit-transition:top 0.8s ease-in-out 0.2s; -moz-transition:top 0.8s ease-in-out 0.2s; transition:top 0.8s ease-in-out 0.2s;}
/*.hgutter {padding-top:12%; padding-bottom:12%!important}*/
.intro .full { padding: 0!important;}
.intro .full p + p { margin:15px auto 0; }
.text-content p { max-width:1185px; margin:0 auto; }
.text-content p + p { margin:15px auto 0; }

@media only screen and (min-width: 0px){
	div.container-introduction {background-color: #000; padding: 0 35px 0 35px; box-sizing: border-box; }
	div.content-introduction > h1{color: white; padding-top: 190px; letter-spacing: 0.3em; font-size: 1.5em; }
	div.content-introduction > img {cursor: pointer; max-width: 51px; text-align: center; position: absolute; bottom: 50px;}
    section.device-template {width: 100%; padding: 20% 12%; box-sizing: border-box;position: relative}
    section.device-template { background:#ededed; }
    section.device-template img.layout {width: 100%; display: block; z-index: 4; position: relative;}
    section.device-template img.device-tablet, section.device-template img.device-mobile, section.device-template img.device-laptop {position: absolute}
    section.device-template img.device-laptop {width: 48.5%;}
    section.device-template img.device-tablet {width: 18%;}
    section.device-template img.device-mobile {width: 8.1%;}
    section.device-template.device-1-tablet img.layout { width:80%; margin:0 auto; }
    section.device-template.device-1-tablet img.device-tablet { width: 51%; top: 27%; left: 25%; }       
    .device-3 .device-laptop {top: 29%; left: 20%;}
    .device-3 .device-tablet {top: 38.9%; left: 68.4%;}
    .device-3 .device-mobile {top: 52%; left: 61%;}
    .device-2 .device-laptop {top: 29%; left: 20%;}
    .device-2 .device-mobile {top: 52%;left: 71.5%;}
    .device-1 .device-laptop {top: 29%;left: 25.4%;}
    .device-1-tablet .device-tablet {top: 29%;left: 25.4%;}
    section.browser-template { padding-top: 10%; position: relative;overflow: hidden;}
    section.browser-template.browser-right { text-align: left}
    section.browser-template.browser-right .browser-img .device-laptop {right: 0;}
    section.browser-template.browser-left { text-align: right}
    section.browser-template.browser-left .browser-img .device-laptop {left: 0;}
    section.browser-template.browser-left .browser-img .layout {left: -40.1%;}
    section.browser-template.browser-left .browser-img.full-width .device-laptop, section.browser-template.browser-right .browser-img.full-width .device-laptop {left: 10.3%;width: 80%;}		
    section.browser-template.browser-left .browser-img.full-width .layout, section.browser-template.browser-right .browser-img.full-width .layout {left: 7%;}
    section.browser-template.browser-left .browser-img.ipad-layout .layout {left: -9.5%;}
    section.browser-template.browser-right .browser-img .layout {right: -40.1%;}
    section.browser-template.browser-right .browser-img.ipad-layout .layout {right: -9.5%;}
    section.browser-template.browser-grey {background-color: #ededed;}
    section.browser-template.browser-grey .browser-text {background: #fff;}
    section.browser-template.browser-white {background-color: #fff;}
    section.browser-template.browser-white .browser-text {background: #ededed;}
    .browser-img {position: relative;padding-top: 70%;}
    .browser-img .layout {position: absolute;width: 124.5%;bottom: 0%;display: block;}
    .browser-img .device-laptop {position: absolute;bottom: 0;width: 79.5%;}
    .browser-img.full-width  {padding-top: 50%;}		
    .browser-img.full-width .layout {width: 86.8%;}		
    .browser-img.full-width .device-laptop {position: absolute;width: 70%;}
    .browser-img.ipad-layout .layout {width: 87%;}
    .browser-img.ipad-layout .device-laptop {width: 70%; bottom: -10%}
    .browser-text {z-index: 5;width: auto;padding: 20px 40px 20px 40px; display: inline-block;}
    .browser-text h4 {text-align: left;letter-spacing: 0;font-size: 12px;}
    .animated.browser-template .scrolled .layout, .animated.browser-template .scrolled .device-laptop {bottom: 0%;}
    .animated.browser-template .scrolled.ipad-layout .device-laptop {bottom: 5.5%;}
    section .image-separateur {position: relative;background-color: #ddd; padding-top: 56%;background-size: cover}
    section .video-separateur {position: relative;background-color: #ddd; padding-top: 56%;background-size: cover; overflow:hidden;}
    section .video-separateur.res1920x900 {padding-top: 46.875%;}
    section .video-separateur video { position:absolute; width:100%; top:0; left:0; display:none; }
    section .video-separateur .cover { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.25); }
    section .video-separateur .cover h3 { color:#fff; font-size:14px; margin-top:20%; }
    section .color-white {color:#fff}
    .grey-background { background:#ededed; }

    section.browser-red-ec3d {background-color: #cb1e24 !important;}
    section.browser-grey {background-color: #ededed !important;}
    section .spacer {padding-bottom: 50px;}
}


@media only screen and (min-width: 440px){
    div.content-introduction > h1{font-size: 1.6em; }
}


@media only screen and (min-width: 700px){
	div.container-introduction {padding: 0 60px 0 60px; box-sizing: border-box; }
    div.content-introduction > h1{font-size: 2em; padding-top: 240px;}
    section.device-template {padding: 20% 9%;}
    section.device-template img.device-laptop {width: 52.1%;}
    section.device-template img.device-tablet {width: 19.6%;}
    section.device-template img.device-mobile {width: 8.7%;}
    .device-3 .device-laptop {top: 28.2%;left: 17.6%;}
    .device-3 .device-tablet {top: 38.5%;left: 69.8%;}
    .device-3 .device-mobile {top: 52%;left: 61.9%;}
    .device-2 .device-laptop {top: 28.2%;left: 17.6%;}
    .device-2 .device-mobile {top: 52%;left: 73.1%;}
    .device-1 .device-laptop {top: 28.2%;left: 23.6%;}
    .device-1-tablet .device-tablet {top: 28.2%;left: 23.6%;}
    section.device-template.device-1-tablet img.device-tablet { width: 55%; top: 26%; left: 23%; }
    .browser-text { padding: 20px 70px 20px 70px;}
    .browser-text h4 {font-size: 20px;}
    section .video-separateur video { display:block; }
    section .video-separateur .cover h3 { font-size:20px; }
}


@media only screen and (min-width: 1000px){
    .browser-text h4 {font-size: 24px; line-height: 1.1em;}
    section.browser-template {padding-top: 0;}
    .browser-text {padding: 35px 40px;position: absolute;top: 20%;bottom: initial; max-width: 30%;box-sizing: border-box;min-height: 45%;}
    .browser-img .layout {width: 90.5%;}
    .browser-img .device-laptop {width: 58%;}
    .browser-img { padding-top: 54%;}
    .animated.browser-template .scrolled.browser-text {top: 20%;}
    section.browser-template.browser-left .browser-img .layout {left: -28.9%;}
    section.browser-template.browser-right .browser-img .layout {right: -28.9%;}
    section.browser-template.browser-left .browser-text {right: 60px;}
    section.browser-template.browser-right .browser-text {left: 60px;}
    .browser-img.ipad-layout .layout {width: 68.5%;}
    .browser-img.ipad-layout .device-laptop {width: 55%;}
    section.browser-template.browser-left .browser-img.ipad-layout .layout {left: -7.5%;}
    section.browser-template.browser-right .browser-img.ipad-layout .layout {right: -7.5%;}
    section .video-separateur .cover h3 { font-size:24px; }
}


@media only screen and (min-width: 1200px){
    div.container-introduction { padding: 0 80px 0 80px; box-sizing: border-box; } 
    div.content-introduction > h1{font-size: 2.3em; padding-top: 290px;}
    section.device-template {padding: 20% 8%;}
    section.device-template img.device-laptop {width: 53.4%;}
    section.device-template img.device-tablet {width: 19.8%;}
    section.device-template img.device-mobile {width: 8.9%;}
    .device-3 .device-laptop {top: 27.9%; left: 16.8%;}
    .device-3 .device-tablet {top: 38.4%; left: 70.3%;}
    .device-3 .device-mobile {top: 52.2%;left: 62.2%;}
    .device-2 .device-laptop {top: 27.9%; left: 16.8%;}
    .device-2 .device-mobile {top: 52.2%;left: 73.7%;}
    .device-1 .device-laptop {top: 27.9%;left: 22.9%;}
    section.device-template.device-1-tablet img.layout { width:75%; }
    section.device-template.device-1-tablet img.device-tablet { width: 52%; top: 27%; left: 24%; }
    .browser-text {padding: 50px 50px; max-width: 25%; min-height: 40%;}
    .browser-text h4 {font-size: 25px;}
    section.browser-template.browser-left .browser-text {right: 80px;}
    section.browser-template.browser-right .browser-text {left: 80px;}
    section .video-separateur .cover h3 { font-size:25px; }
}	

@media only screen and (min-width: 1300px){	
    .browser-text h4 {font-size: 35px;}
    .browser-text {max-width: 30%; min-height: 50%;}
    section .video-separateur .cover h3 { font-size:35px; }
}

@media only screen and (min-width: 1400px){	
    .browser-text h4 {font-size: 38px;}
    section .video-separateur .cover h3 { font-size:38px; }
}

@media only screen and (min-width: 1500px){	
	div.content-introduction > h1{font-size: 3em;}
    .browser-text {padding: 70px;max-width: 30%;min-height: 55%;top:18%}
    .browser-text h4 {font-size: 40px;}
    .browser-img .device-laptop {width: 55.45%;}
    .browser-img .layout {width: 86.55%;}
    .browser-img { padding-top: 50%;}
    section .video-separateur .cover h3 { font-size:40px; }
    .animated.browser-template .scrolled.browser-text {top: 18%;}
    section.browser-template.browser-left .browser-img .layout {left: -27.65%;}
    section.browser-template.browser-right .browser-img .layout {right: -27.7%;}
    section.browser-template.browser-left .browser-text {right: 100px;}
    section.browser-template.browser-right .browser-text {left: 100px;}
    section.browser-template.browser-left .browser-img.ipad-layout .layout { left: -6.5%;}
    section.browser-template.browser-right .browser-img.ipad-layout .layout {right: -6.5%;}
    .browser-img.ipad-layout .layout {width: 58.5%;}
    .browser-img.ipad-layout .device-laptop {width: 47%;}
    section.device-template.device-1-tablet img.layout { width:65%; }
    section.device-template.device-1-tablet img.device-tablet { width: 46%; top: 28%; left: 27%; }
}


@media only screen and (min-width: 1600px){	
    .browser-text h4 {font-size: 42px;}
    section .video-separateur .cover h3 { font-size:42px; }
}

@media only screen and (min-width: 1700px){	
    .browser-text h4 {font-size: 44px;}
    section .video-separateur .cover h3 { font-size:44px; }
}

@media only screen and (min-width: 1800px){	
    .browser-text h4 {font-size: 46px;}
    section .video-separateur .cover h3 { font-size:46px; }
}

@media only screen and (min-width: 1900px){	
    .browser-text h4 {font-size: 50px;}
    section .video-separateur .cover h3 { font-size:50px; }
}

@media (max-width: 767px){
    section .spacer {padding-bottom: 0;}
}