/* offers */
.offer_box{
	overflow: hidden;
	height: auto;
	margin: 0 0 90px;
}

/*---------------------------   OFFER 11 ---------------------------*/
#offer_11{
	padding: 0;
	margin: 0;
	background: url(../images/slide11.webp) no-repeat center top;
	height: 550px;
  	padding: 0;
}
@media  (min-width: 481px)  {
	#offer_11{
		background-size: 100% 100%;
	}
}
@media (max-width: 480px)  {
	#offer_11{
		background-size: 100%;
	}
}

/*---------------------------   OFFER 12 ---------------------------*/
#offer_12{
	padding: 0px 0px 0px 0px;
	background: url(../images/slide12.webp) no-repeat center top;
	height: 550px;
}
@media  (min-width: 481px)  {
	#offer_12{
		background-size: 100% 100%;
	}
	#offer_12 > .text{
		width: 46%;
		margin: 0 0 0px;
		padding-left: 40px;
		padding-top: 16%;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 200;
		font-style: normal;
		font-size: 18px;
		line-height: 26px;
	}
	#offer_12 > .text2{
		margin: 0 0 1px;
		padding-left: 40px;
		padding-top: 15px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 18px;
		line-height: 20px;
		color: #000000;
	}
	#offer_12 .button1{
		width: 245px;
		height: 58px;
	   	padding: 0 0 0 35px;
	   	margin-left: 40px;
	}
	#offer_12 .button1.arrow_right::after{
		width: 39px;
	}
}
@media (max-width: 480px)  {
	#offer_12{
		background-size: 100%;
	}
	#offer_12 > .text{
		width: 46%;
		margin: 0 0 0px;
		padding-left: 10px;
		padding-top: 18%;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 400;
		font-style: normal;
		font-size: 9px;
		line-height: 12px;
	}
	#offer_12 > .text2{
		margin: 0 0 1px;
		padding-top: 30%;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 14px;
		line-height: 12px;
		color: #000000;
		text-align: center;
	}
	#offer_12 .button1{
		width: 195px;
		height: 58px;
		padding: 0 0 0 20px;
		margin-top: 0px;
	}
	#offer_12 .button1.arrow_right::after{
		width: 35px;
	}
}

/*---------------------------   OFFER 13 ---------------------------*/
#offer_13{
	padding: 0px 0px 0px 0px;
	background: url(../images/slide13.webp) no-repeat center top;
	height: 550px;
}
@media  (min-width: 481px)  {
	#offer_13{
		background-size: 100% 100%;
	}
	#offer_13 > .text{
		width: 46%;
		margin: 0 0 0px;
		padding-left: 40px;
		padding-top: 24%;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 200;
		font-style: normal;
		font-size: 18px;
		line-height: 26px;
	}

	 #offer_13 .button1{
		width: 245px;
		height: 58px;
	   	padding: 0 0 0 35px;
	   	margin-left: 40px;
		margin-top: 40px;
	}
	#offer_13 .button1.arrow_right::after{
		width: 39px;
	}

}
@media (max-width: 480px)  {
	#offer_13{
		background-size: 100%;
	}
	#offer_13 > .text{
		width: 46%;
		margin: 0 0 0px;
		padding-left: 10px;
		padding-top: 23%;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 400;
		font-style: normal;
		font-size: 9px;
		line-height: 12px;
	}
	
	#offer_13 .button1{
		width: 195px;
		height: 58px;
	   	padding: 0 0 0 20px;
	   	margin-top: 120px;
	}
	#offer_13 .button1.arrow_right::after{
		width: 35px;
	}
}

