/*********************************************************** Sekcje **************************************************/
.info-sekcja {
	padding: 4rem 0;
}

@media screen and (max-width: 900px)  {
	.info-sekcja {
		padding: 2rem 0;
	}
}

/*********************************************************** Header **************************************************/
#info_header {
    background: url("/images/info/info-header.jpg") no-repeat 0 0;
    background-size: auto 100%;
    height: 36rem;
}

@media screen and (max-width: 900px)  {
	#info_header {
		background-position: bottom center;
		background-size: auto 80%;
		height: 80vh;
	}
}

#info_header .div_strona {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: right;
}

#info_header #tytul {
	background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    display: inline-block;
    padding: 1rem;
    margin: 3rem 0 1rem;
}

#info_header #tytul > * {
    letter-spacing: 0.1rem;
    font-weight: bold;
    margin: 0;
    line-height: 3rem;
}

#info_header #tytul > h2 {
   font-size: 2.5em;
   color: #555;
}

@media screen and (max-width: 900px)  {
	#info_header #tytul {
		margin: -1rem 0 17rem;
	}
	#info_header #tytul > * {
		letter-spacing: 0;
	}
	#info_header #tytul > h2 {
		font-size: 1.9em;
	}
}

#info_header #tytul span.caps {
    text-transform: uppercase;
    color: var(--maincolor);
}

/******************************************** Przyciski *************************************/
button#osystemie, button#dolacz {
    font-size: 1.4rem;
    padding: 1rem 3rem;
    width: 22rem;
}

button#osystemie {
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--buttoncolor);
}

/******************************************** Dziękujemy *************************************/
#info_header.dziekujemy {
    background-image: url("/images/info/info-dziekujemy.jpg");
}

#info_header #tytul > h3 {
	font-size: 1.5em;
	letter-spacing: 0;
	color: #555;
}

 #info_header #tytul > h3#email {
	color: var(--maincolor)
}

/***************************************** Opis *************************************/
#info_opis {
	background: url("/images/logo-kolko-tlo.png") no-repeat right;
    background-size: auto min(60rem, 100%);
	background-color: #eee;
}

#info_opis .wypunktowanie {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
	font-size: 1.25rem;
}

#info_opis .wypunktowanie img {
	max-height: 3rem;
}

@media screen and (min-width: 901px)  {
	#info_opis {
		letter-spacing: 0.1rem;
	}
	
	#info_opis .wypunktowanie:nth-child(even) {
		margin-left: 5rem;
	}
	#info_opis .wypunktowanie img {
		max-height: 7rem;
	}
}

#info_opis .wypunktowanie h2 {
	margin: 0 0 0.5rem;
	color: var(--maincolor);
	font-size: 1.25rem;
	text-transform: uppercase;
}

#info_opis #przyciski {
	margin: auto;
	text-align: center;
}

/***************************************** Formularz *************************************/
#info_formularz {
    background: url("/images/info/info-kontakt.jpg") no-repeat right bottom;
    background-size: auto 90%;
    min-height: 46rem;
}

@media screen and (max-width: 900px)  {
	#info_formularz {
		background-position: bottom center;
		background-size: auto 60%;
		height: 80vh;
	}
}

#info_formularz #dane_klubu {
	max-width: 30rem;
	background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
	margin: -1rem;
    border-radius: 1rem;
}

#info_formularz #dane_klubu:not(.ukryj-nip) .wersja-adres {
	display: none;
}

#info_formularz #dane_klubu.ukryj-nip .wersja-nip {
	display: none;
}
#info_formularz input[type=submit] {
	padding: 1rem 0.5rem;
}

/******************************************** Slider *************************************/
#slider .splide__pagination__page.is-active {
	background-color: var(--maincolor);
}

#slider li.splide__slide.kliknij {
	cursor: pointer;
}

#slider .splide__arrow {
	background: none;
}

#slider .splide__arrow:hover {
	background: #fff3;
	border: none;
	opacity: 0.75;
}

@media screen and (max-width: 900px)  {
	#slider .splide__arrow {
		display: none;
	}
}

/******************************************** Banner *************************************/
#info_banner {
	padding: 0;
	margin-top: 0;
	position: relative;
}

#info_banner #slider li.splide__slide {
	height: 36vw;
	display: flex;

	background: var(--obrazek);

	background-size: contain;
	background-position: center 1rem;
	background-repeat: no-repeat;
}

/* #info_banner #slider li.splide__slide.gotowy {
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-name: info_banner_slide_anim;
} 

@keyframes info_banner_slide_anim {
	25% {background-position: center -1rem;} 
} 

@media screen and (max-width: 900px)  {
	@keyframes info_banner_slide_anim {
		100% {background-position: 57.5% top;}
	}
}
*/

#info_banner .banner-01 {
	--obrazek: url('/images/slider/1.jpg');
}

#info_banner .banner-02 {
	--obrazek:url('/images/slider/2.jpg');
}

#info_banner .banner-03 {
	--obrazek: url('/images/slider/3.jpg');
}

#info_banner .banner-04 {
	--obrazek: url('/images/slider/4.jpg');
}

#info_banner .banner-05 {
	--obrazek: url('/images/slider/5.jpg');
}

@media screen and (max-width: 900px)  {
	#info_banner #slider li.splide__slide {
		height: 120vw;
	}

	#info_banner .banner-01 {
		--obrazek: url('/images/slider/pion/1.jpg');
	}
	
	#info_banner .banner-02 {
		--obrazek:url('/images/slider/pion/2.jpg');
	}
	
	#info_banner .banner-03 {
		--obrazek: url('/images/slider/pion/3.jpg');
	}
	
	#info_banner .banner-04 {
		--obrazek: url('/images/slider/pion/4.jpg');
	}

	#info_banner .banner-05 {
		--obrazek: url('/images/slider/pion/5.jpg');
	}
}