.slide{	max-white: 100%; position:relative; margin:auto auto;}
.bl,.br{ position:absolute; top:45%; }
.bl{ left:0; }
.br{ right:0; }
.bl,.br : hover{ color:#fff; }
.sl,.sr{ position:absolute; top:38%; margin:2%; color:#fff; width:3%; text-decoration:none; font-size:50px; text-shadow: 0em 0em 0.1em #000; }
.sl{ right:0; }
.sr{ left:0; }
.sl img,.sr img{ width:100%; height:auto; }
/* Flashing */
.sl:hover,.sr:hover{ opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s; color:#333; }
@-webkit-keyframes flash { 0% {opacity: .4;} 100% {opacity: 1;}}
@keyframes flash {0% {opacity: .4; }100% { opacity: 1;}}
/*end*/
.box{ position:absolute; left:50%; margin-left:-5%; margin-top: -2%;	}
/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #fff;
	box-shadow: 0em 0em 0.5em #000;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
	text-shadow: 0.1em 0.1em #333
}
.dot:hover {background-color: #717171;}
@media(max-width: 1024px){.slide{max-white: 100%; position:relative; margin:auto auto; width:100%;}}
@media(max-width: 800px){.sl,.sr{ font-size:40px;}}
@media(max-width: 600px){.sl,.sr{ font-size:30px;} .box{ margin-top:-6%; margin-left:-10%} .dot{ height:10px; width:10px;} .sr,.sl{top:30%;}}