/*---------------------------   OFFER 14 ---------------------------*/
#offer_14{
	padding: 0px 0px 0px 0px;
	background: url(../images/slide14.webp) no-repeat center top;
	height: 550px;
}
@media  (min-width: 481px)  {
	#offer_14{
		background-size: 100% 100%;
	}
	#offer_14 > .heading2{
		margin-bottom: 30px;
		padding-left: 35px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 900;
		font-style: normal;
		font-size: 90px;
		line-height: 90px;
		letter-spacing: -0.02em;
		color: #000000;
	}
	#offer_14 > .heading{
		padding-left:	40px;
		margin-bottom: 30px;;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 800;
		font-style: normal;
		font-size: 30px;
		line-height: 30px;
		letter-spacing: -0.02em;
		color: #000000;
	}
	#offer_14 > .text{
		margin-top:80px;
		margin-bottom: 30px;
		margin-left: 40px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 600;
		font-style: normal;
		font-size: 25px;
		line-height: 25px;
		color: #e93a09;
	}	
	#offer_14 > .text3{
		margin-top:130px;
		padding-left: 40px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 24px;
		line-height: 26px;
		color: #000000;
	}	
}
@media (max-width: 480px)  {
	#offer_14{
		background-size: 100%;
	}
	#offer_14 > .heading2{
		margin-bottom: 10px;;
		padding-left: 35px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 700;
		font-style: normal;
		font-size: 40px;
		line-height: 50px;
		letter-spacing: -0.02em;
		color: #000000;
	}
	#offer_14 > .heading{
		padding-left:	35px;
		margin-bottom: 15px;;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 600;
		font-style: normal;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: -0.02em;
		color: #000000;
	}
	#offer_14 > .text{
		margin-top:80x;
		margin-bottom: 30px;
		margin-left: 35px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		line-height: 15px;
		color:#000000; ;
	}
	#offer_14 > .text3{
		margin-top:65px;
		padding-left: 35px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 14px;
		line-height: 14px;
		color: #e93a09
	}	
}

/*---------------------------   OFFER 15 ---------------------------*/
#offer_15{
	padding: 0px 0px 0px 0px;
	background: url(../images/slide15.webp) no-repeat center top;
	height: 550px;
}
@media  (min-width: 481px)  {
	#offer_15{
		background-size: 100% 100%;
	}

	 #offer_15 .button1{
		width: 245px;
		height: 58px;
	   	padding: 0 0 0 35px;
		margin-top: 480px;
	}
	#offer_15 .button1.arrow_right::after{
		width: 39px;
	}
	#offer_15 .button_demo{
		text-align: center;
	}
	#offer_15 .button_demo{
              /* Kontener jest elastyczny (main.php), a w takim ukladzie text-align
                 nie rusza dzieci - o polozeniu decyduje justify-content. */
              justify-content: center;
              text-align: center;
    }
}
@media (max-width: 480px)  {
	#offer_15{
		background-size: 100%;
	}
	/* Przycisk na tej samej wysokosci co "Uruchom wersje demo" w #offer_13 (slajd 5):
	   tam gora przycisku = padding-top tekstu 23% + 7 linii po 12px + 3 <br> (120px)
	   + padding .button_demo 10px + margin-top 120px, czyli 23% + 250px. Tu .button_demo
	   ma ten sam padding 10px, wiec margines = 23% + 240px. Wczesniej 59% dla kontenera
	   + 80% dla przycisku = 139% szerokosci, czyli przycisk daleko pod grafika i najwyzszy
	   slajd w galerii (21-09-2026). */
	#offer_15 .button_demo{
		margin-top: calc(23% + 240px);
	}

	#offer_15 .button1{
		width: 195px;
		height: 58px;
	   	padding: 0 0 0 20px;
	   	margin-top: 0;
	}
	#offer_15 .button1.arrow_right::after{
		width: 35px;
	}
}

/*---------------------------   OFFER 16 ---------------------------*/
#offer_16{
	padding: 0;
	margin: 0;
	background: url(../images/slide16.webp) no-repeat center top;
	height: 550px;
  	padding: 0;
}
@media  (min-width: 481px)  {
	#offer_16{
		background-size: 100% 100%;
	}
}
@media (max-width: 480px)  {
	#offer_16{
		background-size: 100%;
	}
}

/*---------------------------   OFFER 17 ---------------------------*/
#offer_17{
	padding: 0px 0px 0px 0px;
	background: url(../images/slide17.webp) no-repeat center top;
	height: 550px;
}
@media  (min-width: 481px)  {
	#offer_17{
		background-size: 100% 100%;
	}
	#offer_17 > .text{
		width: 50%;
		margin: 0 0 0px;
		padding-left: 40px;
		padding-top: 150px;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		/*font-weight: 200;*/
		font-style: normal;
		font-size: 18px;
		line-height: 26px;
	}
	#offer_17 > .text2{
		margin: 0 0 1px;
		padding-left: 40px;
		padding-top: 15px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 18px;
		line-height: 20px;
		color: #000000;
	}
	#offer_17 .button1{
		width: 245px;
		height: 58px;
	   	padding: 0 0 0 35px;
	   	margin-left: 40px;
	}
	#offer_17 .button1.arrow_right::after{
		width: 39px;
	}
}
@media (max-width: 480px)  {
	#offer_17{
		background-size: 100%;
	}
	#offer_17 > .text{
		width: 52%;
		margin: 0 0 0px;
		padding-left: 10px;
		padding-top: 22%;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
		line-height: 12px;
	}
	#offer_17 > .text2{
		margin: 0 0 1px;
		padding-top: 30%;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 14px;
		line-height: 12px;
		color: #000000;
		text-align: center;
	}
	#offer_17 .button1{
		width: 195px;
		height: 58px;
		padding: 0 0 0 20px;
		margin-top: 0px;
	}
	#offer_17 .button1.arrow_right::after{
		width: 35px;
	}
}


