/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,button,input,select,textarea {color:#222;}
html {font-size: 1em;line-height: 1.4;}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
/*
 * A better looking default horizontal rule
 */
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,canvas,img,video {vertical-align: middle;}
/*
 * Remove default fieldset styles.
 */
fieldset {border: 0;margin: 0;padding: 0;}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {resize: vertical;}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */
.browsehappy {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}


/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {background-color: transparent;border: 0;overflow: hidden;/* IE 6/7 fallback */*text-indent: -9999px;}
.ir:before {content: "";display: block;width: 0;height: 150%;}
/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {display: none !important;visibility: hidden;}
/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}
/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {visibility: hidden;}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {content: " "; /* 1 */display: table; /* 2 */}
.clearfix:after {clear: both;}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {*zoom: 1;}


*{margin:0;padding:0;}
body {margin: 0;}
object, embed{position:relative;z-index:1;}
a{outline:none;color:inherit;cursor:pointer;}
.clear{clear:both;height:0;overflow:hidden;}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{ display:block}
audio,canvas,video{ display:inline-block; *display:inline; *zoom:1}
audio:not([controls]){ display:none; height:0}
[hidden]{ display:none}
html{ font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
html,button,input,select,textarea{ font-family:sans-serif}
body{ margin:0}
a:focus{ outline:thin dotted}
a:active,a:hover{ outline:0}
abbr[title]{ border-bottom:1px dotted}
b,strong{ font-weight:bold}
blockquote{ margin:1em 40px}
dfn{ font-style:italic}
hr{ -moz-box-sizing:content-box; box-sizing:content-box; height:0}
mark{ background:#ff0; color:#000}
p,pre{margin:0;}
code,kbd,pre,samp{ font-family:monospace,serif; _font-family:'courier new',monospace; font-size:1em}
pre{ white-space:pre; white-space:pre-wrap; word-wrap:break-word}
q{ quotes:none}
q:before,q:after{ content:''; content:none}
small{ font-size:80%}
sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline}
sup{ top:-0.5em}
sub{ bottom:-0.25em}
dl,menu,ol,ul{ margin:1em 0}
dd{ margin:0 0 0 40px}
menu,ol,ul{ padding:0 0 0 40px}
nav ul,nav ol{ list-style:none; list-style-image:none}
img{ border:0; -ms-interpolation-mode:bicubic}
svg:not(:root){ overflow:hidden}
figure{ margin:0}
form{ margin:0}
fieldset{ border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em}
legend{ border:0; padding:0; white-space:normal; *margin-left:-7px}
button,input,select,textarea{ font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle}
button,input{ line-height:normal}
button,select{ text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance:button; cursor:pointer; *overflow:visible}
button[disabled],html input[disabled]{ cursor:default}
input[type="checkbox"],input[type="radio"]{ box-sizing:border-box; padding:0; *height:13px; *width:13px}
input[type="search"]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{ border:0; padding:0}
textarea{ overflow:auto; vertical-align:top}
table{ border-collapse:collapse; border-spacing:0}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

body {background:rgba(255,255,255,1);font:16px 'GothamBook', Helvetica, sans-serif;color:#fff;}
main {width: 100%;overflow: hidden;}

section .container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  min-height:300px;
}



/******************************/
/*********** SKIN COLOR ******/
/****************************
body.skin-creative       | bgcolor#ce4848   color#621ba0
body.skin-sharing        | bgcolor#de6f2b   color#f2ca46
body.skin-visionary      | bgcolor#479fb5   color#d23171
body.skin-living         | bgcolor#63d7ca   color#2e8b32
*/

/* ====================== */
/*    SPECIFIC STYLE
======================= */

  /*CREATIVE VIOLET */
    body.skin-creative section#intro,
    body.skin-creative section#expertises,
    body.skin-creative section#contact ul li {
      background-color:#ce4848;
    }

    body.skin-creative section#data,
    body.skin-creative section#contact .bg-cloud,
    body.skin-creative section#contact .bg-color,
    body.skin-creative section#news .owl-theme .owl-controls .owl-dot.active span,
    body.skin-creative section#news .owl-theme .owl-controls.clickable .owl-dot:hover span {background-color:#621ba0;}
    body.skin-creative section#news .slick-arrow:before{color: #621ba0;}
    body.skin-creative section#news .owl-theme .owl-controls .owl-dot span  {border-color:#621ba0;}
    body.skin-creative section#news .slick-dots li button:before{border-color: #621ba0;}
    body.skin-creative section#news .slick-dots li.slick-active button:before{background-color: #621ba0;}

    body.skin-creative section#data h2,
    body.skin-creative section#contact h2,
    body.skin-creative section#news .dailynews-date,
    body.skin-creative section#news .dailynews-details h4,
    body.skin-creative section#news #dailynews .dailynews-details a,
    body.skin-creative section#news #dailynews .dailynews-date:before,
    body.skin-creative section#data h2 .noise,
    body.skin-creative section#data h2 .noise:after,
    body.skin-creative section#data h2 .noise:before,
    body.skin-creative section#expertises .module-camembert .text h4{
      color:#ce4848;
    }

    body.skin-creative section#weare header p{color: #420d6f;}

    body.skin-creative section#expertises h3{color:#621ba0;}

    body.skin-creative section#data svg .dot,
    body.skin-creative #dailynews .dailynews-details svg polygon{
      fill: #ce4848;
    }
    
    body.skin-creative section#expertises .dynamic {
      stroke: rgb(98, 27, 160);
    }
    /*sbody.skin-creative #data .noise:before, 
    body.skin-creative #data .noise:after{text-shadow: 1px 0 #ce4848;}*/ 

  /*SHARING JAUNE */
    body.skin-sharing section#intro,
    body.skin-sharing section#expertises,
    body.skin-sharing section#news .owl-theme .owl-controls .owl-dot.active span,
    body.skin-sharing section#contact ul li {
      background-color:#de6f2b;
    }

    body.skin-sharing section#data,
    body.skin-sharing section#contact .bg-cloud,
    body.skin-sharing section#contact .bg-color,
    body.skin-sharing section#news .owl-theme .owl-controls.clickable .owl-dot:hover span {background-color:#f2ca46;}
    body.skin-sharing section#news .slick-arrow:before{color: #f2ca46;}
    body.skin-sharing section#news .owl-theme .owl-controls .owl-dot span  {border-color:#de6f2b;}
    body.skin-sharing section#news .slick-dots li button:before{border-color: #de6f2b;}
    body.skin-sharing section#news .slick-dots li.slick-active button:before{background-color: #de6f2b;}

    body.skin-sharing section#data h2,
    body.skin-sharing section#contact h2,
    body.skin-sharing section#news .dailynews-date .day,
    body.skin-sharing section#news .dailynews-date .month,
    body.skin-sharing section#news .dailynews-details h4,
    body.skin-sharing section#news #dailynews .dailynews-details a,
    body.skin-sharing section#news #dailynews .dailynews-date:before,
    body.skin-sharing section#data h2 .noise,
    body.skin-sharing section#data h2 .noise:after,
    body.skin-sharing section#data h2 .noise:before,
    body.skin-sharing section#expertises .module-camembert .text h4{
      color:#de6f2b;
    }

    body.skin-sharing .noise:before{
      text-shadow: none;
    }

    body.skin-sharing section#weare header p{color: #b62f00}

    body.skin-sharing section#expertises h3,
    body.skin-sharing section#news .dailynews-date{color:#f2ca46;}
    
    body.skin-sharing section#data svg .dot,
    body.skin-sharing #dailynews .dailynews-details svg polygon {
      fill: #de6f2b;
    }

    body.skin-sharing section#expertises .dynamic {
      stroke: rgb(242, 202, 70);
    }
    /*body.skin-sharing #data .noise:before, 
    body.skin-sharing #data .noise:after{text-shadow: 1px 0 #de6f2b;}*/ 

  /*VISIONARY BLEU */
    body.skin-visionary section#intro,
    body.skin-visionary section#expertises,
    body.skin-visionary section#news .owl-theme .owl-controls .owl-dot.active span,
    body.skin-visionary section#contact ul li {
      background-color:#479fb5;
    }

    body.skin-visionary section#data,
    body.skin-visionary section#contact .bg-cloud,
    body.skin-visionary section#contact .bg-color,
    body.skin-visionary section#news .owl-theme .owl-controls.clickable .owl-dot:hover span {background-color:#d23171;}
    body.skin-visionary section#news .slick-arrow:before{color: #d23171;}
    body.skin-visionary section#news .owl-theme .owl-controls .owl-dot span  {border-color:#479fb5;}
    body.skin-visionary section#news .slick-dots li button:before{border-color: #479fb5;}
    body.skin-visionary section#news .slick-dots li.slick-active button:before{background-color: #479fb5;}

    body.skin-visionary section#data h2,
    body.skin-visionary section#contact h2,
    body.skin-visionary section#news .dailynews-date,
    body.skin-visionary section#news #dailynews .dailynews-date:before,
    body.skin-visionary section#data h2 .noise,
    body.skin-visionary section#data h2 .noise:after,
    body.skin-visionary section#data h2 .noise:before,
    body.skin-visionary section#expertises .module-camembert .text h4{
      color:#479fb5;
    }

    body.skin-visionary section#weare header p{color: #3ddfff;}

    body.skin-visionary section#expertises h3,
    body.skin-visionary section#news .dailynews-date .month,
    body.skin-visionary section#news .dailynews-date .day,
    body.skin-visionary section#news #dailynews .dailynews-details a,
    body.skin-visionary section#news .dailynews-details h4{
      color:#d23171;
    }

    body.skin-visionary section#data svg .dot,
    body.skin-visionary #dailynews .dailynews-details svg polygon{
      fill: #479fb5;
    }
    body.skin-visionary #dailynews .dailynews-details svg polygon{fill: #d23171;}

    body.skin-visionary section#expertises .dynamic {
      stroke: rgb(210, 50, 114);
    }
    /*body.skin-visionary #data .noise:before, 
    body.skin-visionary #data .noise:after{text-shadow: 1px 0 #479fb5;}*/

  /*LIVING VERT */
    body.skin-living section#intro,
    body.skin-living section#expertises,
    body.skin-living section#contact ul li {
      background-color:#63d7ca;
    }

    body.skin-living section#data,
    body.skin-living section#contact .bg-cloud,
    body.skin-living section#contact .bg-color,
    body.skin-living section#news .owl-theme .owl-controls .owl-dot.active span,
    body.skin-living section#news .owl-theme .owl-controls.clickable .owl-dot:hover span {background-color:#2e8b32;}
    body.skin-living section#news .slick-arrow:before{color: #2e8b32;}
    body.skin-living section#news .owl-theme .owl-controls .owl-dot span  {border-color:#2e8b32;}
    body.skin-living section#news .slick-dots li button:before{border-color: #2e8b32;}
    body.skin-living section#news .slick-dots li.slick-active button:before{background-color: #2e8b32;}
    
    body.skin-living section#data h2,
    body.skin-living section#contact h2,
    body.skin-living section#news #dailynews .dailynews-date:before,
    body.skin-living section#news .dailynews-date,
    body.skin-living section#data h2 .noise,
    body.skin-living section#data h2 .noise:after,
    body.skin-living section#data h2 .noise:before,
    body.skin-living section#expertises .module-camembert .text h4{
      color:#63d7ca;
    }

    body.skin-living .noise:after{
      text-shadow: none;
    }

    body.skin-living section#weare header p{color: #7dffd0;}

    body.skin-living section#expertises h3,
    body.skin-living section#news .dailynews-date .day,
    body.skin-living section#news .dailynews-date .month,
    body.skin-living section#news #dailynews .dailynews-details a,
    body.skin-living section#news .dailynews-details h4{color:#2e8b32;}

    body.skin-living section#data svg .dot{
      fill: #63d7ca;
    }

    body.skin-living #dailynews .dailynews-details svg polygon{fill: #2e8b32;}

    body.skin-living section#expertises .dynamic {
      stroke: rgb(46, 139, 50);
    }
    /*body.skin-living #data .noise:before, 
    body.skin-living #data .noise:after{text-shadow: 1px 0 #63d7ca;} */

