/*** CSS MARMITE ****/

/**** Color refs ****

BLEU
> Dark   : 331c7c
> Medium : 4e30ac
> Light  : 836ad3

ORANGE
> Dark   :
> Medium : ff664d
> Light  :

**********************/

/************FONT***************/

@font-face {
 font-family: "Mohave";
 src: url("../fonts/mohave/woff2/Mohave-Light.woff2") format("woff2"),
        url("../fonts/mohave/woff/Mohave-Light.woff") format("woff");
  font-weight:300;
}

@font-face {
 font-family: "Mohave";
 src: url("../fonts/mohave/woff2/Mohave-Regular.woff2") format("woff2"),
        url("../fonts/mohave/woff/Mohave-Regular.woff") format("woff");
  font-weight:400;
}

@font-face {
 font-family: "Mohave";
 src: url("../fonts/mohave/woff2/Mohave-Medium.woff2") format("woff2"),
        url("../fonts/mohave/woff/Mohave-Medium.woff") format("woff");
  font-weight:500;
}

@font-face {
 font-family: "Mohave";
 src: url("../fonts/mohave/woff2/Mohave-Bold.woff2") format("woff2"),
        url("../fonts/mohave/woff/Mohave-Bold.woff") format("woff");
  font-weight:600;
}



/***********BANNER HOME*****************/


#banner{
  background:#4e30ac;
  padding:1px 0 1px;
  height:100vh;
  width:100%;
  margin:0 0 0;
  position:relative;
}

.logo_viewport{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:hidden;
}



#banner .inner{
  background:transparent;
  padding:0;
  overflow: hidden;
}

#logobanner{
  width:33.33333vh;
  height:100%;
  left:50%;
  margin-left:-16.6666666vh;
  bottom:33.33333%;
  position:absolute;
}

.logoclick{
  height:23.5%;  
  left:5vh;
  right:5vh;
  bottom:5%;
  border-radius: 50%;
  position:absolute;
  z-index:1000;
  cursor: pointer;
}

#marmite_anim_viewport{
  position:absolute;
  width:100%;
  height:100%;
  top:0%;
  left:0%;
  overflow: hidden;
}

#marmiteAnim{
  background:#4e30ac url(../../images/background_home_mono.png) center center no-repeat;
  background-size:100% auto;
  width:1800px;
  height:925px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-900px;
  margin-top:-490px; /*-28px*/
  opacity:0;
  transition:1s;
}

#marmiteAnim:before{
  content:'';
  background:#4e30ac url(../../images/background_home_mono_vertical.png) center center no-repeat;
  background-size:100% auto;
  display:none;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:111.243243243%;
}

.logoloaded #marmiteAnim{
  opacity:1;
}

.marmiteAnimItem{
  width:16.23751970%;
  position:absolute;
}

#animhome_eshop{
  left:27.6%;
  top:14.99%;
}

#animhome_marmite{
  width:15.22222222%;
  left:56.18%;
  top:19.7%;
}

#animhome_livre{
  width:17.5%;
  left:55.8%;
  top:47.2%;
}

#animhome_illus{
  left:25.9%;
  top:52%;
}

#animhome_affiche{
  width:70%;
  left:15.75%;
  top:26.9%;
}



/************HEADER******************/

#header{
  padding:0;
  background:transparent;
  box-shadow:none;
}

#header.reveal{
  animation:none;
}

#header #logo a{
  background:transparent url(../../images/marmite_minilogo_blanc.svg) no-repeat;
  width:100px;
  height:100px;
  background-size:100% 100%;
  margin:0 auto;
  display:block;
  opacity:1;
  transition: 0.3s;
  position:relative;
  z-index:1;
}

#header nav{
  color:#4e30ac;
  position:initial;
  margin:-100px auto 0;
  text-align:center;
  width:auto;
  height:100px;
  top:initial;
  right:initial;
  background:#fff;
  transition:0.1s;
  font-size:12pt;
}

.blue #header nav{
  background:#4e30ac;
  color:#fff;
}

.blue #header #logo a{
  background:transparent url(../../images/marmite_minilogo_bleu.svg) no-repeat;
}

.orange #header nav{
  background:#ff664d;
  color:#fff;
  transition:0.3s;
}

.orange #header #logo a{
  background:transparent url(../../images/marmite_minilogo_orange.svg) no-repeat;
}

.orange #header nav ul:first-child li:after,
.orange #header nav ul:last-child li:before{
  background:#4e30ac;
}

.transparent #header nav{
  background:transparent;
  color:#fff;
  transition:0.3s;
}

.transparent #header #logo a{
  background:transparent url(../../images/marmite_minilogo_bleu.svg) no-repeat;
}

.transparent.bis #header #logo a{
  background:transparent url(../../images/marmite_minilogo_orange.svg) no-repeat;
}

.transparent.bisbis #header #logo a{
  background:transparent url(../../images/marmite_minilogo_blanc.svg) no-repeat;
}

.transparent.bisbis #header nav{
  color:#4e30ac;
  transition:0.3s;
}
  

.transparent #header nav ul:first-child li:after,
.transparent #header nav ul:last-child li:before{
  background:#ff664d;
}