/*---------------------------   OFFER 18 ---------------------------*/
#offer_18{
	padding: 0px 0px 0px 0px;
	background: url(../images/slide18.webp) no-repeat center top;
	height: 550px;
}
@media  (min-width: 481px)  {
	#offer_18{
		background-size: 100% 100%;
	}
	#offer_18 > .text{
		width: 55%;
		margin: 0 0 0px;
		padding-left: 40px;
		padding-top: 130px;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		/*font-weight: 200;*/
		font-style: normal;
		font-size: 18px;
		line-height: 26px;
	}
	#offer_18 > .text2{
		margin: 0 0 1px;
		padding-left: 40px;
		padding-top: 15px;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 18px;
		line-height: 20px;
		color: #000000;
	}
	#offer_18 .button1{
		width: 245px;
		height: 58px;
	   	padding: 0 0 0 35px;
	   	margin-left: 40px;
	}
	#offer_18 .button1.arrow_right::after{
		width: 39px;
	}
}
@media (max-width: 480px)  {
	#offer_18{
		background-size: 100%;
	}
	#offer_18 > .text{
		width: 56%;
		margin: 0 0 0px;
		padding-left: 10px;
		padding-top: 22%;
		color: black;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
		line-height: 12px;
	}
	#offer_18 > .text2{
		margin: 0 0 1px;
		padding-top: 30%;
		/*font-family: 'neuzeit-grotesk', sans-serif;*/
		font-weight: 300;
		font-style: normal;
		font-size: 14px;
		line-height: 12px;
		color: #000000;
		text-align: center;
	}
	#offer_18 .button1{
		width: 195px;
		height: 58px;
		padding: 0 0 0 20px;
		margin-top: 0px;
	}
	#offer_18 .button1.arrow_right::after{
		width: 35px;
	}
}

@media (max-width: 480px)  {
      .button_demo .button1.arrow_right::after{
              content: none;
      }
      #offer_12 .button1.arrow_right,
      #offer_13 .button1.arrow_right,
      #offer_15 .button1.arrow_right,
      #offer_17 .button1.arrow_right,
      #offer_18 .button1.arrow_right{
              display: block;
              margin-left: auto;
              margin-right: auto;
              padding-left: 0;
              text-align: center;
      }
}

/* Strzalka w .button1.arrow_right::after jest pozycjonowana absolutnie
   (index.php: right: 30px, width: 39px), wiec jest wyjeta z ukladu i tekst
   przyciska wchodzi pod nia przy dwuwierszowych etykietach ("Demo bez obrazkow").
   Rezerwujemy pas na strzalke prawym wypelnieniem. box-sizing: border-box
   sprawia, ze width: 245px z blokow #offer_* obejmuje juz wypelnienie, wiec
   przycisk sie nie poszerza i rzad flex w .button_demo nie rozjezdza sie.

   UWAGA na selektor: reguly #offer_NN .button1 ustawiaja padding skrotem
   "0 0 0 35px", czyli padding-right = 0. Maja w selektorze identyfikator,
   ktory bije dowolna liczbe klas - dlatego tutaj tez musza byc identyfikatory,
   inaczej ta regula nie zadziala. */
@media (min-width: 481px)  {
      /* .button_demo (main.php) jest kontenerem flex, a elementy flex kurcza sie
         ponizej zadanej szerokosci, gdy brakuje miejsca - dlatego samo width nie
         wystarcza. Miejsce zabiera margin-left: 40px z regul #offer_NN .button1,
         mnozony przez trzy przyciski w rzedzie. Przenosimy ten odstep na kontener.
         #offer_15 pomijamy - tam rzad jest wysrodkowany i nie ma marginesu. */
      #offer_12 .button_demo,
      #offer_13 .button_demo,
      #offer_17 .button_demo,
      #offer_18 .button_demo{
              padding-left: 40px;
      }
      #offer_12 .button1.arrow_right,
      #offer_13 .button1.arrow_right,
      #offer_15 .button1.arrow_right,
      #offer_17 .button1.arrow_right,
      #offer_18 .button1.arrow_right{
              box-sizing: border-box;
              width: 284px;
              margin-left: 0;
              padding-right: 76px;
              /* Zabezpieczenie niezalezne od rachunku szerokosci: tekst lamie sie
                 tylko tam, gdzie autor wstawil <br>, a nie automatycznie. */
              white-space: nowrap;
      }
}