/* ======================
   end SPECIFIC STYLE
======================= */

/* ====================== */
/*    NOTOUCH SPECIFIC STYLES
======================= */

  /*CREATIVE VIOLET */
    html.touch body.skin-creative section#weare,
    html.touch body.skin-creative section#clients,
    html.touch body.skin-creative section#partners{
      background-color:#ce4848;
    }
    html.touch body.skin-creative section#weare header p/*,
    html.touch body.skin-creative section#partners h2,
    html.touch body.skin-creative section#partners article ul, 
    html.touch body.skin-creative section#partners .noise:before,
    html.touch body.skin-creative section#partners .noise:after*/ {
      color:#621ba0;
    }

  /*SHARING JAUNE */
    html.touch body.skin-sharing section#weare,
    html.touch body.skin-sharing section#clients,
    html.touch body.skin-sharing section#partners{
      background-color:#de6f2b;
    }
    html.touch body.skin-sharing section#weare header p/*,
    html.touch body.skin-sharing section#partners h2,
    html.touch body.skin-sharing section#partners article ul,
    html.touch body.skin-sharing section#partners .noise:before,
    html.touch body.skin-sharing section#partners .noise:after*/ {
      color:#f2ca46;
    }

  /*VISIONARY BLEU */
    html.touch body.skin-visionary section#weare,
    html.touch body.skin-visionary section#clients,
    html.touch body.skin-visionary section#partners{
      background-color:#479fb5;
    }
    html.touch body.skin-visionary section#weare header p/*,
    html.touch body.skin-visionary section#partners h2,
    html.touch body.skin-visionary section#partners article ul,
    html.touch body.skin-visionary section#partners .noise:before,
    html.touch body.skin-visionary section#partners .noise:after*/ {
      color:#d23171;
    }

  /*LIVING VERT */
    html.touch body.skin-living section#weare,
    html.touch body.skin-living section#clients,
    html.touch body.skin-living section#partners{
      background-color:#63d7ca;
    }
    html.touch body.skin-living section#weare header p/*,
    html.touch body.skin-living section#partners h2,
    html.touch body.skin-living section#partners article ul,
    html.touch body.skin-living section#partners .noise:before,
    html.touch body.skin-living section#partners .noise:after*/ {
      color:#2e8b32;
    }

