/* ===========================
   ===== Slideshow  =====
   =========================== */
   
   @media only screen and (min-width:320px) {
       
       
       .caption{
padding: 10px 10%;
    height: 60px;
  
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

    position: absolute;
    width: 80%;
    text-align: center;
    font-size: 16.5px;
    z-index: 2;
    bottom: 0px;
    margin-top: -9px;
    color: #fff;
    font-weight: bold;

}
       
       .prev{

	left: 0px;
}
.next{
	right:0px;
}


.prev, .next{
     padding: 10px 10px;
    background-color: #7a0720;
	position: absolute;
	font-size: 30px;
	cursor: pointer;
	top: 45%;
	margin-top: -20px;
	z-index: 5;
	color:#fff;
}

       
   }
   
   
   
   
   
   
   
    @media only screen and (min-width:767px) {
        
        
        .caption{
            padding: 0px 10%;
   background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a0000000',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 3px 8px rgba(0,0,0,0.52);
    position: absolute;
    width: 80%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 2;
    top: 49%;
    margin-top: -9px;
    color: #fff;

}
        
        .prev, .next{
           
	position: absolute;
	font-size: 40px;
	cursor: pointer;
	top: 50%;
	margin-top: -20px;
	z-index: 5;
	color:#fff;
}
       
    .prev{

	left: 10px;
}
.next{
	right:10px;
}
   
       
   }
   
   
   
#slider{
	width:100%;
	position:relative;
	overflow: hidden;
}

.slide{
	position: absolute;
	top:0;
	left: 0;
	width:100%;
	display: none;
	text-align: center;
	margin:0;
	padding:0;
}

.slide img{
	vertical-align: middle;
	width:101%;
	margin:0;
	padding:0;
}






.dots{
	width:100%;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	z-index:0;
	bottom:30px;
	left:0;
}

.dot{
	display: inline-block;
	background: #dedede;
	width:15px;
	height: 15px;
	border-radius: 50%;
	margin:5px;
	cursor: pointer;
}

.dot:hover, .dot.active{
	background: #FFF;

}