html, body{
	width: 100%;
	height: 100%;
	margin: 0;
}
.container{
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
	width: 80%;
	height: 0;
	padding-bottom: 40%;
	background: lightgrey;
	border:8px solid #4c4c4c;
}
@media screen and ( max-width: 500px){
.container{
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
	width: 80%;
	height: 0;
	padding-bottom: 40%;
	background: lightgrey;
	border: 6px solid #4c4c4c;
}
}
@media screen and ( max-width: 400px){
.container{
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
	width: 80%;
	height: 0;
	padding-bottom: 40%;
	background: lightgrey;
	border: 5px solid #4c4c4c;
}
}
.slider_img{
	position: absolute;
	width: 100%;
	height: 100%;

}
.slider_img img{
	width: 80%;
	height: 100%;
	margin-left: 10%;
	margin-right: 10%;
}
/*&
.slider_img h3{
	position: absolute;
	bottom: 40px;
	margin-left: 40%;
	width: 150px;
	height: 35px;
	background: rgba(0,0,0,.5);
	padding: 10px;
	color: maroon;
	border-radius: 8px;
	text-align: center;
}
*/

.slider_img h2{
	position: absolute;
	bottom: 40px;
	margin-left: 40%;
	width: 150px;
	height: 33px;
	line-height: 35px;
	background: rgba(0,0,0,.7);
	padding: 6px;
	color: maroon;
	border-radius: 8px;
	text-align: center;
}

#i1, #i2, #i3, #i4, #i5, #i6, #i7, #i8, #i9{
	display: none;
}
.pre, .nxt{
	width: 10%;
	height: 100%;
	position: absolute;
	top: 0;
	background: rgba(88,88,88,.3);
	z-index: 99;
	cursor: pointer;
}
.pre{
	left: 0;
}
.nxt{
	right: 0;
}
.pre h6{
	margin-left: 30%;
	top: 10%;
	position: absolute;
	font-family: verdana;
	font-size: 3.5em;
	font-weight: bold;

}
.nxt h6{
	margin-left: 30%;
	top: 10%;
	position: relative;
	font-family: verdana;
	font-size: 3.5em;
	font-weight: bold;

}/* -- making the slider responsive -- */
/* ------------------------------------ */
@media screen and ( max-width: 1050px){
	.nxt h6, .pre h6{
	margin-left: 25%;
	top: 9%;
	font-size: 3em;

}
}
@media screen and ( max-width: 850px){
	.nxt h6, .pre h6{
	margin-left: 25%;
	top: 7.5%;
	font-size: 2.9em;


}
}
@media screen and ( max-width: 700px){
	.nxt h6, .pre h6{
	margin-left: 20%;
	top: 6%;
	font-size: 2.5em;
	

}
}

@media screen and ( max-width: 500px){
	.nxt h6, .pre h6{
	margin-left: 20%;
	top: 6%;
	font-size: 2.5em;


}
}

@media screen and ( max-width: 600px){
	.nxt h6, .pre h6{
	margin-left: 17%;
	top: 5%;
	font-size: 2.1em;


}
}