/* ======================
   end NOTOUCH SPECIFIC STYLE
======================= */

/* ====================== */
/*     COMMON STYLE
======================== */
    section:not(#intro) {padding:10% 0 8% 0;position:relative;}

    /*title*/
    section h2 {font:40px/30px 'CoreCircusR';color:#ffffff;letter-spacing: -0.20em;}
    section h2 span {display:block;font-size:85px;line-height:80px;letter-spacing: -0.20em;margin-top: -18px;z-index: 2;}
    section h2 em {font-style: normal;margin-left:8px;font-size:40px;line-height: normal;}

    /* CSS ANIMATION */
    /*glitch noise effect*/
    .noise {position: relative;color:#FFF;}

    @-webkit-keyframes noise-anim {
      0% {clip: rect(86px, 9999px, 5px, 0);}
      5% {clip: rect(37px, 9999px, 89px, 0);}
      10% {clip: rect(62px, 9999px, 48px, 0);}
      15% {clip: rect(72px, 9999px, 33px, 0);}
      20% {clip: rect(41px, 9999px, 57px, 0);}
      25% {clip: rect(83px, 9999px, 2px, 0):;}
      30% {clip: rect(12px, 9999px, 98px, 0);}
      35% {clip: rect(86px, 9999px, 11px, 0);}
      40% {clip: rect(59px, 9999px, 93px, 0);}
      45% {clip: rect(58px, 9999px, 89px, 0);}
      50% {clip: rect(75px, 9999px, 6px, 0);}
      55% {clip: rect(89px, 9999px, 81px, 0);}
      60% {clip: rect(45px, 9999px, 17px, 0);}
      65% {clip: rect(66px, 9999px, 90px, 0);}
      70% {clip: rect(94px, 9999px, 100px, 0);}
      75% {clip: rect(61px, 9999px, 92px, 0);}
      80% {clip: rect(51px, 9999px, 7px, 0);}
      85% {clip: rect(65px, 9999px, 71px, 0);}
      90% {clip: rect(47px, 9999px, 84px, 0);}
      95% {clip: rect(68px, 9999px, 16px, 0);}
      100% {clip: rect(35px, 9999px, 45px, 0);}
    }
    @keyframes noise-anim {
      0% {clip: rect(86px, 9999px, 5px, 0);}
      5% {clip: rect(37px, 9999px, 89px, 0);}
      10% {clip: rect(62px, 9999px, 48px, 0);}
      15% {clip: rect(72px, 9999px, 33px, 0);}
      20% {clip: rect(41px, 9999px, 57px, 0);}
      25% {clip: rect(83px, 9999px, 2px, 0):;}
      30% {clip: rect(12px, 9999px, 98px, 0);}
      35% {clip: rect(86px, 9999px, 11px, 0);}
      40% {clip: rect(59px, 9999px, 93px, 0);}
      45% {clip: rect(58px, 9999px, 89px, 0);}
      50% {clip: rect(75px, 9999px, 6px, 0);}
      55% {clip: rect(89px, 9999px, 81px, 0);}
      60% {clip: rect(45px, 9999px, 17px, 0);}
      65% {clip: rect(66px, 9999px, 90px, 0);}
      70% {clip: rect(94px, 9999px, 100px, 0);}
      75% {clip: rect(61px, 9999px, 92px, 0);}
      80% {clip: rect(51px, 9999px, 7px, 0);}
      85% {clip: rect(65px, 9999px, 71px, 0);}
      90% {clip: rect(47px, 9999px, 84px, 0);}
      95% {clip: rect(68px, 9999px, 16px, 0);}
      100% {clip: rect(35px, 9999px, 45px, 0);}
    }
    .noise:after {
      content: attr(data-text);
      position: absolute;
      width:99.9%;
      left: 0.1%;
      color:#FFF;
      text-shadow: -1px 0 #ff0000; /*text-shadow: -1px 0 #fff;*/
      top: 0;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      -webkit-animation: noise-anim 2s infinite ease-in-out alternate-reverse;
      animation: noise-anim 2s infinite ease-in-out alternate-reverse;
    }

    @-webkit-keyframes noise-anim-2 {
      0% {clip: rect(57px, 9999px, 97px, 0);}
      5% {clip: rect(65px, 9999px, 78px, 0);}
      10% {clip: rect(60px, 9999px, 16px, 0);}
      15% {clip: rect(70px, 9999px, 14px, 0);}
      20% {clip: rect(62px, 9999px, 73px, 0);}
      25% {clip: rect(42px, 9999px, 73px, 0);}
      30% {clip: rect(48px, 9999px, 64px, 0);}
      35% {clip: rect(25px, 9999px, 70px, 0);}
      40% {clip: rect(60px, 9999px, 44px, 0);}
      45% {clip: rect(52px, 9999px, 4px, 0);}
      50% {clip: rect(85px, 9999px, 59px, 0);}
      55% {clip: rect(65px, 9999px, 46px, 0);}
      60% {clip: rect(89px, 9999px, 79px, 0);}
      65% {clip: rect(33px, 9999px, 2px, 0);}
      70% {clip: rect(3px, 9999px, 31px, 0);}
      75% {clip: rect(15px, 9999px, 44px, 0);}
      80% {clip: rect(87px, 9999px, 16px, 0);}
      85% {clip: rect(97px, 9999px, 48px, 0);}
      90% {clip: rect(46px, 9999px, 77px, 0);}
      95% {clip: rect(11px, 9999px, 11px, 0);}
      100% {clip: rect(99px, 9999px, 13px, 0);}
    }
    @keyframes noise-anim-2 {
      0% {clip: rect(57px, 9999px, 97px, 0);}
      5% {clip: rect(65px, 9999px, 78px, 0);}
      10% {clip: rect(60px, 9999px, 16px, 0);}
      15% {clip: rect(70px, 9999px, 14px, 0);}
      20% {clip: rect(62px, 9999px, 73px, 0);}
      25% {clip: rect(42px, 9999px, 73px, 0);}
      30% {clip: rect(48px, 9999px, 64px, 0);}
      35% {clip: rect(25px, 9999px, 70px, 0);}
      40% {clip: rect(60px, 9999px, 44px, 0);}
      45% {clip: rect(52px, 9999px, 4px, 0);}
      50% {clip: rect(85px, 9999px, 59px, 0);}
      55% {clip: rect(65px, 9999px, 46px, 0);}
      60% {clip: rect(89px, 9999px, 79px, 0);}
      65% {clip: rect(33px, 9999px, 2px, 0);}
      70% {clip: rect(3px, 9999px, 31px, 0);}
      75% {clip: rect(15px, 9999px, 44px, 0);}
      80% {clip: rect(87px, 9999px, 16px, 0);}
      85% {clip: rect(97px, 9999px, 48px, 0);}
      90% {clip: rect(46px, 9999px, 77px, 0);}
      95% {clip: rect(11px, 9999px, 11px, 0);}
      100% {clip: rect(99px, 9999px, 13px, 0);}
    }

    .noise:before {
      content: attr(data-text);
      position: absolute;
      width:99.9%;
      left: -0.1%;
      color:#FFF;
      text-shadow: 1px 0 #002aff; /*text-shadow: 1px 0 #fff;*/
      top: 0;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse;
      animation: noise-anim-2 3s infinite linear alternate-reverse;
    }
    
/* ====================== */
/*      INTRO
======================= */
    section#intro {
      height: 100vh;
      background-size: 100%;
    }
    section#intro h1 {font: 40px/45px 'CoreCircusR';color:#fff;position: absolute;z-index:-1;width: 100%;letter-spacing: -0.10em;text-align: center;}

    section#intro .intro-container {position: absolute;top:0;width:100%;z-index:100;}
    section#intro #loadeto {position: absolute;top:0;bottom: 0;width: 100%;height: 100%;}

    section#intro .intro-container {
      position: absolute;
      z-index:100;
      width:100%;
      top: 50%;
      margin-top: -100px;
      height:200px;
      width: 100%;
      pointer-events: none;
    }
    section#intro #introPublicisEto,
    section#intro #logoPublicisEto {position: relative;width: 100%;text-align: center;height: 200px;overflow: hidden;}
    section#intro #logoPublicisEto {
      z-index:1;
      -webkit-transition: opacity 0.75s ease;
      -ms-transition: opacity 0.75s ease;
       -o-transition: opacity 0.75s ease;
          transition: opacity 0.75s ease;
    }
    section#intro #logoPublicisEto.show {display:block;background:rgba(255,255,255,0.5);}
    section#intro #logoPublicisEto.fixed {position: fixed;width:100%;top:0;margin-top:0;z-index:99;}
    section#intro #logoPublicisEto.fixed svg {transform:translateY(-65px) !important;-ms-transform:translateY(-65px) !important;-webkit-transform:translateY(-65px) !important;}

    section#intro #introPublicisEto svg,
    section#intro #logoPublicisEto svg {
      height:200px !important;
      width: 1200px !important;
      margin-left: -600px;
      left:50%;
      position: absolute;
      top: 0;
      transform:translateX(0);
      -ms-transform:translateX(0);
      -webkit-transform:translateX(0);
    }
    section#intro #logoPublicisEto svg {background:transparent;}

    /* Vidéo & Sound */
      .video .video-container .poster,
      .no-touch .video-container .poster {display: none !important;}
      .no-video .video-container video,
      .touch .video-container video {display: none;}
      .no-video .video-container .poster,
      .touch .video-container .poster {display: block !important;}
      section#intro .video-container {
        position: absolute;
        bottom: 0%;
        left: 0%;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      section#intro .video-container video {
        position: fixed;
        z-index: 0;
        bottom: 0;
        top: 0;
        height: auto !important;
      }
      section#intro .video-container video#cloudBgVideo {width: 100%;}

      section#intro .video-container .poster {
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: contain;
      }

      section#intro .SVG-spritesheet.btn-sound {  
        z-index:1000;
        position: fixed;
        bottom: -30px;
        right: -30px;
        z-index: 100;
        background:url('../img/sound-spritesheet.svg') no-repeat 0 0;
        width:150px;
        height:150px;
        cursor: pointer;
        transform:scale(0.2);
        -ms-transform:scale(0.2); /* IE 9 */
        -webkit-transform:scale(0.2); /* Chrome, Safari, Opera */
        -webkit-transition: opacity 0.75s ease;
        -ms-transition: opacity 0.75s ease;
         -o-transition: opacity 0.75s ease;
            transition: opacity 0.75s ease;
        opacity: 0;
        visibility: hidden;
      }
      section#intro .SVG-spritesheet.btn-sound.show {opacity:1;visibility: visible;}
      html.touch section#intro .SVG-spritesheet.btn-sound{display:none !important;}
    /****end Video*/
    .touch .mouse {display:none;}
    .mouse {
      display: block;
      margin: 0 auto;
      width: 26px;
      height: 48px;
      border-radius: 13px;
      box-shadow: inset 0 0 0 0 #fff;
      bottom:30px;
      position: fixed;
      left: 50%;
      margin-left: -14px;
      -webkit-transition: box-shadow 0.5s ease;
      transition: box-shadow 0.5s ease;
    }
    .mouse:before {
      content:'';
      display: block;
      margin: 6px auto;
      width:3px;
      -webkit-border-radius:50%;
         -moz-border-radius:50%;
              border-radius:50%;
      height: 5px;
      box-shadow: inset 0 0 0 0 #fff;
      -webkit-animation: mouseWheel 1.75s infinite both;
      -moz-animation: mouseWheel 1.75s infinite both;
      animation: mouseWheel 1.75s infinite both;
    }
    .mouse.scroll {box-shadow: inset 0 0 0 2px #fff;}
    .mouse.scroll:before {box-shadow: inset 0 0 0 4px #fff;}
    @-webkit-keyframes mouseWheel {
      0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      50% {
        opacity: 1;
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
        height:9px;
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
      }
    }
    @keyframes mouseWheel {
      0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
      50% {
        opacity: 1;
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
        height:9px;
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
      }
    }

    #nav-lang {   
      position:fixed;
      bottom: 35px;
      right: 75px; 
      z-index:100;
      margin:0;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      padding: 0 10px 0 0;
      padding:0 13px 0 0;
      cursor:pointer;
      width: 0;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.75s ease;
        -ms-transition: all 0.75s ease;
         -o-transition: all 0.75s ease;
            transition: all 0.75s ease;
    }
    #nav-lang.show {width: 30px;opacity: 1;visibility: visible;}
    #nav-lang:after {
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      top: 48%;
      right:10px;
      border-top: 3px solid #ffffff;
      border-right: 3px solid transparent !important;
      border-bottom: none !important;
      border-left: 3px solid transparent !important;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      transform: rotate(0deg);-webkit-transform: rotate(0deg);
    }
    #nav-lang.open:after {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
    #nav-lang li {padding: 0 13px 0 0;} 
    #nav-lang span,
    #nav-lang li a {text-decoration: none;font:12px GothamLight;text-transform: uppercase;padding: 0 10px 0 0;line-height: 20px;}

    
    #nav-lang .nav-list {
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      list-style:none;
      position: absolute;
      top:-5px;
      left: 0;
      -webkit-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
      opacity: 0;
      visibility: hidden;
      margin: 0;
      padding: 0;
    }
    #nav-lang.open .nav-list {
      opacity: 1;
      visibility: visible;
      top:-30px;
      -webkit-transform: rotateX(0deg);
      transform: rotateX(0deg);
    }

    #social-share {
      position: absolute;
      z-index:100;
      top:0;
      right:10px;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.75s ease;
        -ms-transition: all 0.75s ease;
         -o-transition: all 0.75s ease;
            transition: all 0.75s ease;
    }
    #social-share.show {opacity: 1;visibility: visible;}
    #social-share ul.social-list {list-style: none;padding: 0;margin:0;}
    #social-share ul.social-list li {display:inline-block;margin:0;padding: 10px;}
    #social-share ul.social-list img {max-width:20px;}

