html {
		margin:0;
		padding:0;
		height:100%;
		width: 100%;
	}
   
   
	body 
	{
		background-image: url('obrazki/balon.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: top center;
		background-color: #0b102d;
		margin: 0;
		padding: 0;
		display: relative;
		width: 100%;
		height: 100%;
		position: relative;
	}

	
	*a
	{
		cursor: pointer;
	}
	
	#container 
	{
		margin:0;
		padding:0;
		height:100%;
		min-width: 30%;
		max-width: 100%;
	}
	
	#ekran 
	{
		height: 100%;
	}
		
		
	/* HEADER */
			
			
	header, main {
		width: 100%;
		margin: 0;		
	}
	
	header {
		
		height: auto;
		position: relative;
		z-index: 3;
		animation: header 3.5s;
	}
	
	@keyframes header
	{
	  0%     {background-color: #0b102d;}
	  50%    {background-color: #0b102d;}
      100%	 {background: none;}
	}
	
	nav
	{
		max-width: 900px;
		height: 100%;
		position: relative;
		margin: 0 auto;
	}
	
	
	header nav ul
	{
		margin: 0 auto;
		padding: 0 auto;
		display: inline-block;
		width: auto;
		height: 100%;
		position: relative;
	}
		
		
	header nav ul li
	{
		list-style: none;
		position: relative;
		left: -40px;
	}

	
	header > nav > ul > li  /* Tylko te li, które są pierwszymi dziećmi header > nav > ul. Głębiej już nie */
	{
		 float: left; 
		 margin: 0 1.25em;
		 width: auto;
		 animation: naglowek 4s;
		}
		
	@keyframes naglowek
    {
      0%   {opacity: 0;}
	  50%   {opacity: 0;}
      100%	 {opacity: 1;}
    }
	
	header > nav > ul > li > a
	{
		padding: 20px;
		color: white;
		display: inline-block;
		background: linear-gradient(to bottom, rgba(83,102,208,1) 0%, rgba(11,16,45,1) 100%);
		width: 100%;
		text-align: center;
		transition: 1s;
	}
	
	/* Początek - kasuje widoczność rozwijanego podmenu i pokazuje go dopiero po kliknieciu na menu */
	
	header nav ul li ul        
	{
		display: none; 
		position: absolute;  /* Sprawia, że szerokość podmenu nie wpływa na menu, czyli dół nie ma wpływu na górę */
	}
	
	header nav ul li:hover ul
	{
		display: block;
	} 
	/* Koniec - kasuje widoczność rozwijanego podmenu i pokazuje go dopiero po kliknieciu na menu */
	
	header > nav > ul > li > a:hover
	{
		background: linear-gradient(to bottom, rgba(92,111,215,1) 0%, rgba(14,21,58,1) 100%);
	}
	
	header > nav > ul > li:first-child > a
	{
		border-top-left-radius: 10px;
	}
	
	header > nav > ul > li:last-child > a
	{
		border-top-right-radius: 10px;
	}
	
	header nav ul li ul li a
	{
		color: white;
		display: block;
		padding: 20px 40px;
		background: linear-gradient(to bottom, rgba(83,102,208,1) 0%, rgba(11,16,45,1) 100%);
		width: 100%;
		text-align: center;
	}
	
	header > nav > ul > li > ul > li a:hover
	{
		background: linear-gradient(to bottom, rgba(92,111,215,1) 0%, rgba(14,21,58,1) 100%);
	}

	
	
	
	
	
	/* 	==============================================
		Ekran - treść
		==============================================
	*/
	
	section#tresc-ekranu
	{	
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		animation: pojawianie 4s;
	}
	
	@keyframes pojawianie
    {
      0%   	 {background-color: #0b102d; opacity: 1;}
	  50%    {background-color: #0b102d; opacity: 1;}
      100%	 {opacity: 0;}
    }
	
	#ekran #napis
	{
		width: 100%;
		height: auto;
		display: block;
		position: relative;
		margin: 3% 0;
		text-align: center;
		z-index: 1;
	}
	
	#napis h2
	{
		color: white;
		width: 50%;
		font-size: 30px;
		margin: 0 auto;
		padding: 20px;
		text-transform: uppercase;
		display: block;
		position: relative;
		animation: napis 1.25s;
		}
		
	@keyframes napis
    {
      0%   {opacity: 0;}
	  50%   {opacity: 0;}
      100%	 {opacity: 1;}
    }
	
	
	
	/* I sposób: Linia na środku otwierająca się ze środka na zewnątrz w obie strony - bez position: absolute
	
	#napis h2:before
	{
		content: "";
		display: block;
		width: 50%;
		height: 2px;
		margin: 0 auto 20px auto;
		background-color: white;
		text-align: center;
		animation: linia 2s;
	}  */
	
	
	/* II sposób: Linia na środku odtwierająca się z lewej do prawej - position: absolute; */
	
	
	#napis h2:before
	{
		content: "";
		display: block;
		position: absolute;
		top: 5px;
		left: 30%;
		width: 40%;
		height: 2px;
		background-color: white;
		text-align: center;
		animation: linia1 2s;
	} 
	
	@keyframes linia1
    {
      0%  	 {width: 0;}
	  50%  	 {width: 0;}
      100%	 {width: 40%;}
    }
	
	#napis h2:after
	{
		content: "";
		display: block;
		position: absolute;
		bottom: 5px;
		left: 30%;
		width: 40%;
		height: 2px;
		background-color: white;
		text-align: center;
		animation: linia2 2s;
	} 
	
	@keyframes linia2
    {
      0%  	 {width: 0; left: 70%;}
	  50%  	 {width: 0; left: 70%;}
      100%	 {width: 40%; left: 30%;}
    }
	
	
	#napis p
	{
		color: white;
		width: 50%;
		margin: 0 auto;
		padding: 20px;
		text-transform: uppercase;	
		animation: akapit 4s;
		}
		
	@keyframes akapit
    {
      0%   {opacity: 0;}
	  50%   {opacity: 0;}
      100%	 {opacity: 1;}
    }
		
	#napis ul
	{
		list-style: none;
		width: 50%;
		margin: 0 auto;
		padding: 20px;
		animation: przycisk 4s;
		}
		
	@keyframes przycisk
    {
      0%   {opacity: 0;}
	  50%   {opacity: 0;}
      100%	 {opacity: 1;}
    }
	
	#napis ul li
	{
		background-color: red;
		margin: 0;
		width: 30%;
		display: inline-block;
	}
	
	#napis ul li:hover
	{
		background-color: #f82626;
		cursor: pointer;
	}
		
	#napis ul li a
	{
		color: white;
		padding: 20px;
		display: block;
	}
	 /* #napis ul li - display: inline-block; - bo lista jest elementem liniowym i jeśli chcesz stworzyć z niej przycisk to
		musisz wyświetlić ją jako inline-block.
		#napis ul li a - display: block; - aby można było kliknąć w link na całej szerokości i długości bliku (przycisku) */
	
	
	#ekran #odsylacz
	{
		width: 20%;
		height: auto;
		display: block;
		position: relative;
		margin: 1% auto;
		text-align: center;
		z-index: 1;
		animation: odsylacz 4s;
		}
		
	@keyframes odsylacz
    {
      0%   {opacity: 0;}
	  50%   {opacity: 0;}
      100%	 {opacity: 1;}
    }
	
	#odsylacz a 
	{
		color: white;
		font-size: 20px;
		text-decoration: none;
		display: block;
		transition: 2s;
	}
	
	#odsylacz a:after
	{
		content: url("strzalka.png");
		display: block;  /* bloki układają się pod sobą, jeśli strzałka ma block i napis przed nią ma block, to ułożą się 
							jedno pod drugim */
	}
	
	
	
	/* CZĘŚĆ GŁÓWNA STRONY */
	
	main {
		position: relative;
	}

	/* 	==============================================
		Część 1 - niebieskie tło
		==============================================
	*/
	
	#jeden 
	{
		height: auto;
		width: 100%;
		background-color: #24b3f6;
		
	}
	
	/* 	==============================================
		Część 2 - 3 ramki ze zdjęciami i tekstem
		==============================================
	*/

	.ramka 
	{
		height: auto;
		width: 100%;
		background-color: #5e5d59;     /* rgba(94, 93, 89, 1) */
		display: flex;
		align-items: center;
	}

	.tresc1 
	{
			
		padding: 40px 20px;
		text-align: center;
		color: #f0f0f0;
	}
	
	hr 
	{
		width: 50%;
	}
	
	.uppercase
	{
		text-transform: uppercase;
		line-height: 1.5em;
		font-size: 25px;
	}
	
	p 
	{
		line-height: 1.5em;
		font-size: 18px;
	}
	
	.obrazek
	{
		width: 600px;
		height: 100%;
	}
	
	.tresc
	{
		
		border: 1px solid white;
		min-width: 200px;
		max-width: 800px;
		margin: 0 5%;
		text-align: center;
		color: #f0f0f0;
		padding: 10px 20px;
		
	}
	
	.ramka > .obrazek > img
	{
		width: 100%;
		height: auto;		
	}
	

/* Jak zrobiłam ramki:
	1.	Ramka ma własność display: flex - dzięki temu jest elastyczna i mieszczą się w niej dzieci, których szerokość musi być
		równa lub mniejsza od szerokości ramki. Jeśli szerokość dzieci jest większa niż szerokość ramki (rodzica) to dzieci
		się procentowo skalują (zmniejszają).
	2.	Dziecko1 - div obrazek ma szerokość taką jak szrokość img obrazka (600px;) i wysokość ustawioną na 100%, żeby się sama skalowała. 
		Dzięki wysokości 100% można ustawić parametr ramki: align-items: center;, co sprawia,
		że div obrazek jest wycentrowany (w pionie) w ramce.
	3. 	Zdjęce img w dziecku1 (div obrazek) ma szerokość 100%, przez co dopasowuje się do szerokości diva obrazek (dziecko1 diva ramka)
		Jego szerokość ustawia się automatycznie.
	4.	Dziecko2 (div tresc) ma ustawioną szerokość min i max, dzięki czemu zmniejsza się ramka i wydłuża tekst w niej kiedy zmiejsza się
		okno przeglądarki.
	5.	w mobile.css dla diva ramka ustawiony jest dodatkowo parametr flex-direction: column; co sprawia, że po osiągnięciu odpowiedniej
		wielkości px, divy obrazek i tresc ustawiają sie jeden pod drugim. Ponadto dla .obrazek zmieniona jest szerokość z 600px na 100%
		i wysokość z 100% na auto.
*/



	/* 	==============================================
		Część 3 - granatowe tło
		==============================================
	*/
	
	#piec
	{
		height: auto;
		width: 100%;
		background-color: #505393;
		clear: both;
	}
	
	#piec .tresc2 table
	{
		width: 60%;
		height: 800px;
		margin: 0 auto;     /* Wycentrowanie tabeli */
		border-spacing: 0;  /* Usuwa przestrzenie między komórkami tabeli */
							/* Border collapse - colapse - obramowanie komórek w środku tabeli zlewa się w jedną linię */
	}
	
	.tresc2 
	{
			
		padding: 40px 0 10px 0;
		text-align: center;
		color: #f0f0f0;
		width: 100%;
	}
	
	#piec .tresc2 .padding-bottom
	{
		padding-bottom: 50px;
	}
	
	/* TABELA */
	
	
	#piec .tresc2 table tr td.first-child
	{
		
		width: 10%;		
	}
	
	#piec .tresc2 table td.nth-child(2)
	{
		width: 40%;
	}
	
	#piec .tresc2 table td
	{	
		vertical-align: top;
	}
	
	#piec .tresc2 table td p
	{
		
		padding: 0.5em 2em 0 0;
	}
	
	#piec .tresc2 table tr td img
	{
		width: 100%;
		height: auto;		
	}
	
	/* LISTA NIENUMEROWANA */
	
	#lista-ul
	{
		width: 60%;
		margin: 100px auto;
	}
	
	#lista-ul ul 
	{
		list-style: none;
		column-count: 2;
		column-gap: 0;
		padding: 20px;
		display: block;
		height: auto;
	}
	
	#lista-ul ul li
	{
		min-height: 300px;
		max-height: auto;
		display: table;
	}
	
	#lista-ul ul li:nth-child(1)
	{
		background-color: rgba(63, 65, 116, 0.1);
	}
	
	#lista-ul ul li:nth-child(2)
	{
		background-color: rgba(63, 65, 116, 0.4);
	}
	
	#lista-ul ul li:nth-child(3)
	{
		background-color: rgba(63, 65, 116, 0.8);
	}
	
	#lista-ul ul li:nth-child(4)
	{
		background-color: rgba(63, 65, 116, 0.2);
	}
	
	#lista-ul ul li:nth-child(5)
	{
		background-color: rgba(63, 65, 116, 0.6);
	}
	
	#lista-ul ul li:nth-child(6)
	{
		background-color: rgba(63, 65, 116, 1);
	}
	
	
	#piec .tresc2 ul li p
	{
		padding: 0 20px;
		text-align: left;	 
		display: table-cell;
		vertical-align: middle;       /* Żeby wyrównać paragraf w pionie, muszę ustawić wartość
										display: table dla elementu listy (li) - jak dla tabeli,
										oraz display: table-cell dla akapitu wewnątrz tego elementu
										listy (jak dla komórki tabeli). Dla akapitu daję wyrównanie  
										w pionie: vertical-align: middle; - bo ono działa tylko na
										elementy liniowe */
	}
	
	#piec .tresc2 ul li.icon1:before
	{
		content: url('obrazki/icon1.gif');  
		display: table-cell;
	}
	
		#piec .tresc2 ul li.icon2:before
	{
		content: url('obrazki/icon2.gif');     
		display: table-cell;
	}
	
		#piec .tresc2 ul li.icon3:before
	{
		content: url('obrazki/icon3.gif');     
		display: table-cell;
	}
	
		#piec .tresc2 ul li.icon4:before
	{
		content: url('obrazki/icon4.gif');     
		display: table-cell;
	}
	
		#piec .tresc2 ul li.icon5:before
	{
		content: url('obrazki/icon5.gif');     
		display: table-cell;
	}
	
		#piec .tresc2 ul li.icon6:before
	{
		content: url('obrazki/icon6.gif');     
		display: table-cell;
	}
	
	
	/* 	==============================================
		Część 4 - przezroczyste tło
		==============================================
	*/
	
	#szesc 
	{
		width: 100%;
		min-height: 300px;
		max-height: auto;
	}
	
	#srodek-szesc
	{
		display: flex;
		margin: auto;
		width: 100%;
		min-height: 300px;
		max-height: auto;
	}
	
	.header-dolny
	{
		margin-left: 10%;
		width: 40%;
		height: auto;
		padding: 5% 10px;
		text-align: center;
	}
	
	.buttony
	{
		width: 40%;
		height: auto;
	}
	
	.buttony ul
	{
		list-style: none;
		padding: 20px;
		margin: 10% 0;
	}
	
	.buttony ul li
	{
		padding: 20px;
		margin: 20px 5%;
		width: auto;
		text-align: center;
	}
	
	.buttony ul .activate
	{
		color: white;
		background-color: red;
		padding: 20px 23%;
		transition: 0.5s;
	}
	
	.buttony ul .activate:hover
	{
		background-color: #f82626;
	}
	
	.buttony ul .learn-more
	{
		color: white;
		border: 2px solid red;
		padding: 20px 20%;
		transition: 0.5s;
	}
	
	.buttony ul .learn-more:hover
	{
		background-color: rgba(253,253,253,0.1);  /* #fdfdfd */
	}
	
	
	/* 	==============================================
		STOPKA
		==============================================
	*/
	
	footer
	{
		display: flex;
		width: 100%;
		min-height: 200px;
		max-height: auto;
		background-color: rgba(11, 16, 45, 0.9);  /* #0b102d */
	}
	
	#dolna-czesc-footer
	{
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100px;
		max-height: auto;
		margin-top: 2%;
		padding: 5px 5px;
	}
	
	#dolna-czesc-footer .lista1
	{
		list-style: none;
		width: 260px;
		height: 60px;
		margin: 10px auto;    /* wycentrowanie tabeli + display: flex dla dolna-czesc-footer*/
		padding: 0 20px;
		display: inline-block;
	}
	
	#dolna-czesc-footer .lista1 li
	{
		float: left;
		width: 35px;
		padding: 2px;
		margin: 10px 2%;
		display: inline-block;
		text-align: center;
	}
	
	.social img
	{
		position: relative;
	}
	
	.social img:hover
	{
		position: relative;
		bottom: 3px;
	}
	
	#dolna-czesc-footer .lista2
	{
		list-style: none;
		min-width: 600px;
		height: auto;
		margin: 10px auto;    /* wycentrowanie tabeli + display: flex dla dolna-czesc-footer*/
		padding: 0 20px;
		display: inline-block;
	}
	
	#dolna-czesc-footer .lista2 li:not(.odstep)
	{
		float: left;
		width: auto;
		padding: 2px;
		margin: 10px 2%;
		display: inline-block;
		text-align: center;
	}

	#dolna-czesc-footer .lista2 li a 
	{
		color: white;
		text-decoration: none;
	}
	
	#dolna-czesc-footer .lista2 li a:hover
	{
		color: white;
		text-decoration: underline;
	}
	
	
	.odstep
	{
		width: 1px;
		height: 20px;
		padding: 0;
		margin: 12px 0;
		display: inline-block;
		float: left;
		background-color: white;
	}