.box{ width:295px; height:250px; float:left; margin:5px;box-shadow: 1px 1px 5px 1px rgba(0,0,0,4);border-radius: 3px;}
.box img{width:100%; height:100%;border-radius: 3px;}
.box .title{ background: #C30; color: #FBF8F8;position: absolute; padding: 5px; border-top-left-radius: 3px;}
.box .info {background:#CCC;padding-left:5px;}
.box:hover {opacity:0.8; transition:all 0.5s;}
.box1{width: 31.5%;
    float: left;
    background: #3D4859;
    margin: 5px;
    border: 1px solid #e1e1e1;
    height: 226px;}
.img img{width:100%; height:100%;}
.img {width:100%;    height: 170px;}
.title {background: #3D4859; color: #FBF8F8;    padding: 5px;}

/*the container */
#banner {width:100%;
  height:300px;
margin-bottom:10px;}
/* where the circles are going to be*/
#banner img 
{
    /*overlays all the imgs */
    /*You see only the first img, for now*/
    width:100%;
    height:100%;
    top:0;
    left:0;
    transition: 1s;
    /*we want to show only 1 img at the time*/
}
#imgs img 
{
    /*overlays all the imgs */
    /*You see only the first img, for now*/
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    transition: 1s;
    visibility:hidden;
    /*we want to show only 1 img at the time*/
}
/*the container */
#Snav 
{
    display:block;
    width:70%;
    height:50%;
    position:absolute;
    top:0;
    left:0;
	
}
#SnavUp 
{
    display:block;
    width:100%;
    height:20%;
}
#Scircles {
    display: block;
    width: 5%;
    height: 6%;
    margin-left: 94%;
    margin-top: 2%;
    /* float: right; */
    position: absolute;        /* is going to be on the right side of the slider*/
}
#Scircles ul 
{
    margin:0;
    float:right;
    display:block;
    width:100%;
    height:100%;
}
#Scircles li
{
    /*we don't need the dots*/
    list-style:none;
    display:block;
    background-color:rgba(0, 0, 0, 1);
    width:25%;
    height:90%;
    margin-left:5%;
    float:left;     /*on the same line*/
    visibility:hidden;
    /*we need circles, not squares*/
    border-bottom-left-radius:25px;
    border-top-left-radius:25px;
    border-bottom-right-radius:25px;
    border-top-right-radius:25px;

}
/*ok , we are done with the SnavUp*/
#SnavMiddle 
{
    display:block;
    width:100%;
    height:15%;
    margin-top: 5%;/*this is up to you , where you want the buttons*/
}
/*left button*/
#Sleft 
{
    width:8%;
    height:100%;
    float:left;
    margin-left:3%;
    opacity:0.8;
}
/*button effect*/
#Sleft:hover 
{
    opacity:0.8;
}
#Sright 
{
    width:8%;
    height:100%;
    float:right;
    margin-right:3%;
    opacity:0.8;
}
#Sright:hover 
{
    opacity:0.8;
}
/*now we have to add the info at the bottom of the slider*/
#SnavBottom 
{
    display:block;
    background-color:rgba(0, 0, 0, 0.8);
    width:100%;
    height:10%;
    position:absolute;
    bottom:0;
    left:0;
}
#SnavBottom p 
{
        font: normal 200% Arial;
    color: #fff;
    position: absolute;
    margin-top: 0px;
    margin-left: 3%;
}
/*that's all , now we need to code the slider, the effect*/