/* ====================== */
/*      NOUS SOMMES
======================== */
    section#weare {text-align: center;background: transparent;}
    section#weare .container header {margin:8% auto;position: relative;}
    section#weare .container header h2 {color:#fff;font-size:41px;line-height:50px;}
    section#weare .container header p {font:41px/50px 'CoreCircusR';text-transform: uppercase;letter-spacing:-0.20em;}
    html.touch section#weare header p {transform:translateY(0) !important;opacity:1 !important;}
    section#weare .weare-edito {margin-bottom:8%;}
    section#weare .weare-edito p {
      width:100%;
      display: inline-block;
      margin:10px auto;
    }


/* ====================== */
/*      LES ACTUS
======================== */
    section#news {background: #fff; /*mix-blend-mode: luminosity;*/}
    section#news h2 {display:none;}
    section#news #news-carousel .item {cursor:grab;cursor:-webkit-grab;clear:both;background:#FFFFFF;}
    section#news #news-carousel .item img {display: block;width: 100%;height: auto;}

    /* Styling Pagination*/
    section#news .owl-theme .owl-controls .owl-dot span {
      -webkit-border-radius:50%;
         -moz-border-radius:50%;
              border-radius:50%;
      width:13px;
      height:13px;
      margin-left:10px;
      margin-right:10px;
      background: #fff;
      border:1px solid #ccc;
    }
    section#news .owl-theme .owl-controls .owl-dot span,
    section#news .slick-dots li button{
      -webkit-transition: all 0.2s;
           -o-transition: all 0.2s;
              transition: all 0.2s;
    }
    section#news .owl-theme .owl-controls .owl-dot span:hover,
    section#news .slick-dots li button:hover{
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
           -o-transform: scale(1.1);
              transform: scale(1.1);
    }

    section#news #dailynews .dailynews-details {
      height: 100%;
      width: 100%;
      display: inline-table;
      background:#FFF;
    }
    section#news #dailynews {max-width: 1280px;width: 100%;margin: 0 auto;}
    section#news #dailynews .dailynews-details,
    section#news #dailynews figure {float: left;width:50%;outline: none;}
    section#news #dailynews .dailynews-content {
    margin-top: 8%;
    padding: 0 10%;
    position: relative;
    }

    section#news #dailynews .dailynews-details .arrow{width: 29px;height: 25px;}
    section#news #dailynews .dailynews-date {
      width:130px;
      height:130px;
      line-height: 130px;
      display: block;
      margin:35px auto 65px;
      text-align:center;
      position: relative;
    }
    section#news #dailynews .dailynews-date div:after {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: '';
        top:0;
        left:0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        box-shadow: 0 0 0 20px;
    }
    section#news #dailynews .dailynews-details .dailynews-nav {width: 120%;left: 0;}
    section#news #dailynews .dailynews-details .dailynews-nav a {position: absolute;max-width:none;top:60px;}
    section#news #dailynews .dailynews-details .dailynews-nav .next-news {right:50px;}
    section#news #dailynews .dailynews-details .dailynews-nav .prev-news {left:50px;}
    section#news #dailynews .dailynews-details .dailynews-nav .prev-news .arrow{transform: rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);}


    section#news #dailynews .dailynews-date div {display:inline-block;line-height:normal;vertical-align: middle;}
    section#news #dailynews .dailynews-date span {display: block;}
    section#news #dailynews .dailynews-date span.day {font:61px/61px 'GothamThin';}
    body.en section#news #dailynews .dailynews-date span.day {margin-top:20px;}
    section#news #dailynews .dailynews-date span.month {font-size:14px;text-transform: uppercase;}
    body.en section#news #dailynews .dailynews-date span.month {position: absolute;top: 33px;width: 100%;left: 0;}
    section#news #dailynews .dailynews-details .dailynews-more {display: block;}
    section#news #dailynews .dailynews-details .dailynews-more:hover .arrow{left: 4px;}
    section#news #dailynews .dailynews-details .dailynews-more .arrow {transform: scale(0.6);-ms-transform: scale(0.6);-webkit-transform: scale(0.6);position: relative;top: 8px;left: 0; transition: all .2s;}

    section#news #dailynews .dailynews-details h4 {font:16px/18px 'GothamBold';}
    section#news #dailynews .dailynews-details p {font:14px/20px 'GothamBook';color:#000000;padding:20px 0 35px 0;}
    section#news #dailynews .dailynews-details a {font:16px/20px 'GothamBook';text-decoration: none;position: relative;padding-left: 30px;}
    section#news #dailynews .dailynews-details p a{padding: 0;}
    section#news #dailynews .dailynews-details a:before {    
      content: '→';
      font-family: 'eto-agence';
      font-size: 20px;
      line-height: 27px;
      position: absolute;
      left: 0;
      transition: all .2s;
    }
    section#news #dailynews .dailynews-details a:hover:before{
      left: 4px;
    }
    section#news #dailynews .dailynews-details p a:before{
      display: none;
    }
    section#news #dailynews .dailynews-details h4,
    section#news #dailynews .dailynews-details p,
    section#news #dailynews .dailynews-details a,
    section#news #dailynews .dailynews-details .dailynews-more {
      max-width: 380px;
      margin:auto;
    }
    section#news #dailynews .dailynews-details .content{
      padding: 0 30px;
    }
    
    section#news #dailynews .dailynews-date.dynamic{
      position: absolute;
      z-index: 1;
      left: 25%;
      margin-left: -71px;
    }
    section#news #dailynews .dailynews-date.dynamic div:after{
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    section#news #dailynews .dailynews-date .day{opacity: 0;}
    section#news #dailynews .dailynews-date.dynamic .day{opacity: 1;}
    section#news #dailynews .dailynews-date.dynamic .month{opacity: 0;}

    #dailynews{position: relative;width: 100%;color: #000;}
    #dailynews .slick-slider{position: static;}
    #dailynews .slider-for, #dailynews .slider-nav{
      vertical-align: top;
      display: inline-block;
      width: 49%;
      margin: 0;
      padding: 0;
    }

    #dailynews .slick-prev, #dailynews .slick-next{z-index: 1;top: 100px;}
    #dailynews .slick-prev{left: 5%;}
    #dailynews .slick-next{left: 40%;}
    #dailynews .slick-prev:before,
    #dailynews .slick-next:before{
      content: '←';
      font-family: 'eto-agence';
      font-size: 30px;
      line-height: 0.5;
    }
    #dailynews .slick-next:before{content: '→';}
    #dailynews .slick-slide img{width: 100%;}
    #dailynews .slick-dots{}
    #dailynews .slick-dots li{margin: 0 15px;}
    #dailynews .slick-dots li button:before{
      -webkit-transition: all .2s;
         -o-transition: all .2s;
          transition: all .2s;
      content: '';
      border: 1px solid;
      border-radius: 50%;
      background-color: #FFF;
      background-color: transparent;
      width: 15px;
      height: 15px;
    }

