/*
OPCJONALEN ELEMENTY:
1. #slider-nav - punkty, dolna nawigacja 
2. #slider-arrows - strzałki, boczna nawigacja prev-next
3. #slider-down - strzałka scrolująca w dól
4. #slider hgroup
*/


#slider {
	position: relative;
	width: 100%;
	height: 80%;
	text-align: center;
	overflow: hidden;
}


#slider .slide {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: white;
	background-position: center;
	background-size: cover;
}

#slider .slide.active {z-index: 4}

#slider .slide.next {z-index: 3}


#slider-arrows {
	position: absolute;
	z-index: 11;
	display: block;
	width: 100%;
	height: 19px;
	bottom: 150px;
	left: 0;
	right: 0;
	margin: auto;
}

#slider-arrows a {
	display: inline-block;
	width: 13px;
	height: 19px;
	background-size: 200% 100%;
	background-position: center left;
}
#slider-arrows a:first-of-type {
	left: 20px;
	background-image: url(../img/slider-arrows-prev.png);
}
#slider-arrows a:last-of-type {
	right: 20px;
	background-image: url(../img/slider-arrows-next.png);
}
#slider-arrows a:hover {background-position: center right}

#slider-arrows > div {
	width: 1px;
	height: 20px;
	background: white;
	display: inline-block;
	position: relative;
	margin: 0 5px;
}

#slider-bottom {
	width: 100%;
	height: 270px;
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 10;
	background-image: url(../img/slider-bottom.png);
	background-position: bottom left;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.slider_filter {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(40,30,90,0.6);
	z-index: 9;
}

#slider > img {
	position: absolute;
	z-index: 10;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: table;
	width: 60%;
	max-width: 800px;
	padding-bottom: 100px;
	padding-top: 200px;
	opacity: 0;
}


/* #Base 1900 Grid
================================================== */
@media only screen and (max-width: 1900px) {

#slider-bottom {background-size: 1900px 100%}	
	
}


/* #Base 1280 Grid
================================================== */
@media only screen and (max-width: 1280px) {
	
#slider-bottom {
	height: 200px;
	background-size: 1300px 100%;
}
	
}



/* #Base 1024 Grid
================================================== */
@media only screen and (max-width: 1024px) {
	
#slider {height: 70%}	

#slider > img {
	padding-bottom: 70px;
	padding-top: 150px;
}
	
#slider-arrows {bottom: 100px}

#slider-bottom {
	height: 160px;
	background-size: 1024px 100%;
}
	
}

/* #Base 750 Grid
================================================== */
@media only screen and (max-width: 750px) {
	
#slider > img {
	padding-bottom: 50px;
	padding-top: 100px;
}	
	
#slider-arrows {bottom: 80px}

#slider-bottom {
	height: 120px;
	background-size: 750px 100%;
}	

}

/* #Base 500 Grid
================================================== */
@media only screen and (max-width: 500px) {
	
#slider > img {
	width: 80%;
	padding-bottom: 20px;
}	

#slider-arrows {bottom: 60px}

#slider-bottom {
	height: 80px;
	background-size: 500px 100%;
}

}