@media (min-width: 770px) {
  .slideshow--hero .slide1 {
    /* background-image: url("<?= isset($_GET['id']) ? 'images/prabubima2.png' : 'images/back2.png' ?>"); */
    /* background-size: 250px; */
    background-image: url('../images/prabubima2.png');
    animation: 10s slides-set-1 -0.5s infinite;
  }
  .slideshow--hero .slide2 {
    background-image: url('../images/BSI.png');
    animation: 10s slides-set-3 -0.5s infinite;
  }
  .slideshow--hero .slide3 {
    background-size: 200px;
    background-image: url('../images/santri.png');
    animation: 10s slides-set-2 -0.5s infinite;
  }

    .wrapper.slideshow {
      position: relative;
      height: 430px;
      width: 430px;
      overflow: hidden;
    }
    .slideshow {
      position: absolute;
      top: 0%;
      left: 50%;
      margin: auto;
      width: 300px;
      height: 550px;
      transform: translateX(-50%);
    }
  
    .slideshow--contrast {
      z-index: 1;
      width: 80%;
      height: 60%;
      transform: none;
    }
    .slideshow--contrast--before {
      left: 0;
    }
    .slideshow--contrast--before .slides {
      width: 0vw;
    }
    .slideshow--contrast--after {
      z-index: 2;
      left: auto;
      right: 0;
    }
    .slideshow--contrast--after .slides {
      width: 100vw;
      left: auto;
      right: 0;
    }
    
    .slides, .slide {
      position: absolute;
      top: 0;
      left: 10px;
      width: 260px;
      height: 260px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }

@media (max-width: 780px) {
  .slideshow--hero .slide1 {
    /* background-image: url("<?= isset($_GET['id']) ? 'images/prabubima2.png' : 'images/back2.png' ?>"); */
    /* background-size: 200px; */
    background-image: url('../images/prabubima2.png');
    animation: 10s slides-set-1 -0.5s infinite;
  }
  .slideshow--hero .slide2 {
    /* background-size: 200px; */
    background-image: url('../images/BSI.png');
    animation: 10s slides-set-3 -0.5s infinite;
  }
  .slideshow--hero .slide3 {
    background-size: 200px;
    background-image: url('../images/santri.png');
    animation: 10s slides-set-2 -0.5s infinite;
  }

    .wrapper.slideshow {
      position: relative;
      height: 350px;
      width: 350px;
      overflow: hidden;
    }
    .slideshow {
      position: absolute;
      top: 10%;
      left: 59.5%;
      width: 500px;
      height: 500px;
      transform: translateX(-50%);
    }
  
    .slideshow--contrast {
      z-index: 1;
      width: 80%;
      height: 60%;
      transform: none;
    }
    .slideshow--contrast--before {
      left: 0;
    }
    .slideshow--contrast--before .slides {
      width: 0vw;
    }
    .slideshow--contrast--after {
      z-index: 2;
      left: auto;
      right: 0;
    }
    .slideshow--contrast--after .slides {
      width: 100vw;
      left: auto;
      right: 0;
    }
    
    .slides, .slide {
      position: absolute;
      top: 0;
      left: 10px;
      width: 250px;
      height: 250px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }


@media (max-width: 500px) {
  .slideshow--hero .slide1 {
    /* background-image: url("<?= isset($_GET['id']) ? 'images/prabubima2.png' : 'images/back2.png' ?>"); */
    /* background-size: 250px; */
    background-image: url('../images/prabubima2.png');
    animation: 10s slides-set-1 -0.5s infinite;
  }
  .slideshow--hero .slide2 {
    background-image: url('../images/BSI.png');
    animation: 10s slides-set-3 -0.5s infinite;
  }
  .slideshow--hero .slide3 {
    background-size: 200px;
    background-image: url('../images/santri.png');
    animation: 10s slides-set-2 -0.5s infinite;
  }

    .wrapper.slideshow {
      position: relative;
      height: 200px;
      width: 300px;
      margin-top: 20%;
      overflow: hidden;
    }
    .slideshow {
      position: absolute;
      top: 0%;
      left: 100px;
      width: 105px;
      height: 350px;
      transform: translateX(-50%);
    }
  
    .slideshow--contrast {
      z-index: 1;
      width: 60%;
      height: 40%;
      transform: none;
    }
    .slideshow--contrast--before {
      left: 0;
    }
    .slideshow--contrast--before .slides {
      width: 0vw;
    }
    .slideshow--contrast--after {
      z-index: 2;
      left: auto;
      right: 0;
    }
    .slideshow--contrast--after .slides {
      width: 100vw;
      left: auto;
      right: 0;
    }
    
    .slides, .slide {
      position: absolute;
      top: 0;
      left: 10px;
      width: 200px;
      height: 200px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
  
  @media (max-width: 430px) {
    .slideshow--hero .slide1 {
      /* background-image: url("<?= isset($_GET['id']) ? 'images/prabubima2.png' : 'images/back2.png' ?>"); */
      background-size: 170px;
      background-image: url('../images/prabubima2.png');
      animation: 10s slides-set-1 -0.5s infinite;
    }
    .slideshow--hero .slide2 {
      background-size: 170px;
      background-image: url('../images/BSI.png');
      animation: 10s slides-set-3 -0.5s infinite;
    }
    .slideshow--hero .slide3 {
      background-size: 170px;
      background-image: url('../images/santri.png');
      animation: 10s slides-set-2 -0.5s infinite;
    }
  
      .wrapper.slideshow {
        position: relative;
        height: 200px;
        width: 300px;
        margin-top: 20%;
        overflow: hidden;
      }
      .slideshow {
        position: absolute;
        top: 0%;
        left: 100px;
        width: 105px;
        height: 350px;
        transform: translateX(-50%);
      }
    
      .slideshow--contrast {
        z-index: 1;
        width: 60%;
        height: 40%;
        transform: none;
      }
      .slideshow--contrast--before {
        left: 0;
      }
      .slideshow--contrast--before .slides {
        width: 0vw;
      }
      .slideshow--contrast--after {
        z-index: 2;
        left: auto;
        right: 0;
      }
      .slideshow--contrast--after .slides {
        width: 100vw;
        left: auto;
        right: 0;
      }
      
      .slides, .slide {
        position: absolute;
        top: 0;
        left: 2px;
        width: 200px;
        height: 200px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  @media (max-width: 380px) {
    .slideshow--hero .slide1 {
      /* background-image: url("<?= isset($_GET['id']) ? 'images/prabubima2.png' : 'images/back2.png' ?>"); */
      background-size: 165px;
      background-image: url('../images/prabubima2.png');
      animation: 10s slides-set-1 -0.5s infinite;
    }
    .slideshow--hero .slide2 {
      background-size: 165px;
      background-image: url('../images/BSI.png');
      animation: 10s slides-set-3 -0.5s infinite;
    }
    .slideshow--hero .slide3 {
      background-size: 165px;
      background-image: url('../images/santri.png');
      animation: 10s slides-set-2 -0.5s infinite;
    }
  
      .wrapper.slideshow {
        position: relative;
        height: 200px;
        width: 300px;
        margin-top: 20%;
        overflow: hidden;
      }
      .slideshow {
        position: absolute;
        top: 0%;
        left: 100px;
        width: 105px;
        height: 350px;
        transform: translateX(-50%);
      }
    
      .slideshow--contrast {
        z-index: 1;
        width: 60%;
        height: 40%;
        transform: none;
      }
      .slideshow--contrast--before {
        left: 0;
      }
      .slideshow--contrast--before .slides {
        width: 0vw;
      }
      .slideshow--contrast--after {
        z-index: 2;
        left: auto;
        right: 0;
      }
      .slideshow--contrast--after .slides {
        width: 100vw;
        left: auto;
        right: 0;
      }
      
      .slides, .slide {
        position: absolute;
        top: 0;
        left: 2px;
        width: 200px;
        height: 200px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  @media (max-width: 330px) {
    .slideshow--hero .slide1 {
      /* background-image: url("<?= isset($_GET['id']) ? 'images/prabubima2.png' : 'images/back2.png' ?>"); */
      background-size: 150px;
      background-image: url('../images/prabubima2.png');
      animation: 10s slides-set-1 -0.5s infinite;
    }
    .slideshow--hero .slide2 {
      background-size: 150px;
      background-image: url('../images/BSI.png');
      animation: 10s slides-set-3 -0.5s infinite;
    }
    .slideshow--hero .slide3 {
      background-size: 150px;
      background-image: url('../images/santri.png');
      animation: 10s slides-set-2 -0.5s infinite;
    }
  
      .wrapper.slideshow {
        position: relative;
        height: 200px;
        width: 300px;
        margin-top: 20%;
        overflow: hidden;
      }
      .slideshow {
        position: absolute;
        top: 0%;
        left: 95px;
        width: 105px;
        height: 350px;
        transform: translateX(-50%);
      }
    
      .slideshow--contrast {
        z-index: 1;
        width: 60%;
        height: 40%;
        transform: none;
      }
      .slideshow--contrast--before {
        left: 0;
      }
      .slideshow--contrast--before .slides {
        width: 0vw;
      }
      .slideshow--contrast--after {
        z-index: 2;
        left: auto;
        right: 0;
      }
      .slideshow--contrast--after .slides {
        width: 100vw;
        left: auto;
        right: 0;
      }
      
      .slides, .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }

    
    @keyframes slideshow-hero-mobile {
      0% {
        transform: scale(1) skewY(5deg);
      }
      50% {
        transform: scale(1.05) skewY(5deg);
      }
      100% {
        transform: scale(1) skewY(5deg);
      }
    }
    @keyframes slideshow-hero {
      0% {
        transform: scale(1) skewX(5deg);
      }
      50% {
        transform: scale(1.05) skewX(5deg);
      }
      100% {
        transform: scale(1) skewX(5deg);
      }
    }
    @keyframes slideshow-contrast {
      0% {
        transform: scale(1.05);
      }
      50% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.05);
      }
    }
    @keyframes slides-set-1 {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      25% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0;
        transform: scale(1.05);
      }
      75% {
        opacity: 0;
        transform: scale(1.05);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    @keyframes slides-set-2 {
      0% {
        opacity: 0;
        transform: scale(1.05);
      }
      31% {
        opacity: 0;
        transform: scale(1.05);
      }
      34% {
        opacity: 1;
        transform: scale(1);
      }
      64% {
        opacity: 1;
        transform: scale(1);
      }
      67% {
        opacity: 0;
        transform: scale(1.05);
      }
      100% {
        opacity: 0;
        transform: scale(1.05);
      }
    }
    @keyframes slides-set-3 {
      0% {
        opacity: 0;
        transform: scale(1.05);
      }
      64% {
        opacity: 0;
        transform: scale(1.05);
      }
      67% {
        opacity: 1;
        transform: scale(1);
      }
      97% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(1.05);
      }
    }