.transparent.bis #header nav ul:first-child li:after,
.transparent.bis #header nav ul:last-child li:before{
  background:#4e30ac;
}

.transparent.scrolled #header nav{
  background:#fff;
  color:#4e30ac;
}

.transparent.scrolled #header #logo a{
  background:transparent url(../../images/marmite_minilogo_blanc.svg) no-repeat;
}

.blue.transparent.scrolled #header nav{
  background:#4e30ac;
  color:#fff;
}

.blue.transparent.scrolled #header #logo a{
  background:transparent url(../../images/marmite_minilogo_bleu.svg) no-repeat;
}

.blue.scrolled #header nav{
  background:#4e30ac;
  color:#fff;
}

.blue.scrolled #header #logo a{
  background:transparent url(../../images/marmite_minilogo_bleu.svg) no-repeat;
}

.blue.scrolled #header nav ul:first-child li:after,
.blue.scrolled #header nav ul:last-child li:before{
  background:#ff664d;
}

.orange.transparent.scrolled #header nav{
  background:#ff664d;
  color:#fff;
}

.orange.transparent.scrolled #header #logo a{
  background:transparent url(../../images/marmite_minilogo_orange.svg) no-repeat;
}

.orange.transparent.scrolled #header nav ul:first-child li:after,
.orange.transparent.scrolled #header nav ul:last-child li:before{
  background:#4e30ac;
}

#header nav ul{
  width:calc(50% - 52px);
  float:left;
  text-align:right;
  margin:0;
  transition:0.3s;
}

#header nav ul:last-child{
  float:right;
  text-align:left;
}

#header nav ul li{
  line-height:100px;
  margin:0;
  font-family:'Mohave';
  font-size:1.1em;
  font-weight:400;
}

#header nav ul:first-child li:after,
#header nav ul:last-child li:before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  margin-bottom:4px;
  background:#ff664d;
  border-radius:50%;
}

#header nav ul li.current a{
  border:3px solid;
  font-weight:400;
  margin:0 10px;
}

#header.alt{
  padding:0;
  top:80vh;
  background:transparent;
}

#header.alt nav{
  top:initial;
  right:initial;
  color:#fff;
  background:transparent;
  opacity:0;
}

.logoloaded #header.alt nav{
  opacity:1;
}

#header.alt #logo a{
  opacity:0;
  pointer-events: none;
}

#header.alt nav ul{
  width:50%;
}

#header.alt nav ul:first-child li:last-child:after,
#header.alt nav ul:last-child li:first-child:before{
  width:3px;
  border-radius:0 3px 3px 0;
}

#header.alt nav ul:first-child li:last-child:after{
  border-radius: 3px 0 0 3px;
}


#header nav ul li > a:hover {
	background: rgba(220,220,220, 0.25);
}




/************PAGE*******************/
#main{
  background:none;
  padding:0;
}

body.index #main{
  padding:0;
}

em{
  font-style:italic;
}

article > header h1{
  font-family:'Mohave';
  font-size:2.5em;
  letter-spacing: 5px;
  font-weight:600;
  color:#fff;
  text-shadow:5px 5px 0 #ff664d;
  margin:0;
}

article header > h2{
  font-family:'Mohave';
  font-size:1.6em;
  letter-spacing: 1px;
  font-weight:500;
  color:#4e30ac;
  /*text-shadow:3px 3px 0 rgba(255, 102, 77, 1);*/
  margin:0 auto;
  max-width:1260px;
}


  #header{
    position:absolute;
  }
  
  .index #header{
    position:fixed;
  }
  
  .index #header.alt{
    position:absolute;
  }



/**************FOOTER*********************/

#footer{
  background:#4e30ac;
  color:#fff;
  padding-bottom:5em;
  font-size:15pt;
}

.footer_block{
  float:left;
  width:33%;
}

.footer_block h2{
  font-family: 'Mohave';
  font-size:1.2em;
  font-weight:400;
  letter-spacing: normal;
}

.footer_block h2 span{
  display:block;
  font-family: 'Lato', sans-serif;
  font-size:0.7em;
  line-height:normal;
  text-transform: none;
  font-weight:300;
  font-style:italic;
}


.footer_nav ul{
  text-align: left;
  border-left:#ff664d solid 3px;
  display:inline-block;
  padding:0 15px;
}

.footer_nav li{
  padding:0;
  margin:0;
  line-height:1.3em;
}

.footer_nav li a{
  color:#fff;
  border:none;
  font-size:0.8em;
}

.footer_contact a{
  display:inline-block;
  color:#fff;
  font-family:'Mohave';
  text-transform:uppercase;
  border:none;
  font-weight:400;
  font-size:0.9em;
}

.footer_contact .contact_icon{
  margin:-10px auto 0px;
  background:transparent url(../../images/icones/enveloppe.gif) left -10px no-repeat;
  background-size:auto 100%;
  width:80px;
  height:80px;
}

.footer_contact a:hover .contact_icon{
  background-position:right center;
}

.footer_social li{
  display:inline-block;
  margin:0 10px;
  padding: 0;
}

.footer_social li a{
  color:#fff;
  border:none;
  font-size:1.3em;
}

