/*********************************************************** Sekcje **************************************************/
.info-sekcja {
	padding: 1rem 0;
	font-size: 1.25rem;
	color: #222;
}

@media screen and (min-width: 901px)  {	
	.info-sekcja {
		letter-spacing: 0.1rem;
		padding: 3rem 0;
	}
}

.info-sekcja.szara {
	background-color: #222;
	color: white;
}

.info-sekcja.szara .szeroki_header {
	color: var(--secondcolor);
}

/******************************************** 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 45%}
}

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

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

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

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

#info_banner .napis.duzy {
	font-size: 3.5rem;
	color: var(--secondcolor);
}

#info_banner .napis.third {
	color: var(--thirdcolor);
}

@media screen and (max-width: 900px)  {
	#info_banner .napis, #info_banner .napis.duzy {
		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 h1 {
	margin-bottom: -1rem;
	font-size: 1.75em;
	text-transform: uppercase;
}

@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_moduly {
	background: url("/images/logo-ses-tlo.png") no-repeat right 9%;
    background-size: contain;
	background-size: min(60rem, 75vw) auto;
}

#info_moduly .div_strona {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

#info_moduly .wypunktowanie {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	box-shadow: 0 0 1rem #ccc;
}

#info_moduly .wypunktowanie img {
	max-height: 6rem;
}

@media screen and (max-width: 900px)  {
	#info_moduly .div_strona {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	#info_moduly .wypunktowanie {
		margin: 0 -1.5rem;
	}

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


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

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

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