
#slider3 { height: 1%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }
#slider3 .viewport { height: 450px; overflow: hidden; position: relative; }
#slider3 .buttons {
    background: #C01313;
    border-radius: 35px;
    display: block;
    position: absolute;
    top: 40%;
    left: 0;
    width: 35px;
    height: 35px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    text-decoration: none;
    font-size: 22px;
}
#slider3 .next {
    right: 0;
    left: auto;
    top: 40%;
}
#slider3 .buttons:hover{
    color: #C01313;
    background: #fff;
}
#slider3 .disable { visibility: hidden; }
#slider3 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 250px; left: 0 top: 0; }
#slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}

#slider4 { height: 1%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }
#slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
#slider4 .buttons {
    background: #C01313;
    border-radius: 35px;
    display: block;
    position: absolute;
    top: 40%;
    left: 0;
    width: 35px;
    height: 35px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    text-decoration: none;
    font-size: 22px;
}
#slider4 .next {
    right: 0;
    left: auto;
    top: 40%;
}
#slider4 .buttons:hover{
    color: #C01313;
    background: #fff;
}
#slider4 .disable { visibility: hidden; }
#slider4 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 250px; left: 0 top: 0; }
#slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}



#slider5 { height: 1%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }
#slider5 .viewport { height: 450px; overflow: hidden; position: relative; }
#slider5 .buttons {
    background: #C01313;
    border-radius: 35px;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 35px;
    height: 35px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    text-decoration: none;
    font-size: 22px;
}
#slider5 .next {
    right: 0;
    left: auto;
    top: 50%;
}
#slider5 .buttons:hover{
    color: #C01313;
    background: #fff;
}
#slider5 .disable { visibility: hidden; }
#slider5 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 250px; left: 0 top: 0; }
#slider5 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}


@media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
		#slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}
		#slider3.overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
		#slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}
		#slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
		#slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}
		#slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 258px;}
    }
    
    @media only screen and (min-width:768px) and (max-width: 959px){
       /* default iPad screens */
	   #slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
	   #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 315px;}
	    #slider3 .viewport { height: 450px; overflow: hidden; position: relative; }
	   #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 315px;}
    }
	@media only screen and (min-device-width:768px) and (max-device-width: 959px){
       /* default iPad screens */
	  #slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
	   #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 315px;}
	    #slider3 .viewport { height: 450px; overflow: hidden; position: relative; }
	   #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 315px;}
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 767px) {
      /* For portrait layouts only */
	   #slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 250px;}
	   #slider3 .viewport { height: 450px; overflow: hidden; position: relative; }
	  #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 250px;}
    }
	@media only screen and (min-width: 481px) and (max-width: 767px)  {
      /* For portrait layouts only */
	   #slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 250px;}
	   #slider3 .viewport { height: 450px; overflow: hidden; position: relative;margin-top:-10px }
	  #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 250px;}
    }
	
	@media only screen and (min-device-width: 321px) and (max-device-width: 480px) {
      /* For portrait layouts only */
	   #slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 212px;}
	  #slider3 .viewport { height: 450px; overflow: hidden; position: relative; }
	   #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 212px;}
    }
	@media only screen and (min-width: 321px) and (max-width: 480px)  {
      /* For portrait layouts only */
	  #slider4 .viewport { height: 450px; overflow: hidden; position: relative; }
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 225px;}
	  #slider3 .viewport { height: 450px; overflow: hidden; position: relative; }
	   #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 225px;}
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 185px;}
	   #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 185px;}
    }
	@media only screen and (min-device-width: 250px) and (max-device-width: 320px) {
      /* For portrait layouts only */
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 120px;}
	  #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 120px;}
    }
	@media only screen and (min-width: 250px) and (max-width: 320px)  {
      /* For portrait layouts only */
	  #slider4 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 110px;}
	   #slider3 .overview li{ float: left; margin: 0 10px 0 0; padding: 1px; height: 450px;  width: 110px;}
    }