.footer_social li a:hover{
  color:#ff664d;
}

.footer_social ul{
  padding:15px;
  margin:0;
  display:inline-block;
  border: dotted 3px;
}

#footer .copyright{
  clear:both;
  opacity:0.8;
  font-size:0.7em;
  padding:50px 30px 0;
}

#footer .credits{
  font-size:0.8em;
  padding:0 30px 0;
  text-align:center;
}


/*************HOME************************/

/*************A PROPOS********************/

.apropos{
  background:#e6e6e6;
  color:#4e30ac;
  text-align:center;
  padding-bottom:0;
}

.apropos h2, .apropos h3{
  font-family: 'Mohave';
  color:#4e30ac;
  font-weight:500;
  text-align: center;
  font-size:2em;
}

.apropos h3{
  background: #e6e6e6;
  margin:-25px -25px 25px;
  font-size:2em;
  color:#ff664d;
  text-shadow: 0.1em 0.1em 0 #fff;
  display:none;
}


.apropos >.container{
  max-width:1200px;
  position:relative;
}

.margaux, .benjamin{
  position: relative;
  width:28%;
  background:#fff;
  padding:25px;
  float:left;
  text-align: left;
  margin-bottom:100px;
  z-index:2;
}

.benjamin{
  float:right;
}

.margaux:before, .benjamin:before{
  content:'';
  display:block;
  position:absolute;
  width:1px;
  height:1px;
  top:125px;
  right:-39px;
  border:#fff solid 20px;
  border-color:transparent transparent transparent #fff;
}

.benjamin:before{
  right:initial;
  left:-39px;
  border-color:transparent #fff transparent transparent;
}

.margaux p, .benjamin p{
  font-style: italic;
  font-size:0.9em;
  line-height: normal;
}

.margaux ul, .benjamin ul{
  margin:0 0 0 25px;
}

.margaux li, .benjamin li{
  list-style: none;
  font-size:0.85em;
  font-family:'Mohave';
  text-transform: uppercase;
  font-weight:400;
}

.margaux li:before, .benjamin li:before{
  content:'+ ';
  margin-left:-15px;
  margin-right:5px;
  display:inline-block;
}

.apropos img{
  display:block;
  position:absolute;
  margin-top:150px;
  width:55%;
  left:23%;
  bottom:0;
  z-index:1;
}

.apropos .container:after{
  content:'';
  display:block;
  clear:both;
}


/************PORTFOLIO********************/

#main.portfolio{
  font-size:15pt;
}

#main.portfolio .wrapper{
  padding:80px 0 160px;
  width:1250px;
  background:transparent;
}

#main.portfolio > header{
  background:#4e30ac;
  margin:0 auto 30px;
  padding:120px 0 0px;
  width:100% !important;
}

#main.portfolio h1 > span:before{
  content:'//';
}

#main.portfolio .taglist{
  padding:0 0 25px;
}

#main.portfolio .taglist a{
  color:#836ad3;
  font-size:0.9em;
  line-height:1.5em;
  text-transform: uppercase;
  border:none;
  display:inline-block;
  padding:0 5px;
  font-weight:300;
  font-family:'Mohave';
}
#main.portfolio .taglist a:hover{
  color:#ff664d;
}

#main.portfolio .taglist a.active{
  border:3px solid;
  color:#4e30ac;
  font-weight:600;
}

.portfolio_item{
  display:block;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  padding:0px;
  position:relative;
  border:none;
  margin:0px;
}

.portfolio_item_logo{
  position:absolute;
  left:50px;
  right:50px;
  top:50px;
  bottom:50px;
  margin:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}

.portfolio_item header{
  background:#4e30ac;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:0 30px;
  height:0%;
  overflow:hidden;
  transition: 0.2s;
  color:#fff;
  font-size:0.8em;
  line-height:1.5em;
}

.portfolio_item:hover header{
  height:60%;
}

.portfolio_item header h2,
.portfolio_item header h3{
  color:#fff;
  font-family: 'Mohave';
  font-weight:400;
  font-size:1.4em;
  line-height:normal;
  padding:30px 0 10px;
  margin:0;
}

