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

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

/******************************************** 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: max(80vh, 40rem);
	display: flex;

	background:
	linear-gradient(
		180deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.25),
		rgba(255, 255, 255, 0)
	  ),
	  var(--obrazek);

	background-size: cover;
	background-position: center 70%;
	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 {
	100% {background-position: center 30%}
}

@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');
}

/************************************** Napis na bannerze *************************************/
#info_banner .napis {
	margin: auto;
	margin-top: 25vh;
	font-size: 2.5rem;
	letter-spacing: 0.1rem;
	max-width: 50%;
	text-align: center;
	text-transform: uppercase;

	display: none;
	font-weight: 900;
	color: #222;
	max-width: 40rem;
	filter: drop-shadow(0px 0px 15px white);
}

@media screen and (max-width: 900px)  {
	#info_banner .napis {
		font-size: 1.5rem;
		max-width: 60%;
	}
}

#info_banner .gotowy .napis {
	animation-duration: 5s;
	animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	animation-fill-mode: forwards;
	animation-name: info_banner_napis_anim;
	display: inline-block;
}

@keyframes info_banner_napis_anim {
	0%   {opacity: 0;}
	100% {opacity: 1; transform: scale(1.6);}
}

/************************************** Nakładka na bannerze *************************************/
#info_banner .nakladka {
	position: absolute;
	width: 100%;
	bottom: 6%;
	text-align: center;
}

#info_banner .nakladka button {
	font-size: 2.5rem;
	width: 32rem;
	max-width: 85%;
	display: inline-block;
	filter: drop-shadow(0px 0px 5px #222);
	background-color: white;
	border-radius: 1rem;
	margin: 1rem;
	padding: 1rem 2rem;
	text-transform: uppercase;
}

#info_banner .nakladka.wkrotce {
	background-color: #ffffffaa;
	color: var(--redcolor);
	letter-spacing: 0.1rem;
	font-size: 2rem;
}

#info_banner .nakladka.wkrotce h1 {
	margin-bottom: -1rem;
	font-size: 1.75em;
	text-transform: uppercase;
}

#info_banner .nakladka button.zaloz-konto, #info_banner .nakladka button.zaczynamy {
	color: var(--secondcolor);
}

#info_banner .nakladka button.dowiedz-sie {
	color: var(--maincolor);
}

@media screen and (max-width: 900px)  {
	#info_banner .nakladka button {
		font-size: 1.75rem;
		margin: 0.5rem;
		padding: 1rem;
	}

	#info_banner .nakladka.wkrotce {
		font-size: 1rem;
	}
}


/***************************************** Opis *************************************/
#info_opis {
	background: url("/images/logo-plywak-tlo.png") no-repeat right;
    background-size: contain;
	background-size: min(60rem, 75vw) auto;
}

#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(odd) {
		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;
}

#info_opis button.zaloz-konto {
    font-size: 1.25rem;
    padding: 1rem 3rem;
    width: 20rem;
	text-transform: uppercase;
}