#slider { 
width: 400px; /* important to be same as image width */ 
min-height: 430px; /*important to be same as image height */
position: relative; /* important */
/*overflow: hidden; /* important */
margin: 0px auto;
}

#sliderContent {
width: 400px; /* important to be same as image width or wider */
margin:0px 0px;
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
#slider li,#slider img{
border:0px;
height: 275px;
}
#slider li a{
position:relative;
display:block;
border:0px;
margin:0px;padding:5px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
#slider li a:hover{
background:none;
}
.sliderImage span {
   position: relative; /* important */
   left: 0;
   font-size:100%;
   text-align:left;
   line-height:30px;
   padding: 0px 0px;
   width:100%;
   background-color: none;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #000;
   display: block; /* important */
   -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   
   /*bottom: 0;*/
}

.sliderImage span small{
display:block;
font-size:85%;
}

.clear {
clear: both;
}

@media screen and (max-device-width:650px){ /* phone */
#slider,#sliderContent{
width:100% !important;
}
#slider{
}

}