.portfolio_tags_min{
  margin:0;
  padding:5px 0 10px;
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.portfolio_tags_min li{
  display:inline-block;
  margin:2px;
  padding:0;
}

.portfolio_tags_min li > div{
  width:33px;
  height:33px;
  background-size:contain;
  *background-color: rgba(0,0,0,0.3);
}

.portfolio_tags_min li > span{
  display:none;
}

.portfolio .row{
  margin:0;
}

.portfolio .row > *{
  padding:3px;
  width:20%;
}

.portfolio_item:before{
  padding:calc(200% + (3px * 2 * 2)) 0 0;
  display:block;
  content:'';
}

.portfolio .row > div:first-child{
  width:40%;
}

.portfolio .row > div:first-child .portfolio_item:before{
  padding-top:calc(100% + (3px * 2 * 1));
}

/************PORTFOLIO SHORT**************/

.portfolio_short{
  margin:0;
  padding:100px 50px;
  width:100%;
}

.portfolio_short h2{
  font-size:2em;
}

.portfolio_short > div{
  padding:3px;
  max-width:250px;
  width:20%;
  display:inline-block;
}

.portfolio_item_next{
  background:#ff664d;
}

.portfolio_item_next > div{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.portfolio_item_next h3{
  font-family:'Mohave';
  font-size:1.5em;
  font-weight:500;
  line-height:1em;
  border:6px solid;
  width:80%;
  height:auto;
  padding:20px;
  color:#fff;
  
  margin:0;
}

.portfolio_item_next h3:after{
  content:'⇢';
  display:block;
  font-size:2.5em;
  overflow:hidden;
  height:0;
  transition: 0.3s;
}

.portfolio_item_next:hover{
  background:#4e30ac;
}

.portfolio_item_next:hover h3:after{
  height:35px;
}

/************PORTFOLIO PAGE***************/


#main .portfolio_header{
  width:100% !important;
  position:relative;
  padding:0;
  margin:0 auto;
}

#main header.portfolio_header:before{
  content:'';
  background:linear-gradient(180deg, rgba(78,48,172,0.5) 0%, rgba(78,48,172,0) 100%);
  display:none;
  position:absolute;
  top:0;
  bottom:50%;
  left:0;
  right:0;
  width:auto;
  height:auto;
  opacity: 1;
  border:none;
  z-index:1;
}

#main header.portfolio_header:after{
  display:none;
}

.portfolio_bg{
  width:100%;
  position:relative;
  padding:calc(12.5vh + 100px) 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.portfolio_logo{
  height:25vh;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index:2;
  position:relative;
}

.portfolio_headings{
  background:#f3f6fa;
  margin-top:-100px;
  position:relative;
}

.portfolio_headings h2{
  font-family:'Mohave';
  color:#4e30ac;
  font-weight:400;
  letter-spacing: 0.0em;
  font-size:2em;
  line-height:2em;
  padding-bottom:0px;
}

/*.portfolio_headings h2:after{
  content:'';
  display:block;
  margin:0 auto;
  width:150px;
  border-bottom:2px solid #836ad3;
}*/

.portfolio_tags{
  margin:10px 0 35px;
}

.portfolio_tags a{
  display:inline-block;
  margin:0 5px 0;
  min-width:100px;
  border:none;
}

.portfolio_tags a div{
  width:50px;
  height:50px;
  margin: 5px auto 15px;
  background-size: contain;
}

.portfolio_tags a span{
  background:#fff;
  display:block;
  font-size:0.8em;
  line-height:1.6em;
  padding:0 7px 1px;
  text-transform: uppercase;
  letter-spacing: 0;
  color:#836ad3;
  font-weight:300;
  font-family:'Mohave';
}
.portfolio_url{
  height:37px;
  margin-top:-20px;
}

.portfolio_url a{
  background:#4e30ac;
  color:#fff;
  padding:0 20px 4px;
  line-height:40px;
  display:inline-block;
  font-size:0.8em;
  margin-top:15px;
  border:none;
}

.portfolio_url a .fa{
  margin-left:10px;
  margin-top:14px;
  display:block;
  float:right;
}

.portfolio_url a:hover{
  background: #ff664d;
}

.portfolio-page .wrapper{
  padding:80px;
}

.portfolio-page .content h2,
.portfolio-page .content h3{
  font-family:'Mohave';
  color:#4e30ac;
  font-weight:400;
  letter-spacing: 1px;
  
}

.portfolio-page .content p{
  margin-bottom:80px;
  color:#4e30ac;
}

.portfolio-page .content p + ul {
  margin-top: -60px;
}

.portfolio-page .content ul {
  color:#4e30ac;
  padding:0 10%;
}

.portfolio-page .content ul li {
  text-align: left;
  list-style: initial;
}

.portfolio-page .content blockquote{
  margin:0 -80px;
  padding:0;
  border:none;
}

.portfolio-page .content blockquote:after{
  content:'';
  display:block;
  clear:both;
}

.portfolio-page .content blockquote img,
.portfolio-page .content blockquote video{
  float:left;
  margin:0;
}

.portfolio-page .content img{
  max-width:100%;
  height:auto;
  margin:80px 0 0;
  display:block;
}

.portfolio-page .content .half{
  max-width:50%;
  float:left;
}

.portfolio-page .content .third{
  max-width:33.333333333%;
  float:left;
}

.portfolio-page .content .quarter{
  max-width:25%;
  float:left;
}

.portfolio-page .content .spaced{
  padding: 0 1rem;
}

.portfolio-page .content video{
  max-width:100%;
}

.portfolio-page .content video.portrait{
  width:100%;
  max-width:500px;
}

.portfolio-page footer{
  margin-top:80px;
}

.portfolio-page footer a{
  display:inline-block;
  padding:15px 25px;
  text-transform: uppercase;
  font: 500 1.2em 'Mohave';
  color:#4e30ac;
  border:3px solid;
  margin-left:15px;
}

.portfolio-page footer a:hover{
  border:3px solid;
}

.portfolio-page footer a:after{
  content:'⇢';
  display:inline-block;
  font-size:2.5em;
  line-height:10px;
  height:20px;
  margin-left:5px;
  overflow:hidden;
  width:0px;
  transition: 0.3s;
}


.portfolio-page footer a:hover:after{
  width:50px;
}


/***********SERVICES******************/

#main.services{
  font-size:15pt;
  background: #ff664d;
}

