.slider-frame{
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
}

#slider{
	margin: 0;
	padding: 0;
	background-color: white;
	position: relative;
	display: block;
}

#slider > img{
	display: none;
	width: 100%;
	z-index: 1;
}

#slider > img.active{
	display: block;
	z-index: 3;
}

#slider > img.next{
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

/* Navigation */

.slide-nav{
	margin: 0;
	padding: 0;
	list-style: none;	
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 5;
}

.slide-nav li{
	margin: 0 0 0 2px;
	padding: 4px 10px;
	border-radius: 3px;
	border: 1px solid #cecece;
	font-size: 17px;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	display: inline-block;
	transition: 0.9s;
}

.slide-nav li.active{
	background-color: rgba(0, 0, 0, 0.9);
}

.slide-nav li:hover{
	background-color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.slide-nav-mobile{
	margin: 0;
	padding: 0;
	list-style: none;	
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 5;
	display: none;
}

.slide-nav-mobile li{
	margin: 0 0 0 2px;
	padding: 0 10px;
	border-radius: 3px;
	border: 1px solid #cecece;
	font-size: 25px;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	display: inline-block;
	transition: 0.9s;
}

.slide-nav-mobile li:hover{
	background-color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

@media only screen and (max-width: 512px){
	
	
	.slide-nav{
		display: none;
	}
	
	.slide-nav-mobile{
		display: block;
	}
	
}

/*
@media only screen and (max-width: 1185px){

	#slider > img{
		/*width: 1024px;
	}
	
}

@media only screen and (max-width: 768px){
	
	.slider-frame{
		height: 300px;
	}

	#slider > img{
		width: 768px;
	}
	
}

@media only screen and (max-width: 512px){
	
	.slider-frame{
		height: 200px;
	}

	#slider > img{
		width: 512px;
	}
	
	.slide-nav{
		display: none;
	}
	
	.slide-nav-mobile{
		display: block;
	}
	
}

@media only screen and (max-width: 384px){
	
	.slider-frame{
		height: 160px;
	}

	#slider > img{
		width: 384px;
	}
	
}*/