

#carousel {
  position: relative;
  height: 500px !important;
  top: 50%;
  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: 550px;
  transition: width 1s;
}
#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideLeft img {
  width: 200px;
}
#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideRight img {
  width: 200px;
}
#carousel div.prev {
  z-index: 5;
  left: 25%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.prev img {
  width: 350px;
}
#carousel div.prevLeftSecond {
  z-index: 4;
  left: 10%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.prevLeftSecond img {
  width: 250px;
}
#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}
#carousel div.next {
  z-index: 5;
  left: 75%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.next img {
  width: 350px;
}
#carousel div.nextRightSecond {
  z-index: 4;
  left: 100%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.nextRightSecond img {
  width: 250px;
}


.btn-prev{
  margin-top: -610px !important;
  margin-left: -1000px !important;

}
.btn-next{
  margin-top: -650px !important;
  margin-left: 950px !important;

}


@media screen and (max-width: 720px){

#carousel {
  position: relative;
  height: 300px !important;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}}

@media screen and (max-width: 720px){
  #carousel div.prevLeftSecond img {
  width: 100px;
}}

@media screen and (max-width: 720px){
  #carousel div.prev img {
  width: 150px;
}}

@media screen and (max-width: 720px){
  #carousel div img {
    width: 200px;
    transition: width 1s;
  }}

@media screen and (max-width: 720px){
  #carousel div.next img {
    width: 150px;
  }}

@media screen and (max-width: 720px){
  #carousel div.nextRightSecond img {
    width: 100px;
  }}

@media screen and (max-width: 720px){
  .btn-prev {
   margin-left: -50px !important;
   margin-top: 30px !important;
  }}

@media screen and (max-width: 720px){
  .btn-next {
   margin-left: 80px !important;
   margin-top: -55px !important;
  }}


      


  
  




  





    

  