/* ====================== */
/*       LES CHIFFRES
======================== */
    section#data {}
    section#data article#data-wheel {max-width:460px;width:100%;margin:50px auto;}
    section#data .module-circle {
        position: relative;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    section#data svg {height: 100%;width: 95% !important;}
    section#data #svgData_mob,
    section#data #svgData_mob_en{display: none;}


/* ====================== */
/*       NOS EXPERTISES
======================== */
    section#expertises {position: relative;}
    section#expertises header{position: relative; z-index: 2;}
    section#expertises header p {font:29px 'GothamLight';color:#FFF;margin-left:15px;}

    section#expertises #expert-item {width: 100%;text-align: right;margin-top: 3%;position: relative;z-index: 2;}
    section#expertises #expert-item .item-row {width:66.6%;display: inline-block;}
    section#expertises #expert-item .item-row .col {width:50%;text-align:left;float: left;}

    section#expertises #expert-item .item-row .item h3 {font:22px 'CoreCircusR';padding:15px 0;}
    
    section#expertises #expert-item .item-row .item:before {
      content:'';
      display: block;
      width:49px;
      height:2px;
      background:#FFF;
      }
      section#expertises #expert-item .item-row .item {width:70%;margin-top:15%;}  
      section#expertises #expert-item .item-row .item p,
      section#expertises #expert-item .item-row .item ul li{font:13px/22px 'GothamBook';color:#FFF;}
      section#expertises #expert-item .item-row .item ul li {margin-bottom:15px;}
      section#expertises #expert-item .item-row .item ul{margin: 0;padding-left: 20px;}

      section#expertises #expert-item .item-row .col:nth-child(2) .item:first-child {margin-top:50%;}

      section#expertises .exp-cloud {
        position: absolute;
        bottom:0;
        background-position: 0 100%;
        background-repeat: no-repeat;
        left:0;
        height:100%;
        width:100%;
      }

      section#expertises #expert-wheel {max-width:550px;width:100%;margin:8% auto;position: relative;z-index: 2;}
      section#expertises .module-camembert {
          position: relative;
          margin: 0 auto;
          width: 550px;
          height: 550px;
          line-height: 550px;
          text-align: center;
      }
      section#expertises .module-camembert .text {
          position: absolute;
          width: 100%;
          height: 100%;
      }
      section#expertises .module-camembert .text h4{
          color: #ce4848;
          text-transform: uppercase;
          font: 25px 'CoreCircusR';
          line-height: normal;
          vertical-align: middle;
          display: inline-block;
      }
      section#expertises svg {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        display: block;
      }
      /*section#expertise .static,*/
      section#expertises .dynamic {
        fill: transparent;
        stroke-width: 250;
        stroke: rgb(98, 27, 160);
        -webkit-transition: stroke-dashoffset 0.75s;
             -o-transition: stroke-dashoffset 0.75s;
                transition: stroke-dashoffset 0.75s; /* cubic-bezier(0.55, -0.71, 0.47, 1.62);*/
      }
      section#expertises .static{
        fill:#fff;
        opacity: 0;
        r:0;
        -webkit-transition: all .6s cubic-bezier(0, 1.4, 1, 1);
             -o-transition: all .6s cubic-bezier(0, 1.4, 1, 1);
                transition: all .6s cubic-bezier(0, 1.4, 1, 1);
      }

      section#expertises .module-camembert ul {
          line-height: normal;
          list-style: none;
          color: #FFF;
          text-transform: uppercase;
          font: 14px 'CoreCircusR';
          padding: 0;

          position: absolute;
          top: 275px;
          left: 275px;
      }
      section#expertises .module-camembert ul li{
          height: 40px;
          line-height: 40px;
          position: absolute;
          text-align: center;
          /*opacity:0;*/
          -webkit-transform: scale(0);
              -ms-transform: scale(0);
               -o-transform: scale(0);
                  transform: scale(0); 
          -webkit-transition: all .6s cubic-bezier(0, 2, 1, 1);
               -o-transition: all .6s cubic-bezier(0, 2, 1, 1);
                  transition: all .6s cubic-bezier(0, 2, 1, 1);
      }
      section#expertises .module-camembert ul li p{
          line-height: normal;
          vertical-align: middle;
          display: inline-block;
          max-width: 150px;
      }
      section#expertises .module-camembert .arrow{
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
        opacity:0;
        -webkit-transition: all 1s cubic-bezier(0, 1.1, 1, 1);
             -o-transition: all 1s cubic-bezier(0, 1.1, 1, 1);
                transition: all 1s cubic-bezier(0, 1.1, 1, 1);
      }