#main.services > header{
  margin: 0 auto 0px;
  padding: 120px 0 0px;
  width: 100%;
}

article.services > header h1{
  text-shadow:5px 5px 0 #4e30ac;
}

.wrapper.service_list{
  margin:0;
  width:100%;
  color:#fff;
  text-align: center;
  padding:50px 0 80px;
  font-weight:300;
  background: #ff664d;
  position:relative;
}

.wrapper.service_list .container{
  max-width:900px;
}

.wrapper.service_list ul{
  background:#ff664d;
  margin:0;
  position:absolute;
  line-height:70px;
  bottom:0;
  left:0;
  right:0;
  z-index:999;
}

.service_scroll .wrapper.service_list ul{
  position:fixed;
  bottom:initial;
  top:0;
  left:0;
  right:0;
}

.wrapper.service_list li{
  display: inline-block;
}

.wrapper.service_list p{
  font-size:1em;
  padding-left:30px;
  padding-right:30px;
}

.wrapper.service_list a{
  color:rgba(255,255,255,0.8);
  font-size:0.9em;
  line-height:1.5em;
  text-transform: uppercase;
  border:none;
  display:block;
  padding:0 5px;
  font-weight:300;
  font-family:'Mohave';
  transition: 0.2s;
}

.wrapper.service_list a:hover{
  color:#fff;
}

.wrapper.service_list li:first-child a{
  border: solid 3px;
  color:#fff;
  font-weight:400;
}


/***********SERVICE-PAGE**************/

.wrapper.service{
  margin:0;
  width:100%;
  color:#fff;
  text-align: right;
  padding:150px 0;
  font-weight:300;
}

.wrapper.service:after,
.service .container:after{
  display: block;
  content:'';
  clear:both;
}

.service .container{
  position:relative;
}

.service .motion{
  max-width:45%;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
}

.service .flex_column{
  width:45%;
  padding:50px 0;
  display:flex;
  flex-direction:column;
  justify-content: center;
  float:left;
}

.service header{
}

.service article{
  text-align:left;
  font-style: italic;
}

.service h2{
  text-align:center;
  font-size:2.5em;
  color:#fff;
  letter-spacing: 1.3px;
}

.service h2 .solid{
  display:inline-block;
  border:solid 5px;
  padding:0 30px;
}

.service h2 .dot{
  display:inline-block;
  border:dotted 5px;
  padding:0 30px;
}

.service h2 .small{
  font-size:0.8em;
  font-weight:400;
  text-shadow: none;
}

.service h2 .big{
  font-size:2.5em;
  line-height: 1.3em;
  text-shadow:0.12em 0.12em 0 #4e30ac;
  border-width:15px;
}

.service h2 .color{
  color:#4e30ac;
  text-shadow:0.1em 0.1em 0 #fff;
}

.service h2 .big.color{
  text-shadow:0.12em 0.12em 0 #fff;
}

.service h2 .bottom{
  border-left-width:0;
  border-right-width:0;
  border-top-width:0;
  padding:0;
}

.service ul{
  text-align:center;
  display:flex;
  flex-direction: row;
  justify-content:center;
  align-items: stretch;
}

.service ul li{
  background:;
  display:block;
  margin:0 15px;
  padding:30px;
  max-width:280px;
}

.service_list svg{
  width:70px;
}



.service_list h3{
  letter-spacing: normal;
  font-weight:500;
  font-size:1em;
  line-height: 1em;
  font-family:'Mohave';
  border-bottom: 3px solid;
  padding:10px 0;
  margin:15px 0;
  min-height:65px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.service_list p{
  font-size:0.8em;
  line-height:normal;
  padding:5px;
}



.service_cta{
  background:#4e30ac;
  display:inline-block;
  padding:15px 25px;
  text-transform: uppercase;
  font: 300 1.5em 'Mohave';
  color:#fff;
  box-shadow: 5px 5px 0 #fff;
}

.service footer{
  text-align: center;
}

.portfolio_link{
  display:inline-block;
  padding:15px 25px;
  text-transform: uppercase;
  font: 500 1.2em 'Mohave';
  color:#fff;
  border:3px solid;
  margin-left:15px;
}

.portfolio_link:hover{
  border:3px solid;
}

.portfolio_link:after{
  content:'⇢';
  display:inline-block;
  font-size:2.5em;
  line-height:10px;
  height:20px;
  margin-left:5px;
  overflow:hidden;
  width:0px;
  transition: 0.3s;
}


.portfolio_link:hover:after{
  width:50px;
}

/****alternance***/

.wrapper.service:nth-child(2n){
  text-align: left;
}

.service:nth-child(2n) .motion{
  right:initial;
  left:0;
}

.service:nth-child(2n) .flex_column{
  
  float:right;
}

/****couleurs****/

.service.orange{
  background:#ff664d;
}

.service.orange h2{
  text-shadow:0.1em 0.1em 0 #4e30ac;
}

.service.orange .service_list svg *{
  stroke:#4e30ac;
}

.service.blue{
  background:#4e30ac;
}

.service.blue h2{
  text-shadow:0.1em 0.1em 0 #ff664d;
}

.service.blue h2 .big{
  text-shadow:0.12em 0.12em 0 #ff664d;
}

.service.blue h2 .color{
  color:#ff664d;
}

.service.blue h2 .big.color{
  text-shadow:0.12em 0.12em 0 #fff;
}

.service.blue .service_list svg *{
  stroke:#ff664d;
}

.service.blue .service_cta{
  background:#ff664d;
}

.service.blue .portfolio_link{
}

.service.white{
  background:#eee;
  color:#4e30ac;
}

.service.white h2{
  color:#4e30ac;
  text-shadow:0.1em 0.1em 0 #ff664d;
}

.service.white h2 .big{
  text-shadow:0.12em 0.12em 0 #ff664d;
}

.service.white h2 .big.color{
  text-shadow:0.12em 0.12em 0 #fff;
}

.service.white h2 .color{
  color:#ff664d;
}

.service.white .service_list h3{
  *border-color:#ff664d;
}

.service.white .service_list svg *{
  stroke:#ff664d;
}

.service.white .service_cta{
  box-shadow:5px 5px 0 #ff664d;
}

.service.white .portfolio_link{
  color:#4e30ac;
}

/****special******/

#_image-de-marque .container:first-child{
  max-width:1200px;
}

