<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">


/*#########################  FONTS  ##############################*/



@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,900);

/*#########################  BALISE DE BASE  ##############################*/


/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h1,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h1,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}


body, html{height:100%;}
html {-webkit-font-smoothing: antialiased;}
body{margin:0;padding:0;width:100%;position:relative; overflow-x:hidden;font-family: 'Open sans', serif;font-size:0.8em;color:#423d3c;line-height:160%; }
/*.fix{height:100%;width:100%; display:block;overflow:auto}*/

/*body#darkred{background-color:#72170f;}
body#red{background-color:#d9272e;}
body#whitered{background-color:#e94640;}*/

body#darkred{background-color:#ffffff;}
body#red{background-color:#ffffff;}
body#whitered{background-color:#ffffff;}


strong{font-weight: bold;}

p strong{font-family: 'Merriweather', serif; font-weight:900;}
h1
h1, h1, h3, h4, h5{padding: 0;font-weight: normal;line-height: normal;}
h1 a, h1 a, h3 a, h4 a, h5 a, h6 a{border: 0;}


/*#darkred #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#darkred #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #72170f;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#72170f; font-size:3em;}
#red #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#red #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:3em;}
#whitered #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#whitered #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #e94640;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#e94640; font-size:3em;}

#darkred #main h3 span a{color:#72170f;text-decoration:none;}
#red #main h3 span a{color:#d9272e;text-decoration:none;}
#whitered #main h3 span a{color:#e94640;text-decoration:none;}

#red #ban .ban-bloc{background-color:rgba(217,36,46,0.80)}
#darkred #ban .ban-bloc{background-color:rgba(114,23,15,0.80)}
#whitered #ban .ban-bloc{background-color:rgba(233,70,64,0.80)}*/

.arrow-down{position:absolute;bottom:-30px;width:50px;height:119px;left:50%;margin-left:-25px;}


#darkred #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#darkred #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:3em;}
#red #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#red #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:3em;}
#whitered #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#whitered #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:3em;}

#darkred #main h3 span a{color:#d9272e;text-decoration:none;}
#red #main h3 span a{color:#d9272e;text-decoration:none;}
#whitered #main h3 span a{color:#d9272e;text-decoration:none;}

#red #ban .ban-bloc{background-color:rgba(217,36,46,0.80)}
#darkred #ban .ban-bloc{background-color:rgba(217,36,46,0.80)}
#whitered #ban .ban-bloc{background-color:rgba(217,36,46,0.80)}

.in h6{font-family:open sans; color:#ffffff;text-transform:uppercase;font-size:2em;font-weight:300;text-align:center;margin-bottom:50px;line-height:110%;}
.in h6 strong{font-weight:700;border:1px solid #ffffff;padding:10px 20px 10px 20px;margin-top:20px;line-height:400%;}

.in h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}

li, a, span, .button, .main-right i, .main-left i, .marketing-gallery{-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
a:hover{}

span.bouton{float:left;left:50%;position:relative; margin-top:-30px;margin-bottom:0px;}
span.bouton a{position:relative;left:-50%; padding:20px 20px 20px 20px;border: 3px solid #ffffff;display:inline-block;text-align:center;font-family: 'Open sans', sans-serif; font-weight:300; color:#ffffff; font-size:2em;text-decoration:none;}
span.bouton a:hover{background-color:#ffffff;color:#e94640}

/*------------------------------------------------------------------------------------------------------------------------*/
/* STRUCTURE */
/*------------------------------------------------------------------------------------------------------------------------*/
h1.mm{font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1.6em; padding-left:0;text-align:right;position:absolute;left:15px;top:23px;z-index:99999;text-transform:uppercase;color:#ffffff}

html,body{width:100%;height:100%;margin:0;padding:0;}

.in header{height:auto;min-height:200px;}
.in-in header{height:auto;min-height:auto;}
header{position:relative;min-height:100%;overflow:hidden;}

#ban{height:500px;position:relative;display:block;width:100%;overflow:hidden;}
#ban .ban-bloc{max-width:50%;height:auto;background-color:rgba(217,36,46,0.80);position:absolute;left:0px; bottom:0px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; padding:30px;z-index:99999;}
#ban h1{color:#ffffff; text-transform:uppercase; font-size:2em; font-weight:700;padding-left:60px;}
#ban h1::before{content:''; width:75px;height:20px;background-color:#ffffff;display:block;position:absolute;left:0;top:36px;}
#ban p{margin-top:20px;color:#ffffff;}
#ban p strong{font-size:1em;color:#ffffff;}
#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:80em; color:rgba(255,255,255,0.20);position:absolute;bottom:125px;left:400px;z-index:99999;display:none;}
#ban .ico{position:absolute;top:0;right:25px;z-index:9999999999;width:200px;height:auto;}

.prev{position:absolute;top:0;right:160px;}
.next{position:absolute;top:0;right:50px;}
.next:hover, .prev:hover{opacity:0.8;}

.ban-img-vid{height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;display:block;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: 100%;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}

.ban-img-web{background:url(../img/fond-web.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-design{background:url(../img/fond-design.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-marketing{background:url(../img/fond-marketing.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-prod{background:url(../img/fond-prod.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-agence{background:url(../img/fond-agence.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-video{background:url(../img/fond-video.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-contact{background:url(../img/carte.jpg) no-repeat center bottom ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:500px;width:100%;margin-top:140px;position:relative; z-index:99999;}

.wetransfer{position:absolute;top:8px;right:9px;}

.media{width:30px;position:absolute;top:50px;right:3px;}
.media img{width:90%;}
.media img:hover{opacity:0.7}

.logo{position:absolute;bottom:0;right:90px;height:40px;}
.logo:hover{opacity:0.7;}
.logo img{display:block;width:auto;height:100%;}

#big-cont{position:absolute;bottom:40px;left:40px;right:40px;top:0;margin:0;display:block;overflow-y:scroll;background-color:#ffffff;-webkit-overflow-scrolling: touch;}
.acc #big-cont span.h1{text-shadow: 2px 2px  #423d3c;color:#ffffff}

 #big-cont span.h1{text-shadow: 2px 2px  #ffffff;font-family: 'Open Sans', sans-serif; font-weight:700; color:rgba(0,0,0,1); font-size:2.8em; padding-left:0;text-align:right;position:absolute;right:50px;top:60px;z-index:99999;text-transform:uppercase;font-weight:700;color:#423d3c}

span.mobi{width:30px;height:14px;position:absolute;top:40px; left:50px;z-index:999999;display:none;cursor:pointer}
span.mobi b:first-of-type{width:100%;height:4px;background-color:#423d3c;margin-bottom:5px;display:block;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
span.mobi b:nth-of-type(2){width:100%;height:4px;background-color:#423d3c;margin-bottom:5px;display:block;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
span.mobi b:last-of-type{width:100%;height:4px;background-color:#423d3c;margin-bottom:0;display:block;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}

span.mobi:hover b:first-of-type{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);transform:rotate(-180deg);left:0px;background-color:#e94640}
span.mobi:hover b:nth-of-type(2){-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);right:0px;background-color:#e94640}
span.mobi:hover b:last-of-type{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);right:0px;background-color:#e94640}

span.mobix{width:30px;height:30px;position:absolute;top:19px; right:17px;z-index:99999999999;cursor:pointer;}
span.mobix b:first-of-type, span.mobix b:last-of-type{position:absolute;width:100%;height:3px;background-color:#ffffff;top:13px;}
span.mobix b:nth-of-type(2){display:none;}
span.mobix b:first-of-type{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);left:0px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
span.mobix b:last-of-type{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);right:0px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
span.mobix:hover{animation: 0.2s rotate180  linear;}
span.mobix:hover b:first-of-type{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);left:0px;background-color:#ffffff}
span.mobix:hover b:last-of-type{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);right:0px;background-color:#ffffff}

.mobile-menu{position:relative;width:250px;height:100%;z-index:9999999;background-color:#e94640;display:none;padding:0 0 0 0 ;}
.mobile-menu ul{padding-top:65px;}
.mobile-menu ul li{font-family:'Open Sans';margin:0px 0px 0px 0px;font-size:0.9em;font-weight:400; border-top:1px solid #D43A00}
.mobile-menu ul li:last-child{border-bottom:1px solid #D43A00}
.mobile-menu ul li a{text-transform:uppercase;text-decoration:none;font-weight:700;color:#ffffff;display:block;position:relative;overflow:hidden;z-index:999999;padding:15px 10px 15px 15px;}
.mobile-menu ul li a:hover{padding:15px 10px 15px 30px;}
.mobile-menu ul li a::before{content:''; background-color:#d9272e;position:absolute;top:0;left:-300px;width:300px;height:30px;z-index:-1;padding:15px 0px 15px 0px;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s;}
.mobile-menu ul li a:hover::before{content:''; background-color:#d9272e;position:absolute;top:0;left:0px;width:300px;height:30px;padding:15px 0px 15px 0px;}

.g{position:absolute;top:43px;left:50px;z-index:9999999;}
.menu{position:absolute;top:35px;left:95px;width:486px;height:50px;z-index:9999999;}
.menu ul li{float:left;font-family:'Open Sans';margin:2px 2px 2px 2px; font-size:1.0em;font-weight:400;}
.menu ul li:first-child{margin-left:0;}
.menu ul li a{text-transform:uppercase;text-decoration:none;font-weight:700;color:#423d3c;display:block;position:relative;overflow:hidden;z-index:999999;background-color:#ffffff;padding:0 5px 0 5px;}

.menu ul li:nth-child(12){display:none;}
.menu ul li:nth-child(13){margin-left:0;}

.menu ul li a::before{content:''; background-color:#d9272e;position:absolute;top:0;left:-200px;width:200px;height:30px;z-index:-1;}
.menu ul li a:hover::before{content:''; background-color:#d9272e;position:absolute;top:0;left:0px;width:200px;height:30px;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s;}
.menu ul li.current a::before{content:''; background-color:#d9272e;position:absolute;top:0;left:0px;width:200px;height:30px;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s;}

 .menu ul li a:hover::before{content:'';background-color:#d9272e;}
.menu ul li a:hover{color:#ffffff;}
.menu ul li.current a::before{content:'';background-color:#d9272e;}
.menu ul li.current a{color:#ffffff;}


.nav-line{position:absolute;top:95px;left:50px;width:124px;height:3px;z-index:2;background-color:#d9272e;}

#whitered .nav-line{position:absolute;top:95px;left:50px;width:124px;height:3px;z-index:2;background-color:#e94640;}
#darkred .nav-line{position:absolute;top:95px;left:50px;width:124px;height:3px;z-index:2;background-color:#72170f;}

.in .draw-line{color:#999999;}


.draw-line{position:absolute;top:-90px;right:100px;z-index:999;width:500px;color:#ffffff;height:300px}
.draw-line2{position:absolute;top:-90px;right:100px;z-index:9999999;width:500px;color:#ffffff;height:300px}
svg * {fill: none;stroke: currentColor;}

.cont-slide{width:450px;position:absolute;bottom:50px;right:50px;}
.cont-slide h1{text-align:right;width:300px;float:right;margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1.5em; color:#423d3c;text-transform:uppercase;}
.cont-slide p{text-align:right;font-weight:400;clear:both;margin-bottom:10px;}
.cont-slide a{float:right;}
.cont-slide img:first-of-type.ico{width:250px;height:auto;position:absolute;top:-200px;right:0px;opacity:1;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.cont-slide img:last-of-type.ico{width:250px;height:auto;position:absolute;top:-200px;right:0px;opacity:0}
.cont-slide:hover img:first-of-type.ico{opacity:0;}
.cont-slide:hover img:last-of-type.ico{opacity:1}

.w h1, .w p{color:#ffffff;}

 span.info-btn{font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1em; color:#423d3c;position:absolute;bottom:10px;left:65px;cursor:pointer;}
 span.info-btn:hover{color:#72170f;}
 span.info-btn::before{content:''; background:url('../img/plus.png')no-repeat center center;height:17px;width:17px;position:absolute;bottom:0px;left:-25px;}


.infolettre{width:100%;height:100%;position:absolute; top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.70);z-index:9999999999;}
.infolettre img.back-info{width:500px;height:466px;position:absolute;top:50%;margin-top:-250px;left:50%;margin-left:-233px;z-index:1;animation: 6s rotate360 infinite linear;}

@keyframes rotate360 {to { transform: rotate(360deg); }}
@keyframes rotate180 {to { transform: rotate(180deg); }}

.infolettre-cont{background-color:#ffffff;width:350px;height:350px;position:absolute;top:50%;margin-top:-175px;left:50%;margin-left:-175px;z-index:2;}
.infolettre-cont .close{position:absolute;top:10px;right:10px;width:30px;height:30px;cursor:pointer;z-index:999999999;}
.infolettre-cont .close img{width:100%;height:auto;}
.infolettre-cont .close:hover{opacity:0.7}
.infolettre-cont h3{margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:2.5em; color:#423d3c;width:275px;margin-top:0px}
.infolettre-cont .infolettre-cont-in{padding:20px 25px 20px 25px;}
.infolettre-cont label{width:20%;float:left;text-transform:uppercase; font-weight:700;font-size:0.9em;}
.infolettre-cont input{border-top:0;border-left:0;border-right:0;width:80%;border-bottom:1px solid #cccccc;float:left;margin-top:-5px;}
.infolettre-cont .mc-field-group{margin-top:20px;}

.infolettre-cont .button{margin-top:20px;width:150px;height:38px;float:right;background:url('../img/button.png') no-repeat center center;backgorund-color:none;border:0;color:#ffffff; font-family: 'Merriweather', serif; font-weight:900;cursor:pointer;}
.infolettre-cont .button:hover{opacity:0.7}



#main{min-height:100%;position:relative;overflow-x:hidden;}
#main .main-left{width:50%;min-height:100%;top:0;left:0;background-color:#ffffff;position:absolute;display:block;}
#main .main-right{width:50%;min-height:100%;top:0;right:0;background-color:#ffffff;position:absolute;display:block;}
.main-left p, 
.main-right p{color:#ffffff;}
.main-left h5,
 .main-right h5{color:#ffffff;font-family: 'Open Sans', sans-serif; font-weight:700; font-size:1.7em; text-transform:uppercase;margin-left:55px;margin-bottom:10px;}
.main-left h5::after, 
.main-right h5::after{content:''; width:40px;height:15px;position:absolute;left:0px;top:8px;background-color:#ffffff;display:block;}

#main .main-left .un{position:absolute;width:50%;height:25%;top:0;overflow:hidden;
background:url(../img/bsp.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .cinq{position:absolute;width:50%;height:25%;top:25%;overflow:hidden;
background:url(../img/production/mazda.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .deux{position:absolute;width:50%;height:50%;top:0%;overflow:hidden;left:50%;background-color:#72170f;}
#main .main-left .trois{position:absolute;width:50%;height:50%;background-color:#d9272e;top:50%;left:0;overflow:hidden;}
#main .main-left .quatre{position:absolute;width:50%;height:50%; top:50%;left:50%;overflow:hidden;
background:url(../img/mac-decouvertes.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .six{position:absolute;width:50%;height:25%;top:0;overflow:hidden;
background:url(../img/enseigne3.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .sept{position:absolute;width:50%;height:50%;top:0;left:50%;overflow:hidden;background:#423d3c; }
#main .main-right .huit{position:absolute;width:50%;height:50%;background-color:#e94640;top:25%;left:0;overflow:hidden;}
#main .main-right .neuf{position:absolute;width:50%;height:50%;top:50%;left:50%;overflow:hidden;background:#72170f }
#main .main-right .dix{position:absolute;width:50%;height:25%;top:75%;left:0%;overflow:hidden;
background:url(../img/production/autre-4.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

#main .main-left .deux:hover, 
#main .main-left .trois:hover, 
#main .main-right .sept:hover, 
#main .main-right .huit:hover, 
#main .main-right .neuf:hover
{background:#000000 url(../img/grid-fond.png) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.un, .quatre, .cinq, .six, .dix{  -webkit-filter: grayscale(1); /* Webkit */filter: gray; /* IE6-9 */filter: grayscale(1); /* W3C */opacity:0.9}
.un:hover, .quatre:hover, .cinq:hover, .six:hover, .dix:hover{  -webkit-filter: none; /* Webkit */filter: none; /* IE6-9 */filter: none; /* W3C */opacity:1}

.main-left i, .main-right i{position:absolute;bottom:25px;right:600px;z-index:999999;}
#main .main-left .deux:hover i, 
#main .main-left .trois:hover i, 
#main .main-right .sept:hover i, 
#main .main-right .huit:hover i, 
#main .main-right .neuf:hover i{right:35px;}


.un img, .quatre img, 
.cinq img, .six img, 
.dix img{position:absolute;right:50%;top:50%;margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:0;-o-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;transition:.2s;}

.un:hover img, 
.quatre:hover img, 
.cinq:hover img, 
.six:hover img, 
.dix:hover img{margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:1;}

.deux span img, 
.trois span img, 
.sept span img, 
.huit span img, 
.neuf span img{position:absolute;opacity:0.7}

.trois span img:first-of-type{bottom:70%;margin-bottom:-91px;right:50%;margin-right:-111px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-86px;right:50%;margin-right:-132px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-88px;right:50%;margin-right:-116px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-99px;right:50%;margin-right:-93px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}


.deux:hover span img:first-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;width:300px;height:300px;opacity:0;}
.deux:hover span img:last-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:1;width:300px;height:300px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}

.trois:hover span img:first-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;width:300px;height:300px;opacity:0;}
.trois:hover span img:last-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:1;width:300px;height:300px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}

.sept:hover span img:first-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;width:300px;height:300px;opacity:0;}
.sept:hover span img:last-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:1;width:300px;height:300px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}

.huit:hover span img:first-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;width:300px;height:300px;opacity:0;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:1;width:300px;height:300px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}

.neuf:hover span img:first-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;width:300px;height:300px;opacity:0;}
.neuf:hover span img:last-of-type{bottom:50%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:1;width:300px;height:300px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-150px;right:50%;margin-right:-150px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:300px;height:300px;}

.main-left b img, 
.main-right b img{position:absolute;top:10px;right:10px;z-index:999999;width:20px;height:20px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
#main .deux:hover b img{right:-50px}
#main .trois:hover b img{right:-50px}
#main .sept:hover b img{right:-50px}
#main .huit:hover b img{right:-50px}
#main .neuf:hover b img{right:-50px}

#main .in-grid{bottom:35px;left:35px;right:35px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
#main .un .in-grid img{position:absolute;top:0;right:0;z-index:99999999999;}
#main .un i{width:100px;height:60px; position:absolute; top:50%;margin-top:-40px; margin-left:-25px;left:50%;z-index:99999999999999;opacity:1;}
#main .un i img{width:100%;height:60px;opacity:1}
#main .deux:hover .in-grid{bottom:-300px;position:absolute;}
#main .trois:hover .in-grid{bottom:-300px;}
#main .sept:hover .in-grid{bottom:-300px;}
#main .huit:hover .in-grid{bottom:-300px;}
#main .neuf:hover .in-grid{bottom:-300px;}

.o{-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}

.in #main{min-height:inherit;position:relative;}
.in #main .bloc-1 .mini-web, 
.in #main .bloc-11 .mini-web,
.in #main .bloc-15 .mini-web{position:absolute; top:50px;bottom:50px; left:50px; right:50px; border:1px solid #cccccc;background-color:#ffffff;-webkit-box-shadow: 0px 0px 59px -9px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 59px -9px rgba(0,0,0,0.75); box-shadow: 0px 0px 59px -9px rgba(0,0,0,0.75);}
.in #main .bloc-1 .mini-web span, 
.in #main .bloc-11 .mini-web span,
.in #main .bloc-15 .mini-web span{position:absolute; top:0; width:100%;z-index:99999;}
.in #main .bloc-1 .mini-web span img, 
.in #main .bloc-11 .mini-web span img,
.in #main .bloc-15 .mini-web span img{width:100%;height:auto;}
.in #main .bloc-1 .mini-web .scroll-web, 
.in #main .bloc-11 .mini-web .scroll-web,
.in #main .bloc-15 .mini-web .scroll-web{width:100%;height:100%;overflow:scroll;position:absolute;padding-top:27px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; }

.in #main .bloc-1 .mini-web .scroll-web img, 
.in #main .bloc-11 .mini-web .scroll-web img,
.in #main .bloc-15 .mini-web .scroll-web img{width:100%;height:auto;position:absolute;top:27px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}


.in #main .bloc-1, 
.in #main .bloc-3,  
.in #main .bloc-2, 
.in #main .bloc-4, 
.in #main .bloc-5, 
.in #main .bloc-6, 
.in #main .bloc-7, 
.in #main .bloc-8, 
.in #main .bloc-9, 
.in #main .bloc-10, 
.in #main .bloc-11, 
.in #main .bloc-12, 
.in #main .bloc-13, 
.in #main .bloc-14,
.in #main .bloc-15{float:left;position:relative;overflow:hidden;background:url(../img/mock-route.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-filter: inherit;filter: inherit; cursor:pointer}

 
.in #main .bloc-3:hover,  
.in #main .bloc-2:hover, 
.in #main .bloc-4:hover, 
.in #main .bloc-5:hover, 
.in #main .bloc-6:hover, 
.in #main .bloc-7:hover, 
.in #main .bloc-8:hover, 
.in #main .bloc-9:hover, 
.in #main .bloc-10:hover, 
.in #main .bloc-12:hover, 
.in #main .bloc-13:hover, 
.in #main .bloc-14:hover, 
.in #main .bloc-14:hover{-webkit-filter: grayscale(100%);filter: grayscale(100%);}


.in #main .bloc-1:hover,
.in #main .bloc-11:hover,
.in #main .bloc-15:hover{background-color:#d9272e}

.in #main .bloc-1{width:50%;height:500px;background-color:#e9e9e9;float:left;position:relative;overflow:hidden;background-image:inherit;-webkit-filter: inherit;filter: inherit;}
.in #main .bloc-2{width:25%;height:250px;background-color:#423d3c;float:left;position:relative;overflow:hidden;}
.in #main .bloc-3{width:25%;height:750px;background-color:#e0dedd;float:left;position:relative;overflow:hidden;}
.in #main .bloc-4{width:25%;height:500px;background-color:#72170f;margin-top:-250px;float:left;position:relative;overflow:hidden;}
.in #main .bloc-5{width:25%;height:250px;background-color:#ffffff;margin-top:-500px;margin-left:25%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-6{width:50%;height:500px;margin-top:-250px;float:left;position:relative;overflow:hidden;}
.in #main .bloc-7{width:25%;height:250px;background-color:#e94640;margin-top:-250px;margin-left:75%;float:left;position:relative;overflow:hidden;-webkit-filter: inherit;filter: inherit;}
.in #main .bloc-8{width:25%;height:250px;bmargin-top:0px;margin-left:0%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-9{width:50%;height:500px;background-color:#423d3c;margin-top:0px;margin-left:0%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-10{width:25%;height:250px;background-color:#d9272e;margin-top:0px;margin-left:0%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-11{width:50%;height:500px;background-color:#e9e9e9;margin-top:0px;margin-left:0%;float:left;position:relative;overflow:hidden;background-image:inherit;-webkit-filter: inherit;filter: inherit;}
.in #main .bloc-12{width:25%;height:250px;background-color:#ffffff;margin-top:0px;margin-left:0%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-13{width:25%;height:250px;background-color:#423d3c;margin-top:0px;margin-left:0%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-14{width:25%;height:250px;background-color:#ffffff;margin-top:-250px;margin-left:0%;float:left;position:relative;overflow:hidden;}
.in #main .bloc-15{width:50%;height:500px;background-color:#e9e9e9;float:left;position:relative;overflow:hidden;background-image:inherit;-webkit-filter: inherit;filter: inherit;}

.in #main .bloc-1 a, 
.in #main .bloc-3 a,  
.in #main .bloc-2 a, 
.in #main .bloc-4 a, 
.in #main .bloc-5 a, 
.in #main .bloc-6 a, 
.in #main .bloc-7 a, 
.in #main .bloc-8 a, 
.in #main .bloc-9 a, 
.in #main .bloc-10 a, 
.in #main .bloc-11 a, 
.in #main .bloc-12 a, 
.in #main .bloc-13 a, 
.in #main .bloc-14 a,
.in #main .bloc-15 a{width:100%;height:100%;display:block;}

.in #main .bloc-2::before, 
.in #main .bloc-3::before, 
.in #main .bloc-4::before, 
.in #main .bloc-5::before, 
.in #main .bloc-6::before,
.in #main .bloc-7::before,   
.in #main .bloc-8::before, 
.in #main .bloc-9::before,
.in #main .bloc-10::before,   
.in #main .bloc-12::before, 
.in #main .bloc-13::before, 
.in #main .bloc-14::before, 
.produc #main .bloc-1::before, 
.produc #main .bloc-11::before,
.produc #main .bloc-15::before,
.marketing-gallery::before{content:''; background:url('../img/plus.png')no-repeat center center;position:absolute;top:10px;right:-100px;z-index:999;width:35px;height:35px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}

.in #main .bloc-2:hover::before, 
.in #main .bloc-3:hover::before, 
.in #main .bloc-4:hover::before, 
.in #main .bloc-5:hover::before, 
.in #main .bloc-6:hover::before,
.in #main .bloc-7:hover::before,   
.in #main .bloc-8:hover::before, 
.in #main .bloc-9:hover::before,
.in #main .bloc-10:hover::before,   
.in #main .bloc-12:hover::before, 
.in #main .bloc-13:hover::before, 
.in #main .bloc-14:hover::before, 
.produc #main .bloc-1:hover::before,
.produc #main .bloc-11:hover::before,
.produc #main .bloc-15:hover::before,
.marketing-gallery:hover::before{right:10px;}


#main .bloc-2 span, 
#main .bloc-3 span, 
#main .bloc-4 span, 
#main .bloc-5 span, 
#main .bloc-6 span,
#main .bloc-7 span,  
#main .bloc-8 span, 
#main .bloc-9 span,  
#main .bloc-10 span,
#main .bloc-12 span, 
 #main .bloc-13 span, 
 #main .bloc-14 span,
.produc #main .bloc-1 span,
.produc #main .bloc-11 span,
.produc #main .bloc-15 span,
#main .bloc-12 span,
 #main .bloc-13 span,
 .marketing-gallery span{color:#ffffff; text-transform:uppercase; font-size:0.8em; font-weight:700; background-color:#72170f;padding:5px 10px 5px 10px;display:block;position:absolute;top:20px;left:20px;}

.video #main .bloc-2:hover, 
.video #main .bloc-3:hover,
.video #main .bloc-4:hover,  
.video #main .bloc-5:hover, 
.video #main .bloc-6:hover, 
.video #main .bloc-7:hover, 
.video #main .bloc-8:hover, 
.video #main .bloc-9:hover, 
.video #main .bloc-10:hover, 
.video #main .bloc-12:hover, 
.video #main .bloc-13:hover, 
.video #main .bloc-14:hover,
.produc #main .bloc-1:hover,
.produc #main .bloc-11:hover,
.produc #main .bloc-15:hover{-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.video #main .bloc-1 i, 
.video #main .bloc-11 i,
.video #main .bloc-15 i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.video #main .bloc-1:hover i, 
.video #main .bloc-11:hover i,
.video #main .bloc-15:hover i{opacity:0;}  


.main-redwhite{background-color:#d9272e; padding:50px 0 25px 0;margin-top:-5px;}
.main-redwhite p{color:#ffffff;text-align:center;margin-bottom:50px;}
.main-redwhite p strong{font-size:1.2em;}
.main-cont{max-width:1600px;margin:0px auto 0px auto; padding:25px 50px 75px 50px;position:relative;height:auto;}



.bloc-1-5{width:250px; margin-left:87.5px; float:left; height:250px;padding:60px 20px 0 20px;border:5px double #ffffff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius:50%; background-color:#d9272e;z-index:99;position:relative;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s; }
.bloc-1-5:first-of-type{margin-left:0;}
.bloc-1-5 h5{font-family: 'Open Sans', serif; font-weight:900;color:#ffffff; font-size:4em;text-align:center; margin-bottom:5px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.bloc-1-5 p {text-align:center; -o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s; color:#ffffff;}
.bloc-1-5 a {text-align:center; -o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s; color:#ffffff;}
.bloc-1-5:hover{ background-color:#ffffff}
.bloc-1-5:hover p{color:#e94640}
.bloc-1-5:hover h5{color:#e94640;font-size:4.4em;}
.bloc-1-5:hover a {font-weight:700; color:#e94640;}

.time{width:1600px;position:absolute; height:2px;background-color:#ffffff;display:block;bottom:200px;z-index:1;}

.bigmac {max-width:1300px;width:100%;height:auto;margin:0 auto 100px auto;display:block;position:relative;margin-top:50px;}
.bigmac img.fond-mac{width:100%;height:auto;display:block;}
.bigmac .scrollable-web{position:absolute; top:7.3%;left:13.45%;right:80px;width:75.85%;height:82.5%;overflow:scroll}
.bigmac .scrollable-web img{width:100%;height:auto; display:block;}
.bigmac i{position:absolute; top:7.3%;left:13.45%;right:80px;width:75.85%;height:82.5%;background-color:rgba(255,255,255,0.80);z-index:999;cursor:pointer;}
.bigmac i span img{width:185px; height:185px;position:absolute;margin-left:-92.5px; left:50%;top:50%;margin-top:-92.5px; }

.bigimage{background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:block;min-height:900px;width:100%;position:relative;overflow:hidden;}

.bigvideo {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	width:100%;
}
.bigvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.clients li{width:11.111111111111111%;height:auto;float:left;}
.clients li:first-child{margin-left:0;}
.clients li:nth-child(8n+1){margin-left:0;}
.clients li img{width:100%;height:auto;display:block;border:1px solid #e8e8e8}

.groupe{position:relative;height:650px;margin-top:-150px;z-index:999999999;overflow:hidden;padding-bottom:30px;width:100%;}

.groupe .jean,  
.groupe .steve, 
.groupe .annick, 
.groupe .maxime, 
.groupe .nicolas, 
.groupe .lea,
.groupe .hermina, 
.groupe .samuel{position:relative;display:block;width:10%;float:left;height:100%;cursor:pointer;}
.groupe .jean{width:11.5%;margin-left:1.25%;}
.groupe .maxime{width:10.5%;margin-left:1.25%}
.groupe .steve{width:10.5%;margin-left:1.25%}
.groupe .annick{width:10.5%;margin-left:1.25%;}
.groupe .nicolas{width:10.5%; margin-left:1.25%}
.groupe .lea{width:10.5%;margin-left:1.25%}
.groupe .samuel{width:10.5%;margin-left:1.25%}
.groupe .hermina{width:10.5%;margin-left:1.25%}


.groupe .jean a,  
.groupe .steve a, 
.groupe .annick a, 
.groupe .maxime a, 
.groupe .nicolas a, 
.groupe .lea a,
.groupe .hermina a, 
.groupe .samuel a{display:block;color:#ffffff;}

.groupe .jean .mail,  
.groupe .steve .mail, 
.groupe .annick .mail, 
.groupe .maxime .mail, 
.groupe .nicolas .mail, 
.groupe .lea .mail,
.groupe .hermina .mail,  
.groupe .samuel .mail{background-color:#423d3c;position:absolute; width:100%; padding:10px 0 7px 0px; color:#ffffff;bottom:0;z-index:2;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;border-radius:5px; text-align:center; text-transform:uppercase;font-weight:700;}
.groupe .jean:hover .mail,  
.groupe .steve:hover .mail, 
.groupe .annick:hover .mail, 
.groupe .maxime:hover .mail, 
.groupe .nicolas:hover .mail, 
.groupe .lea:hover .mail, 
.groupe .hermina:hover .mail, 
.groupe .samuel:hover .mail{bottom:-30px;}

.groupe .jean span,  
.groupe .steve span, 
.groupe .annick span, 
.groupe .maxime span, 
.groupe .nicolas span, 
.groupe .lea span,
.groupe .hermina span,  
.groupe .samuel span{position:absolute;bottom:0;background-color:#72170f;font-family: 'Merriweather', serif; font-weight:900;text-transform:uppercase;display:block;padding:10px 10px 10px 10px; width:100%;text-align:center;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;z-index:3;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;line-height:115%;}
.groupe .jean:hover span,  
.groupe .steve:hover span, 
.groupe .annick:hover span, 
.groupe .maxime:hover span, 
.groupe .nicolas:hover span, 
.groupe .lea:hover span,
.groupe .hermina:hover span,  
.groupe .samuel:hover span{background-color:#e94640;}
  
.groupe .jean span i,  
.groupe .steve span i, 
.groupe .annick span i, 
.groupe .maxime span i, 
.groupe .nicolas span i, 
.groupe .lea span i,
.groupe .hermina span i,  
.groupe .samuel span i{color:#ffffff;font-family:'Open sans';font-weight:300;display:inline-block;text-transform:none;line-height:90%;padding-top:5px;}

.groupe .jean img,  
.groupe .steve img, 
.groupe .annick img, 
.groupe .maxime img, 
.groupe .nicolas img, 
.groupe .lea img, 
.groupe .hermina img, 
.groupe .samuel img{width:100%;height:auto;position:absolute; bottom:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.groupe .jean:hover img,  
.groupe .steve:hover img, 
.groupe .annick:hover img, 
.groupe .maxime:hover img, 
.groupe .nicolas:hover img, 
.groupe .lea:hover img,
.groupe .hermina:hover img,  
.groupe .samuel:hover img{ -moz-animation: youpi 0.5s linear ;
  -webkit-animation: youpi 0.5s linear;
  animation: youpi 0.5s linear ;bottom:30px;-webkit-filter: inherit;filter:inherit;}


.image{background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:100%;max-height:300px;width:100%;position:relative; overflow:hidden;padding-bottom:3%;}
.image .c-icon{padding-top:3%;padding-bottom:3%;}
.image .c-icon li{float:left; width:7%;margin-left:7%;z-index:99;position:relative;}
.image .c-icon li img{width:100%;height:auto;}
.image .c-icon li:first-child{margin-left:17.5%;}
.image .c-icon li:last-child{margin-right:17.5%;}
.image .c-icon li::before{content:''; width:93%;top:2%;left:6%;height:89%;position:absolute;background-color:#72170f;border-radius:50%;z-index:-1;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;opacity:0;}
.image .c-icon li:hover::before{top:2%;opacity:1;}

.nav-projet{background-color:#ffffff;padding-bottom:2%;padding-top:2%;}
.nav-projet span{ box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border:1px solid #e94640;float:left;overflow:hidden;}
.nav-projet span:hover{background-color:#e94640;}
.nav-projet span:first-of-type{width:47%;margin-left:2%;margin-right:2%;}
.nav-projet span:nth-of-type(2){width:47%;margin-right:2%;}
.nav-projet span a{width:100%;height:100%;}
.nav-projet span:first-of-type a img + img{width:299px;height:32px; padding:40px 0 30px 0;text-align:center;display:block; margin:0 auto 0 auto;}
.nav-projet span:nth-of-type(2) a img + img{width:255px;height:30px; padding:40px 0 32px 0;text-align:center;display:block; margin:0 auto 0 auto;}
.nav-projet span:first-of-type a img{width:299px;height:32px; padding:40px 0 30px 0;text-align:center;display:none; margin:0 auto 0 auto;}
.nav-projet span:nth-of-type(2) a img {width:255px;height:30px; padding:40px 0 32px 0;text-align:center;display:none; margin:0 auto 0 auto;}
.nav-projet span:first-of-type a img{display:none;}
.nav-projet span:nth-of-type(2) a  img{display:none;}
.nav-projet span:hover:first-of-type a img + img{opacity:0;display:none;}
.nav-projet span:hover:first-of-type a img{opacity:1;display:block;}
.nav-projet span:hover:nth-of-type(2) a img + img{opacity:0;display:none;}
.nav-projet span:hover:nth-of-type(2) a img{opacity:1;display:block;}

.etape{clear:both;}
.etape li {width:30%; margin-left:5%;float:left;margin-bottom:40px;text-align:justify;}
.etape li h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}
.etape li span{text-align:center;width:130px;height:auto;margin:0 auto 0 auto;display:block;}
.etape li:first-child{margin-left:0%;}
.etape li:nth-child(3n+1){margin-left:0%;clear:both}
.etape li:nth-child(4), .etape li:nth-child(5), .etape li:nth-child(6){margin-bottom:0;}

.etape-2{clear:both;}
.etape-2 li {width:47.5%; margin-left:5%;float:left;margin-bottom:40px;text-align:justify;}
.etape-2 li h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}
.etape-2 li span{text-align:center;width:130px;height:auto;margin:0 auto 0 auto;display:block;}
.etape-2 li:first-child{margin-left:0%;}
.etape-2 li:nth-child(2n+1){margin-left:0%;clear:both}


#iframecontainer {overflow:hidden;padding-bottom:50px;height:100px}
#iframecontainer iframe{margin-top:-225px;height:350px;border:0;}

.bloc-1-3{width:28%; margin-left:8%; float:left; margin-top:20px; height:auto;margin-bottom:20px;position:relative;}
.bloc-1-3:first-of-type{margin-left:0;}
.bloc-1-3:nth-of-type(4), .fix, .bloc-1-3:nth-of-type(7){margin-left:0; clear:both}
.bloc-1-3 .chiffre{width:15%; margin-right:5%;float:left; margin-top:-5px;}
.bloc-1-3 .texte{width:80%;float:left;text-align:justify}
.bloc-1-3:hover .chiffre span{color:#000000;border-bottom:40px solid #000000;}
.bloc-1-3 .chiffre span{font-family:"Merriweather", sans-serif; color:#000000; font-size:85px;font-weight:normal; border-bottom:5px solid #d31820;padding-top:10px;color:#d31820;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s; font-weight:900;font-size:5em;line-height:100%;}


.bigcall{color:#ffffff;font-family:'Merriweather', serif;font-size:5em; text-align:center;display:block;font-weight:700;line-height:110%;margin-bottom:150px;margin-top:100px;}

.stats{display:table;height:200px; background-color:#ffffff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; padding:100px 100px 100px 100px; width:50%;float:left;}
.stats:nth-of-type(4), .stats:nth-of-type(3), .stats:nth-of-type(7), .stats:nth-of-type(8){background-color:#72170f;}
.stats:nth-of-type(4) span, .stats:nth-of-type(3) span, .stats:nth-of-type(7) span, .stats:nth-of-type(8) span{color:#ffffff;}
.stats .stats-inside{width:100%;display:table;height:200px;position:relative;}
.stats span{font-family: 'Merriweather', serif;font-weight:700; font-size:1.5em;line-height:150%; display: table-cell; vertical-align: middle; text-align: center;color:#72170f;}
.stats img{display:block;position:absolute; width:250px;height:100px;margin-top:-50px;top:50%;margin-left:-125px;left:50%;}
.stats strong{font-size:1.2em;font-weight:700}


.marketing-gallery{width:50%;height:600px;float:left;background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;cursor:pointer;position:relative;overflow:hidden;}
.marketing-gallery:hover{webkit-filter: grayscale(100%);filter: grayscale(100%);opacity:0.5;}
.marketing-gallery i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;}

/*----------------------------------------------------------------------------------------------------------------------*/
/* STRUCTURE ADAPTATIVE */
/*------------------------------------------------------------------------------------------------------------------------*/
/*------BIG SCREEN SCREEN ---*/
@media screen and (min-width:2000px) {

#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:21em; color:rgba(255,255,255,0.40);position:absolute;bottom:45px;left:0;}

.in #main .bloc-1{width:50%;height:800px;}
.in #main .bloc-2{width:25%;height:400px;}
.in #main .bloc-3{width:25%;height:1200px;}
.in #main .bloc-4{width:25%;height:800px;margin-top:-400px;}
.in #main .bloc-5{width:25%;height:400px;margin-top:-800px;margin-left:25%;}
.in #main .bloc-6{width:50%;height:800px;margin-top:-400px;}
.in #main .bloc-7{width:25%;height:400px;margin-top:-400px;margin-left:75%;}
.in #main .bloc-8{width:50%;height:800px;margin-top:0px;margin-left:0%;}
.in #main .bloc-9{width:50%;height:800px;margin-top:0px;margin-left:0%;}
.in #main .bloc-10{width:25%;height:400px;margin-top:0px;margin-left:0%;}
.in #main .bloc-11{width:50%;height:800px;margin-top:0px;margin-left:0%;}
.in #main .bloc-12{width:25%;height:400px;margin-top:0px;margin-left:0%;}
.in #main .bloc-13{width:25%;height:400px;margin-top:0px;margin-left:0%;}
.in #main .bloc-14{width:25%;height:400px;margin-top:-400px;margin-left:0%;}

}
/*------BIG SCREEN ---*/
@media screen and (min-width:1600px) and (max-width:1999px) {
.main-cont{max-width:1400px;margin:0 auto 0 auto; padding:25px 50px 75px 50px;position:relative;}
.bloc-1-5{width:250px; margin-left:37.5px; float:left; height:250px;padding:60px 20px 0 20px; }
.time{width:1400px;position:absolute; height:2px;background-color:#ffffff;display:block;bottom:200px;z-index:1;}

.groupe{position:relative;height:480px;margin-top:-70px;margin-bottom:20px;}

#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:19em; color:rgba(255,255,255,0.40);position:absolute;bottom:45px;left:0;}
.ban-img-vid{height:550px;width:100%;margin-top:140px;position:relative; z-index:99999;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: 100%;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}

.in #main .bloc-1{width:50%;height:600px;}
.in #main .bloc-2{width:25%;height:300px;}
.in #main .bloc-3{width:25%;height:900px;}
.in #main .bloc-4{width:25%;height:600px;margin-top:-300px;}
.in #main .bloc-5{width:25%;height:300px;margin-top:-600px;margin-left:25%;}
.in #main .bloc-6{width:50%;height:600px;margin-top:-300px;}
.in #main .bloc-7{width:25%;height:300px;margin-top:-300px;margin-left:75%;}
.in #main .bloc-8{width:50%;height:600px;margin-top:0px;margin-left:0%;}
.in #main .bloc-9{width:50%;height:600px;margin-top:0px;margin-left:0%;}
.in #main .bloc-10{width:25%;height:300px;margin-top:0px;margin-left:0%;}
.in #main .bloc-11{width:50%;height:600px;margin-top:0px;margin-left:0%;}
.in #main .bloc-12{width:25%;height:300px;margin-top:0px;margin-left:0%;}
.in #main .bloc-13{width:25%;height:300px;margin-top:0px;margin-left:0%;}
.in #main .bloc-14{width:25%;height:300px;margin-top:-300px;margin-left:0%;}

.in #main .bloc-9 img.macbook{width:500px;height:306px;margin-top:-153px;margin-left:-250px; top:50%;left:50%;position:absolute;}
.in #main .bloc-9 img.macbook-over{width:500px;height:306px;margin-top:-153px;margin-left:-250px; top:50%;left:50%;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.in #main .bloc-9:hover img.macbook-over{width:500px;height:306px;margin-top:-153px;margin-left:-250px;top:50%;left:50%;position:absolute;opacity:1;}
}
/*------NORMAL SCREEN ---*/
@media screen and (min-width:1280px) and (max-width:1599px) {
.main-cont{max-width:1080px;margin:0 auto 0 auto; padding:25px 50px 75px 50px;position:relative;}
.bloc-1-5{width:200px; margin-left:20px; float:left; height:200px;padding:40px 20px 0 20px; }
.bloc-1-5 h5{font-family: 'Merriweather', serif; font-weight:900;color:#ffffff; font-size:3em;text-align:center; margin-bottom:5px;}
.time{width:1080px;position:absolute; height:2px;background-color:#ffffff;display:block;bottom:170px;z-index:1;}

.groupe{position:relative;height:380px;margin-top:-70px;margin-bottom:20px;}

#main .in-grid{bottom:25px;left:25px;right:25px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}

#ban{height:500px;position:relative;}

#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:16em; color:rgba(255,255,255,0.40);position:absolute;bottom:45px;left:0;}


.in #main .bloc-1{width:50%;height:600px;}
.in #main .bloc-2{width:25%;height:300px;}
.in #main .bloc-3{width:25%;height:900px;}
.in #main .bloc-4{width:25%;height:600px;margin-top:-300px;}
.in #main .bloc-5{width:25%;height:300px;margin-top:-600px;margin-left:25%;}
.in #main .bloc-6{width:50%;height:600px;margin-top:-300px;}
.in #main .bloc-7{width:25%;height:300px;margin-top:-300px;margin-left:75%;}
.in #main .bloc-8{width:50%;height:600px;margin-top:0px;margin-left:0%;}
.in #main .bloc-9{width:50%;height:600px;margin-top:0px;margin-left:0%;}
.in #main .bloc-10{width:25%;height:300px;margin-top:0px;margin-left:0%;}
.in #main .bloc-11{width:50%;height:600px;margin-top:0px;margin-left:0%;}
.in #main .bloc-12{width:25%;height:300px;margin-top:0px;margin-left:0%;}
.in #main .bloc-13{width:25%;height:300px;margin-top:0px;margin-left:0%;}
.in #main .bloc-14{width:25%;height:300px;margin-top:-300px;margin-left:0%;}
.trois span img:first-of-type{width:167px;height:137px;bottom:70%;margin-bottom:-68px;right:50%;margin-right:-84px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.sept span img:first-of-type{width:199px;height:129px;bottom:70%;margin-bottom:-65px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.neuf span img:first-of-type{width:135px;height:143px;bottom:70%;margin-bottom:-71px;right:50%;margin-right:-67px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}



.deux:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.deux:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.trois:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.trois:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.sept:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.sept:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.huit:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.neuf:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.neuf:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

#big-cont span.h1{ font-size:2em; top:30px;line-height:115%;top:55px;}


.in #main .bloc-9 img.macbook{width:500px;height:306px;margin-top:-153px;margin-left:-250px; top:50%;left:50%;position:absolute;}
.in #main .bloc-9 img.macbook-over{width:500px;height:306px;margin-top:-153px;margin-left:-250px; top:50%;left:50%;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.in #main .bloc-9:hover img.macbook-over{width:500px;height:306px;margin-top:-153px;margin-left:-250px;top:50%;left:50%;position:absolute;opacity:1;}
}
/*------SMALL SCREEN ---*/
@media screen and (min-width:960px) and (max-width:1279px) {
	.bigcall{font-size:3em;}
	


#darkred #main h3 span{ font-size:2.5em;}
#red #main h3 span{ font-size:2.5em;}
#whitered #main h3 span{font-size:2.5em;}
	
	.bloc-1-3{width:45%; margin-left:10%; float:left; margin-top:20px; height:auto;margin-bottom:20px;position:relative;}
.bloc-1-3:first-of-type{margin-left:0;}
.bloc-1-3:nth-of-type(4), .fix, .bloc-1-3:nth-of-type(7){margin-left:10%; clear:none}
.bloc-1-3:nth-of-type(2n+1){margin-left:0%; clear:both}
	
	
.groupe{height:490px;padding-bottom:520px;}
.groupe .lea{width:23.5%;margin-left:0%}
.groupe .maxime{width:23.5%;margin-left:1.83%}
.groupe .steve{width:21.5%;margin-left:1.83%}
.groupe .annick{width:26%;margin-left:1.83%;}
.groupe .nicolas{width:20.5%; margin-left:0%;margin-bottom:50px;}
.groupe .samuel{width:20%;margin-left:1.83%;margin-bottom:50px;}
.groupe .jean{width:25.5%;margin-left:1.83%;margin-bottom:50px;}
.groupe .hermina{width:24%;margin-left:1.83%;}

.main-cont{max-width:760px;margin:0 auto 0 auto; padding:25px 50px 75px 50px;position:relative;}
.bloc-1-5{width:200px; margin-left:80px; float:left; height:200px;padding:40px 20px 0 20px; }
.bloc-1-5:nth-of-type(4){margin-left:140px;}
.bloc-1-5 h5{font-family: 'Merriweather', serif; font-weight:900;color:#ffffff; font-size:3em;text-align:center; margin-bottom:5px;}
.time{display:none;}

p{font-size:1em;}

.menu{position:absolute;top:35px;left:95px;width:400px;height:50px;z-index:9999999;}
.menu ul li{font-size:0.9em;}

#main{min-height:100%;position:relative;overflow: visible;}

#main .main-left{width:100%;min-height:100%;top:0;left:0;background-color:#ffffff;position:absolute;display:block;}
#main .main-right{width:100%;min-height:100%;top:100%;right:0;background-color:#ffffff;position:absolute;display:block;}

#big-cont span.h1{ font-size:1.7em; top:55px;line-height:115%; width:400px;}


.trois span img:first-of-type{width:167px;height:137px;bottom:70%;margin-bottom:-68px;right:50%;margin-right:-84px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.sept span img:first-of-type{width:199px;height:129px;bottom:70%;margin-bottom:-65px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.huit span img:first-of-type{width:172px;height:132px;bottom:70%;margin-bottom:-66px;right:50%;margin-right:-86px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.neuf span img:first-of-type{width:135px;height:143px;bottom:70%;margin-bottom:-71px;right:50%;margin-right:-67px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}



.deux:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.deux:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.trois:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.trois:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.sept:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.sept:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.huit:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.neuf:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.neuf:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.cont-slide{width:450px;position:absolute;bottom:50px;right:50px;}
.cont-slide h1{text-align:right;width:300px;float:right;margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1.5em; color:#423d3c;text-transform:uppercase;}
.cont-slide p{text-align:right;font-weight:400;clear:both;margin-bottom:10px;display:none;border:1px solid red;}
.cont-slide a{float:right;}
.cont-slide img.ico{width:200px;height:auto;position:absolute;top:-150px;right:0px;}

.w h1{color:#ffffff;}

#ban{height:auto; min-height:auto;display:block;padding-bottom:200px;}

#ban .ban-bloc{width:100%;height:auto;min-height:150px;max-width:inherit;left:0px; padding:30px;overflow:auto;position:relative;top:200px;}


.ban-img-web{background:url(../img/fond-web.jpg) no-repeat center top; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-design{background:url(../img/fond-design.jpg) no-repeat center top; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-marketing{background:url(../img/fond-marketing.jpg) no-repeat center top; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-prod{background:url(../img/fond-prod.jpg) no-repeat center top; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-agence{background:url(../img/fond-agence.jpg) no-repeat center top; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-video{background:url(../img/fond-video.jpg) no-repeat center top; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-contact{background:url(../img/carte.jpg) no-repeat center bottom; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}


.ban-img-vid{height:350px;width:100%;margin-top:140px;position:relative; z-index:99999;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: 100%;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}


.in #main .bloc-1{width:50%;height:400px;}
.in #main .bloc-2{width:25%;height:200px;}
.in #main .bloc-3{width:25%;height:600px;}
.in #main .bloc-4{width:25%;height:400px;margin-top:-200px;}
.in #main .bloc-5{width:25%;height:200px;margin-top:-400px;margin-left:25%;}
.in #main .bloc-6{width:50%;height:400px;margin-top:-200px;}
.in #main .bloc-7{width:25%;height:200px;margin-top:-200px;margin-left:75%;}
.in #main .bloc-8{width:50%;height:400px;margin-top:0px;margin-left:0%;}
.in #main .bloc-9{width:50%;height:400px;margin-top:0px;margin-left:0%;}
.in #main .bloc-10{width:25%;height:200px;margin-top:0px;margin-left:0%;}
.in #main .bloc-11{width:50%;height:400px;margin-top:0px;margin-left:0%;}
.in #main .bloc-12{width:25%;height:200px;margin-top:0px;margin-left:0%;}
.in #main .bloc-13{width:25%;height:200px;margin-top:0px;margin-left:0%;}
.in #main .bloc-14{width:25%;height:200px;margin-top:-200px;margin-left:0%;}

.in #main .mini-web{top:25px;bottom:25px; left:25px; right:25px; }

.in #main .bloc-2 img.macbook{width:200px;height:112px;margin-top:-56px;margin-left:-100px;}
.in #main .bloc-4 img.macbook{width:180px;height:190px;margin-top:-95px;margin-left:-90px; }
.in #main .bloc-5 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-7 img.macbook{width:110px;height:auto;margin-left:-100px; bottom:-20px;}
.in #main .bloc-8 img.macbook{width:550px;height:auto;margin-left:-275px; bottom:0%;}
.in #main .bloc-9 img.macbook{width:400px;height:245px;margin-top:-122px;margin-left:-200px; }
.in #main .bloc-10 img.macbook{width:180px;height:auto;margin-left:-10px; bottom:-40px;}
.in #main .bloc-12 img.macbook{width:200px;height:84px;margin-top:-42px;margin-left:-100px;}
.in #main .bloc-14 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-5 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-5:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9 img.macbook-over{width:400px;height:245px;margin-top:-122px;margin-left:-200px;}
.in #main .bloc-9:hover img.macbook-over{width:400px;height:245px;margin-top:-122px;margin-left:-200px; }
.in #main .bloc-14 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-14:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}


.clients li{width:14.2857142857%;height:auto;float:left;}
.clients li:first-child{margin-left:0;}
.clients li:nth-child(8n+1){}
.clients li:nth-child(6n+1){margin-left:0;}

.etape li {width:47.5%; margin-left:5%;float:left;margin-bottom:40px;text-align:left;}
.etape li:first-child{margin-left:0%;}
.etape li:nth-child(3n+1){margin-left:5%;clear:none;}
.etape li:nth-child(2n+1){margin-left:0%; clear:both;}
.etape li:nth-child(4){margin-bottom:40px;}
.etape li:nth-child(5), .etape li:nth-child(6){margin-bottom:0;}

#iframecontainer {overflow:hidden;padding-bottom:50px;height:70px;}
#iframecontainer iframe{margin-top:-305px;height:420px;border:0;}

.bigimage{background:url(../img/fond-web.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:block;min-height:500px;width:100%;position:relative;overflow:hidden;}

.marketing-gallery{width:50%;height:400px;float:left;background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-filter: grayscale(100%);filter: grayscale(100%);cursor:pointer;position:relative;overflow:hidden;}
.marketing-gallery:hover{-webkit-filter: inherit;filter: inherit;}
.marketing-gallery i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;}
}

/*------IPAD PORTRAIT ---*/
@media screen and (min-width:646px) and (max-width:959px) {

.g{display:none;}

	.bigcall{font-size:2.5em;padding:0 100px 0 100px;}
	.bigcall br {display:none;}

.bloc-1-3{width:100%; margin-left:0%; float:left; margin-top:20px; height:auto;margin-bottom:20px;position:relative;}
.bloc-1-3:first-of-type{margin-left:0;}
.bloc-1-3:nth-of-type(4), .fix, .bloc-1-3:nth-of-type(7){margin-left:0%; clear:none}
.bloc-1-3:nth-of-type(2n+1){margin-left:0%; clear:both}

.groupe{height:390px;padding-bottom:420px}
.groupe .lea{width:23.5%;margin-left:0%}
.groupe .maxime{width:23.5%;margin-left:1.83%}
.groupe .steve{width:21.5%;margin-left:1.83%}
.groupe .annick{width:26%;margin-left:1.83%;}
.groupe .nicolas{width:20.5%; margin-left:0%;margin-bottom:50px;}
.groupe .samuel{width:22%;margin-left:1.83%;margin-bottom:50px;}
.groupe .jean{width:28%;margin-left:1.83%;margin-bottom:50px;}
.groupe .hermina{width:22%;margin-left:1.83%;margin-bottom:50px;}

.main-cont{max-width:546px;margin:0 auto 0 auto; padding:25px 0px 50px 0px;position:relative;}
.bloc-1-5{width:165px; margin-left:25px; float:left; height:165px;padding:40px 20px 0 20px; margin-bottom:10px;}
.bloc-1-5:nth-of-type(3){margin-left:25px;}
.bloc-1-5:nth-of-type(4){margin-left:95px;}
.bloc-1-5:nth-of-type(5){margin-left:25px;}
.bloc-1-5 h5{font-family: 'Open Sans', serif; font-weight:900;color:#ffffff; font-size:2em;text-align:center; margin-bottom:5px;}
 .bloc-1-5 p{line-height:90%;}
 .bloc-1-5:hover h5{color:#e94640;font-size:2.5em;}
.time{display:none;}	

#red #main, #whitered #main, #darkred #main{overflow-x:hidden}

#darkred #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#darkred #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:3px solid #72170f;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#72170f; font-size:2em;}

#red #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#red #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:3px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:2em;}

#whitered #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#whitered #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:3px solid #e94640;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#e94640; font-size:2em;}

	
.wetransfer{right:5px;}
.wetransfer img{width:15px;height:auto;}

.media{width:25px;position:absolute;top:40px;right:-2px;}
.media img{width:80%;}

span.mobi{display:block;top:25px;left:25px;}
.draw-line{position:absolute;top:-90px;right:0px;z-index:999;width:500px;color:#ffffff;height:300px}
p{font-size:1em;}

#big-cont span.h1{ font-size:1.7em; top:22px;right:25px; width:400px;line-height:115%;}

.menu{display:none;}
#main{min-height:100%;position:relative;overflow: visible;}

#main .main-left{width:100%;min-height:100%;top:0;left:0;background-color:#ffffff;position:absolute;display:block;}
#main .main-right{width:100%;min-height:100%;top:100%;right:0;background-color:#ffffff;position:absolute;display:block;}


.deux:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.deux:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.trois:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.trois:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.sept:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.sept:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.huit:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.neuf:hover span img:first-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:0;}
.neuf:hover span img:last-of-type{bottom:50%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:1;width:200px;height:200px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.main-left h5::after, .main-right h5::after{content:''; width:40px;height:15px;position:absolute;left:0px;top:8px;background-color:#ffffff;display:none;}
.main-left h5, .main-right h5{margin-left:0;}


.cont-slide{width:450px;position:absolute;bottom:25px;right:25px;}
.cont-slide h1{text-align:right;width:300px;float:right;margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1.3em; color:#423d3c;text-transform:uppercase;}
.cont-slide p{text-align:right;font-weight:400;clear:both;margin-bottom:10px;display:none;border:1px solid red;}
.cont-slide a{float:right;}
.cont-slide img.ico{width:175px;height:auto;position:absolute;top:-150px;right:0px;}

.w h1{color:#ffffff;}

.nav-line{display:none;}

span.info-btn{font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:0.8em; color:#423d3c;text-transform:uppercase;position:absolute;bottom:0px;left:50px;cursor:pointer;}
 span.info-btn:hover{color:#72170f;}
 span.info-btn::before{content:''; background:url('../img/plus.png')no-repeat center center;height:13px;width:13px;position:absolute;bottom:5px;left:-25px;}

#big-cont{position:absolute;bottom:25px;left:25px;right:25px;top:0;margin:0;display:block;overflow:scroll;}

.logo{position:absolute;bottom:0;right:25px;height:25px;}
.logo:hover{opacity:0.7;}
.logo img{display:block;width:auto;height:100%;}

#ban{height:auto; min-height:auto;display:block;margin-top:70px;padding-bottom:200px;}
#ban .ban-bloc{width:100%;height:auto;min-height:150px;max-width:inherit;left:0px; padding:30px;overflow:auto;position:relative;top:200px;}
#ban h1{ font-size:2em; font-weight:700;padding-left:60px;}
#ban h1::before{content:''; width:75px;height:20px;display:block;position:absolute;left:0;top:36px;}
#ban p{margin-top:20px;}
#ban p strong{font-size:1em;}
#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:16em; color:rgba(255,255,255,0.40);position:absolute;top:150px;bottom:inherit;left:inherit;right:inherit;left:0;display:none;}

.ban-img-web{background:url(../img/fond-web.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-design{background:url(../img/fond-design.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-marketing{background:url(../img/fond-marketing.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-prod{background:url(../img/fond-prod.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-agence{background:url(../img/fond-agence.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-video{background:url(../img/fond-video.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-contact{background:url(../img/carte.jpg) no-repeat center bottom; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}



.ban-img-vid{max-height:1000px;width:100%;margin-top:140px;position:relative; z-index:99999;overflow:inherit;}
.ban-img-vid .ban-bloc{width:100%;height:auto;min-height:250px;left:0px; padding:30px;overflow:auto;position:absolute;top:-200px;margin-top:-200px;}
.vidvid{overflow:hidden;height:200px;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: inherit;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}

.in #main .bloc-1{width:100%;height:500px;}
.in #main .bloc-2{width:50%;height:200px;}
.in #main .bloc-3{width:50%;height:600px;}
.in #main .bloc-4{width:50%;height:400px;margin-top:-400px;}
.in #main .bloc-5{width:50%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-6{width:50%;height:300px;margin-top:-0;}
.in #main .bloc-7{width:50%;height:200px;margin-top:-100px;margin-left:0%;}
.in #main .bloc-8{width:50%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-9{width:50%;height:400px;margin-top:-200px;margin-left:0%;}
.in #main .bloc-10{width:50%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-11{width:100%;height:500px;margin-top:0;margin-left:0%;}
.in #main .bloc-12{width:50%;height:200px;margin-top:0;margin-left:0%;display:none;}
.in #main .bloc-13{width:50%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-14{width:50%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-15{width:100%;height:500px;}

.in #main .bloc-1 .mini-web, .in #main .bloc-11 .mini-web, .in #main .bloc-15 .mini-web{top:25px;bottom:25px; left:25px; right:25px; }

.in #main .bloc-2 img.macbook{width:200px;height:112px;margin-top:-56px;margin-left:-100px;}
.in #main .bloc-4 img.macbook{width:180px;height:190px;margin-top:-95px;margin-left:-90px; }
.in #main .bloc-5 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-7 img.macbook{width:110px;height:auto;margin-left:-100px; bottom:-20px;}
.in #main .bloc-8 img.macbook{width:400px;height:auto;margin-left:-200px; bottom:0%;}
.in #main .bloc-9 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-10 img.macbook{width:180px;height:auto;margin-left:-10px; bottom:-40px;}
.in #main .bloc-12 img.macbook{width:200px;height:84px;margin-top:-42px;margin-left:-100px;}
.in #main .bloc-14 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-5 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-5:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-14 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-14:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-1 .mini-web .scroll-web, 
.in #main .bloc-11 .mini-web .scroll-web,
.in #main .bloc-15 .mini-web .scroll-web{overflow:hidden; }
.in #main .bloc-1:hover .mini-web .scroll-web img, 
.in #main .bloc-11:hover .mini-web .scroll-web img,
.in #main .bloc-15:hover .mini-web .scroll-web img{top:25px;}
.in #main .bloc-1 .mini-web .scroll-web img, 
.in #main .bloc-11 .mini-web .scroll-web img,
.in #main .bloc-15 .mini-web .scroll-web img{width:100%;height:auto;position:absolute;top:25px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}


.clients li{width:20%;height:auto;float:left;}
.clients li:first-child{margin-left:0;}
.clients li:nth-child(8n+1){margin-left:0%;}
.clients li:nth-child(6n+1){margin-left:0%;}
.clients li:nth-child(5n+1){margin-left:0%;}


.etape li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape li:first-child{margin-left:0%;}
.etape li:nth-child(3n+1){margin-left:5%;clear:none;}
.etape li:nth-child(2n+1){margin-left:0%; clear:both;}
.etape li:nth-child(4){margin-bottom:40px;}
.etape li:nth-child(5), .etape li:nth-child(6){margin-bottom:0;}

#iframecontainer {overflow:hidden;padding-bottom:50px;height:90px;}
#iframecontainer iframe{margin-top:-200px;height:440px;border:0;}

.bigimage{background:url(../img/fond-web.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:block;min-height:400px;width:100%;position:relative;overflow:hidden;}


.etape-2{clear:both;}
.etape-2 li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape-2 li h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}
.etape-2 li span{text-align:center;width:130px;height:auto;margin:0 auto 0 auto;display:block;}
.etape-2 li:first-child{margin-left:0%;}
.etape-2 li:nth-child(2n+1){margin-left:0%;clear:both}


.marketing-gallery{width:100%;height:400px;float:left;background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-filter: grayscale(100%);filter: grayscale(100%);cursor:pointer;position:relative;overflow:hidden;}
.marketing-gallery:hover{-webkit-filter: inherit;filter: inherit;}
.marketing-gallery i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;}

}
/*------IPHONE PAYSAGE----*/
@media screen and (min-width:431px) and (max-width:645px) {
	.g{display:none;}
	
	.bigcall{font-size:2.5em;padding:0 20px 0 20px;}
	.bigcall br {display:none;}
	
	#red #main, #whitered #main, #darkred #main{overflow-x:hidden}
.in h6{font-size:1.4em;}

.bloc-1-3{width:100%; margin-left:0%; float:left; margin-top:20px; height:auto;margin-bottom:20px;position:relative;}
.bloc-1-3:first-of-type{margin-left:0;}
.bloc-1-3:nth-of-type(4), .fix, .bloc-1-3:nth-of-type(7){margin-left:0%; clear:none}
.bloc-1-3:nth-of-type(2n+1){margin-left:0%; clear:both}

.groupe{height:410px;padding-bottom:1350px;margin-top:-50px;}
.groupe .lea{width:49%;margin-left:0%;margin-bottom:20px;}
.groupe .maxime{width:49%;margin-left:2%;margin-bottom:20px;}
.groupe .steve{width:44%;margin-left:0%;margin-bottom:20px;}
.groupe .annick{width:54%;margin-left:2%;margin-bottom:20px;}
.groupe .nicolas{width:45%; margin-left:0%;margin-bottom:20px;}
.groupe .jean{width:52%;margin-left:2%;margin-bottom:50px;}
.groupe .samuel{width:49%;margin-left:0%;margin-bottom:20px;}
.groupe .hermina{width:49%;margin-left:2%;margin-bottom:20px;}


.main-cont{max-width:331px;margin:0 auto 0 auto; padding:25px 0px 50px 0px;position:relative;}
.bloc-1-5{width:150px; margin-left:31px; float:left; height:150px;padding:40px 20px 0 20px; margin-bottom:10px;}
.bloc-1-5:nth-of-type(3){margin-left:0;}
.bloc-1-5:nth-of-type(4){margin-left:31px;}
.bloc-1-5:nth-of-type(5){margin-left:90px;}
.bloc-1-5 h5{font-family: 'Open Sans', serif; font-weight:900;color:#ffffff; font-size:2em;text-align:center; margin-bottom:5px;}
 .bloc-1-5 p{line-height:90%;}
 .bloc-1-5:hover h5{color:#e94640;font-size:2.5em;}
.time{display:none;}	

#darkred #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#darkred #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #72170f;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#72170f; font-size:1.7em;}

#red #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#red #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:1.7em;}

#whitered #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#whitered #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #e94640;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#e94640; font-size:1.7em;}

.wetransfer{right:5px;}
.wetransfer img{width:15px;height:auto;}

.media{width:25px;position:absolute;top:40px;right:-2px;}
.media img{width:80%;}

span.mobi{display:block;top:25px;left:25px;}
.draw-line{position:absolute;top:-200px;right:-200px;z-index:999;width:500px;color:#ffffff;height:300px}
#big-cont span.h1{ font-size:1.2em; top:25px;right:25px; width:350px;line-height:115%;}
.menu{display:none;}
.nav-line{display:none;}


p{font-size:1em;}

#main{min-height:100%;position:relative;overflow: visible;}

#main .main-left{width:100%;min-height:200%;top:0;left:0;background-color:#ffffff;position:absolute;display:block;}
#main .main-right{width:100%;min-height:200%;top:350%;right:0;background-color:#ffffff;position:absolute;display:block;}

#main .main-left .un{position:absolute;width:100%;height:25%;top:75%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .cinq{position:absolute;width:100%;height:25%;top:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .deux{position:absolute;width:100%;height:50%;top:25%;overflow:hidden;left:0%;background-color:#72170f;}
#main .main-left .trois{position:absolute;width:100%;height:50%;background-color:#d9272e;top:100%;left:0;overflow:hidden;}
#main .main-left .quatre{position:absolute;width:100%;height:25%; top:150%;left:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .six{position:absolute;width:100%;height:25%;top:50%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .sept{position:absolute;width:100%;height:50%;top:0%;left:0%;overflow:hidden;background:#423d3c; }
#main .main-right .huit{position:absolute;width:100%;height:50%;background-color:#e94640;top:75%;left:0;overflow:hidden;}
#main .main-right .neuf{position:absolute;width:100%;height:50%;top:150%;left:0%;overflow:hidden;background:#72170f }
#main .main-right .dix{position:absolute;width:100%;height:25%;top:125%;left:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.deux:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.deux:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.trois:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.trois:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.sept:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.sept:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.huit:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.huit:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.neuf:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.neuf:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.main-left h5::after, .main-right h5::after{content:''; width:40px;height:15px;position:absolute;left:0px;top:8px;background-color:#ffffff;display:none;}
.main-left h5, .main-right h5{margin-left:0;}

span.info-btn{font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:0.8em; color:#423d3c;text-transform:uppercase;position:absolute;bottom:5px;left:50px;cursor:pointer;}
 span.info-btn:hover{color:#72170f;}
 span.info-btn::before{content:''; background:url('../img/plus.png')no-repeat center center;height:13px;width:13px;position:absolute;bottom:0px;left:-25px;}

#big-cont{position:absolute;bottom:25px;left:25px;right:25px;top:0;margin:0;display:block;overflow:scroll;}

.logo{position:absolute;bottom:0;right:25px;height:25px;}
.logo:hover{opacity:0.7;}
.logo img{display:block;width:auto;height:100%;}


.cont-slide{width:450px;position:absolute;bottom:15px;right:25px;}
.cont-slide h1{text-align:right;width:200px;float:right;margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1em; color:#423d3c;text-transform:uppercase;}
.cont-slide p{text-align:right;font-weight:400;clear:both;margin-bottom:10px;display:none;border:1px solid red;}
.cont-slide a{float:right;display:block;}
.cont-slide img.ico{width:100px;height:auto;position:absolute;top:-80px;right:0px;}

.w h1{color:#ffffff;}

.mobile-menu{position:relative;width:300px;height:100%;z-index:9999999;background-color:#e94640;display:none;padding:0 0 0 0 ;}
.mobile-menu ul{padding-top:65px;}
.mobile-menu ul li{font-family:'Open Sans';margin:0px 0px 0px 0px;font-size:0.9em;font-weight:400; border-top:1px solid #D43A00;width:50%;float:left;}
.mobile-menu ul li:last-child, 
.mobile-menu ul li:nth-child(7){border-bottom:1px solid #D43A00}
.mobile-menu ul li:first-child,
 .mobile-menu ul li:nth-child(3), 
 .mobile-menu ul li:nth-child(5), 
 .mobile-menu ul li:nth-child(7){border-right:1px solid #D43A00; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

.mobile-menu ul li a{text-transform:uppercase;text-decoration:none;font-weight:700;color:#ffffff;display:block;position:relative;overflow:hidden;z-index:999999;padding:10px 10px 10px 15px;}
.mobile-menu ul li a:hover{padding:10px 10px 10px 15px;}
.mobile-menu ul li a::before{content:''; background-color:#d9272e;position:absolute;top:0;left:-300px;width:300px;height:30px;z-index:-1;padding:10px 0px 10px 0px;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s;}
.mobile-menu ul li a:hover::before{content:''; background-color:#d9272e;position:absolute;top:0;left:0px;width:300px;height:30px;padding:10px 0px 10px 0px;}

.main-left b img, .main-right b img{position:absolute;top:10px;right:10px;z-index:999999;width:20px;height:20px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
#main .deux:hover b img{right:10px}
#main .trois:hover b img{right:10px}
#main .sept:hover b img{right:10px}
#main .huit:hover b img{right:10px}
#main .neuf:hover b img{right:10px}

#main .deux:hover .in-grid{bottom:35px;position:absolute;}
#main .trois:hover .in-grid{bottom:35px;}
#main .sept:hover .in-grid{bottom:35px;}
#main .huit:hover .in-grid{bottom:35px;}
#main .neuf:hover .in-grid{bottom:35px;}

.main-left i, 
.main-right i{position:absolute;bottom:25px;right:600px;z-index:999999;}
#main .main-left .deux:hover i, 
#main .main-left .trois:hover i, 
#main .main-right .sept:hover i, 
#main .main-right .huit:hover i, 
#main .main-right .neuf:hover i{right:600px;}
.un, .quatre, .cinq, .six, .dix{  -webkit-filter: grayscale(1); /* Webkit */filter: gray; /* IE6-9 */filter: grayscale(1); /* W3C */opacity:0.9}

.huit:hover span img:first-of-type{opacity:1;display:block;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-88px;right:50%;margin-right:-116px;position:absolute;opacity:1;display:none;}

.un img, 
.quatre img, 
.cinq img, 
.six img, 
.dix img{position:absolute;right:50%;top:50%;margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:0;-o-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;transition:.2s;}
.un:hover img, 
.quatre:hover img, 
.cinq:hover img, 
.six:hover img, 
.dix:hover img{margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:1;}



#ban{height:auto; min-height:auto;display:block;margin-top:70px;padding-bottom:200px;}
#ban .ban-bloc{width:100%;height:auto;min-height:150px;left:0px;padding:30px;overflow:auto;position:relative;top:200px;max-width:inherit;}
#ban h1{ font-size:2em; font-weight:700;padding-left:60px;}
#ban h1::before{content:''; width:75px;height:20px;display:block;position:absolute;left:0;top:36px;}
#ban p{margin-top:20px;}
#ban p strong{font-size:1em;}
#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:10em; color:rgba(255,255,255,0.40);position:absolute;top:165px;bottom:inherit;left:0px;right:inherit;}
.ban-img-web{background:url(../img/fond-web.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}

.ban-img-design{background:url(../img/fond-design.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-marketing{background:url(../img/fond-marketing.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-prod{background:url(../img/fond-prod.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-agence{background:url(../img/fond-agence.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-video{background:url(../img/fond-video.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-contact{background:url(../img/carte.jpg) no-repeat center bottom ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}


ban-img-vid{max-height:1000px;width:100%;margin-top:140px;position:relative; z-index:99999;overflow:inherit;border:1px solid red;}
.ban-img-vid .ban-bloc{width:100%;height:auto;min-height:250px;left:0px; padding:30px;overflow:auto;position:absolute;top:-200px;margin-top:-200px;}
.vidvid{overflow:hidden;height:200px;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: inherit;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}


.in #main .bloc-1{width:100%;height:300px;}
.in #main .bloc-2{width:100%;height:200px;}
.in #main .bloc-3{width:100%;height:300px;}
.in #main .bloc-4{width:100%;height:300px;margin-top:-0;}
.in #main .bloc-5{width:100%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-6{width:100%;height:300px;margin-top:-0;}
.in #main .bloc-7{width:100%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-8{width:100%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-9{width:100%;height:300px;margin-top:-0;margin-left:0%;}
.in #main .bloc-10{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-11{width:100%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-12{width:51000%;height:200px;margin-top:0;margin-left:0%;display:none;}
.in #main .bloc-13{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-14{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-15{width:100%;height:300px;}

.in #main .bloc-1 .mini-web, .in #main .bloc-11 .mini-web,.in #main .bloc-15 .mini-web{top:25px;bottom:25px; left:25px; right:25px; }

.in #main .bloc-2 img.macbook{width:200px;height:112px;margin-top:-56px;margin-left:-100px;}
.in #main .bloc-4 img.macbook{width:180px;height:190px;margin-top:-95px;margin-left:-90px; }
.in #main .bloc-5 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-7 img.macbook{width:110px;height:auto;margin-left:-100px; bottom:-20px;}
.in #main .bloc-8 img.macbook{width:400px;height:auto;margin-left:-200px; bottom:0%;}
.in #main .bloc-9 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-10 img.macbook{width:180px;height:auto;margin-left:-10px; bottom:-40px;}
.in #main .bloc-12 img.macbook{width:200px;height:84px;margin-top:-42px;margin-left:-100px;}
.in #main .bloc-14 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-5 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-5:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-14 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-14:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-1 .mini-web .scroll-web, 
.in #main .bloc-11 .mini-web .scroll-web,
.in #main .bloc-15 .mini-web .scroll-web{overflow:hidden; }
.in #main .bloc-1:hover .mini-web .scroll-web img, 
.in #main .bloc-11:hover .mini-web .scroll-web img,
.in #main .bloc-15:hover .mini-web .scroll-web img{top:25px;}
.in #main .bloc-1 .mini-web .scroll-web img, 
.in #main .bloc-11 .mini-web .scroll-web img,
.in #main .bloc-15 .mini-web .scroll-web img{width:100%;height:auto;position:absolute;top:25px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}


span.bouton a{position:relative;left:-50%; padding:10px 10px 10px 10px;border: 3px solid #ffffff;display:inline-block;text-align:center;font-family: 'Open sans', sans-serif; font-weight:300; color:#ffffff; font-size:1.5em;text-decoration:none;}

.etape li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape li:first-child{margin-left:0%;}
.etape li:nth-child(3n+1){margin-left:0%;}
.etape li:nth-child(2n+1){margin-left:0%; clear:both;}
.etape li:nth-child(4), .etape li:nth-child(5){margin-bottom:40px;}
.etape li:nth-child(6){margin-bottom:0px;}

#iframecontainer {overflow:hidden;padding-bottom:50px;height:90px;}
#iframecontainer iframe{margin-top:-250px;height:440px;border:0;}

.cont-slide .ico{display:none;}

.clients li{width:33.3333333333333%;height:auto;float:left;}
.clients li:first-child{margin-left:0;}
.clients li:nth-child(8n+1){margin-left:0%;}
.clients li:nth-child(6n+1){margin-left:0%;}
.clients li:nth-child(5n+1){margin-left:0%;}
.clients li:nth-child(3n+1){margin-left:0;}

.bigimage{background:url(../img/fond-web.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:block;min-height:300px;width:100%;position:relative;overflow:hidden;}

.bigmac i span img{width:100px; height:100px;position:absolute;margin-left:-50px; left:50%;top:50%;margin-top:-50px; }

.marketing-gallery{width:100%;height:300px;float:left;background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-filter: grayscale(100%);filter: grayscale(100%);cursor:pointer;position:relative;overflow:hidden;}
.marketing-gallery:hover{-webkit-filter: inherit;filter: inherit;}
.marketing-gallery i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;

}

.etape-2{clear:both;}
.etape-2 li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape-2 li h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}
.etape-2 li span{text-align:center;width:130px;height:auto;margin:0 auto 0 auto;display:block;}
.etape-2 li:first-child{margin-left:0%;}
.etape-2 li:nth-child(2n+1){margin-left:0%;clear:both}

}
/*------IPHONE PORTRAIT----*/
@media screen and (max-width:430px) {
	.g{display:none;}
	
	.bigcall{font-size:1.5em;padding:0 10px 0 10px;}
	.bigcall br {display:none;}
	
	#red #main, #whitered #main, #darkred #main{overflow-x:hidden}

.bloc-1-3{width:100%; margin-left:0%; float:left; margin-top:0px; height:auto;margin-bottom:20px;position:relative;}
.bloc-1-3:first-of-type{margin-left:0;}
.bloc-1-3:nth-of-type(4), .fix, .bloc-1-3:nth-of-type(7){margin-left:0%; clear:none}
.bloc-1-3:nth-of-type(2n+1){margin-left:0%; clear:both}

.in h6{font-size:1.3em;}

#main{min-height:100%;position:relative;overflow: visible;}

.cont-slide .ico{display:none;}

.main-cont{max-width:auto;margin:0 auto 0 auto; padding:25px 25px 50px 25px;position:relative;}
.bloc-1-5{width:100%; margin-left:0px; float:none; height:100px;padding:20px 20px 0 20px; margin-bottom:10px;border-radius:inherit}
.bloc-1-5:nth-of-type(3){margin-left:0;}
.bloc-1-5:nth-of-type(4){margin-left:0;}
.bloc-1-5:nth-of-type(5){margin-left:0px;}
.bloc-1-5 h5{font-family: 'Open Sans', serif; font-weight:900;color:#ffffff; font-size:2em;text-align:center; margin-bottom:5px;}
 .bloc-1-5 p{line-height:90%;}
 .bloc-1-5:hover h5{color:#e94640;font-size:2.5em;}
.time{display:none;}	

#darkred #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#darkred #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:2px solid #72170f;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#72170f; font-size:1em;}

#red #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#red #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:2px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:1em;}

#whitered #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#whitered #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:2px solid #e94640;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#e94640; font-size:1em;}

.wetransfer{right:5px;}
.wetransfer img{width:15px;height:auto;}

.media{width:25px;position:absolute;top:40px;right:-2px;}
.media img{width:80%;}
	
	p{font-size:1em;text-align:justify}
	
span.mobi{display:block;top:25px;left:25px;}
.draw-line{position:absolute;top:-150px;right:-220px;z-index:999;width:500px;color:#ffffff;height:300px}
#big-cont span.h1{ font-size:1.2em; top:27px;right:25px; width:200px;line-height:115%;}
.menu{display:none;}
.nav-line{display:none;}

#main .main-left{width:100%;min-height:125%;top:0;left:0;background-color:#ffffff;position:absolute;display:block;}
#main .main-right{width:100%;min-height:125%;top:218.5%;right:0;background-color:#ffffff;position:absolute;display:block;}

#main .main-left .un{position:absolute;width:100%;height:25%;top:75%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .cinq{position:absolute;width:100%;height:25%;top:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .deux{position:absolute;width:100%;height:50%;top:25%;overflow:hidden;left:0%;background-color:#72170f;}
#main .main-left .trois{position:absolute;width:100%;height:50%;background-color:#d9272e;top:100%;left:0;overflow:hidden;}
#main .main-left .quatre{position:absolute;width:100%;height:25%; top:150%;left:0%;overflow:hidden;
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .six{position:absolute;width:100%;height:25%;top:50%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .sept{position:absolute;width:100%;height:50%;top:0%;left:0%;overflow:hidden;background:#423d3c; }
#main .main-right .huit{position:absolute;width:100%;height:50%;background-color:#e94640;top:75%;left:0;overflow:hidden;}
#main .main-right .neuf{position:absolute;width:100%;height:50%;top:150%;left:0%;overflow:hidden;background:#72170f }
#main .main-right .dix{position:absolute;width:100%;height:25%;top:125%;left:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}


.deux:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.deux:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:100px;height:200px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.trois:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.trois:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:100px;height:200px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.sept:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.sept:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:100px;height:200px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.huit:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.huit:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:100px;height:200px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.neuf:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.neuf:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:100px;height:200px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.main-left h5::after, .main-right h5::after{content:''; width:40px;height:15px;position:absolute;left:0px;top:8px;background-color:#ffffff;display:none;}
.main-left h5, .main-right h5{margin-left:0;}

.logo{position:absolute;bottom:0;right:25px;height:25px;}
.logo:hover{opacity:0.7;}
.logo img{display:block;width:auto;height:100%;}

#big-cont{position:absolute;bottom:25px;left:25px;right:25px;top:0;margin:0;display:block;overflow:scroll;}

span.info-btn{font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:0.8em; color:#423d3c;text-transform:uppercase;position:absolute;bottom:5px;left:50px;cursor:pointer;}
 span.info-btn:hover{color:#72170f;}
 span.info-btn::before{content:''; background:url('../img/plus.png')no-repeat center center;height:13px;width:13px;position:absolute;bottom:0px;left:-25px;}


.infolettre-cont{background-color:#ffffff;width:250px;height:400px;position:absolute;top:50%;margin-top:-200px;left:50%;margin-left:-125px;z-index:2;}
.infolettre-cont .close{position:absolute;top:10px;right:10px;width:30px;height:30px;cursor:pointer;}
.infolettre-cont .close img{width:100%;height:auto;}
.infolettre-cont .close:hover{opacity:0.7}
.infolettre-cont h3{margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1.8em; color:#423d3c;text-transform:uppercase;width:275px;margin-top:0px}
.infolettre-cont .infolettre-cont-in{padding:20px 25px 20px 25px;}
.infolettre-cont label{width:100%;float:left;text-transform:uppercase; font-weight:700;font-size:0.9em;}
.infolettre-cont input{border-top:0;border-left:0;border-right:0;width:100%;border-bottom:1px solid #cccccc;float:left;margin-top:0px;}
.infolettre-cont .mc-field-group{margin-top:20px;}

.infolettre-cont .button{margin-top:20px;width:150px;height:38px;float:right;background:url('../img/button.png') no-repeat center center;backgorund-color:none;border:0;color:#ffffff; font-family: 'Merriweather', serif; font-weight:900;cursor:pointer;}
.infolettre-cont .button:hover{opacity:0.7}

.cont-slide{width:450px;position:absolute;bottom:25px;right:25px;}
.cont-slide h1{text-align:right;width:200px;float:right;margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1em; color:#423d3c;text-transform:uppercase;}
.cont-slide p{text-align:right;font-weight:400;clear:both;margin-bottom:10px;display:none;border:1px solid red;}
.cont-slide a{float:right;display:block;}
.cont-slide img.ico{width:100px;height:auto;position:absolute;top:-80px;right:0px;}

.w h1{color:#ffffff;}
header{position:relative;min-height:75%;}

.main-left b img, .main-right b img{position:absolute;top:10px;right:10px;z-index:999999;width:20px;height:20px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
#main .deux:hover b img{right:10px}
#main .trois:hover b img{right:10px}
#main .sept:hover b img{right:10px}
#main .huit:hover b img{right:10px}
#main .neuf:hover b img{right:10px}

#main .deux:hover .in-grid{bottom:35px;position:absolute;}
#main .trois:hover .in-grid{bottom:35px;}
#main .sept:hover .in-grid{bottom:35px;}
#main .huit:hover .in-grid{bottom:35px;}
#main .neuf:hover .in-grid{bottom:35px;}

.main-left i, .main-right i{position:absolute;bottom:25px;right:600px;z-index:999999;}
#main .main-left .deux:hover i, 
#main .main-left .trois:hover i, 
#main .main-right .sept:hover i, 
#main .main-right .huit:hover i, 
#main .main-right .neuf:hover i{right:600px;}
.un, .quatre, .cinq, .six, .dix{  -webkit-filter: grayscale(1); /* Webkit */filter: gray; /* IE6-9 */filter: grayscale(1); /* W3C */opacity:0.9}

.huit:hover span img:first-of-type{opacity:1;display:block;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-88px;right:50%;margin-right:-116px;position:absolute;opacity:1;display:none;}

.un img, 
.quatre img, 
.cinq img, 
.six img, 
.dix img{position:absolute;right:50%;top:50%;margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:0;-o-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;transition:.2s;}
.un:hover img, 
.quatre:hover img, 
.cinq:hover img, 
.six:hover img, 
.dix:hover img{margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:1;}


#ban{height:auto; min-height:auto;display:block;margin-top:70px;padding-bottom:200px;}
#ban .ban-bloc{width:100%;height:auto;min-height:150px;left:0px; padding:30px;overflow:auto;position:relative;top:200px;max-width:inherit;}
#ban h1{ font-size:2em; font-weight:700;padding-left:60px;}
#ban h1::before{content:''; width:75px;height:20px;display:block;position:absolute;left:0;top:36px;}
#ban p{margin-top:20px;}
#ban p strong{font-size:1em;}
#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:5em; color:rgba(255,255,255,0.40);position:absolute;top:175px;bottom:inherit;left:0;right:inherit;}
.ban-img-web{background:url(../img/fond-web.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-design{background:url(../img/fond-design.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-marketing{background:url(../img/fond-marketing.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-prod{background:url(../img/fond-prod.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-agence{background:url(../img/fond-agence.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-video{background:url(../img/fond-video.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-contact{background:url(../img/carte.jpg) no-repeat center bottom ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}

ban-img-vid{max-height:1000px;width:100%;margin-top:140px;position:relative; z-index:99999;overflow:inherit;border:1px solid red;}
.ban-img-vid .ban-bloc{width:100%;height:auto;min-height:250px;left:0px; padding:30px;overflow:auto;position:absolute;top:-200px;margin-top:-200px;}
.vidvid{overflow:hidden;height:200px;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: inherit;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}


.in #main .bloc-1{width:100%;height:300px;}
.in #main .bloc-2{width:100%;height:200px;}
.in #main .bloc-3{width:100%;height:300px;}
.in #main .bloc-4{width:100%;height:300px;margin-top:-0;}
.in #main .bloc-5{width:100%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-6{width:100%;height:300px;margin-top:-0;}
.in #main .bloc-7{width:100%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-8{width:100%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-9{width:100%;height:300px;margin-top:-0;margin-left:0%;}
.in #main .bloc-10{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-11{width:100%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-12{width:51000%;height:200px;margin-top:0;margin-left:0%;display:none;}
.in #main .bloc-13{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-14{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-15{width:100%;height:300px;}

.in #main .bloc-1 .mini-web, 
.in #main .bloc-11 .mini-web,
.in #main .bloc-15 .mini-web{top:25px;bottom:25px; left:25px; right:25px; }

.in #main .bloc-2 img.macbook{width:200px;height:112px;margin-top:-56px;margin-left:-100px;}
.in #main .bloc-4 img.macbook{width:180px;height:190px;margin-top:-95px;margin-left:-90px; }
.in #main .bloc-5 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-7 img.macbook{width:110px;height:auto;margin-left:-100px; bottom:-20px;}
.in #main .bloc-8 img.macbook{width:400px;height:auto;margin-left:-200px; bottom:0%;}
.in #main .bloc-9 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-10 img.macbook{width:180px;height:auto;margin-left:-10px; bottom:-40px;}
.in #main .bloc-12 img.macbook{width:200px;height:84px;margin-top:-42px;margin-left:-100px;}
.in #main .bloc-14 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-5 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-5:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-14 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-14:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-1 .mini-web .scroll-web, 
.in #main .bloc-11 .mini-web .scroll-web,
.in #main .bloc-15 .mini-web .scroll-web{overflow:hidden; }
.in #main .bloc-1:hover .mini-web .scroll-web img, 
.in #main .bloc-11:hover .mini-web .scroll-web img,
.in #main .bloc-15:hover .mini-web .scroll-web img{top:25px;}
.in #main .bloc-1 .mini-web .scroll-web img, 
.in #main .bloc-11 .mini-web .scroll-web img,
.in #main .bloc-15 .mini-web .scroll-web img{width:100%;height:auto;position:absolute;top:25px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}

.clients li{width:50%;height:auto;float:left;}
.clients li:first-child{margin-left:0;}
.clients li:nth-child(8n+1){margin-left:0%;}
.clients li:nth-child(6n+1){margin-left:0%;}
.clients li:nth-child(5n+1){margin-left:0%;}
.clients li:nth-child(3n+1){margin-left:0%;}
.clients li:nth-child(2n+1){margin-left:0%;}

.groupe{height:380px;padding-bottom:1200px;margin-top:-70px;}
.groupe .lea{width:49%;margin-left:0%;margin-bottom:20px;}
.groupe .maxime{width:49%;margin-left:2%;margin-bottom:20px;}
.groupe .steve{width:44%;margin-left:0%;margin-bottom:20px;}
.groupe .annick{width:54%;margin-left:2%;margin-bottom:20px;}
.groupe .nicolas{width:45%; margin-left:0%;margin-bottom:20px;}
.groupe .jean{width:53%;margin-left:2%;margin-bottom:20px;}
.groupe .samuel{width:45%;margin-left:0%;margin-bottom:50px;}
.groupe .hermina{width:46%;margin-left:2%;margin-bottom:50px;}
.groupe span{font-size:0.8em;}

span.bouton a{position:relative;left:-50%; padding:10px 10px 10px 10px;border: 1px solid #ffffff;display:inline-block;text-align:center;font-family: 'Open sans', sans-serif; font-weight:300; color:#ffffff; font-size:1em;text-decoration:none;}

.bigimage{background:url(../img/fond-web.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:block;min-height:200px;width:100%;position:relative;overflow:hidden;}

.etape li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape li:first-child{margin-left:0%;}
.etape li:nth-child(3n+1){margin-left:0%;}
.etape li:nth-child(2n+1){margin-left:0%; clear:both;}
.etape li:nth-child(4),.etape li:nth-child(5){margin-bottom:40px;}
.etape li:nth-child(6){margin-bottom:0px;}


#iframecontainer {overflow:hidden;padding-bottom:50px;height:90px;}
#iframecontainer iframe{margin-top:-250px;height:440px;border:0;}

.bigmac i span img{width:100px; height:100px;position:absolute;margin-left:-50px; left:50%;top:50%;margin-top:-50px; }

.marketing-gallery{width:100%;height:200px;float:left;background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-filter: grayscale(100%);filter: grayscale(100%);cursor:pointer;position:relative;overflow:hidden;}
.marketing-gallery:hover{-webkit-filter: inherit;filter: inherit;}
.marketing-gallery i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;

}

.etape-2{clear:both;}
.etape-2 li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape-2 li h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}
.etape-2 li span{text-align:center;width:130px;height:auto;margin:0 auto 0 auto;display:block;}
.etape-2 li:first-child{margin-left:0%;}
.etape-2 li:nth-child(2n+1){margin-left:0%;clear:both}

}









.bounce{-webkit-animation:bounce 2s infinite;-moz-animation:bounce 2s infinite;animation:bounce 2s infinite;}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-moz-keyframes youpi {
 0%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  
}
@-webkit-keyframes youpi {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes youpi {
  0%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}



.clear{clear:both;}

.overFade{position: relative;display: inline-block;}
.overFade img{display: block;}
.overFade img + img{display: none;position: absolute;top:0; left: 0;}




/*video*/
.video-container {position: relative;padding-bottom: 56.25%;overflow: hidden;}
 
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}





@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
	
		.g{display:none;}
	
	.bigcall{font-size:2.5em;padding:0 20px 0 20px;}
	.bigcall br {display:none;}
	
	#red #main, #whitered #main, #darkred #main{overflow-x:hidden}
.in h6{font-size:1.4em;}

.bloc-1-3{width:100%; margin-left:0%; float:left; margin-top:20px; height:auto;margin-bottom:20px;position:relative;}
.bloc-1-3:first-of-type{margin-left:0;}
.bloc-1-3:nth-of-type(4), .fix, .bloc-1-3:nth-of-type(7){margin-left:0%; clear:none}
.bloc-1-3:nth-of-type(2n+1){margin-left:0%; clear:both}

.groupe{height:410px;padding-bottom:1350px;margin-top:-50px;}
.groupe .mathieu{width:49%;margin-left:0%;margin-bottom:20px;}
.groupe .maxime{width:49%;margin-left:2%;margin-bottom:20px;}
.groupe .steve{width:44%;margin-left:0%;margin-bottom:20px;}
.groupe .annick{width:54%;margin-left:2%;margin-bottom:20px;}
.groupe .nicolas{width:45%; margin-left:0%;margin-bottom:20px;}
.groupe .etienne{width:53%;margin-left:2%;margin-bottom:20px;}
.groupe .jean{width:63%;margin-left:0%;margin-bottom:50px;}

.main-cont{max-width:331px;margin:0 auto 0 auto; padding:25px 0px 50px 0px;position:relative;}
.bloc-1-5{width:150px; margin-left:31px; float:left; height:150px;padding:40px 20px 0 20px; margin-bottom:10px;}
.bloc-1-5:nth-of-type(3){margin-left:0;}
.bloc-1-5:nth-of-type(4){margin-left:31px;}
.bloc-1-5:nth-of-type(5){margin-left:90px;}
.bloc-1-5 h5{font-family: 'Open Sans', serif; font-weight:900;color:#ffffff; font-size:2em;text-align:center; margin-bottom:5px;}
 .bloc-1-5 p{line-height:90%;}
 .bloc-1-5:hover h5{color:#e94640;font-size:2.5em;}
.time{display:none;}	

#darkred #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#darkred #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #72170f;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#72170f; font-size:1.7em;}

#red #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#red #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #d9272e;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#d9272e; font-size:1.7em;}

#whitered #main h3{float:left;left:50%;position:relative; margin-top:50px;margin-bottom:50px;}
#whitered #main h3 span{position:relative;left:-50%; padding:10px 20px 10px 20px;border:5px solid #e94640;display:inline-block;text-align:center;font-family: 'Merriweather', serif; font-weight:700; color:#e94640; font-size:1.7em;}

.wetransfer{right:5px;}
.wetransfer img{width:15px;height:auto;}

.media{width:25px;position:absolute;top:40px;right:-2px;}
.media img{width:80%;}

span.mobi{display:block;top:25px;left:25px;}
.draw-line{position:absolute;top:-200px;right:-200px;z-index:999;width:500px;color:#ffffff;height:300px}
#big-cont span.h1{ font-size:1.2em; top:25px;right:25px; width:350px;line-height:115%;}
.menu{display:none;}
.nav-line{display:none;}


p{font-size:0.8em;}

#main{min-height:100%;position:relative;overflow: visible;}

#main .main-left{width:100%;min-height:200%;top:0;left:0;background-color:#ffffff;position:absolute;display:block;}
#main .main-right{width:100%;min-height:200%;top:350%;right:0;background-color:#ffffff;position:absolute;display:block;}

#main .main-left .un{position:absolute;width:100%;height:25%;top:75%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .cinq{position:absolute;width:100%;height:25%;top:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
#main .main-left .deux{position:absolute;width:100%;height:50%;top:25%;overflow:hidden;left:0%;background-color:#72170f;}
#main .main-left .trois{position:absolute;width:100%;height:50%;background-color:#d9272e;top:100%;left:0;overflow:hidden;}
#main .main-left .quatre{position:absolute;width:100%;height:25%; top:150%;left:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .six{position:absolute;width:100%;height:25%;top:50%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#main .main-right .sept{position:absolute;width:100%;height:50%;top:0%;left:0%;overflow:hidden;background:#423d3c; }
#main .main-right .huit{position:absolute;width:100%;height:50%;background-color:#e94640;top:75%;left:0;overflow:hidden;}
#main .main-right .neuf{position:absolute;width:100%;height:50%;top:150%;left:0%;overflow:hidden;background:#72170f }
#main .main-right .dix{position:absolute;width:100%;height:25%;top:125%;left:0%;overflow:hidden;
 -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.deux:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.deux:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.deux span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.deux span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.trois:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.trois:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.trois span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.trois span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.sept:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.sept:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.sept span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.sept span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.huit:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.huit:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.huit span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.huit span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.neuf:hover span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;width:200px;height:200px;opacity:1;}
.neuf:hover span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;width:200px;height:200px;}
.neuf span img:first-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}
.neuf span img:last-of-type{bottom:70%;margin-bottom:-100px;right:50%;margin-right:-100px;position:absolute;opacity:0;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;width:200px;height:200px;}

.main-left h5::after, .main-right h5::after{content:''; width:40px;height:15px;position:absolute;left:0px;top:8px;background-color:#ffffff;display:none;}
.main-left h5, .main-right h5{margin-left:0;}

span.info-btn{font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:0.8em; color:#423d3c;text-transform:uppercase;position:absolute;bottom:5px;left:50px;cursor:pointer;}
 span.info-btn:hover{color:#72170f;}
 span.info-btn::before{content:''; background:url('../img/plus.png')no-repeat center center;height:13px;width:13px;position:absolute;bottom:0px;left:-25px;}

#big-cont{position:absolute;bottom:25px;left:25px;right:25px;top:0;margin:0;display:block;overflow:scroll;}

.logo{position:absolute;bottom:0;right:25px;height:25px;}
.logo:hover{opacity:0.7;}
.logo img{display:block;width:auto;height:100%;}


.cont-slide{width:450px;position:absolute;bottom:15px;right:25px;}
.cont-slide h1{text-align:right;width:200px;float:right;margin-bottom:10px;position:relative;z-index:999999;font-family: 'Merriweather', serif; font-weight:900; color:rgba(0,0,0,1); font-size:1em; color:#423d3c;text-transform:uppercase;}
.cont-slide p{text-align:right;font-weight:400;clear:both;margin-bottom:10px;display:none;border:1px solid red;}
.cont-slide a{float:right;display:block;}
.cont-slide img.ico{width:100px;height:auto;position:absolute;top:-80px;right:0px;}

.w h1{color:#ffffff;}

.mobile-menu{position:relative;width:300px;height:100%;z-index:9999999;background-color:#e94640;display:none;padding:0 0 0 0 ;}
.mobile-menu ul{padding-top:65px;}
.mobile-menu ul li{font-family:'Open Sans';margin:0px 0px 0px 0px;font-size:0.9em;font-weight:400; border-top:1px solid #D43A00;width:50%;float:left;}
.mobile-menu ul li:last-child, 
.mobile-menu ul li:nth-child(7){border-bottom:1px solid #D43A00}
.mobile-menu ul li:first-child,
 .mobile-menu ul li:nth-child(3), 
 .mobile-menu ul li:nth-child(5), 
 .mobile-menu ul li:nth-child(7){border-right:1px solid #D43A00; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

.mobile-menu ul li a{text-transform:uppercase;text-decoration:none;font-weight:700;color:#ffffff;display:block;position:relative;overflow:hidden;z-index:999999;padding:10px 10px 10px 15px;}
.mobile-menu ul li a:hover{padding:10px 10px 10px 15px;}
.mobile-menu ul li a::before{content:''; background-color:#d9272e;position:absolute;top:0;left:-300px;width:300px;height:30px;z-index:-1;padding:10px 0px 10px 0px;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s;}
.mobile-menu ul li a:hover::before{content:''; background-color:#d9272e;position:absolute;top:0;left:0px;width:300px;height:30px;padding:10px 0px 10px 0px;}

.main-left b img, .main-right b img{position:absolute;top:10px;right:10px;z-index:999999;width:20px;height:20px;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
#main .deux:hover b img{right:10px}
#main .trois:hover b img{right:10px}
#main .sept:hover b img{right:10px}
#main .huit:hover b img{right:10px}
#main .neuf:hover b img{right:10px}

#main .deux:hover .in-grid{bottom:35px;position:absolute;}
#main .trois:hover .in-grid{bottom:35px;}
#main .sept:hover .in-grid{bottom:35px;}
#main .huit:hover .in-grid{bottom:35px;}
#main .neuf:hover .in-grid{bottom:35px;}

.main-left i, 
.main-right i{position:absolute;bottom:25px;right:600px;z-index:999999;}
#main .main-left .deux:hover i, 
#main .main-left .trois:hover i, 
#main .main-right .sept:hover i, 
#main .main-right .huit:hover i, 
#main .main-right .neuf:hover i{right:600px;}
.un, .quatre, .cinq, .six, .dix{  -webkit-filter: grayscale(1); /* Webkit */filter: gray; /* IE6-9 */filter: grayscale(1); /* W3C */opacity:0.9}

.huit:hover span img:first-of-type{opacity:1;display:block;}
.huit:hover span img:last-of-type{bottom:50%;margin-bottom:-88px;right:50%;margin-right:-116px;position:absolute;opacity:1;display:none;}

.un img, 
.quatre img, 
.cinq img, 
.six img, 
.dix img{position:absolute;right:50%;top:50%;margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:0;-o-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;transition:.2s;}
.un:hover img, 
.quatre:hover img, 
.cinq:hover img, 
.six:hover img, 
.dix:hover img{margin-top:-25px; width:50px;height:50px;margin-right:-25px;opacity:1;}



#ban{height:auto; min-height:auto;display:block;margin-top:70px;padding-bottom:200px;}
#ban .ban-bloc{width:100%;height:auto;min-height:150px;left:0px;padding:30px;overflow:auto;position:relative;top:200px;max-width:inherit;}
#ban h1{ font-size:2em; font-weight:700;padding-left:60px;}
#ban h1::before{content:''; width:75px;height:20px;display:block;position:absolute;left:0;top:36px;}
#ban p{margin-top:20px;}
#ban p strong{font-size:1em;}
#ban span{font-family: 'Merriweather', serif; font-weight:900; text-transform:uppercase;font-size:10em; color:rgba(255,255,255,0.40);position:absolute;top:165px;bottom:inherit;left:0px;right:inherit;}
.ban-img-web{background:url(../img/fond-web.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}

.ban-img-design{background:url(../img/fond-design.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-marketing{background:url(../img/fond-marketing.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-prod{background:url(../img/fond-prod.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-agence{background:url(../img/fond-agence.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-video{background:url(../img/fond-video.jpg) no-repeat center top ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}
.ban-img-contact{background:url(../img/carte.jpg) no-repeat center bottom ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:300px;width:100%;margin-top:140px;position:relative; z-index:99999;}


ban-img-vid{max-height:1000px;width:100%;margin-top:140px;position:relative; z-index:99999;overflow:inherit;border:1px solid red;}
.ban-img-vid .ban-bloc{width:100%;height:auto;min-height:250px;left:0px; padding:30px;overflow:auto;position:absolute;top:-200px;margin-top:-200px;}
.vidvid{overflow:hidden;height:200px;}
video#bgvid {position: relative; margin:0;padding:0;min-width: 100%; min-height: inherit;width: auto; height: auto; background: url(../video/demo.jpg) no-repeat;background-size: cover;z-index:1;position:relative;}


.in #main .bloc-1{width:100%;height:300px;}
.in #main .bloc-2{width:100%;height:200px;}
.in #main .bloc-3{width:100%;height:300px;}
.in #main .bloc-4{width:100%;height:300px;margin-top:-0;}
.in #main .bloc-5{width:100%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-6{width:100%;height:300px;margin-top:-0;}
.in #main .bloc-7{width:100%;height:200px;margin-top:-0;margin-left:0%;}
.in #main .bloc-8{width:100%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-9{width:100%;height:300px;margin-top:-0;margin-left:0%;}
.in #main .bloc-10{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-11{width:100%;height:300px;margin-top:0;margin-left:0%;}
.in #main .bloc-12{width:51000%;height:200px;margin-top:0;margin-left:0%;display:none;}
.in #main .bloc-13{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-14{width:100%;height:200px;margin-top:0;margin-left:0%;}
.in #main .bloc-15{width:100%;height:300px;}

.in #main .bloc-1 .mini-web, .in #main .bloc-11 .mini-web, .in #main .bloc-15 .mini-web{top:25px;bottom:25px; left:25px; right:25px; }

.in #main .bloc-2 img.macbook{width:200px;height:112px;margin-top:-56px;margin-left:-100px;}
.in #main .bloc-4 img.macbook{width:180px;height:190px;margin-top:-95px;margin-left:-90px; }
.in #main .bloc-5 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-7 img.macbook{width:110px;height:auto;margin-left:-100px; bottom:-20px;}
.in #main .bloc-8 img.macbook{width:400px;height:auto;margin-left:-200px; bottom:0%;}
.in #main .bloc-9 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-10 img.macbook{width:180px;height:auto;margin-left:-10px; bottom:-40px;}
.in #main .bloc-12 img.macbook{width:200px;height:84px;margin-top:-42px;margin-left:-100px;}
.in #main .bloc-14 img.macbook{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-5 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-5:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-9:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px; }
.in #main .bloc-14 img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}
.in #main .bloc-14:hover img.macbook-over{width:200px;height:122px;margin-top:-66px;margin-left:-100px;}

.in #main .bloc-1 .mini-web .scroll-web, 
.in #main .bloc-11 .mini-web .scroll-web,
.in #main .bloc-15 .mini-web .scroll-web{overflow:hidden; }
.in #main .bloc-1:hover .mini-web .scroll-web img, 
.in #main .bloc-11:hover .mini-web .scroll-web img,
.in #main .bloc-15:hover .mini-web .scroll-web img{top:25px;}
.in #main .bloc-1 .mini-web .scroll-web img, 
.in #main .bloc-11 .mini-web .scroll-web img,
.in #main .bloc-15 .mini-web .scroll-web img{width:100%;height:auto;position:absolute;top:25px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}


span.bouton a{position:relative;left:-50%; padding:10px 10px 10px 10px;border: 3px solid #ffffff;display:inline-block;text-align:center;font-family: 'Open sans', sans-serif; font-weight:300; color:#ffffff; font-size:1.5em;text-decoration:none;}

.etape li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape li:first-child{margin-left:0%;}
.etape li:nth-child(3n+1){margin-left:0%;}
.etape li:nth-child(2n+1){margin-left:0%; clear:both;}
.etape li:nth-child(4), .etape li:nth-child(5){margin-bottom:40px;}
.etape li:nth-child(6){margin-bottom:0px;}

#iframecontainer {overflow:hidden;padding-bottom:50px;height:90px;}
#iframecontainer iframe{margin-top:-250px;height:440px;border:0;}

.cont-slide .ico{display:none;}

.clients li{width:33.3333333333333%;height:auto;float:left;}
.clients li:first-child{margin-left:0;}
.clients li:nth-child(8n+1){margin-left:0%;}
.clients li:nth-child(6n+1){margin-left:0%;}
.clients li:nth-child(5n+1){margin-left:0%;}
.clients li:nth-child(3n+1){margin-left:0;}

.bigimage{background:url(../img/fond-web.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:block;min-height:300px;width:100%;position:relative;overflow:hidden;}

.bigmac i span img{width:100px; height:100px;position:absolute;margin-left:-50px; left:50%;top:50%;margin-top:-50px; }

.marketing-gallery{width:100%;height:300px;float:left;background:url(../img/fond-web.jpg) no-repeat center center ; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-filter: grayscale(100%);filter: grayscale(100%);cursor:pointer;position:relative;overflow:hidden;}
.marketing-gallery:hover{-webkit-filter: inherit;filter: inherit;}
.marketing-gallery i{width:150px;height:auto; position:absolute; top:50%;margin-top:-50px; margin-left:-75px;left:50%;z-index:99999999999999;

}

.etape-2{clear:both;}
.etape-2 li {width:100%; margin-left:0%;float:none;margin-bottom:40px;text-align:justify;}
.etape-2 li h4{font-family: 'Open sans', serif; font-weight:300; color:#d9272e; font-size:1.5em;text-transform:uppercase;margin-bottom:20px;text-align:center;}
.etape-2 li span{text-align:center;width:130px;height:auto;margin:0 auto 0 auto;display:block;}
.etape-2 li:first-child{margin-left:0%;}
.etape-2 li:nth-child(2n+1){margin-left:0%;clear:both}
	
	}
</pre></body></html>