h2.labelled{
  padding:0 .5rem;
  color:#f4fcff;
}

h2.labelled:before{
  content:" ";
  background:#387a98;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:4px;
}

h2 .split{
  overflow:hidden;
}
  .split ._l{
    display: inline-block;
  }

h2 .num{
  font-weight:normal;
}
  h2 .num:after{
    content: "";
    position: relative;
    display: inline-block;
    height: .1em;
    margin: 0px 10px;
    background-color: #35728e;
    width: 1rem;
    transition: transform 1s ease .2s;
    transform: scaleX(1);
    transform-origin: left center;
    border-radius:4px;
  }

.section-surmesure{
  margin:4rem 0;
}
  .section-surmesure *{
    position: relative;
    z-index:10;
  }

.superShadow {
  text-shadow:     0 1px 0 hsl(174,5%,80%),
                     0 2px 0 hsl(174,5%,75%),
                     0 3px 0 hsl(174,5%,70%),
                     0 4px 0 hsl(174,5%,66%),
                     0 5px 0 hsl(174,5%,64%),
    
                     0 0 5px rgba(0,0,0,.05),
                    0 1px 3px rgba(0,0,0,.2),
                    0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.2),
                  0 10px 10px rgba(0,0,0,.2),
                  0 20px 20px rgba(0,0,0,.3);
}
  
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
    
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/**
  Specific
*/


.scratch{
  position:relative;
  max-width:50%;
  margin:0 auto;
}
  .scratch img{
    width:100%;
    height:auto;
  }
  .scratch svg{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }

#sketchs{
  position: relative;
  min-height: 0;
}

.isometric-layout{
  backface-visibility: hidden;
  transform-style: preserve-3d;
  position:absolute;
  top:0;
  z-index:5;
}

  .isometric-layout .iso-items{
    position: relative;
    width: 140%;
    display: flex;
    flex-wrap: wrap;
    transform: rotateX(40deg) rotateZ(-15deg) translateX(-10%);
  }
    .isometric-layout .iso-items > div{
      position:relative;
      margin:1%;
      line-height: 0;
      opacity:1;
      background:white;
      box-shadow:-2px 2px 0px #c2c9cf;
      top:0;
    }
      .isometric-layout .iso-items > div img{
        opacity:1;
        transition:opacity .5s ease;
      }
        .isometric-layout .iso-items > div.active{
          transition:all .5s ease;
        } 
        .isometric-layout .iso-items > div.hover{
          top:-2px;
          box-shadow:-4px 4px 0px #c2c9cf;
        }
          .isometric-layout .iso-items > div.hover img{
            opacity:.7;
          }

      .isometric-layout .iso-items > div img{
        min-width:300px;
        max-width:100%;
        width:20vw;
        height:100%;
      }

.cache{
  height: 50vw;
    width: 50vw;
    position: absolute;
    top: -20%;
    z-index:2;
    left: -10%;
    border-radius: 50%;
}
  .cache.big{
    height: 100vw;
    width: 100vw;
  }
  .cache.light{
    background:rgba(135, 202, 229, .5);
  }
  .cache.dark{
    background:rgba(96, 154, 161, 0.6)
  }
  .cache.left{
    left: -10%;
    right:auto;
  }
    .cache.big.left{
      left: -60%;
    }
  .cache.right{
    right:-10%;
    left:auto;
  }
  .cache.over{
    z-index:20;
  }
  .cache.under{
    z-index:5;
  }


.box{
height: 400px;
    width: 400px;
    /* background: #3b7f9d; */
    margin-left: 10%;
    margin-top: -25vh;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    /* box-shadow: 1vw 1vw 0px #f5f5f5; */
    border: 3rem solid #dce9ef;
    /* border-left: 0; */
    /* border-bottom: 0; */
    padding: .5rem;
}
  .box .inside{
padding: 15%;
    background: #387a98;
    border: 1rem solid #35728e;
    color: white;
    border-radius: 50%;
    height: 100%;
    /* margin: 20px; */
  }