#_image-de-marque .flex_column{
  width:55%;
}

#_image-de-marque h2 .solid{
  border-bottom-width:10px;
}

#_plateforme-de-e-commerce .container:first-child{
  max-width:1000px;
}

#_plateforme-de-e-commerce h2 .big{
  position:relative;
  font-size:2em;
  text-shadow:0.1em 0.1em 0 #ff664d;
}

#_plateforme-de-e-commerce h2 .big:before,
#_plateforme-de-e-commerce h2 .big:after{
  content:'';
  position:absolute;
  border:solid 7.5px #fff;
  height:45px;
  top:100%;
  left:15%;
}

#_plateforme-de-e-commerce h2 .big:after{
  left:initial;
  right:15%;
}

#_design-graphique .container:first-child{
  max-width:1000px;
}

#_design-graphique h2 .dot{
  border-color:#4e30ac;
}

#_campagne-promotionnelle h2 .bottom{
  border-style: dotted;
  border-bottom-width:5px;
}

#_site-vitrine .container:first-child{
  max-width:1200px;
}

#_site-vitrine h2 .solid{
  font-size:1.6em;
  border-color:#ff664d;
  padding:10px 30px;
}

#_illustration .container:first-child{
  max-width: 1200px;
}

#_illustration .flex_column{
  width:55%;
}

#_illustration h2 .dot{
  font-size:1.2em;
}

/*****************CONTACT********************/

.contact #main{
  background:#4e30ac;
  /*background:#4e30ac url(../../images/motif_2.jpg) center 100px;*/
  background-size:500px auto;
}

.contact #main > header {
  color:#fff;
}

.contact #main h1{
  margin-top:15px;
  letter-spacing: 2px;
}

.contact #main h2{
  color:#fff;
  font-size:6em;
  text-shadow:7px 7px 0 #ff664d;
  font-weight:600;
  letter-spacing: 5px;
  padding-top:100px;
}

.contact #main >section{
  background:none;
  max-width:800px;
  padding-top:0;
  color:#fff;
}

.contact #main .content > p {
  font-size: 0.85em;
} 

.contact #main .content > p a{
  color:#fff;
  margin-left:5px;
  border-bottom:1px solid;
  padding:2px 0;
} 

.contact #main .content form input[type="text"],
.contact #main .content form textarea{
  border:#fff solid 3px;
  color:#fff;
  padding:12px;
  font-size:0.9em;
}

.contact #main .content form input[type="text"]{
  border-color:#836ad3;
}

.contact #main .content form input[type="text"]:focus,
.contact #main .content form textarea:focus{
  border-style:dashed;
}

.contact #main .content form input[type=text]:-moz-ui-invalid,
.contact #main .content form textarea:-moz-ui-invalid,
.contact #main .content form input[type=text]:invalid:out-of-range,
.contact #main .content form textarea:invalid:out-of-range{
  border-color:#ff664d;
  box-shadow: none;
}

.contact #main .content form .button{
  background:#fff;
  color:#4e30ac;
  border:none;
  font-family:'Mohave';
  font-size:1.2em;
  line-height: 2.5em;
  letter-spacing: 1px;
  min-width:10em;
  transition:0.1s;
}

.contact #main .content form .button:after{
  content:'⇢';
  display:inline-block;
  font-size:2.5em;
  line-height:10px;
  height:20px;
  margin-left:5px;
  overflow:hidden;
  width:0px;
  transition: 0.3s;
}

.contact #main .content form .button:hover:after{
  width:50px;
}





/************************************RESPONSIVE******************************/