@media screen and ( max-width: 450px){
	.nxt h6, .pre h6{
	margin-left: 19%;
	top: 4%;
	font-size: 1.7em;

}
}
@media screen and ( max-width: 380px){
	.nxt h6, .pre h6{
	margin-left: 17%;
	top: 4%;
	font-size: 1.5em;

}
}
@media screen and ( max-width: 330px){
	.nxt h6, .pre h6{
	margin-left: 16%;
	top: 3.0%;
	font-size: 1.3em;

}
}
@media screen and ( max-width: 280px){
	.nxt h6, .pre h6{
	margin-left: 15%;
	top: 2.5%;
	font-size: 1em;

}
}
@media screen and ( max-width: 200px){
	.nxt h6, .pre h6{
	margin-left: 15%;
	top: 2.1%;
	font-size: .8em;

}
}
@media screen and ( max-width: 150px){
	.nxt h6, .pre h6{
	margin-left: 10%;
	top: 1.4%;
	font-size: .6em;

}
}
@media screen and ( max-width: 100px){
	.nxt h6, .pre h6{
	display: none;

}
}
/* --- SLIDE TITLE -- RESPONSIVE MEDIA QUERY ---*/
@media screen and ( max-width: 880px){
	.slider_img h2{
	position: absolute;
	bottom: 30px;
	margin-left: 40%;
	width: 150px;
	height: 20px;
	line-height: 20px;
	background: rgba(0,0,0,.7);
	padding: 8px;
	border-radius: 8px;

}
}
@media screen and ( max-width: 700px){
	.slider_img h2{
	bottom: 20px;
	margin-left: 38%;
	width: 120px;
	height: 14px;
	line-height: 15px;
	padding: 6px;
	font-size: 1.5em;

}
}
@media screen and ( max-width: 500px){
	.slider_img h2{
	bottom: 13px;
	margin-left: 35%;
	width: 100px;
	height: 14px;
	line-height: 15px;
	padding: 4px;
	font-size: 1.2em;

}
}
@media screen and ( max-width: 350px){
	.slider_img h2{
	bottom: 11px;
	margin-left: 35%;
	width: 80px;
	height: 13px;
	line-height: 15px;
	padding: 3px;
	font-size: 1.1em;

}
}
@media screen and ( max-width: 330px){
	.slider_img h2{
	bottom: 11px;
	margin-left: 35%;
	width: 70px;
	height: 13px;
	line-height: 13px;
	padding: 3px;
	font-size: .9em;

}
}
@media screen and ( max-width: 290px){
	.slider_img h2{
	bottom: 7px;
	margin-left: 37%;
	width: 50px;
	height: 12px;
	line-height: 13px;
	padding: 3px;
	font-size: .8em;

}
}
@media screen and ( max-width: 230px){
	.slider_img h2{
	bottom: 5px;
	margin-left: 37%;
	width: 35px;
	height: 10px;
	line-height: 12px;
	padding: 2.5px;
	font-size: .65em;

}
}
@media screen and ( max-width: 150px){
	.slider_img h2{
	display: none;

}
}

.nav{
	width: 100%;
	height: 11px;
	bottom: 6%;
	position: absolute;
	text-align: center;
	z-index: 99;
}
.dots{
	top: -5px;
	width: 18px;
	height: 18px;
	margin: 0 10px;
	position: relative;
	border-radius: 50%;
	display: inline-block;
	background: rgba(0,0,0,.7);
}
/* ------------------------------------ */
/* --------- RESPONSIVE DOTS --------- */
@media screen and ( max-width: 700px){
	.dots{
	top: -3px;
	width: 16px;
	height: 16px;
	margin: 0 7px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 500px){
	.dots{
	top: -3px;
	width: 14px;
	height: 14px;
	margin: 0 5px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 400px){
	.dots{
	top: -2px;
	width: 11px;
	height: 11px;
	margin: 0 3px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 290px){
	.dots{
	top: -1.5px;
	width: 10px;
	height: 10px;
	margin: 0 2px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 250px){
	.dots{
	top: -1px;
	width: 8px;
	height: 8px;
	margin: 0 1px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 220px){
	.dots{
	top: -1px;
	width: 7px;
	height: 7px;
	margin: 0 1px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 170px){
	.dots{
	top: -1px;
	width: 6px;
	height: 6px;
	margin: 0 .5px;
	border-radius: 50%;
}
}
@media screen and ( max-width: 150px){
	.dots{
	display: none;
}
}
.slider_img{
	z-index: -1;
}
#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four,
#i5:checked ~ #five,
#i6:checked ~ #six,
#i7:checked ~ #seven,
#i8:checked ~ #eight,
#i9:checked ~ #nine{
	z-index: 9;
}
#i1:checked ~ .nav #dot1,
#i2:checked ~ .nav #dot2,
#i3:checked ~ .nav #dot3,
#i4:checked ~ .nav #dot4,
#i5:checked ~ .nav #dot5,
#i6:checked ~ .nav #dot6,
#i7:checked ~ .nav #dot7,
#i8:checked ~ .nav #dot8,
#i9:checked ~ .nav #dot9{
	background: maroon;
}