.work-gallery{
      margin-top:50px;
      padding:0.5%;
      background:#fff5f1;
      border-top: 2px solid #f25928;

      width:100%;
    }
    .work-gallery .work-gallery-wrapper{
      width: 100%;
      margin: 0 auto;
    }
    .work-gallery h1{
      font-size: 2rem;
      
      font-weight: normal;
      color: #444;
      text-align: center;
      margin: 1rem 0;
    }
    
    .work-gallery .cols{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
         -ms-flex-pack: center;
       justify-content: center;
              
    }
    
   
.photobox{
  display: inline-block;
  padding:0.5%;
  border-radius:5px;
  cursor:pointer;
  display:none;
}


.photobox__previewbox{
  position: relative;
  overflow: hidden;
  border-radius:5px;
}

.photobox__preview{
  display: block;
  max-width: 100%;
  border-radius:5px;
}

.photobox__previewbox:before{
  content: "";
}
.photobox{
  color: #fff;
  font-weight: 400;
  width: 25%;
  --photoboxOverlay: rgb(5, 104, 118, 0.9);;
  /*--photoboxAnimationDuration: .5s;*/
}
.photobox h2{
    color:white; 
    text-align:center;
    font-size: 1.3vw;
}
.photobox p{font-size: 1vw;}
@media screen and (min-width: 1401px){.photobox:nth-child(-n+8){display:block;}}
@media screen and (min-width: 1051px) and (max-width: 1400px) { 
  .photobox{width: 33.33333%;}
  .photobox h2{font-size:1.7vw;}
  .photobox p{font-size: 1.4vw;}
  .photobox:nth-child(-n+6){display:block;}
}

@media screen and (min-width: 541px) and (max-width: 1050px) { 
  .photobox{width: 50%;}
  .photobox h2{font-size:2.5vw;}
  .photobox p{font-size: 2.2vw;}
  .photobox:nth-child(-n+4){display:block;}
}
@media screen and (max-width: 540px){
  .photobox{width: 100%;}
  .photobox h2{font-size:4.5vw;}
  .photobox p{font-size: 4vw;}
  .photobox:nth-child(-n+4){display:block;}
}




















/**********************************************/
/******            ЭФФЕКТЫ             ********/
/**********************************************/
/* type 24 */
    .photobox_type24 .photobox__preview{
        transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
      will-change: transform;
        transform: scale(1);
    }
    .photobox_type24:hover .photobox__preview{
      transform: scale(1.2);
    }
    .photobox_type24 .photobox__previewbox:before{
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
      clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out,   opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
      will-change: transform;
      transform: translate(-50%, -50%) scale(0);
    }
    .photobox_type24:hover .photobox__previewbox:before{
      opacity: 1;
      transform: translate(-50%, -50%) scale(7);
      transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
      transition-duration: var(--photoboxAnimationDuration, .4s);
    }
    .photobox_type24 .photobox__label{
      width: 95%;
      text-align: center;
      opacity: 0;  
      transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
      will-change: opacity, transform;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 200%);
      z-index: 3;
    }
    .photobox_type24:hover .photobox__label{
      opacity: 1;
      transform: translate(-50%, -50%);
      transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
      transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
    }


