.container-s4{
  max-width: 70%;
  padding: 20px;
  margin-top: 20px;
}

#section4 h2{
  font-size:40px;
}

#slider-container {
   
    height: 220px;
    width: 100%;
    max-width: 1200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 0 15px #888;
    border-radius: 30px;

  }
  
  #slider-scroller {
    top: 0;
    left: 0;
    padding: 10px;
    /* animation: slidein 20s linear infinite; */
    animation-name: slidein;
    animation-duration: 35s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: linear; 
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
}

#slider-scroller:hover {

  cursor: pointer;
  animation-play-state: paused; 
}

@keyframes slidein {


0% {     
   
    margin-left: -180%;
      
} 

  100% {     
   
     margin-left: 100%;
       
} 



}
  
  
  .slider-item {
    padding: 10px;
    display: inline-block;
    margin: 20px;
   
  }
  
  .slider-item img {

    width: 220px;
    height: 140px;
    opacity: 100%;
    border-radius: 10px;
  }

  .slider-item img:hover {
    transform: scale(1.2);
    animation-play-state: slidein paused;
    
  }


.imagedisplay img{

  opacity: 85%;
  border-radius: 30px;
  width: 100%;
  height: 67%;
  width: auto\9; /* ie8 */    

}

  @media (max-width: 1200px){

    #section4 h2{
      font-size:30px;
  }

  .slider-item img {

    width: 180px;
    height: 100px;
    opacity: 100%;
    border-radius: 10px;
  }

  #slider-container {
   
    height: 190px;
    width: 100%;
    max-width: 1200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 0 15px #888;
    border-radius: 30px;

  }
}
  


  
  @media (max-width: 858px){
  
    #slider-container {
   
        height: 180px;
        width: 90%;
        max-width: 1000px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        overflow: hidden;
        box-shadow: 0 0 15px #888;
        border-radius: 30px;
        margin:20px;
    
      }

      .slider-item img {

        width: 150px;
        height: 80px;
        opacity: 100%;
        border-radius: 10px;
      }

      #section4 h2{
        font-size:25px;
    }

    @keyframes slidein {


      0% {     
         
          margin-left: -900%;
            
      } 
      
        100% {     
         
           margin-left: 100%;
             
      } 
  
  
  }

  }