/* ====================== */
/*       NOS CLIENTS
======================== */
    section#clients {}
    section#clients ul {text-align: center;max-width:900px;width:95%;margin:15% auto;display:table;padding:0;}
    section#clients ul li {list-style:none;display: inline-table;margin-bottom: 30px;vertical-align: middle;margin:0 4% 30px 4%;}
    section#clients ul li:first-child {margin-left:0;}
    section#clients ul li img {}
    section#clients ul li svg path {
      fill: #000;
    }


/* ====================== */
/*     NOS PARTENAIRES
======================== */
    section#partners {}
    section#partners h2 {text-align: center;font:22px 'CoreCircusR';color:#FFF;letter-spacing:0;}
    section#partners ul li img {
      -webkit-filter: brightness(0) invert(1);
              filter: brightness(0) invert(1);
    }
    section#partners ul {text-align: center;max-width:930px;width:95%;margin:10% auto;display:table;padding:0;}
    section#partners ul li {list-style:none;display: inline-block;/*margin-bottom: 30px;*/vertical-align: middle;/*margin:0 4% 30px 4%;*/}
    section#partners ul li:first-child {margin-left:0;}
    section#partners ul li {
      font-size: 100px;
      margin: 0 1%;
    }
     section#partners article ul li i {display: block;}


