/* top pages
================================================== */
.banner{position:relative; background-repeat: no-repeat; background-size:cover;}
.banner-overlay{position:absolute;left:0;bottom:0;right:0;width:100%;height:100%; background: -moz-linear-gradient(top,  rgba(76,76,76,0) 51%, rgba(76,76,76,0.01) 52%, rgba(19,19,19,0.37) 100%);
background: -webkit-linear-gradient(top,  rgba(76,76,76,0) 51%,rgba(76,76,76,0.01) 52%,rgba(19,19,19,0.37) 100%);
background: linear-gradient(to bottom,  rgba(76,76,76,0) 51%,rgba(76,76,76,0.01) 52%,rgba(19,19,19,0.37) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004c4c4c', endColorstr='#5e131313',GradientType=0 );
}
.banner .title{position:absolute; bottom:3em; text-align:center;width:100%;}
  .banner .title h1{color:#fff;line-height:1.4em}

/* homepage -> mise en page
================================================== */
.case-study-wrapper {background-color:rgba(255,255,255,0); z-index:10; position: absolute; top: 50%; left: 50px; width: 310px; margin: 0; padding: 0; transition: all 400ms linear; -webkit-transition: all 400ms linear; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.case-study-wrapper li.case-study-name {position: relative; list-style: none; margin:0; display: block;}
.case-study-wrapper li.case-study-name a {display:block; padding: 8px 0; margin: 4px; font-family: 'CutOff';}
  .case-study-wrapper li.case-study-name a span.title {color:rgba(0,0,0,0.4);  font-family:'CutOff'; text-transform:uppercase; position:relative; display: inline-block; font-size: 30px; text-align: left; padding: 0; line-height: 20px; letter-spacing: 1px; -webkit-transition: all 300ms linear; transition: all 300ms linear;}
  .case-study-wrapper:hover li.case-study-name:hover a span.title,
  .case-study-wrapper li.case-study-name.active a span.title {color:rgba(0,0,0,0.7); }
  .case-study-wrapper li.case-study-name a span.title:before{position: absolute; content: ''; bottom: -6px; left: 0; width: 0; height: 1px; z-index: 1; opacity: 0; background-color: #000; -webkit-transition: all 300ms linear; transition: all 300ms linear;}
  /*target safari*/
  @media all and (-webkit-min-device-pixel-ratio: 0){
    .case-study-wrapper li.case-study-name a span.title:before{bottom: -4px;}
  }
  /*safari retina*/
  @media all and (-webkit-min-device-pixel-ratio: 2){
    .case-study-wrapper li.case-study-name a span.title:before{bottom: 0px;}
  }
  /*firefox*/
  @-moz-document url-prefix() {
  }
  .case-study-wrapper li.case-study-name:hover a span.title:before,
  .case-study-wrapper li.case-study-name.active a span.title:before{opacity: 1; width: 30%;}
    .case-study-wrapper li.case-study-name a span.arrow {color:#fff; display: inline-block; padding:0; margin:0; color: #fff; font-family: 'SuisseIntl', sans-serif; font-size: 30px; line-height: 40px; height: 28px; padding-right: 35px; vertical-align: top; padding-bottom: 5px; opacity: 0; -webkit-transition: all 300ms linear; transition: all 300ms linear;}
    .case-study-wrapper li.case-study-name a span.arrow:after {position: absolute; content: ''; width: 24px; height: 10px; top: 8px; right: 8px; background-position: center right; background-size: 20px 20px; background-repeat: no-repeat; background-image: url('../img/web/arrow-right-black.svg'); -webkit-transition: all 300ms linear; transition: all 300ms linear;}
    .case-study-wrapper li.case-study-name:hover a span.arrow:after {right: 0;}
    .case-study-wrapper:hover li.case-study-name:hover a span.arrow,
    .case-study-wrapper li.case-study-name.active a span.arrow {opacity: 1;}

.img-home {position: absolute; left: 400px; width: calc(100% - 400px); height: 100%; overflow: hidden; transition: all 400ms linear; -webkit-transition: all 400ms linear;}
  .home-shadow {-webkit-box-shadow: 5px 5px 9px 4px rgba(0,0,0,0.8); box-shadow: 5px 5px 9px 4px rgba(0,0,0,0.8);}
    @media (max-width: 991px) {
      .home-shadow {-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.6); box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.6);}
    }
  .overlay-home {background:#000;opacity:0;width:100%;height:100%;position:absolute;top:0;left:0;z-index:3;transition: opacity .3s linear;}
.case-study-images {position: absolute; top: 0; left: 0; width: 100%; height: 102%; margin:0; z-index:2;}
.case-study-images li {position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; list-style:none; -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.case-study-images li .img-hero-background{position:absolute; width:100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center center; background-repeat:no-repeat; top: 0; list-style:none; opacity: 0; -webkit-transform: opacity(-20px); transform: translateY(-20px); -webkit-transition: all 2s ease-out; transition: all 2s ease-out;}
.case-study-images li.show .img-hero-background {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}




  #info_contact{position: absolute; z-index: 50; bottom: 6vh; left: 50px; width: 200px; display: block; line-height: 1;  }
  #info_contact a, li.info_contact2 a{color:#000; font-weight: 300; font-size: 14px; text-transform:lowercase;}
  #info_contact a:hover, li.info_contact2:hover a{color:#888;}
  .info_contact2{position:relative; display:none; list-style:none;top:12%;}

    .social-wrap {display:flex; position:relative; left:-8px;}
      .social-wrap a{display:block; height:40px; width:40px; margin-right:2px; display:flex; align-items:center; justify-content:center;}
        .social-wrap a i{font-size:25px;}




      /*MEDIA QUERIES */
      @media (max-width: 1800px) {
      }
      @media (max-width: 1300px) {
        .case-study-wrapper {	width: 275px;}
        .img-home{left: 340px; width: calc(100% - 340px); }
        .case-study-wrapper li.case-study-name a {padding: 6px 0; margin: 4px;}
        .case-study-wrapper li.case-study-name a span.title {font-size: 26px; line-height: 24px; letter-spacing: 1px;}
        .case-study-wrapper li.case-study-name a span.arrow {font-size: 22px; line-height: 24px; height: 24px; letter-spacing: 1px; padding-right: 35px; vertical-align: top; padding-bottom: 5px; }
        .case-study-wrapper li.case-study-name a span.arrow:after {	top: 8px; background-size: 14px 14px; }
      }
      @media (max-width: 1199px) {
        .case-study-wrapper {	transition:none;}
        .img-home{ transition:none;}
      }
      @media (max-width: 991px) {
        .overlay-home{opacity:0.15;}
        #info_contact a{display:none;}
        .info_contact2{display:block;}
        .home .menu-icon__line {background-color: #fff;}
        .case-study-wrapper {padding:2em 26vw; width:100%; left:0; bottom:0; top:inherit; height:40vh; -webkit-transform: translateY(0%); transform: translateY(0%);}
        .img-home{	width: 100%; left: 0; height:60vh;}
      }
      @media (max-width: 767px) {
        .case-study-wrapper {padding:2em 19vw;}
      }
      @media (max-width: 575px) {
      }
      @media screen and (max-device-width: 767px) and (orientation: portrait) {
        .case-study-wrapper {height:45vh;}
        .img-home{height:55vh;}
      }
      @media screen and (max-device-width: 767px) and (orientation: landscape) {
        .case-study-wrapper {	width: 30vw; position: absolute; top: 50%; padding: 0 20px 0 20px; margin: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
        .img-home{height:100%; left: 30vw; width: 70vw; }
        .case-study-wrapper li.case-study-name a span.arrow{display:none;}
      }

/* homepage -> video
================================================== */
#home_play_video{position: absolute; left: 23%; width: 77%; height: 100%; display: flex; justify-content: center; align-items: center; z-index:9}
  .btn-play {position: relative; display: inline-block; width:11vw; height:11vw; max-width:7em; max-height:7em; min-width:6em; min-height:6em;}
    .btn-play .circle {position: relative; width:100%; height:100%; border-radius:50%; border: 2.5px solid transparent; transition: all 300ms ease-in-out; transform: scale3d(1,1,1);}
    .btn-play .circle:after {opacity:0; transition: all 300ms ease-in-out; content: ""; display:block; position: absolute; width:100%; height:100%; border-radius:50%; border: 10px solid #fff; transform: scale3d(.9,.9,.9);}
    .btn-play .pulse {opacity:1; position: absolute; width:100%; height:100%; border-radius:50%; border: 2.5px solid #fff; -webkit-animation: pulse 3s infinite ease-in-out; -moz-animation: pulse 3s infinite ease-in-out; -ms-animation: pulse 3s infinite ease-in-out;	-o-animation: pulse 3s infinite ease-in-out; animation: pulse 3s infinite ease-in-out; transition: all 300ms ease-in-out;}
    .btn-play .pulse {-webkit-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.5);}
    .btn-play .arc {transition: all 300ms ease-in-out;  opacity:0; overflow: hidden; position:absolute; top:-.7em; left:-.7em; right:50%; bottom:50%; transform-origin: 100% 100%; transform: rotate(0deg) skewX(40deg); -moz-animation: arc_rotate 10s infinite linear; -ms-animation: arc_rotate 10s infinite linear;	-o-animation: arc_rotate 10s infinite linear; animation: arc_rotate 10s infinite linear; transition: all 300ms ease-in-out;}
    .btn-play .arc:before {box-sizing: border-box; display: block; border: solid 0.5em #fff; width: 200%; height: 200%; border-radius: 50%; transform: skewX(-40deg); content: ''; opacity:.3; transition: all 300ms ease-in-out;}
    .btn-play .triangle {position: absolute;margin: auto;top: 50%;left: 10%;right: 0;width: 34%;height: 34%; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transition: all 300ms ease-in-out; transform: translateY(-50%) translateX(-50%) scale3d(1.6,1,1) rotate(-45deg);}
    .btn-play .triangle:after {content: ""; display:block; position: absolute; top:50%; left:50%; width:2px; height: 145%; background:#fff; transform: translateY(-50%) rotate(45deg);}
    .btn-play .full_triangle { opacity:0; left:25%; position:absolute; width:50%; padding:50% 0 0; overflow:hidden; top:50%; transition: all 300ms ease-in-out; transform: translateY(-50%) scale3d(.4,.5,.5);}
    .btn-play .full_triangle:after {content: "";display: block;position:absolute;right:0;top:50%;width: 0;height: 0;border-top: 1500px solid transparent;border-bottom: 1500px solid transparent;border-left: 3000px solid #fff;margin-top:-1500px;}
      .btn-play:hover .circle {transform: scale3d(.9,.9,.9); border: 3px solid #fff;}
      .btn-play:hover .circle:after {opacity:.3; transform: scale3d(1.6,1.6,1.6);}
      .btn-play:hover .arc {opacity:1; top: -2.3em;left: -2.3em;}
      .btn-play:hover .arc:before {border: solid 1em #fff; opacity:.6;}
      .btn-play:hover .triangle {opacity:0; transform: translateY(-50%) translateX(-50%) scale3d(.8,.5,.5) rotate(-45deg);}
      .btn-play:hover .full_triangle {opacity:1; transform: translateY(-50%) scale3d(.8,1,1);left:30%;}
      .btn-play:hover .pulse {opacity:0;}
      @keyframes pulse {0% {transform: scale3d(1,1,1);} 50% {transform: scale3d(1.15,1.15,1.15);} 100% {transform: scale3d(1,1,1);}}
      @-moz-keyframes pulse {0% {transform: scale3d(1,1,1);} 50% {transform: scale3d(1.15,1.15,1.15);} 100% {transform: scale3d(1,1,1);}}
      @-webkit-keyframes pulse {0% {transform: scale3d(1,1,1);} 50% {transform: scale3d(1.15,1.15,1.15);} 100% {transform: scale3d(1,1,1);}}
      @-ms-keyframes pulse {0% {transform: scale3d(1,1,1);} 50% {transform: scale3d(1.15,1.15,1.15);} 100% {transform: scale3d(1,1,1);}}
      @-o-keyframes pulse {0% {transform: scale3d(1,1,1);} 50% {transform: scale3d(1.15,1.15,1.15);} 100% {transform: scale3d(1,1,1);}}
      @keyframes arc_rotate {0% {-webkit-transform: rotate(0deg) skewX(40deg); -moz-transform: rotate(0deg) skewX(40deg);	-o-transform: rotate(0deg) skewX(40deg); -ms-transform: rotate(0deg) skewX(40deg); transform: rotate(0deg) skewX(40deg);} 100% {-webkit-transform: rotate(360deg) skewX(40deg); -moz-transform: rotate(360deg) skewX(40deg); -o-transform: rotate(360deg) skewX(40deg); -ms-transform: rotate(360deg) skewX(40deg); transform: rotate(360deg) skewX(40deg);}}
      @-moz-keyframes arc_rotate {0% {-moz-transform: rotate(0deg) skewX(40deg);transform: rotate(0deg) skewX(40deg);} 100% {-moz-transform: rotate(360deg) skewX(40deg);transform: rotate(360deg) skewX(40deg);} }
      @-webkit-keyframes arc_rotate {0% {-webkit-transform: rotate(0deg) skewX(40deg);transform: rotate(0deg) skewX(40deg);} 100% {-webkit-transform: rotate(360deg) skewX(40deg);transform: rotate(360deg) skewX(40deg);} }
      @-ms-keyframes arc_rotate {0% {-ms-transform: rotate(0deg) skewX(40deg);transform: rotate(0deg) skewX(40deg);} 100% {-ms-transform: rotate(360deg) skewX(40deg);transform: rotate(360deg) skewX(40deg);} }
      @-o-keyframes arc_rotate {0% {-o-transform: rotate(0deg) skewX(40deg);transform: rotate(0deg) skewX(40deg);} 100% {-o-transform: rotate(360deg) skewX(40deg);transform: rotate(360deg) skewX(40deg);} }


  .logo-wrap-video {height:100%;top:0; opacity:.6;}
  .logo-wrap-video:hover {opacity:1;}
  .logo-wrap-video h1{height:100%;}
  .logo-wrap-video:hover h1{transform: scale3d(0.985, 0.985, 0.985); }
  .videoWrapper .logo-size{position:relative; text-indent:-9999px;  cursor:pointer; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; background-size:contain; background-position:left center; background-repeat: no-repeat;}

  /*menu si body->video-active*/
  body.video-active .nav {visibility: visible;}
  body.video-active .nav:before, body.logo-wrap .nav:after {-webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%);}
  body.video-active .nav:after {-webkit-transition-delay: .1s; transition-delay: .1s;}
  body.video-active .nav:before {-webkit-transition-delay: 0s; transition-delay: 0s;}
  .videoOverlay{position: fixed;top:0px;left: 0px;height:100%;width:100%;z-index: 899;background-color: rgba(0, 0, 0, 0.9);opacity:0.9;display:none;}
  .main-vid-box{position: fixed; width: 100%;  height:100vh;  display:none;  top:0px;  left:0px;  z-index: 999;}
  .videoWrapper {  position: relative;  z-index:999;  background-color:#000;  width:100%;  height: 100%;  display: flex; justify-content: center; align-items: center;}
  .videoWrapper .videoMarginBox{position:relative; margin:5vw;padding:100px 0 100px 0; max-height:100vh;
  -webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	border-width: 0;
  }
  @media screen and (min-width: 1500px) {.videoWrapper .videoMarginBox{width:100%;}}/*vertical*/
  @media screen and (min-aspect-ratio: 3/2) and (min-width: 1500px) {.videoWrapper .videoMarginBox{height:100%;}}/*horizontal*/


  .videoWrapper .videoMarginBox .logoBox{position:absolute; top:20px; left:0; width:200px; height:60px;}
  .videoWrapper .videoMarginBox .closeBox{position:absolute; top:20px; right:-10px; width:60px; height:60px; padding:20px 15px; z-index:9999;}
    .close-icon {opacity:.6; height: 30px; width: 30px; position: relative; z-index: 2; cursor: pointer; display: block;}
    .close-icon__line {height: 2px; width: 30px; display: block; background-color: #fff; margin-bottom: 7px; cursor: pointer;-webkit-transform: translate(0px, 0px) rotate(-45deg); transform: translate(0px, 0px) rotate(-45deg);}
    .close-icon__line-left {width: 15px; -webkit-transform: translate(2px, 4px) rotate(45deg); transform: translate(2px, 4px) rotate(45deg);}
    .close-icon__line-right {width: 15px; float: right;-webkit-transform: translate(-3px, -3.5px) rotate(45deg); transform: translate(-3px, -3.5px) rotate(45deg);}
    .closeBox:hover .close-icon {opacity:1;}
  .videoWrapper .videoMarginBox video {	position: relative;	top: 0;	left: 0;	z-index: 999;	width: 100% !important;	height: 100% !important;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	border-width: 0;	border-style: solid;	border-color: transparent;}


      /*MEDIA QUERIES */
      @media (max-width: 1800px) {
        #home_play_video{left: 26%; width: 74%;}
      }
      @media (max-width: 1300px) {
        #home_play_video{left: 28%; width: 72%;}
      }
      @media (max-width: 1199px) {
        #home_play_video{left: 31%; width: 69%;}
      }
      @media (max-width: 991px) {
        #home_play_video{left: 0; width:100%;height:70%}
      }
      @media (max-width: 767px) {
        #home_play_video .btn-play{width:45px; height:45px;}
      }
      @media (max-width: 575px) {
        #home_play_video .btn-play{width:40px; height:40px;}
      }
      @media screen and (max-device-width: 767px) and (orientation: landscape) {
        #home_play_video{left: 28%; width: 72%; height:100%;}
        #home_play_video .btn-play{ width:11vw; height:11vw; max-width:7em; max-height:7em; min-width:6em; min-height:6em;}
      }


/* gallery
================================================== */
#isMobile{display:none;}
@media screen and (max-device-width: 767px){#isMobile{display:inline-block;}}

/*titre*/
.gallery-title-wrap {padding:calc(20px + 4vh) 0 0 0;}
    .gallery-title-wrap h1{padding:0; font-size: 3.5rem; font-weight: 300; line-height: 1.1; font-family: 'CutOff';}
    .gallery-txt{padding: 0 0 calc(20px + 1vh) 0;text-align:justify;}
    /*menu*/
    .gallery-menu{padding:0; width:100%;}
    #portfolio-filter {background:rgba(255,255,255,1); position:relative; text-align: center; z-index:20; width:100%;padding:calc(10px + 1vh) 0 calc(10px + 1vh) 0;}
    .filter {position:relative; display:inline-block; text-align: center; padding: 0; margin: 0;}
    .filter li {display: inline-block; margin-right:10px; margin-left:10px; padding: 0;}
    .filter:after {content: '';
      display: block;
      clear: both;}
    .filter li a {text-transform:uppercase; font-weight: 300; font-size: 13px; color:#888; position: relative; display: inline-block; letter-spacing:1px; box-sizing: border-box; outline: none; font-family: 'SuisseIntl', sans-serif; line-height:22px; text-decoration: none;
        -webkit-transition: all 300ms linear;
        transition: all 300ms linear;}
    .filter li a:hover {color:#000;}
    .filter li a:before {background-color: #000; position: absolute; width: 100%; left: 0; bottom: -9px; height: 2px; content: ''; z-index: -1; opacity: 0; visibility: hidden;
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;}
    .filter li a.current:before {bottom: -4px; opacity: 1; visibility: visible;}
    .filter li a.current {color:#000;}
    .filter li a:hover:before {bottom: -4px; opacity: 1; visibility: visible;}

    /*MEDIA QUERIES */
    @media (max-width: 1300px) {.gallery-title-wrap h1 {font-size: 3.4rem;}}
    @media (max-width: 1199px) {.gallery-title-wrap h1 {font-size: 3.3rem;} .gallery-title-wrap {padding:calc(50px + 3.5vh) 0 0 0;}}
    @media (max-width: 991px) {.gallery-title-wrap h1 {font-size: 3.1rem;} .gallery-title-wrap {padding:calc(90px + 2vh) 0 0 0;}}
    @media (max-width: 767px) {.gallery-title-wrap h1 {font-size: 2.9rem;} .gallery-title-wrap {padding:calc(100px + 3.5vh) 0 0 0;}}
    @media (max-width: 575px) {.gallery-title-wrap h1 {font-size: 2.6rem;} .gallery-title-wrap {padding:calc(100px + 3vh) 0 0 0;}}
    @media screen and (max-device-width: 767px) {
      .gallery-title-wrap {padding:15vh 0 2vh 0;}
      .gallery-title-wrap h1 {font-size: 1.5em; }
      .filter li {line-height:0.1; padding:20px 20px 20px 20px; margin-bottom:13px;font-size: 2em; font-weight:bold;background:rgba(255,255,255,0.6); border-radius:10px; }
      .filter li a.current:before {background-color: transparent;}
      .gallery-menu{margin-bottom:10px;}
      #portfolio-filter {background:transparent;}
    }


    /* waterfall grid */
    .wf-r{position:relative; height:100%; width:100%;}
    .wf-container {margin: calc(30px + 1vh) auto 0 auto; padding-bottom: 100px;}
    .wf-container:before, .wf-container:after {content: ''; display: table;}
    .wf-container:after {clear: both;}
    .wf-column {float: left;}
      .wf-box {margin: 50px; position:relative; padding:0 0 12px 0;}
        .wf-frame{border-radius:2px; z-index:10; overflow:hidden; width:100%; position:relative; padding:0; transform: translate3d(0, 0, 0);}
          .wf-youtube-ico{position:absolute; top:0; bottom:0; left:0; right:0; z-index:2;display:flex; align-items:center; justify-content: center; background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 100%);
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#0d000000',GradientType=1 );/*https://www.colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+0,0.05+100;Neutral+Density*/
}
          .wf-youtube-ico:before{position:relative; display:inline-block; width:50px; height:50px; margin:0 5px 0 0; color:#fff; content: "\f16a";font: normal normal normal 47px/1 FontAwesome;font-size: 47px;}
          .wf-frame a{position:relative; height:100%; width:100%; display:block;}
            .wf-frame .img{position:relative;}
              .wf-frame img {min-height:100%; width:100%; max-width:100%; object-fit: cover}
            .wf-frame .slide{position:absolute;  background-size:cover; background-repeat:no-repeat; background-position:center center;}
              .wf-frame .slide, .wf-frame .img{height:100%; width:100%; transform:scale3d(1,1,1); transition:transform .4s ease-out, filter .4s ease-out;}
              .wf-frame:hover .slide, .wf-frame:hover .img{transform:scale3d(1.03,1.03,1.03);filter: brightness(122%);}
              .format-landscape{width: 100%; height: 0; padding-bottom: 75%;}
              .format-square{width: 100%; height: 0; padding-bottom: 100%;}
              .format-portrait{width: 100%; height: 0; padding-bottom: 133%;}

            .wf-frame .mask{position:absolute; opacity:0; background:#fff; top:0; left:0; right:0; bottom:0; -webkit-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;}
            .wf-frame:hover .mask{opacity:0;}
            .wf-frame .strip{position:absolute; opacity:0; background:#000; height:40px; bottom:-40px; left:0; right:0; -webkit-transition: all 300ms ease-out; transition: all 300ms ease-out;}
            .wf-frame:hover .strip{bottom:0; opacity:.5}
            .wf-frame .title{text-align:right; position: absolute; bottom: 6px; right: 15px; color: #fff; font-size:1rem; font-weight: 300; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); cursor: pointer; margin: 0; padding: 0; z-index: 4; letter-spacing: 1px;
                -webkit-transition: all 300ms linear;
                transition: all 300ms linear;}
            .wf-frame:hover .title{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}

        .wf-container h2{color:rgba(0,0,0,0.85); margin:3px 0 0 0; padding:0; font-size:14px;font-weight:500;}
        .wf-container h3{color:rgba(0,0,0,0.6); margin:7px 0 0 0; padding:0; font-size:12px; font-weight:300; text-transform: uppercase;}
        .wf-container .txt{position:relative; overflow:hidden; text-align:center;}
        .wf-container .txt_h{width:100%;opacity:0;position:absolute;top:20px;text-align:center;z-index:5; overflow:hidden;}

        @media screen and (max-device-width: 767px) {
          .wf-container h2{font-size:16px;}
            .wf-container h3{font-size:14.5px;}
        }

    /* gérer le nombre de colonne en gérant la largeur du container
    // et la largeur minimum des images dans custom.js
    // minBoxWidth: xxxxxxx (line 249)
    */

    @media (max-device-width: 767px){}
    @media (min-width: 400px){
      .wf-container{width:calc(100% - 40px);}
    }
    @media (min-width: 700px){
      .wf-container{width:90vw; width:calc(100% - 40px);}
    }
    @media (min-width: 992px){
      .wf-container{width:90vw;}
    }
    @media (min-width: 1300px){
      .wf-container{width:85vw;}
    }
    @media (min-width: 1600px){
      .wf-container{width:80vw; max-width:1400px;}

    }


/* gallery detail
================================================== */
  .detail-container{max-width:1600px;position:relative; padding:0; margin:calc(80px + 8vh) auto 0 auto; height: calc(75vh - 80px); display:flex; flex-wrap: nowrap; justify-content:center;}
    a.detail-prev,
    a.detail-next{position:relative; width:10%; height:100%; display:flex; align-items:center; justify-content:center;  transition: width 0.5s; cursor:pointer;}
      .detail-container .ico{width:50px; height:50px; background-color: #000; background-position: center center; background-size: contain; background-repeat: no-repeat; opacity:0.4; transition: opacity 0.4s;}
      .detail-prev .ico{-webkit-mask-image: url('../img/web/detail-prev.svg');mask-image: url('../img/web/detail-prev.svg');}
      .detail-next .ico{-webkit-mask-image: url('../img/web/detail-next.svg');mask-image: url('../img/web/detail-next.svg');}
      .detail-prev:hover .ico,
      .detail-next:hover .ico{opacity:1;}
      @keyframes prevloop {
        from { transform: translate(-10px);}
        to { transform: translate(0px);}
      }
      @keyframes nextloop {
        from { transform: translate(10px);}
        to { transform: translate(0px);}
      }
      .detail-prev:hover .ico,
      .detail-next:hover .ico {
        animation-duration: 0.4s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .detail-prev:hover .ico {animation-name: prevloop;}
      .detail-next:hover .ico {animation-name: nextloop;}

    .detail-bloc{position:relative; width:80%; height:100%; display:flex; flex-wrap: nowrap; justify-content:center;  transition: width 0.5s;}
      .detail-bloc .img{border-radius:2px;}
      .detail-bloc a.bkg_img {display:block; width:60%; min-height:60vh; cursor:zoom-in;}
        .detail-bloc a.bkg_img > div {position:relative; height:100%; width:100%;}
      .detail-bloc img.img{display:none; width:100%;border:1px solid #ddd;}
      .detail-bloc div.txt{position:relative; width:40%; padding:0 0 0 40px;}
        a.back_gallery{display:flex; align-items:center; justify-content:center; position:absolute; top: -60px; left: -48px; width:60px; height:50px; z-index:101; overflow:hidden; text-indent:-9999px; border-radius:4px;}
        body.nav-active a.back_gallery{z-index:90;}
          a.back_gallery::after{opacity:.4; transition:opacity 1s; position:relative; width:50px; height:40px; background-size:70% 70%; background-image:url(../img/web/btn_back_gallery.svg); background-repeat:no-repeat; background-position:center;  content:'';}
          a.back_gallery:hover::after{opacity:1;}
          body.nav-active a.back_gallery::after,
          body.nav-active a.back_gallery:hover::after{opacity:0;}

        .detail-bloc div.txt {font-size:0.9em;}
          .detail-bloc div.txt span.title{display:block; margin-bottom:5px; text-transform:uppercase; font-size:1.1em; font-weight:bold; color:#000;}
          .detail-bloc div.txt .title_format{margin-top:30px;}
          .detail-bloc div.txt .link{margin:5px 0;}
            .detail-bloc div.txt .link a{display:inline-block; margin:15px 0; padding:3px 6px; font-size:0.95em; font-weight:bold; color:#000; border:1px solid #000; border-radius:5px;}
            .detail-bloc div.txt .link a:hover{border:1px solid grey;}
            .detail-bloc div.txt .grid div{width:80%; display:flex; justify-content:start;}
            .detail-bloc div.txt .grid span{display:inline-block;}
            .detail-bloc div.txt .grid span:nth-child(1){width:9em;}
            .detail-bloc div.txt .grid span:nth-child(2){font-weight:bold;}
            .detail-bloc div.specs{color:#555; font-size:11px; position:relative; left:12px;}
            .detail-bloc div.specs ul{list-style-type: square;}/* list-style-type: none; margin:0; padding:0;}*/


    @media (max-width: 1300px) {
      .detail-bloc a.bkg_img{width:61%;}
      .detail-bloc div.txt{width:39%;}
    }
    @media (max-width: 1100px) {
      .detail-container{height:inherit;}
        .detail-prev,
        .detail-next{position:relative; width:25vw;  height: calc(92vh - 80px); min-height: 400px;}
          .detail-container .ico{width:45px; height:45px;}
        .detail-bloc{flex-wrap:wrap; width:50vw;}
          .detail-bloc img.img{display:inline;}
          .detail-bloc a.bkg_img{display:none;}
          .detail-bloc div.txt{width:100%; padding:30px 0 0 0;}
          a.back_gallery{position:relative; top: -10px; left: -10px;}
    }
    @media (max-width: 1000px) {
      .detail-container .ico{width:40px; height:40px;}
      .detail-prev,
      .detail-next{width:20vw;}
      .detail-bloc{width:calc(60vw);}
    }
    @media (max-width: 850px) {
      .detail-prev,
      .detail-next{width:20vw;}
      .detail-bloc{width:calc(60vw);}
    }
    @media (max-width: 767px) {
      .detail-container .ico{width:30px; height:30px;}
      .detail-prev,
      .detail-next{width:calc(10vw + 50px);}
      .detail-bloc{width:calc(90vw - 100px);}
    }

    @media screen and (max-device-width: 767px) {
      .detail-container{position:relative; margin:calc(80px + 5vh) 0 0 0; width:100%;}
        a.detail-prev,
        a.detail-next{top:0; bottom:inherit; position:absolute; display:block; margin-top:15%; height:40px; width:15%; text-align:center;}
        .detail-prev{left:0;}
        .detail-next{right:0;}
        .detail-prev:hover .ico {animation-name:none;}
        .detail-next:hover .ico {animation-name:none;}
        .detail-prev .ico,
        .detail-next .ico{opacity:1; display:inline-block;}
        .detail-container:active .ico{background-color: red;}
        .detail-bloc{width:100%;}
          .detail-bloc img.img{width:70%; margin:0 15%;}
          .detail-bloc div.txt{width:70%; margin:0 15%; padding:30px 0 0 0;}
    }

/* atelier
================================================== */
  .banner-compagny{background-image: url("../img/web/clauson_art_main.jpg"); height:40vh; min-height:220px; width:100vw; background-position:center 20%;}

  #bloc-txt{background:#fff;width:100%;min-height:800px;}
    @media screen and (max-device-width: 767px) {
        #bloc-txt{padding:0 20px;}
    }


  .company_details_block .ico{background-color: #ccc; display:block; margin:0 auto; width:110px;height:110px; background-position: center center; background-size: contain; background-repeat: no-repeat;}
    .ico_1{-webkit-mask-image: url('../img/web/company_ico1C.svg');mask-image: url('../img/web/company_ico1C.svg');}
    .ico_2{-webkit-mask-image: url('../img/web/company_ico2C.svg');mask-image: url('../img/web/company_ico2C.svg');}
    .ico_3{-webkit-mask-image: url('../img/web/company_ico3C.svg');mask-image: url('../img/web/company_ico3C.svg');}
    .ico_4{-webkit-mask-image: url('../img/web/company_ico4C.svg');mask-image: url('../img/web/company_ico4C.svg');}
  .company_details_block h5{text-transform:uppercase; font-size:1.3rem; text-align: center;}
  .company_details_block p{text-align: justify;}

div.banner-compagny2{position:absolute; background-image: url("../img/web/atelier-bkg2.jpg"); height:100%; width:100%; background-position:center top; opacity: 0.6;}

a.big-link{position: relative; display: block; width: 100%; text-align: center; cursor: pointer;}
a.big-link p{padding: 0.25em 0; color:rgba(255,255,255,1); border-top:1px solid #fff; border-bottom:1px solid rgba(255,255,255,0.8); font-size: 60px; line-height: 80px; font-family: 'SuisseIntl', sans-serif;
font-weight: 700; text-align: center; margin: 0 auto; cursor: pointer; opacity: 1;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;}
a.big-link:hover p{color:rgba(255,255,255,0.7); transform: scale3d(0.98,0.98,0.98); border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1);}


/* contact
================================================== */
.banner-contact {background-image: url("../img/web/contact-bkg.jpg"); height:30vh; min-height:220px; width:100vw; background-position:center center;}
.ajax-form input{ border:none; cursor: text;
    -webkit-transition: all 250ms linear;
    transition: all 250ms linear;}
.ajax-form input, .ajax-form textarea {background-color: rgba(0,0,0,.05); color: #000; line-height: 1.7; position:relative; width: 100%; padding:20px 20px; font-weight: 400; font-size: 15px; z-index:50;}
.ajax-form .is-invalid input, .ajax-form .is-invalid textarea {background-color: rgba(255,0,0,.1);}
.ajax-form .is-valid:before {font-size:1.6em; font-family:'FontAwesome'; right:20px; top:11px; position:absolute;z-index:50; color:rgb(0,180,10); content: "\f00c";}
.ajax-form .is-invalid textarea:focus,
.ajax-form .is-invalid input:focus {background-color: rgba(255,0,0,.1);}
.ajax-form .is-invalid textarea:focus::placeholder,
.ajax-form .is-invalid input:focus::placeholder {color: #999;}

.error-tip { font-size:.8em; text-align:center; background-color: red; width:100%; color: #fff; font-weight: bold; line-height: 20px; position: relative; padding: 7px 11px 4px;}
.error-tip:after {content: ''; position: absolute; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; top:-11px; border-style: solid; border-width: 0 12px 12px 12px; border-color: transparent transparent red transparent;}

.ajax-form textarea {height: 140px; border:none; cursor: text;
    -webkit-transition: all 250ms linear;
    transition: all 250ms linear;}
.ajax-form textarea:active,
.ajax-form input:active {color: #000;}
.ajax-form textarea:active,
.ajax-form input:hover {color: #000;}
.ajax-form textarea:focus,
.ajax-form input:focus {  outline: none !important; background-color: rgba(0,0,0,.2);}
.ajax-form input:focus::placeholder,
.ajax-form textarea:focus::placeholder { color: #fff; }
.ajax-form input:-ms-input-placeholder,
.ajax-form input::-moz-placeholder,
.ajax-form input:-moz-placeholder,
.ajax-form input::-webkit-input-placeholder,
.ajax-form textarea:-ms-input-placeholder,
.ajax-form textarea::-moz-placeholder,
.ajax-form textarea:-moz-placeholder,
.ajax-form textarea::-webkit-input-placeholder  {font-size: 13px; color: #555; font-weight: 700;}
.ajax-form button {color:#fff; cursor: pointer; font-size: 13px; padding: 12px 25px; text-transform: uppercase; letter-spacing: 2px; background-color: #999; border:none; outline:none; margin: 0 auto; text-align: center;
    -webkit-transition: all 250ms linear;
    transition: all 250ms linear;}
.ajax-form button:focus,
.ajax-form button:active {border:none; outline:none;}
.ajax-form button span{position: relative; display: block; cursor: pointer;
    -webkit-transition: all 250ms linear;
    transition: all 250ms linear;}
.ajax-form button:hover{background-color: #313131;}

.list {margin: 0 auto; padding: 0; text-align: center;}
.list__item {margin: 0 0 .5rem 0; padding: 0; list-style: none;}
.list__item:last-child {margin: 0;}
.label--checkbox {position: relative; line-height: 135%; cursor: pointer; background: transparent; text-align: center;}
.checkbox {position: relative; top: -0.9rem; margin: 0 2rem 0 0; cursor: pointer; background: transparent; width: 0 !important; height: 0 !important; -webkit-appearance: none; -moz-appearance: none; text-align: center;}
.checkbox:active,
.checkbox:focus{border: none; outline: none;}
.checkbox:before {border: 2px solid #888; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; content: ""; position: absolute; left: 0; z-index: 1; width: 1.3rem; height: 1.3rem; border-radius:5px; background: transparent;}
.checkbox:checked:before {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); height: .5rem; margin-top: 2px; border-top-style: none; border-right-style: none; background: transparent;}
.checkbox:after {content: ""; position: absolute; top: -0.125rem; left: 0; width: 1.1rem; height: 1.1rem; background: transparent; cursor: pointer;}
.checkbox:checked:before{border-color: #888;border-radius:0px;}

.msg {display:inline-block;line-height:2em;margin:0 0 0 30px;}
  .end_message_ok .msg{color:#03a413;}
  .end_message_error .msg{color:#cb0000;}
.icon_anim{display:inline-block; position:relative;height:70px;width:70px;background-size:contain; background-repeat:no-repeat; background-position:center center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat: no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center center; mask-position:center center;}
  .end_message_ok .icon_anim{ background-color:#03a413; -webkit-mask-image:url("../img/icons/ok_200_transparent.gif"); mask-image:url("../img/icons/ok_200_transparent.gif");}
.end_message_error .icon_anim{ background-color:#cb0000; -webkit-mask-image:url("../img/icons/warning-1_200_transparent.gif"); mask-image:url("../img/icons/warning-1_200_transparent.gif");}

.msgAnim {padding:2em 0;display:flex; align-items:center; -webkit-animation-name: msgAnim; animation-name: msgAnim; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
  @keyframes msgAnim {
    0% {opacity: 0;-webkit-transform: translate3d(0, 60px, 0);transform: translate3d(0, 60px, 0);}
    100% { opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
  }


h5.contact-address{font-size:34px}
.contact-link{display:block; font-size: 18px; line-height: 1.7; letter-spacing: 2px; font-weight: 400; color: #888;
    -webkit-transition: all 250ms linear;
    transition: all 250ms linear;}
.contact-link:hover{text-decoration: none; color: #000;}

a.big-link-contact{position: relative; display: block; width: 100%; text-align: center; cursor: pointer;}
a.big-link-contact p{color:#aaa; border-top:2px solid #ccc; border-bottom:2px solid #ccc; padding:0.25em 0; font-size:40px; line-height:80px; font-weight: 700; text-align: center; margin: 0 auto; cursor: pointer; opacity: 1; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
a.big-link-contact:hover p{color:rgba(0,0,0,0.7); border-top:2px solid rgba(0,0,0,0); border-bottom:2px solid rgba(0,0,0,0); transform: scale3d(0.98,0.98,0.98);}
.button_2nd{position:relative;top:-2px;}


.sebcha-box{display:flex; display:flex; align-items:center; justify-content:space-around;}
  .sebcha-txt{position:relative; height:34px; line-height:34px;}
    .required{font-size:0.8em; position:relative;top:-0.3em;left:0.1em;}
  .sebcha{position:relative; height:34px; border-radius:4px; display:flex; align-items:center; justify-content:center;}
    .sebcha img{display:inline-block; height:100%; width:34px; border:0px; background-color:transparent; background-size:cover}
    @media (max-width: 768px) {
      .sebcha-txt{padding: 0 15px 0 0;}
      .sebcha-box{justify-content:flex-start;}
    }
  .is-invalid-sebcha{margin-bottom:40px;}


  /*MEDIA QUERIES */
  @media (max-width: 1300px) {
    h5.contact-address{font-size:34px}
    a.big-link-contact p{font-size:40px;}
  }
  @media (max-width: 1199px) {
    h5.contact-address{font-size:32px}
    a.big-link-contact p{font-size:38px;}
  }
  @media (max-width: 991px) {
    h5.contact-address{font-size:31px}
    a.big-link-contact p{font-size:34px;}
  }
  @media (max-width: 767px) {
    h5.contact-address{font-size:30px}
    a.big-link-contact p{font-size:32px;}
    .ajax-form .is-valid:before {right:35px;}
  }
  @media (max-width: 575px) {
    h5.contact-address{font-size:26px}
    a.big-link-contact p{font-size:30px;}
  }