@media screen and (max-width:1680px){
  
  .apropos{
    padding-left:0;
    padding-right:0;
  }
  
  #marmiteAnim{
    width:1500px;
    height:771px;
    margin-left:-750px;
    margin-top:-410px;
  }
  
  .portfolio_short > div {
    width: 20%;
    display: block;
    float:left;
  }
  
  .portfolio_short:after{
    content:'';
    display:block;
    width:100%;
    clear:both;
  }
  
  .service .service_list li{
    margin:0;
  }
  
  .service .flex_column{
    margin:0 5%;
  }
  
  #footer{
    padding-left:0;
    padding-right:0;
  }
}

@media screen and (max-width:1280px){
  
  #header{
    position:fixed;
  }
  
  .portfolio_short > div {
    width: 25%;
  }
  
  .portfolio_short > div:nth-child(3){
    display:none;
  }
  
  .margaux, .benjamin{
    float:left;
    width:35%;
    margin:0 0 0 10%;
  }
  
  .margaux:before, .benjamin:before{
    top:initial;
    bottom:-39px;
    border-color: #fff transparent transparent transparent;
    right:20%;
  }
  
  .benjamin:before{
    right:initial;
    left:20%;
  }
  
  .apropos img{
    position:initial;
    width:100%;
    max-width:700px;
    margin:0 auto;
    clear:both;
  }
  
  #main.portfolio .wrapper{
    width:auto;
  }
  
  .portfolio .row > *{
    width:25%;
  }
  
  .portfolio .row > div:first-child{
    width:50%;
  }
  
  .service .motion{
    max-width:100%;
    width:100%;
    height:450px;
    top:-100px;
    bottom:initial;
    left:0;
    right:0;
  }
  
  .service .flex_column{
    margin:0 auto 0;
    padding-top:300px;
    float:none !important;
    width:100% !important;
    max-width:700px;
  }
  
  .service .flex_column article{
    text-align: center;
  }
  
  
  
  .service .service_list ul{
    flex-wrap:wrap;
  }
    
  #footer{
    padding-left:0;
    padding-right:0;
  }
  
}

@media screen and (max-width:980px){
  
  section.service_list ul{
    display:none;
  }
  
  .service .flex_column br{
   display:block;
  }
  
  .service .service_list li{
    width:100%;
    max-width:550px;
  }
  
  .service .service_list svg{
    float:left;
    margin-top:40px;
  }
  
  .service .service_list h3{
    align-items: start;
    position:relative;
    border:none;
  }
  
  .service .service_list h3:after{
    content:'';
    display:block;
    position:absolute;
    width:50%;
    bottom:0;
    left:0;
    border-bottom:3px solid;
  }
  
  .service .service_list h3,
  .service .service_list p{
    float:right;
    width:calc(100% - 100px);
    text-align:left;
  }
  
  .service .service_list p{
    margin:0;
  }
  
  #footer{
    font-size:14pt;
  }
}

@media screen and (max-width:840px){
  
  #marmiteAnim{
    width:1400px;
    height:720px;
    margin-left:-700px;
    margin-top:-385px;
  }
  
  #marmiteAnim{
    background:none;
  }
  
  #marmiteAnim:before{
    display:block;
  }
  
  #header{
    display:block;
  }
  
  #navButton{
    display:none;
  }
  
  #navPanel{
    display:none;
  }
  
  .portfolio_short{
    margin: 0 auto;
    width:100% !important;
  }
  
  .portfolio_short > div {
    width:33.3333333%;
  }
  
  .portfolio_short > div >section{
    margin:0;
  }
  
  .portfolio_short > div:last-child{
    width:100%;
    height:150px;
    max-width:100%;
  }
  
  .portfolio_item_next:before{
    padding:150px 0 0;
  }
  
  .portfolio_item_next h3:after{
    display:none;
  }
  
  #main.portfolio .wrapper{
    padding-top:0px;
  }
  
  #main.portfolio h1 > span{
    display:none;
  }
  
  #main.portfolio .taglist{
    padding:15px 15px 40px;
    max-width:500px;
    margin:0 auto;
  }
  
   #main.portfolio .taglist a{
    margin:5px 0;
  }
  
  .portfolio .row > *{
    width:33.3333333%;
  }
  
  .portfolio .row > div > section{
    margin:0;
  }
  
  .portfolio .row > div:first-child{
    width:66.6666666%;
  }
  
  .portfolio_item header{
    display:none;
  }
  
  #main.portfolio-page >.wrapper{
    margin-top:0;
  }
  
  
  
  #footer{
    font-size:13pt;
  }
}