/* ====================== */
/*     NOUS CONTACTER
======================== */
    section#contact {padding:0;position:relative;}
    section#contact h2 {text-align: center;margin-bottom: 2%;}
    html.touch section#contact h2 span:before, html.touch section#contact h2 span:after {display: none;}
    section#contact article {clear:both;display: table;width: 100%;}
    section#contact article:first-child {display: inline-block;width: 100%;}
    section#contact article figure {float: left;width:50%;text-align:left;position: relative;z-index:2;}
    section#contact article figure:first-child {text-align: right;}
    section#contact article figure:last-child {padding-top:50px;margin:0 0 0 -60px;}
    section#contact article figure figcaption {position: absolute;left:235px;top:280px;z-index: 1;}
    section#contact article figure:first-child figcaption {right:235px;left: initial;}
    section#contact article figure img {position: relative;z-index: 2;}

    section#contact article.the-dg {margin-top: 5%;}
    section#contact article.mail {position:relative;}
    
    section#contact .bg-cloud {
      position: absolute;
      width: 100%;
      height: 820px;
      z-index:1;
      bottom:0;
      background-repeat:no-repeat;
      background-position: 0 0;
    }

    section#contact .bg-color {
      position:absolute;
      width: 100%;
      top: -20%;
      height:100%;
      z-index:0;
    }


    section#contact h3 {
      font: 40px/42px 'CoreCircusR';
      color: #ffffff;
      letter-spacing: -0.20em;
      text-align: center;
      margin-top: 4%;
      display: inline-block;
      width: 100%;
      position: relative;
      z-index: 2;
    }
    section#contact h3:last-of-type{font:32px/32px 'CoreCircusR';}
    section#contact ul {padding:25px 0;margin:0;text-align: center;position: relative; z-index: 2;}
    section#contact ul li {
      width: 135px;
      height:135px;
      line-height: 135px;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      display: inline-block;
      text-align:center;
      margin: 0 3%;
      padding: 0;
      -webkit-transition: all 0.2s;
           -o-transition: all 0.2s;
              transition: all 0.2s;
      list-style: none;
      position: relative;
    }
    section#contact ul li:before {
      box-shadow: inset 0 0 0 70px #FFF;
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      left: 0;
      top: 0;
    }
    section#contact ul li:hover{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform:scale(1.1) ;}
    section#contact ul li a {display:block;text-decoration: none;}
    section#contact ul li h4 {
      font-size:15px;
      line-height: normal;
      vertical-align: middle;
      display: inline-block;
      margin-top: -25%;
    }
    section#contact ul li:hover .SVG-spritesheet.btn-mail,
    section#contact ul li:hover .SVG-spritesheet.btn-candidate{
      margin-top: -50%;
      -webkit-transition: margin 0.5s;
           -o-transition: margin 0.5s;
              transition: margin 0.5s; 
    }
    section#contact .SVG-spritesheet.btn-mail,
    section#contact .SVG-spritesheet.btn-candidate {
      background:url('../img/mail-spritesheet.svg') no-repeat 0 0;
      width:60px;
      height:60px;
      display: block;
      margin: -55% auto;
      -webkit-transform: scale(.6);
          -ms-transform: scale(.6);
           -o-transform: scale(.6);
              transform: scale(.6);
    }
    section#contact .SVG-spritesheet.btn-candidate{
      background-image: url('../img/candidate-spritesheet.svg');
      width:90px;
      height:60px;
    }
    
    section#contact #privacy {
      padding: 25px 20px;
      margin: 0;
      text-align: center;
      position: relative;
      z-index: 2;
      font-size:13px;
    }
    section#contact #privacy a {display: inline-block;}
    section#contact #cil {cursor:pointer;text-decoration:underline;}


/* ====================== */
/*     FOOTER
======================== */
  footer {text-align: center;position: relative;z-index: 2;}
  footer img {margin:40px auto;}

/* ====================== */
/*     LEGAL
======================== */

  #legalshow{
    position: fixed;
    bottom: 35px;
    right: 130px;
    text-decoration: none;
    font: 12px GothamLight;
    text-transform: uppercase;
    padding: 0 10px 0 0;
    line-height: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;
  }
  #legalshow.show {opacity: 1;visibility: visible;}
  
  #legalshow.opened{
    position: fixed;
  }
  section#legal{
    position: fixed;
    bottom: 0;
    z-index:100;
    width: 100%;
    text-align: center;
    height: auto;
    padding: 0;
    font-weight: bold;
    transition: all 0.5s;
    bottom: -100%;
  }
  section#legal.open{
    transition: all 0.5s;
    bottom: 0;
    overflow: auto;
    height: 100vh;
  }
  section#legal span.legalClose{
    position: absolute;
    right: 20px;
    top: 20px;
    transform: scaleY(.9);
    cursor: pointer;
  }
  .no-touch section#legal article {margin-top: 12%;}
  .touch section#legal.open article {padding-top: 50px;}
  section#legal article p {font: 11px 'GothamLight', Helvetica, sans-serif;margin: 0 auto;padding:5px;max-width: 900px;}
  



/* Large desktop */
@media (max-width: 1200px) { 

/* ====================== */
/*       NOS EXPERTISES
======================== */
   section#expertises #expert-item .item-row {width:80%;}
   section#expertises:before {
    background-position: -200px  100%;
    }
}

/* landscape tablet  */
@media (max-width: 1400px) {
  html.touch #nav-lang {opacity: 1;visibility: visible;width: 30px;right: 10px;border-right: 0;border-left: 1px solid rgba(255, 255, 255, 0.3);padding:0 13px 0 13px;}
  html.touch #nav-lang li{padding: 10px 13px 10px 13px}
  html.touch #legalshow{right: 90px;border: 0}
  html.touch #social-share {opacity: 1;visibility: visible;/*width: 40px;right: 10px;*/}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) { 

/* ====================== */
/*     COMMON STYLE
======================== */
  section h2 {text-align:center;}
  section h2 span {font-size:80px;line-height:75px;letter-spacing: -0.15em;}

/* ====================== */
/*      NOUS SOMMES
======================== */
  section#weare header h2 {font-size:32px;line-height:40px;}
  section#weare header p {font-size:32px;line-height:40px;}
  section#weare .weare-edito p {font-size:14px;}

/* ====================== */
/*       NOS EXPERTISES
======================== */
  section#expertises header p {text-align: center;padding: 5% 0;font-size:20px;}
  section#expertises:before {
    background-position: -300px  100%;
  }


/* ====================== */
/*     NOUS CONTACTER
======================== */
  section#contact h2 span {font-size:50px;}
  section#contact h3 {font-size:32px;line-height:38px;letter-spacing: -0.15em;}
  section#contact article.the-dg {margin-top:5%;}
  section#contact article figure img {max-width:260px;}
  section#contact article figure figcaption {left:20%;top: 330px;}
  section#contact article figure:first-child figcaption {right:20%;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) { 

/* ====================== */
/*     COMMON STYLE
======================== */
  section h2 em{font-size: 45px;}
  section h2 span {font-size:65px;line-height:65px;}

/* ====================== */
/*      NOUS SOMMES
======================== */
  section#weare .weare-edito {max-width:700px;width:95%;margin:0 auto;padding: 0 10%;box-sizing:border-box;}
  section#weare .weare-edito p br {display:none;}

/* ====================== */
/*       LES CHIFFRES
======================== */
  section#data .module-circle ul li p{font-size: 24px;}
  section#data .module-circle ul li p span{font-size: 115px;line-height: 95px;}
  section#news #dailynews .dailynews-date .day{opacity: 1;}
  section#news #dailynews .dailynews-date.dynamic .day{opacity: 0;}
  section#data svg {width:100% !important;height:auto !important;}

/* ====================== */
/*       NOS EXPERTISES
======================== */
  section#expertises:before {
      background-position: -350px 100%;
      background-repeat: no-repeat;
  }
  section#expertises #expert-item .item-row .item{margin-top: 25%}
  section#expertises #expert-item .item-row .item:first-child{margin-top: 15%;}
  section#expertises .exp-cloud{background-position-x: -215px;bottom: -4%;z-index: 1}

