#carouselSlide {
  position: relative;
  height:360px;/*400px;*/
  /*top: 50%;
  transform: translateY(-50%);*/
  overflow: hidden;
}
#carouselSlide div {
  position: absolute;
  transition: transform 400ms, left 400ms, opacity 400ms, z-index 0s;
  opacity: 1;
}
#carouselSlide div img {
  width: 100%;/*400px;*/
  transition: width 400ms;
   -webkit-user-drag: none;
   border-radius: 8px;
   box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 28px -20px,rgba(0, 0, 0, 0.3) 0px 7px 13px -3px;
}
#carouselSlide div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carouselSlide div.hideLeft img {
  width: 20px;/*200px;*/
}
#carouselSlide div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carouselSlide div.hideRight img {
  width: 20px;/*200px;*/
}
#carouselSlide div.prevSlide {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}
#carouselSlide img:hover {
  /*cursor: pointer;*/
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
#carouselSlide div.prevSlide img {
  width:300px; /*300px;*/
}
#carouselSlide div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carouselSlide div.prevLeftSecond img {
  width: 230px;/*200px;*/
}
#carouselSlide div.selected {
  z-index: 10;
  left: 50%;
  top:2%;
  transform: translateY(0px) translateX(-50%);
}
#carouselSlide div.nextSlide {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}
#carouselSlide div.nextSlide img {
  width: 300px;/*300px;*/
}
#carouselSlide div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carouselSlide div.nextRightSecond img {
  width: 230px;/*200px;*/
}

.buttonCarousel {
  position: relative;/*fixed;*/
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
}

@media screen and (max-width: 1170px)
{
    #carouselSlide {
        height:260px;/*400px;*/
    }
    #carouselSlide div img {
        width: 400px;
    }
    #carouselSlide div.prevSlide img {
        width: 250px; /*300px;*/
    }
    #carouselSlide div.prevLeftSecond img {
        width: 200px;/*200px;*/
    }
    #carouselSlide div.nextSlide img {
        width: 250px;/*300px;*/
    }
    #carouselSlide div.nextRightSecond img {
        width: 200px;/*200px;*/
    }
    #carouselSlide div.nextRightSecond {
        left: 80%;
    }
    #carouselSlide div.prevLeftSecond {
        left: 20%;
    }
    
}

@media screen and (max-width: 768px)
{
    #carouselSlide {
        height:260px;/*400px;*/
    }
    #carouselSlide div img {
        width: 400px;
    }
    #carouselSlide div.prevSlide img {
        width: 250px; /*300px;*/
    }
    #carouselSlide div.prevLeftSecond img {
        width: 200px;/*200px;*/
    }
    #carouselSlide div.nextSlide img {
        width: 250px;/*300px;*/
    }
    #carouselSlide div.nextRightSecond img {
        width: 200px;/*200px;*/
    }
    #carouselSlide div.nextRightSecond {
        left: 80%;
    }
    #carouselSlide div.prevLeftSecond {
        left: 20%;
    }
    
}

@media screen and (max-width: 480px) 
{
    #carouselSlide {
        height:210px;/*400px;*/
    }
    #carouselSlide div img {
        width: 320px;
    }
    #carouselSlide div.prevSlide img {
        width: 200px; /*300px;*/
    }
    #carouselSlide div.prevLeftSecond img {
        width: 150px;/*200px;*/
    }
    #carouselSlide div.nextSlide img {
        width: 200px;/*300px;*/
    }
    #carouselSlide div.nextRightSecond img {
        width: 150px;/*200px;*/
    }
    #carouselSlide div.nextRightSecond {
        left: 70%;
    }
    #carouselSlide div.prevLeftSecond {
        left: 30%;
    }
    
}