@media screen and (max-width:736px){
  
  #marmiteAnim{
    width:1200px;
    height:617px;
    margin-left:-600px;
    margin-top:-335px;
  }
  
  #header{
    z-index:10003
  }
  
  #header nav > ul li a{
    display:none;
  }
  
  .navPanel-visible.transparent.bis #header{
    background:#ff664d;
  }
  
  #header nav > ul:first-child li:after,
  #header nav > ul:last-child li:before{
    display:none;
  }
  
  #header nav > ul:first-child li:last-child:after,
  #header nav > ul:last-child li:first-child:before{
    display:inline-block;
  }
  
  #header.alt nav > ul:first-child li:last-child:after,
  #header.alt nav > ul:last-child li:first-child:before{
    display:none;
  }
  
  #navButton{
    display:block;
    height:100px;
    z-index:10004
  }
  
  body.navPanel-visible #navButton{
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  
  #navButton .toggle{
    height:100px;
  }
  
  #navButton .toggle:before{
    content:'';
    border:4px solid #4e30ac;
    border-left:none;
    border-right:none;
    width:40px;
    height:40px;
    top:30px;
    left:30px;
    opacity: 1;
    transition: 0.3s;
  }
  
  #navButton .toggle:after{
    border-top:4px solid #4e30ac;
    width:40px;
    height:0px;
    top:48px;
    left:30px;
    opacity: 1;
    transition: 0.3s;
    border-radius:initial;
  }
  
  body.navPanel-visible #navButton .toggle:before{
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    height:0;
    top:48px;
    border-bottom:none;
  }
  
  body.navPanel-visible #navButton .toggle:after{
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #navPanel{
    display:block;
    width:100%;
    height:auto;
    top:0px;
    padding-top:100px;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(-100%);
    background:#fff;
    color:#4e30ac;
  }
  
  body.navPanel-visible #navPanel{
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  
  #navPanel .link.depth-0{
    border:none;
    opacity:1;
    font-weight:500;
    font-family:'Mohave';
    font-size:1.8em;
    line-height:normal;
    padding:20px 0;
    height:auto;
    text-align:center;
    position:relative;
  }
  
  #navPanel .link:before{
    content:'';
    display:block;
    position:absolute;
    top:-1px;
    left:50%;
    margin-left:-30px;
    width:60px;
    height:0;
    border-top:3px solid #ff664d;
  }
  
  #navPanel .link:first-child:before{
    display:none;
  }
  
  .blue #navButton .toggle:before,
  .blue #navButton .toggle:after{
    border-color:#fff;
  }
  
  .blue #navPanel{
    background:#4e30ac;
    color:#fff;
  }
  
  .blue #navPanel .link:before{
    border-color:#ff664d;
  }
  
  .transparent #navButton .toggle:before,
  .transparent #navButton .toggle:after{
    border-color:#fff;
  }
  
  .transparent #navPanel{
    background:#4e30ac;
    color:#fff;
  }
  
  .transparent #navPanel .link:before{
    border-color:#ff664d;
  }
  
  .transparent.bis #navPanel{
    background:#ff664d;
  }
  
  .transparent.bis #navPanel .link:before{
    border-color:#4e30ac;
  }
  
  .transparent.bisbis #navButton .toggle:before,
  .transparent.bisbis #navButton .toggle:after{
    border-color:#4e30ac;
  }
  
  .transparent.bisbis #navPanel{
    background:#fff;
    color:#4e30ac;
  }
  
  .transparent.bisbis #navPanel .link:before{
    border-color:#ff664d;
  }
  
  .scrolled.transparent #navButton .toggle:before,
  .scrolled.transparent #navButton .toggle:after{
    border-color:#4e30ac;
  }
  
  .scrolled.transparent #navPanel{
    background:#fff;
    color:#4e30ac;
  }
  
  .scrolled.transparent #navPanel .link:before{
    border-color:#ff664d;
  }
  
  .scrolled.blue #navButton .toggle:before,
  .scrolled.blue #navButton .toggle:after{
    border-color:#fff;
  }
  
  .scrolled.blue #navPanel{
    background:#4e30ac;
    color:#fff;
  }
  
  .scrolled.blue #navPanel .link:before{
    border-color:#ff664d;
  }
  
  .portfolio_short{
    padding:50px 0;
  }
  
  .portfolio_short >header{
    padding-bottom:50px;
  }
  
  .portfolio_short > div {
    width:50%;
    max-width:50%;
  }
  
  .portfolio_short > div:nth-child(3) {
    display:block;
  }
  
  .portfolio .row > *{
    width:50%;
  }
  
  .portfolio .row > div:first-child{
    width:100%;
  }
  
  .portfolio_item_logo{
    left:30px;
    right:30px;
  }
  
  .portfolio-page .content p{
    text-align:center;
  }
  
  .portfolio-page .content .half{
    max-width:100%;
  }
  
  .service .motion{
    height:300px;
  }
  
  .service .flex_column{
    margin:0;
    font-size:7pt;
    padding-top:180px;
  }
  
  .service .flex_column h2{
    *text-shadow: 2em 2em;
  }
  
  .service .flex_column article{
    font-size:13pt;
    padding:15px 15px 0;
  }
  
  .service footer > span{
    display:block;
    margin-bottom:25px;
  }
  
  .service footer .portfolio_link{
    margin:0;
  }
  
  .apropos .container >p{
    padding: 25px;
  }
  
  .margaux, .benjamin{
    width:100%;
    margin:0;
    float:none;
  }
  
  .margaux:before, .benjamin:before{
    display:none;
  }
  
  .apropos img{
    margin-top:50px;
  }
  
  #footer{
    font-size:15pt;
  }
  
  #footer .footer_block{
    width:100%;
    padding-bottom:30px;
  }
  
  #footer .contact_icon{
    width:100px;
    height:100px;
  }
}



/***************************************MOBILE*******************************/