#carousel {
      position: relative;
      height: 600px;
      top: 50px;
      transform: translateY(-50%);
      overflow: hidden;
  }

  #carousel div {
      position: absolute;
      transition: transform 1s, left 1s, opacity 1s, z-index 0s;
      opacity: 1;
  }

  #carousel div img {
      width: 600px;
      transition: width 1s;
  }

  #carousel div.hideLeft {
      left: 0%;
      opacity: 0;
      transform: translateY(50%) translateX(-50%);
  }

  #carousel div.hideLeft img {
      width: 300px;
  }

  #carousel div.hideRight {
      left: 100%;
      opacity: 0;
      transform: translateY(50%) translateX(-50%);
  }

  #carousel div.hideRight img {
      width: 300px;
  }

  #carousel div.prev {
      z-index: 5;
      left: 30%;
      transform: translateY(50px) translateX(-50%);
  }

  #carousel div.prev img {
      width: 400px;
  }

  #carousel div.prevLeftSecond {
      z-index: 4;
      left: 15%;
      transform: translateY(50%) translateX(-50%);
      opacity: .7;
  }

  #carousel div.prevLeftSecond img {
      width: 300px;
  }

  #carousel div.selected {
      z-index: 6;
      left: 50%;
      transform: translateY(0px) translateX(-50%);
  }

  #carousel div.next {
      z-index: 5;
      left: 70%;
      transform: translateY(50px) translateX(-50%);
  }

  #carousel div.next img {
      width: 400px;
  }

  #carousel div.nextRightSecond {
      z-index: 4;
      left: 85%;
      transform: translateY(50%) translateX(-50%);
      opacity: .7;
  }

  #carousel div.nextRightSecond img {
      width: 300px;
  }

  .buttons {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;
  }

  @media only screen and (min-width: 1025px) {
    #carousel {
        position: relative;
        height: 600px;
        top: 350px;
        /* transform: translateY(-60%); */
        overflow: hidden;
    }
}

  @media only screen and (max-width: 1024px) {
        #carousel {
            position: relative;
            height: 600px;
            top: 350px;
            /* transform: translateY(-60%); */
            overflow: hidden;
        }
    }


  @media only screen and (max-width: 800px) {
    #carousel {
        position: relative;
        height: 400px;
        top: 270px;
        /* transform: translateY(-60%); */
        overflow: hidden;
    }
  
    #carousel div {
        position: absolute;
        transition: transform 1s, left 1s, opacity 1s, z-index 0s;
        opacity: 1;
    }
  
    #carousel div img {
        width: 500px;
        transition: width 1s;
    }
  
    #carousel div.hideLeft {
        left: 0%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
  
    #carousel div.hideLeft img {
        width: 170px;
    }
  
    #carousel div.hideRight {
        left: 100%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
  
    #carousel div.hideRight img {
        width: 170px;
    }
  
    #carousel div.prev {
        z-index: 5;
        left: 30%;
        transform: translateY(50px) translateX(-50%);
    }
  
    #carousel div.prev img {
        width: 400px;
    }
  
    #carousel div.prevLeftSecond {
        z-index: 4;
        left: 15%;
        transform: translateY(50%) translateX(-50%);
        opacity: .7;
    }
  
    #carousel div.prevLeftSecond img {
        width: 200px;
    }
  
    #carousel div.selected {
        z-index: 10;
        left: 50%;
        transform: translateY(0px) translateX(-50%);
    }
  
    #carousel div.next {
        z-index: 5;
        left: 70%;
        transform: translateY(50px) translateX(-50%);
    }
  
    #carousel div.next img {
        width: 400px;
    }
  
    #carousel div.nextRightSecond {
        z-index: 4;
        left: 85%;
        transform: translateY(50%) translateX(-50%);
        opacity: .7;
    }
  
    #carousel div.nextRightSecond img {
        width: 170px;
    }
  
    .buttons {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }
}

@media only screen and (max-width: 766px) {
    #carousel {
        position: relative;
        height: 400px;
        top: 220px;
        /* transform: translateY(-60%); */
        overflow: hidden;
    }

    #carousel div {
        position: absolute;
        transition: transform 1s, left 1s, opacity 1s, z-index 0s;
        opacity: 1;
    }
  
    #carousel div img {
        width: 400px;
        transition: width 1s;
    }
  
    #carousel div.hideLeft {
        left: 0%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
  
    #carousel div.hideLeft img {
        width: 170px;
    }
  
    #carousel div.hideRight {
        left: 100%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
  
    #carousel div.hideRight img {
        width: 170px;
    }
  
    #carousel div.prev {
        z-index: 5;
        left: 30%;
        transform: translateY(50px) translateX(-50%);
    }
  
    #carousel div.prev img {
        width: 300px;
    }
  
    #carousel div.prevLeftSecond {
        z-index: 4;
        left: 15%;
        transform: translateY(50%) translateX(-50%);
        opacity: .7;
    }
  
    #carousel div.prevLeftSecond img {
        width: 200px;
    }
  
    #carousel div.selected {
        z-index: 10;
        left: 50%;
        transform: translateY(0px) translateX(-50%);
    }
  
    #carousel div.next {
        z-index: 5;
        left: 70%;
        transform: translateY(50px) translateX(-50%);
    }
  
    #carousel div.next img {
        width: 300px;
    }
  
    #carousel div.nextRightSecond {
        z-index: 4;
        left: 85%;
        transform: translateY(50%) translateX(-50%);
        opacity: .7;
    }
  
    #carousel div.nextRightSecond img {
        width: 200px;
    }
  
    .buttons {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }
}


@media only screen and (max-width: 375px) {
    #carousel {
        position: relative;
        height: 400px;
        top: 270px;
        /* transform: translateY(-122%); */
        overflow: hidden;
    }
  
    #carousel div {
        position: absolute;
        transition: transform 1s, left 1s, opacity 1s, z-index 0s;
        opacity: 1;
    }
  
    #carousel div img {
        width: 250px;
        transition: width 1s;
    }
  
    #carousel div.hideLeft {
        left: 0%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
  
    #carousel div.hideLeft img {
        width: 50px;
    }
  
    #carousel div.hideRight {
        left: 100%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
  
    #carousel div.hideRight img {
        width: 50px;
    }
  
    #carousel div.prev {
        z-index: 5;
        left: 30%;
        transform: translateY(20px) translateX(-50%);
    }
  
    #carousel div.prev img {
        width: 170px;
    }
  
    #carousel div.prevLeftSecond {
        z-index: 4;
        left: 15%;
        transform: translateY(50%) translateX(-50%);
        opacity: .7;
    }
  
    #carousel div.prevLeftSecond img {
        width: 100px;
    }
  
    #carousel div.selected {
        z-index: 10;
        left: 50%;
        transform: translateY(0px) translateX(-50%);
    }
  
    #carousel div.next {
        z-index: 5;
        left: 70%;
        transform: translateY(20px) translateX(-50%);
    }
  
    #carousel div.next img {
        width: 170px;
    }
  
    #carousel div.nextRightSecond {
        z-index: 4;
        left: 85%;
        transform: translateY(50%) translateX(-50%);
        opacity: .7;
    }
  
    #carousel div.nextRightSecond img {
        width: 100px;
    }
  
    .buttons {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }
}