/* ОСТАЛЬНЫЕ ВАРИАНТЫ ЭФФЕКТОВ, №1-23, 25 */
/*
.photobox_type1 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type1:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}
.photobox_type1 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: .4;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type1:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type1 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 3;
}
.photobox_type1:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}


.photobox_type2 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type2:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}
.photobox_type2 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: .2;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type2:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type2 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -50%);
  z-index: 2;
}
.photobox_type2:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}


.photobox_type3 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.photobox_type3:hover .photobox__previewbox:before{
  opacity: 1;
}
.photobox_type3 .photobox__label{
  width: 98%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.photobox_type3:hover .photobox__label{
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type3 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type3:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}


.photobox_type4 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.photobox_type4:hover .photobox__previewbox:before{
  opacity: 1;
}
.photobox_type4 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 2;
}
.photobox_type4:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type4 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type4:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}


.photobox_type5 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.photobox_type5:hover .photobox__previewbox:before{
  opacity: 1;
}
.photobox_type5 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -50%);
  z-index: 2;
}
.photobox_type5:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type5 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type5:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}


.photobox_type6 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type6:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type6 .photobox__label{
  width: 95%;
  text-align: center;
  transform: translate(-200%, -50%);
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
}
.photobox_type6:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
  transform: translate(-50%, -50%);
}


.photobox_type7 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type7:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type7 .photobox__label{
  width: 95%;
  text-align: center;
  transform: translate(-200%, -50%);
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.photobox_type7:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
  transform: translate(-50%, -50%);
}
.photobox_type7 .photobox__preview{
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type7:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}


.photobox_type8 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type8:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type8 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 3;
}
.photobox_type8:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}
.photobox_type8 .photobox__preview{
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}
.photobox_type8:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}


.photobox_type9 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type9:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type9 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 3;
}
.photobox_type9:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}
.photobox_type9 .photobox__preview{
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}
.photobox_type9:hover .photobox__preview{
  transform: scale(1.2);
}


.photobox_type10 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type10:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type10 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 3;
}
.photobox_type10:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}


.photobox_type11 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}
.photobox_type11:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type11 .photobox__label{
  width: 95%;
  text-align: center;
  transform: translate(-200%, -50%);
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.photobox_type11:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
  transform: translate(-50%, -50%);
}
.photobox_type11 .photobox__preview{
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}
.photobox_type11:hover .photobox__preview{
  transform: scale(1.2);
}


.photobox_type12 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform var(--photoboxAnimationDuration, .4s) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type12:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);
}
.photobox_type12 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--photoboxAnimationDuration, .4s) ease-out;
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.photobox_type12:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
  opacity: 1;
}
.photobox_type12 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}
.photobox_type12:hover .photobox__preview{
  transform: scale(1.2);
}


.photobox_type13 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 45%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease;
  will-change: opacity, transform;
  transform: translate(-50%, -200%);
}
.photobox_type13:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%);
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type13 .photobox__label{
  width: 80%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.photobox_type13:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: var(--photoboxAnimationDuration, .4s);
  opacity: 1;
}
.photobox_type13 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    will-change: transform;
    transform: scale(1);
}
.photobox_type13:hover .photobox__preview{
  transform: scale(1.2);
}


.photobox_type14 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 45%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform var(--photoboxAnimationDuration, .4s) ease calc(var(--photoboxAnimationDuration, .4s) / 2);
  will-change: transform;
  transform: translate(-50%, -250%);
}
.photobox_type14:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%);
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: 0s;
}
.photobox_type14 .photobox__label{
  width: 80%;
  text-align: center;
  opacity: 0;  
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  transform: translate(-50%, -200%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.photobox_type14:hover .photobox__label{
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: var(--photoboxAnimationDuration, .4s);
  opacity: 1;
}
.photobox_type14 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}
.photobox_type14:hover .photobox__preview{
  transform: scale(1.2);
}


.photobox_type15 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform var(--photoboxAnimationDuration, .4s) ease;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type15:hover .photobox__previewbox:before{
  transform: translate(-50%, -50%) scale(4);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);
}
.photobox_type15 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--photoboxAnimationDuration, .4s) ease-out;
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.photobox_type15:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
  opacity: 1;
}
.photobox_type15 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) translate(0, 0);
}
.photobox_type15:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}


.photobox_type16 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.photobox_type16:hover .photobox__previewbox:before{
  opacity: 1;
}
.photobox_type16 .photobox__label{
  width: 98%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.photobox_type16:hover .photobox__label{
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type16 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) translate(0, 0);
}
.photobox_type16:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}


.photobox_type17 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.photobox_type17:hover .photobox__previewbox:before{
  opacity: 1;
}
.photobox_type17 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 2;
}
.photobox_type17:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type17 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
    transform: scale(1) translate(0, 0);
}
.photobox_type17:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}


.photobox_type18 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.photobox_type18:hover .photobox__previewbox:before{
  opacity: 1;
}
.photobox_type18 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -50%);
  z-index: 2;
}
.photobox_type18:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 4);
}
.photobox_type18 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) translate(0, 0);
}
.photobox_type18:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}


.photobox_type19 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out,   opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type19:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type19 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 3;
}
.photobox_type19:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type20 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out,   opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type20:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type20 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -50%);
  z-index: 2;
}
.photobox_type20:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: var(--photoboxAnimationDuration, .4s);
}


.photobox_type21 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out,   opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type21:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type21 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.photobox_type21:hover .photobox__label{
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: var(--photoboxAnimationDuration, .4s);
}


.photobox_type22 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}
.photobox_type22:hover .photobox__preview{
  transform: scale(1.2);
}
.photobox_type22 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out,   opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type22:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type22 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.photobox_type22:hover .photobox__label{
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: var(--photoboxAnimationDuration, .4s);
}
.photobox_type23 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1);
}
.photobox_type23:hover .photobox__preview{
  transform: scale(1.2);
}
.photobox_type23 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out,   opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}
.photobox_type23:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2), 0s;
  transition-duration: var(--photoboxAnimationDuration, .4s);
}
.photobox_type23 .photobox__label{
  width: 95%;
  text-align: center;
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity, transform;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -50%);
  z-index: 2;
}
.photobox_type23:hover .photobox__label{
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
  transition-delay: var(--photoboxAnimationDuration, .4s);
}

.photobox_type25 .photobox__preview{
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
    transform: scale(1) rotate(0);
}

.photobox_type25:hover .photobox__preview{
  transform: scale(1.2) rotate(5deg);
}

.photobox_type25 .photobox__previewbox:before{
  width: 100%;
  height: 100%;
  
  opacity: .2;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  
  transition: transform calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out, opacity calc(var(--photoboxAnimationDuration, .4s) / 2) ease-out;
  will-change: transform;
  transform: translate(-50%, -50%) scale(0);
}

.photobox_type25:hover .photobox__previewbox:before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(7);
  transition-duration: var(--photoboxAnimationDuration, .4s);
}

.photobox_type25 .photobox__label{
  width: 95%;
  text-align: center;
  
  opacity: 0;  
  transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: opacity;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.photobox_type25:hover .photobox__label{
  opacity: 1;
  transition-duration: var(--photoboxAnimationDuration, .4s);
  transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}


*/