/*
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 {
	width: 100%;
	height: 600px;
	box-sizing: border-box;
	position: relative;
	background-size: cover;
	background-position: center;	
}

#slider .slide {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: absolute;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}

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

#slider .slide > div {
	width: 60%;
	box-sizing: border-box;
	padding: 50px 50px 50px 200px;
	display: flex;
	align-items: center;
}

#slider .slide > figure {
	width: 40%;
	overflow: hidden;
}

#slider .slide > figure div {
	width: 600px;
	height: 600px;
	background-size: cover;
	background-position: center;
	position: relative;
	border-radius: 0 100px 0 200px;
}

#slider-nav {
	text-align: center;
	position: absolute;
	margin: auto;
	z-index: 5;
	bottom: 40px;
	left: 0;
	right: 0;
}

#slider-nav button {
	display: inline-block;
	width: 12px;
	height: 12px;
	position: relative;
	margin: 0 5px;
	border-radius: 50%;
	background: #00505A;
	transition: background 0.15s;
	cursor: pointer;
	border: none;
}

#slider-nav button.active {background: #F05A28 !important}
#slider-nav button:hover{background: #F05A28}

#slider-rwd-test {display: none}

#slider-pauza {
	cursor: pointer;
	position: absolute;
	z-index: 6;
	display: block;
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
	background: #F05A28;
	background-image: url(../img/slider-pauza.png);
	background-size: 50px 100px;
	background-position: top center;
	border-radius: 0 0 15px 0;
	opacity: 0;
	transition: opacity 0.5s;
	border: none;
	cursor: pointer;
}
#slider-pauza.clicked {
	background-position: bottom center;
	opacity: 1;
} 

#slider:hover #slider-pauza {opacity: 1}



/*GRID: 1440px */
@media all and (max-width: 1440px) {
	
#slider .slide > figure div {border-radius: 0 0 0 200px;}	
	
#slider-nav {bottom: 20px}
	
}


/*GRID: 1280px */
@media all and (max-width: 1280px) {
	
#slider {height: calc(var(--vh, 1vh) * 100 - 124px)}

#slider .slide > figure div {height: 100%}

}


/*GRID: 1024px */
@media all and (max-width: 1024px) {
	
#slider {height: calc(var(--vh, 1vh) * 100 - 114px)}	
	
#slider .slide > div {
	width: 50%;
	padding: 50px;
}

#slider .slide > figure {width: 50%}

#slider .slide > figure div {border-radius: 0 0 0 150px}

#slider-pauza {opacity: 1 !important};

}



/*GRID: 768px */
@media all and (max-width: 768px) {
	
#slider {height: calc(var(--vh, 1vh) * 100 - 80px)}
	
#slider .slide {
	display: block;
	height: 100%;
}

#slider .slide > figure {
	width: 100%;
	height: 400px;
}

#slider .slide > figure div {
    width: 100%;
    height: 100%;
}

#slider .slide > div {
	width: 100%;  
	text-align: center;
	display: block;
	padding: 50px;
}

#slider .slide > div h2::after {
	margin-left: auto;
	margin-right: auto;
}

#slider .slide > div .wp-block-buttons {
    justify-content: center;
}

#slider-nav {
    left: 0;
	right: 0;
	bottom: auto;
	top: 370px;
}

#slider-rwd-test {display: block}

#slider-pauza {
	top: 350px;
	left: auto;
	right: 0;
	border-radius: 15px 0 0 0;
}

}

/*GRID: 568px */
@media all and (max-width: 568px) {
	
#slider .slide > figure {height: 350px}	
	
#slider .slide > div {padding: 50px 25px}

#slider-nav {top: 320px}

#slider-pauza {
	width: 40px;
	height: 40px;
	background-size: 40px 80px;
	top: 310px;
}
	
}



/*GRID: 440px */
@media all and (max-width: 440px) {
	
#slider {height: calc(var(--vh, 1vh) * 100 - 50px)}	

#slider .slide > figure div {border-radius: 0 0 0 100px}

#slider .slide > div {
    text-align: center;
    display: block;
}

#slider .slide > div {padding: 40px 20px;}

#slider-nav button {margin: 0 5px}

	
}