#carousel {
  position: relative;
}
#carousel div {
  position: absolute;
  transition: all 1s;
  opacity: 1;
}
#carousel div img {
  width: 350px;
  transition: all 1s;
   -webkit-user-drag: none;
   border-radius: 10px;
}
#carousel div.hideLeft {
  left: 50%;
  opacity: 0.7;
  top: -200px;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideLeft img {
  width: 175px;
}

#carousel div.prev {
  z-index: 5;
  left: 30%;
  top: 0;
  transform: translateY(50px) translateX(-50%);
}
#carousel img:hover {
  cursor: pointer;
}
#carousel div.prev img {
  width: 275px;
}
#carousel div.prevLeftSecond {
  z-index: 4;
  left: 35%;
  top: -150px;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.prevLeftSecond img {
  width: 175px;
}
#carousel div.selected {
  z-index: 10;
  left: 50%;
  top: 0;
  transform: translateY(0px) translateX(-50%);
}
#carousel div.next {
  z-index: 5;
  left: 70%;
  top: 0;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.next img {
  width: 275px;
}
#carousel div.nextRightSecond {
  z-index: 4;
  left: 65%;
  top: -150px;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.nextRightSecond img {
  width: 175px;
}

.inno-carousel-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 50px;
  z-index: 900;
}

.inno-carousel-navigation img {
  width: 100px;
  cursor: pointer;
  transition: all 0.1s;
}

.inno-carousel-navigation img:hover {
  scale: 0.8;
  opacity: 0.7;
}

.inno-left-navi {
  position: absolute;
  left: 50px;
}

.inno-right-navi {
  position: absolute;
  right: 50px;
}

.inno-carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 10000;
  transform: translateX(-50%);
}

.inno-carousel-dots ul {
  padding: 0;
  margin: 0;
}

.inno-carousel-dots ul li {
  display: inline-block;
}

.inno-carousel-dots ul li a {
  display: block;
  height: 20px;
  width: 20px;
  margin: 0 3px;
  border-radius: 10px;
  background-color: #fff;
  text-indent: 9999px;
}

.inno-dot-active a {
  background-color: #ff8622 !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .inno-carousel-navigation img {
    width: 75px;
  }
}

@media (max-width: 767px) {
  .inno-carousel-navigation img {
    width: 50px;
  }

  .inno-carousel-navigation {
    top: unset;
    bottom: 0;
  }
}

@media (max-height: 700px) {
  #carousel div img {
    width: 300px;
  }
  #carousel div.prevLeftSecond img,
  #carousel div.nextRightSecond img {
    width: 150px;
  }
  #carousel div.prev img,
  #carousel div.next img {
    width: 200px;
  }
  #carousel div.hideLeft {
    top: -150px;
  }
  #carousel div.hideLeft img {
    width: 125px;
  }
  #carousel div.next {
    left: 65%;
  }
  #carousel div.prev {
    left: 35%;
  }
  #carousel div.prevLeftSecond {
    left: 40%;
    top: -120px;
  }
  #carousel div.nextRightSecond {
    left: 60%;
    top: -120px;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  #carousel div img {
    width: 300px;
  }
  #carousel div.prevLeftSecond img,
  #carousel div.nextRightSecond img {
    width: 150px;
  }
  #carousel div.prev img,
  #carousel div.next img {
    width: 225px;
  }
  #carousel div.hideLeft {
    top: -150px;
  }
  #carousel div.hideLeft img {
    width: 125px;
  }
  #carousel div.next {
    left: 90%;
  }
  #carousel div.prev {
    left: 10%;
  }
  #carousel div.prevLeftSecond {
    left: 20%;
    top: -120px;
  }
  #carousel div.nextRightSecond {
    left: 80%;
    top: -120px;
  }
  .inno-left-navi {
    left: 40%;
  }

  .inno-right-navi {
    right: 40%;
  }
}

@media (max-width: 575px) {
  #carousel div img {
    width: 200px;
  }
  #carousel div.prevLeftSecond img,
  #carousel div.nextRightSecond img {
    width: 120px;
  }
  #carousel div.prev img,
  #carousel div.next img {
    width: 125px;
  }
  #carousel div.hideLeft {
    top: -150px;
  }
  #carousel div.hideLeft img {
    width: 125px;
  }
  #carousel div.next {
    left: 90%;
  }
  #carousel div.prev {
    left: 10%;
  }
  #carousel div.prevLeftSecond {
    left: 20%;
    top: -120px;
  }
  #carousel div.nextRightSecond {
    left: 80%;
    top: -120px;
  }
  .inno-carousel-dots {
    display: none;
  }
  .inno-left-navi {
    left: 30%;
  }
  .inno-right-navi {
    right: 30%;
  }
}