* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  min-height:100%;
}

.slidercontainer {
  background-color: #232529;
  width: 860px;
  position: relative;
  margin:auto;
  min-height:318px;
  color:#000;
  overflow:hidden;
}
#carousel{
width:100%;
}


.slide {
  position: absolute;
  overflow:hidden;
  text-align: center;
  width:387px;
  height:143px;
  top:87px;
  bottom:87px;
  box-shadow:-7px 7px 20px;
  }

  .slide img{
  min-width: 100%;
  min-height:100%;
  }

 
  .mostlefthelper{
  left:-387px;
  z-index:3;
    width:258px;
 height:95px;  
  }
  
  .mostrighthelper{
  left:860px;
  z-index:4;
    width:258px;
 height:95px;
  }
  
.activeSlide{
 left: 129px;	
 right: 129px;	
 top:47px;
 bottom:47px;
   width:602px;
  height:222px;
  z-index:10;
  }
  
 .left{
 left:64px;
 z-index:7;
 }
  .right{
 left:409px;
z-index:8;
 }
  .mostleft{
 left:25px;
 z-index:5;
 width:258px;
 height:95px;
 top:111px;
 }
  .mostright{
 left:577px;
z-index:6;
width:258px;
 height:95px;
 top:111px;
 }
 .shadow{
 box-shadow:1px 1px 2px;
 }
 
 
 .smallcarousel{
 display:none;
 text-align:center;
 margin:auto;
 overflow:hidden;
 }
 .smallcarousel img{
 position:absolute;
 left:0;
 top:0;
 min-width:100%;
 min-height:100%;
 }
 
 .progressbar {
 position:absolute;
 bottom:0;
      background-color: black;
      border-radius: 13px; /* (height of inner div) / 2 + padding */
      padding: 1px;
	  display:block !important;
	    width: 440px ;
    }
    
    .progressbar> div {
       background-color: orange;
       width: 0; /* Adjust with JavaScript */
       height: 1px;
       border-radius: 10px;
	   display:block !important;
    }
 
/* Media Queries */
  @media all and (min-width: 871px)  {
  .smallcarousel{
 display:none;
 }
 .widecarousel{
 display:block;
 }
  .slidercontainer {
  width: 860px;
  position: relative;
  margin:auto;
  min-height:318px;
}
#carousel{
width:100%;
}


.slide {
  position: absolute;
  overflow:hidden;
  text-align: center;
  width:387px;
  height:143px;
  top:87px;
  bottom:87px;
  box-shadow:-7px 7px 20px;
  }

  
.activeSlide{
 left: 129px;	
 right: 129px;	
 top:47px;
 bottom:47px;
   width:602px;
  height:222px;
  z-index:10;
  }
  
 .left{
 left:64px;
 z-index:7;
 }
  .right{
 left:409px;
z-index:8;
 }
  .mostleft{
 left:25px;
 z-index:5;
 width:258px;
 height:95px;
 top:111px;
 }
  .mostright{
 left:577px;
z-index:6;
width:258px;
 height:95px;
 top:111px;
 }
 .progressbar {
width:860px;
}
  }
@media all and (max-width: 870px) and (min-width: 601px)  {
.smallcarousel{
 display:none;
 }
 .widecarousel{
 display:block;
 }
 .slidercontainer {
  background-color: #232529;
  width: 590px ;
  position: relative;
  margin:auto;
  min-height:218px;
}
#carousel{
width:100%;
}


.slide {
  position: absolute;
  overflow:hidden;
  text-align: center;
  width:265px;
  height:98px;
  top:60px;
  bottom:60px;
  box-shadow:-7px 7px 20px;
  }

  .activeSlide{
 left: 88px;	
 right: 88px;	
 top:33px;
 bottom:33px;
   width:413px;
  height:152px;
  z-index:10;
  }
  
 .left{
 left:44px;
 z-index:3;
 }
  .right{
 left:281px;
z-index:4;
 }
  .mostleft{
 left:22px;
 z-index:5;
 width:177px;
 height:65px;
 top:76px;
 }
  .mostright{
 left:385px;
z-index:6;
width:177px;
 height:65px;
 top:76px;
 }

 .progressbar {
width:590px;
}
}

 @media all and (max-width: 600px) and (min-width: 451px) {
 .smallcarousel{
 display:block;
   width: 440px ;
 }
 .widecarousel{
 display:none;
 }
.slidercontainer {
  width: 440px ;
  position: relative;
  margin:auto;
  min-height:218px;
    overflow:hidden;
}
.progressbar {
width:440px;
}
}
@media all and (max-width: 450px) {
 .smallcarousel{
 display:block;
   width: 290px ;
 }
 .widecarousel{
 display:none;
 }
.slidercontainer {
  width: 290px ;
  position: relative;
  margin:auto;
  min-height:218px;
  overflow:hidden;
}
.progressbar {
width:290px;
}
}