#trois-d{
  position:relative;
  z-index:20;
  background:linear-gradient(rgba(53, 114, 142, .9), rgba(53, 114, 142, .9)), url(../img/designer-3d.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding:0 0 4rem;
  color:white;
  margin-bottom:6rem;
}
  #trois-d h2{
    color:white;
    margin:2rem 0 1rem;
  }
    #trois-d h2 .num:after{
      background:white;
    }
    #trois-d h2.superShadow .num:after{
      box-shadow:     0 1px 0 hsl(174,5%,80%),
                   0 2px 0 hsl(174,5%,75%),
                   0 3px 0 hsl(174,5%,70%),
                   0 4px 0 hsl(174,5%,66%),
                   0 5px 0 hsl(174,5%,64%),
  
                   0 0 5px rgba(0,0,0,.05),
                  0 1px 3px rgba(0,0,0,.2),
                  0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.2),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.3);
    }

    #trois-d .col-sd-12{
      width:100%;
    }

  #trois-d .wrapper-3d{
    width:90vw;
    height:90vw;
    max-width:100%;
    margin:-50px auto 0;
    background: #edf4f7;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    border: 10px #ffffff solid;
    box-shadow: 0 10px 20px rgba(29, 64, 80, 0.2) inset;
  }

  #trois-d .wrapper-3d-2{
    width:100%;
    height:600px;
    margin-bottom:-160px;
    transform:translateY(-20%);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:0;
  }


.block-revealer-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}

section#references{
  margin-bottom:0;
}
  section#references .container-fluid{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
    section#references button{
      background: transparent;
      position: relative;
      transform: translateX(0);
      transition: transform .2s ease-in-out;
    }
      section#references button.prev:hover{
        transform: translateX(-10px);
      }
      section#references button.next:hover{
        transform: translateX(10px);
      }
    section#references ul.slick-dots{
      flex:1;
    }
      section#references ul.slick-dots li button{
        border-radius: 2px;
        height:4px;
        padding:0;
        background: rgba(255,255,255,.6);
      }
        section#references ul.slick-dots li.slick-active button{
          background: white;
        }


    section#references .slick-list{
      overflow: visible;
    }
    section#references .wrapper-circular{
      width:30vw;
      height:30vw;
      max-width: 100%;
      margin:-10vw auto 0;
      background: #edf4f7;
      border-radius:50%;
      display:flex;
      justify-content:center;
      align-items:center;
      border: 10px #ffffff solid;
      box-shadow: 0 10px 20px rgba(29, 64, 80, 0.2) inset;
    }

.deactiv-hover{
  pointer-events: none;
}

.no-bot-marg{
  margin-bottom: 0 !important;
}

#contenu .deactiv-hover.wp-block-image:not(.volumes):after{
  height: 0px;
}

.societe-link h3{
  transform: translateY(200px);
  color: white;
  z-index: 40;
}

.societe-link div{
  z-index: 4;
}

.societe-link div figure{
  z-index: 4;
}

.societe-link div figure img{
  z-index: 4;
}

.societe-link{
  background-color: red;
}

#nav_menu-3 li{
  padding-top: 2.5em;
}

.focus{
  position: relative;
}

.recycle:before{
  content: attr(recycle);
  position: absolute;
  left: 80%;
  top: -150px;
  width: 150px;
  height: 150px;
  text-align: center;
  border-radius: 100px;
  background: linear-gradient(#06a1c0, #07A471);
  transform: rotate(10deg);
  font-weight: 600;
  font-size: 20px;
  padding: 1em;
  padding-top: 50px;
}

.gamme .gamme-product{
  padding-top: 150px;
  text-align: center;
}

.gamme .gamme-product .gamme-product-mpr{
  z-index: 0;
  position: absolute;
  margin-left: 10%;
  margin-top: -100px;
  color: white;
  width: 140px;
  height: 140px;
  text-align: center;
  padding-top: 32px;
  border-radius: 100px;
  background: linear-gradient(#06a1c0, #07A471);
  font-weight: 600;
  font-size: 30px;
  padding: 1.25em 0;
}

main #contenu > .gamme{
  padding-top: 0;
}

.gamme .gamme-product .gamme-product-mpr p{
  font-size: 0.75em;
}

.gamme .gamme-product img{
  position: relative;
  z-index: 1;
  height: 200px;
}

.gamme .gamme-product .title{
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 15px;
}

.gamme .gamme-product p{
  margin-bottom: 0.2em;
}

.gamme .gamme-product a{
  color: #f3a55a;
  text-decoration: underline;
  transition: 0.3s;
}

.gamme .gamme-product a:hover{
  color: #cb8646;
  transition: 0.3s;
}

.row .post-card .img-container{
  position: relative;
  height: 28vw;
  width: 100%;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.row .post-card .img-container img{
  height: 100%;
  object-fit: cover
}

.row .post-card{
  margin-bottom: 50px;
}

.explications{
  margin-top: 3em;
  font-size: 16px;
}