.animated-link {
    position: relative;
    /* padding: 30px 60px; */
    /* box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.151); */
    /* color: #999; */
    text-decoration: none;
    /* text-transform: uppercase; */
    overflow: hidden;
  }
  
  .animated-link span:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #c3d4c1, #fff);
    animation: animate1 2s linear infinite;
  }
  
  @keyframes animate1 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  .animated-link span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(to bottom, #eee, #c3d4c1);
    animation: animate2 2s linear infinite;
    animation-delay: 1s;
  }
  @keyframes animate2 {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100%);
    }
  }
  
  .animated-link span:nth-child(3) {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to left, #eee, #c3d4c1);
    animation: animate3 2s linear infinite;
  }
  
  @keyframes animate3 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  .animated-link span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(to top, #eee, #c3d4c1);
    animation: animate4 2s linear infinite;
    animation-delay: 1s;
  }
  
  @keyframes animate4 {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(-100%);
    }
  }

  /* IMAGE ANIMATE */



figure { 
  margin: 0;
  position: relative;
  perspective: 1800px;
  transform-style: preserve-3d;
  /* max-width: 1000px;  */
  /* padding-bottom: 56.25%;  */
}
figure img { 
  top: 0;
  left: 0;
  position: absolute;
  transition: 1s;
  width: 100%;
  background-color: #fff;
}
figure img.first { transform: rotateY(0deg); }
figure img.second { transform: rotateY(-180deg) translateZ(1px); }

figure img.first {
    animation: blinds 10s infinite;
}

figure img.second {
    animation: blinds-two 10s infinite;
}

/* figure:hover img.first { transform: rotateY(180deg);  } 
figure:hover img.second { transform: rotateY(0deg) translateZ(1px);  } */

@keyframes blinds {
    0% {
        transform: rotateY(0deg);
      }
      50% {
        transform: rotateY(180deg);
      }
      100% {
        transform: rotateY(0deg);
      }
  }

  @keyframes blinds-two {
    0% {
        transform: rotateY(-180deg) translateZ(1px);
      }
      50% {
        transform: rotateY(0deg) translateZ(1px);
      }
      100% {
        transform: rotateY(-180deg) translateZ(1px);
      }
  }

figure img:nth-child(1), figure img:nth-child(11) { 
  clip: rect(0px, 100px, 1200px, 0px);
  transform-origin: 50px 0px;
}
figure img:nth-child(2), figure img:nth-child(12) {
  clip: rect(0px, 200px, 1200px, 100px);
  transform-origin: 150px 0px;
  transition-delay: 100ms;
}
figure img:nth-child(3), figure img:nth-child(13) {
  clip: rect(0px, 300px, 1200px, 200px);
  transform-origin: 250px 0px;
  transition-delay: 200ms;  
}
figure img:nth-child(4), figure img:nth-child(14) {
  clip: rect(0px, 400px, 1200px, 300px);
  transform-origin: 350px 0px;
  transition-delay: 300ms; 
}
figure img:nth-child(5), figure img:nth-child(15) {
  clip: rect(0px, 500px, 1200px, 400px);
  transform-origin: 450px 0px;
  transition-delay: 400ms;
}
figure img:nth-child(6), figure img:nth-child(16) {
  clip: rect(0px, 600px, 1200px, 500px);
  transform-origin: 550px 0px;
  transition-delay: 500ms; 
}
figure img:nth-child(7), figure img:nth-child(17) {
  clip: rect(0px, 700px, 1200px, 600px);
  transform-origin: 650px 0px;
  transition-delay: 600ms;
}
figure img:nth-child(8), figure img:nth-child(18) {
  clip: rect(0px, 800px, 1200px, 700px);
  transform-origin: 750px 0px;
  transition-delay: 700ms;
}
figure img:nth-child(9), figure img:nth-child(19) {
  clip: rect(0px, 900px, 1200px, 800px);
  transform-origin: 850px 0px;
  transition-delay: 800ms; 
}
figure img:nth-child(10), figure img:nth-child(20) {
  clip: rect(0px, 1000px, 1200px, 900px);
  transform-origin: 950px 0px;
  transition-delay: 900ms;  
}

/* ROW IMAGE FLIPPER */


.flipper-container{
    position:relative;
    margin: auto;
    perspective:1000;
    /* width:450px;
    height:300px; */
  }
  .flip{
    height:100%;
    width:100%;
    
    transform-style:preserve-3d;
    transition:all 1s;
  }

  .flipper-container .flip-one {
    animation: row-box-one 16s infinite;

  }
  .flipper-container .back-one {
    animation: img-box-one 16s infinite;

  }



  .flipper-container .flip-two {
    animation: row-box-two 16s infinite;

  }
  .flipper-container .back-two {
    animation: img-box-two 16s infinite;

  }



  .flipper-container .flip-three {
    animation: row-box-three 16s infinite;

  }
  .flipper-container .back-three {
    animation: img-box-three 16s infinite;

  }




  .flipper-container .flip-four {
    animation: row-box-four 16s infinite;

  }
  .flipper-container .back-four {
    animation: img-box-four 16s infinite;

  }


  @keyframes row-box-one {
    30% {
        opacity: 1;
      }
      40% {
        opacity: 0;
      }
      90% {
        opacity: 0;
      }
      0% {
        opacity: 1;
      }
  }

  @keyframes img-box-one {
    30% {
        opacity: 0;
      }
      40% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
  }

  @keyframes row-box-two {
    40% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      90% {
        opacity: 0;
      }
      0% {
        opacity: 1;
      }
  }

  @keyframes img-box-two {
    40% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      0% {
        opacity: 0;
      }
  }


  @keyframes row-box-three {
    50% {
        opacity: 1;
      }
      60% {
        opacity: 0;
      }
      90% {
        opacity: 0;
      }
      0% {
        opacity: 1;
      }
  }

  @keyframes img-box-three {
    50% {
        opacity: 0;
      }
      60% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      0% {
        opacity: 0;
      }
  }




  @keyframes row-box-four {
    60% {
        opacity: 1;
      }
      70% {
        opacity: 0;
      }
      90% {
        opacity: 0;
      }
      0% {
        opacity: 1;
      }
  }

  @keyframes img-box-four {
    60% {
        opacity: 0;
      }
      70% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      0% {
        opacity: 0;
      }
  }



  /* .flipper-container:hover .flip{
    transform:rotateY(180deg);
  } */
  .front {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* opacity: 1; */
  }

  .face{
    position:absolute;
    height:100%;
    width:100%;
    /* backface-visibility:hidden; */
  }
  .face.back {
    display: block;
    opacity: 0;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
  }