/* Na telefonie tlo jest skalowane do szerokosci (background-size: 100%, obrazki 1080x820,
   czyli ok. 300px wysokosci przy 400px szerokosci), a pudelko mialo sztywne 550px
   z desktopu - pod kazdym slajdem zostawal pusty pas i slajd nie miescil sie na ekranie
   (21-09-2026). Slajdy z trescia (tekst, przyciski) maja wysokosc wylacznie z tresci -
   odstepy procentowe od gory sa liczone od szerokosci i ustawiaja tekst na grafice,
   a przyciski laduja pod nia na bialym tle. UWAGA: aspect-ratio tu nie wystarczy - dla
   zwyklego bloku min-height: auto to 0, wiec pudelko trzymalo proporcje obrazka, a tresc
   ponizej wychodzila poza nie i overflow: hidden ja ucinal (tak bylo w pierwszej wersji).
   Proporcje obrazka dostaja tylko slajdy bez tresci (11, 16), ktore inaczej mialyby 0px.
   Margines 90px pod slajdem na desktopie zeruje index.php, tu to samo dla telefonu.
   Do tego smoothHeight: true w inicjalizacji galerii (index.php), zeby ramka galerii
   dopasowywala sie do biezacego slajdu, a nie do najwyzszego. Desktop bez zmian. */
@media (max-width: 480px)  {
      #offer_12, #offer_13, #offer_14, #offer_15, #offer_17, #offer_18 {
              height: auto;
      }
      #offer_11 {
              height: auto;
              aspect-ratio: 1080 / 820;
      }
      #offer_16 {
              height: auto;
              aspect-ratio: 670 / 554;
      }
      .offer_box {
              margin-bottom: 0;
      }
      /* Kropki numerow slajdow: na telefonie w ciemnym motywie zlewaly sie z tlem
         (21-09-2026). Obwodka w kolorze tekstu motywu (var(--color): jasna w ciemnym,
         ciemna w jasnym) jest widoczna niezaleznie od wypelnienia z flexslider.css. */
      .flex-control-paging li a {
              box-sizing: border-box;
              border: 1px solid var(--color);
      }
      /* Aktywna kropka: wypelnienie z var(--color) na telefonie nie odroznialo jej od
         pozostalych, wiec roznica jest geometryczna - gruba obwodka w kolorze tekstu
         (przy 11px niemal wypelnia kropke) i powiekszenie. Nie zalezy od tego, jak
         przegladarka telefonu traktuje kolory tla. */
      .flex-control-paging li a.flex-active {
              border-width: 4px;
              transform: scale(1.3);
      }
      /* li sa inline-block wyrownane do linii bazowej - powiekszona kropka wypadala wyzej;
         wyrownanie do srodka trzyma wszystkie na jednej wysokosci */
      .flex-control-nav li,
      .flex-control-paging li a {
              vertical-align: middle;
      }
      /* Trzy przyciski demo w jednym rzedzie (.button_demo jest flex row z main.php):
         przy szerokosci telefonu sztywne 195px x 3 nie miesci sie, przyciski kurcza sie
         i etykiety lamia sie w trzy linie zamiast dwoch z <br> ("Demo / bez / obrazkow").
         Szerokosc z tresci, mniejsza czcionka, lamanie tylko tam, gdzie autor dal <br>,
         wysokosc z dwoch linii. Selektory z id jak w regulach #offer_NN .button1 wyzej,
         inaczej ta regula by przegrala (21-09-2026). */
      #offer_12 .button1.arrow_right,
      #offer_17 .button1.arrow_right,
      #offer_18 .button1.arrow_right{
              width: auto;
              min-width: 0;
              height: auto;
              flex: 0 1 auto;
              padding: 6px 8px;
              margin: 0;
              font-size: 12px;
              line-height: 14px;
              white-space: nowrap;
      }
      #offer_12 .button_demo,
      #offer_17 .button_demo,
      #offer_18 .button_demo{
              justify-content: center;
              gap: 8px;
      }
}

/*---------------------------------------------------*/