/* ====================== */
/*      LES ACTUS
======================== */
  section#news #dailynews .dailynews-details .content {padding:0 10px;}
  #dailynews .slider-nav{
    display: block;
    width: 100%;
    text-align: center;
  }
  #dailynews .slider-for{
    display: none;
  }
  #dailynews .slick-prev, #dailynews .slick-next {width: 35px;height: 30px;}
  #dailynews .slick-next{
    left: initial;
    right: 5%;
    left: initial;
  }
  #dailynews .slick-prev:before, #dailynews .slick-next:before {line-height:30px;}

/* ====================== */
/*     NOUS CONTACTER
======================== */
  section#contact h3 {font-size: 25px;line-height: 30px;}
  section#contact h3:last-of-type{font-size: 22px;line-height: 25px;box-sizing: border-box;padding:0 10px;margin-top: 3%;}
  section#contact article figure img {width:90%;}
  section#contact article figure:last-child{padding-top: 80px;}
  section#contact article figure figcaption{top: 450px;}
  section#contact .bg-cloud{height: 420px; background-size: contain;}

/* ====================== */
/*     LEGAL
======================== */
  .touch section#legal.open article{/*margin-top: 15%;padding-bottom: 20px;padding-top:50px;*/}
  .touch section#legal.open article p:first-child {/*padding-top:15%;*/}

}
 
@media (max-width: 640px) { 

/* ====================== */
/*       NOS EXPERTISES
======================== */
  section#expertises:before {
      background-position: 110% 100%;
      background-repeat: no-repeat;
  }
  section#expertises #expert-item .item-row {width: 95%;display: block;margin: 0 auto;}
  section#expertises #expert-item .item-row .col {width: 100%;text-align:center;float: none;}
  section#expertises #expert-item .item-row .item {width:100%;max-width: 430px;margin: 40px auto 0 auto;}
  section#expertises #expert-item .item-row .col:nth-child(2) .item:first-child {margin-top: 40px;}
  section#expertises #expert-item .item-row .item:before,
  section#expertises #expert-item .item-row .col:nth-child(2) .item:last-child:after {display:none;}
  section#expertises #expert-item .item-row .item:after {
    content: '';
    display: block;
    width: 90px;
    height: 1px;
    background: #FFF;
    margin: 0 auto;
  }
  section#expertises #expert-item .item-row .item p {padding-bottom:40px;}
  section#expertises #expert-item .item-row .item ul {padding: 0 0 40px 0;list-style-type: none;}
}

/* Landscape phones and down */
@media (max-width: 480px) {

  section h2 em{margin: 0;font-size: 45px;}
  section h2 span{font-size: 55px;}

  section#intro #logoPublicisEto.fixed svg {
    transform: translateY(-75px) !important;
    -ms-transform: translateY(-75px) !important;
    -webkit-transform: translateY(-75px) !important;
  }

  #nav-lang {opacity: 1;visibility: visible;width:30px;bottom: 20px;right:10px;border-right:0;border-left: 1px solid rgba(255, 255, 255, 0.3);padding: 0 13px 0 13px;}
  #nav-lang li {padding: 10px 13px 10px 13px;}
  #nav-lang.open .nav-list {top:-45px;}

  #legalshow{ bottom: 7px; border: 0; text-align: center; right: inherit; left: 50%; width: 140px; padding: 0; margin-left: -70px; }
  section#legal{padding:0;height: 100%;}
  section#legal article{margin-top: 15%;padding-bottom: 20px;}

/* ====================== */
/*      LES ACTUS
======================== */
  section#news #dailynews .dailynews-details .dailynews-nav a {top:50px;}
  section#news #dailynews .dailynews-details .dailynews-nav .prev-news {left: 8%;}
  section#news #dailynews .dailynews-details .dailynews-nav .next-news {right: 8%;}
  #dailynews .slick-dots{display: none !important;}

/* ====================== */
/*       LES CHIFFRES
======================== */
  section#data #svgData,
  section#data #svgData_en {display: none;}
  section#data #svgData_mob,
  section#data #svgData_mob_en {display: block !important;}
  
/* ====================== */
/*       NOS CLIENTS
======================== */
  section#partners ul li {height:75px;}

/* ====================== */
/*       NOS EXPERTISES
======================== */
  section#expertises #expert-wheel{transform:scale(0.6);-ms-transform: scale(0.6);-webkit-transform:scale(0.6) ;margin: -30% auto;left: -58px;width: 330px;}
  section#expertises .static{r:70px!important;}
  section#expertises .module-camembert ul li p{max-width: 200px; font-size: 17px;}
  section#expertises .exp-cloud{background-position-x: -270px;bottom: 3%;}
  .skin-living section#expertises #expert-item .item-row .item h3,
  .skin-visionary section#expertises #expert-item .item-row .item h3,
  .skin-creative section#expertises #expert-item .item-row .item h3,
  .skin-sharing section#expertises #expert-item .item-row .item h3{color: #FFF;}
  section#expertises header p {display:none;}

/* ====================== */
/*     NOUS CONTACTER
======================== */
  section#contact {padding-top: 10%;}
  section#contact h2 span{font-size: 22px;line-height: 38px;}
  section#contact article .container{width: 97%;}
  section#contact article figure{left: 10%;}
  section#contact article figure:first-child figcaption{right: 30%;}
  section#contact article figure figcaption{top: 330px;left: 30%;width: 85%;font-size:15px;}
  section#contact article figure figcaption span {display:block;}
  section#contact h3{margin-top: 10%;}
  section#contact ul li{margin: 0 auto 25px;display: block;}
  section#contact .bg-cloud{background-size: cover;background-position: center;height: 740px;}
  section#contact .bg-color{top: -7%;}



}

/* Portrait phones and down */
@media only screen and (max-width:320px) {
  section#weare .container header p {line-height:40px;}
  section#data article#data-wheel{transform:scale(0.6);-ms-transform: scale(0.6);-webkit-transform:scale(0.6); }
  section#expertises #expert-wheel{transform:scale(0.5);-ms-transform: scale(0.5);-webkit-transform:scale(0.5); left: -57px;}
  section#contact article figure figcaption{top: 280px;}
  section h2 em{font-size: 35px}
  section h2 span{font-size:45px;line-height:55px;}
}

@media only screen and (min-width: 35em) {/* Style adjustments for viewports that meet the condition */}
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================= */
@media print {
    * {background: transparent !important;color: #000 !important; /* Black prints faster: h5bp.com/s */box-shadow: none !important;text-shadow: none !important;}
    a, a:visited {text-decoration: underline;}

    a[href]:after {content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}
    /*
     * Don't show links for images, or javascript/internal links
     */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {content: "";}
    pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
    thead {display: table-header-group; /* h5bp.com/t */}
    tr,img {page-break-inside: avoid;}
    img {max-width: 100% !important;}
    @page {margin: 0.5cm;}
    p,h2,h3 {orphans: 3;widows: 3;}
    h2,h3 {page-break-after: avoid;}
}