@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/*IMPORT FONTU*/
/*SELEKTORY GLOBALNE*/
*{
	transition: 1s;
	box-sizing: border-box;
	
}
html{
	font-family: "Outfit", sans-serif;
	font-size: 10px;
	scroll-behavior: smooth;
}
body{
	background: url("../img/paralax tlo.png");
	background-position: top;
	background-size: cover;
	font-size: 1.6rem;
	
}
h1{
	font-size: 4rem;
}
h2{}
h3{}

img{
	max-width: 100%;
}

a{
	color: inherit;
	text-decoration: none;
}

p{
	line-height: 160%;
}
b{
	font-weight: 700;
}


/*NAWIGACJA MOBILE*/
.burger{
	display: none;
	position: fixed;
	top: 2rem;
	right: 2rem;
	font-size: 5rem;
	font-weight: 700;
/*	background-color: white;*/
	color:  #F2FF00;
	padding: 0 .7rem .7rem;
	border-radius: 1rem;
	cursor: pointer;
	z-index: 1;
	
}
.nakladka{
	background-color: black;
	opacity: .9;
	color: #F2FF00;
	z-index: 2;
	position: fixed;
	font-weight: 700;
	top: 0;
	bottom: 0;
	right: 0;
	width: 0%;/*parametr do zmiany skryptem*/
	overflow: hidden;/*żeby ukryć zawartość nakładki przy szer. 0%*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.nakladka ol{
/*	background-color: greenyellow;*/
	text-align: center;
	width: 100%;
	
}
.nakladka ol li{
	margin-bottom: 1rem;
}
.nakladka ol li a{
/*	background-color: blue;*/
	display: block;
	padding: 2rem;
}
.nakladka ol li a:hover{
	background-color: #222;
}
.zamknijX{
	position: absolute;
	top:2rem;
	right: 2rem;
	font-size: 5rem;
	background-color: #333;
	padding:  0 1.25rem .6rem;
	border-radius: 1rem;
}

/*NAWIGACJA DESKTOP*/

nav{
/*	background-color: #222;*/
	padding: 4rem;
	display: flex;
	justify-content: center;
	position: fixed; 
	width: 100%;
	color: white;
	z-index: 3;
	background-color: rgba(255, 255, 255, 0.01);
  	-webkit-backdrop-filter: blur(5px);
  	backdrop-filter: blur(5px);
}
nav ol{
/*	background-color: green;*/
	max-width: 1400px;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	
}
nav ol li{}
nav ol li a{
	color: #F2FF00;
	font-weight: 700;
	font-size: 2rem;
}
nav ol li a{}
nav ol li a:hover{
	color: white;
	font-size: 2.2rem;
	
}


/*SEKCJE WSZYSTKIE*/
section{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	
}
.zawartosc{
/*	background-color: red;*/
	max-width: 1400px;
/*	min-height: 50vh;*/
	width: 100%;
	display: flex;
	gap: 2rem;
}
/*SEKCJE POSZCZEGÓLNE*/



#pierwsza{
	display: flex;
	min-height: 117vh;
	background: url( "../img/into the blue.png") no-repeat center fixed;
	background-size: 70vw;
	justify-content: flex-end;
	position: relative;
	padding: 0;	
}

#pierwsza .fala{
	position: absolute;
	z-index: 1;
	width: 100%;
}
#pierwsza .fala img{
	width: 100%;
	transform: translateY(30px);
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  	mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}


#pierwsza .zawartosc{
	position: absolute;
	bottom: 9vw;
	display: flex;
/*	background-color: blue;
/*	opacity: .8;*/
	align-items: flex-start;
	gap: 2rem;
	justify-content: space-evenly;
/*	height: 83vh;*/
	z-index: 2;
}

#pierwsza .zawartosc .mewy{
/*	background-color: red;*/
	max-width: 20vw;
	transform: translate(-100px, -90px);
}

#pierwsza .zawartosc .statek{ 
/*	background-color: blue;*/
	z-index: 2;	
	animation: bujanie 5s infinite ease-in-out;
}
#pierwsza .zawartosc .statek img{
	max-width: 40vw;
/*	background-color: pink;*/
}
@keyframes bujanie{
	 0%   { transform: rotate(3deg) translateY(0); }
      50%  { transform: rotate(-3deg)translateY(-10px); }
      100% { transform: rotate(3deg) translateY(0); }
		
	
}




#druga{
	display: flex;
}
#druga .zawartosc{
	display: flex;
	align-content: center;
	justify-content: center;
	padding: 2rem;
}
#druga .zawartosc h3{
	font-size: 5rem;
	font-weight: 700;
	padding: 0.6rem 0;
	text-align: right;
	color: rgba( 255, 255, 255, 0.40 );
/*	text-shadow: 2px 2px rgba( 31, 38, 135, 0.27 );*/
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	
}
#druga .zawartosc article .blur {
	background: rgba( 255, 255, 255, 0.40 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.27 );
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	border-radius: 10px;
	border: 0px solid rgba( 255, 255, 255, 0.1 );
}
#druga .zawartosc article{
	padding: 1rem 0 1rem 0;
	line-height: 140%;
	color: white;
	font-weight: 300;
	padding: 2rem;
	max-width: 80vw!important;
}
#druga .zawartosc article h2{
	color: white;
	font-weight: 700;
	font-size: 4rem;
	padding: 2rem;
	line-height: 100%;
}

#druga .zawartosc .grafika-zbiorcza-0-200m-desktop{
	align-content: flex-end;
}
#druga .zawartosc .grafika-zbiorcza-0-200m-mobile{
	display: none;
}


#trzecia{
	display: flex;
}
#trzecia .zawartosc{
	display: flex;
	flex-direction: row-reverse;
	align-content: center;
	justify-content: center;
	
	padding: 2rem;
}
#trzecia .zawartosc h3{
	font-size: 5rem;
	font-weight: 700;
	padding: 0.6rem 0;
	text-align: right;
	color: rgba( 255, 255, 255, 0.40 );
/*	text-shadow: 2px 2px rgba( 31, 38, 135, 0.27 );*/
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
}
#trzecia .zawartosc article .blur{
	background: rgba( 255, 255, 255, 0.40 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.27 );
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	border-radius: 10px;
	border: 0px solid rgba( 255, 255, 255, 0.1 );
}
#trzecia .zawartosc article {
	padding: 1rem 0 1rem 0;
	line-height: 140%;
	color: white;
	font-weight: 300;
	padding: 2rem;
	max-width: 80vw!important;
}
#trzecia .zawartosc article h2{
	color: #C7E5F9;
	font-weight: 700;
	font-size: 4rem;
	padding: 2rem;
	line-height: 100%;
}
#trzecia .zawartosc article p{}

#trzecia .zawartosc .grafika-zbiorcza-200-1000m-desktop{
	align-content: flex-end;
}
#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile{
	display: none;
}


#czwarta{
	display: flex;

}
#czwarta .zawartosc{
	display: flex;
	align-content: center;
	justify-content: center;
	padding: 2rem;
}
#czwarta .zawartosc h3{
	font-size: 5rem;
	font-weight: 700;
	padding: 0.6rem 0;
	text-align: right;
	color: rgba( 255, 149, 244, 0.50);
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	
	-webkit-animation: glow 1s ease-in-out infinite alternate;
  	-moz-animation: glow 1s ease-in-out infinite alternate;
 	 animation: glow 1s ease-in-out infinite alternate;
	animation-name: glow-1;
}

@-webkit-keyframes glow-1 {
  from {
    text-shadow: 0 0 1px #fff, 
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 3px #ff3beb, 0 0 4px #ff3beb, 0 0 5px #ff3beb, 0 0 6px#ff3beb, 0 0 7px #ff3beb, 0 0 8px #ff3beb;
  }
}
#czwarta .zawartosc article .blur{
	background: rgba( 255, 149, 244, 0.50);
	box-shadow: 0 8px 32px 0 rgba( 255, 59, 235, 0.6 );
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	border-radius: 10px;
	border: 0px solid rgba( 255, 255, 255, 0.1 );
}
#czwarta .zawartosc article {
	padding: 1rem 0 1rem 0;
	line-height: 140%;
	color: white;
	font-weight: 300;
	padding: 2rem;
	max-width: 80vw!important;
}
#czwarta .zawartosc article h2{
	color: #FF95F4;
	font-weight: 700;
	font-size: 4rem;
	padding: 2rem;
	line-height: 100%;
}

#czwarta .zawartosc article p{}

#czwarta .zawartosc .grafika-zbiorcza-1-4km-desktop{
	align-content: flex-end;
}
#czwarta .zawartosc .grafika-zbiorcza-1-4km-mobile{
	display: none;
}


#piata{
	display: flex;
}
#piata .zawartosc{
	display: flex;
	flex-direction: row-reverse;
	align-content: center;
	justify-content: center;
	padding: 2rem;
}
#piata .zawartosc h3{
	font-size: 5rem;
	font-weight: 700;
	padding: 0.6rem 0;
	text-align: right;
	color: rgba(217, 0, 255, 0.50);
/*	text-shadow: 2px 2px rgba( 31, 38, 135, 0.27 );*/
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	
	-webkit-animation: glow 1s ease-in-out infinite alternate;
  	-moz-animation: glow 1s ease-in-out infinite alternate;
 	 animation: glow 1s ease-in-out infinite alternate;
	animation-name: glow-2;
}
@-webkit-keyframes glow-2 {
  from {
    text-shadow: 0 0 1px #fff, 
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 3px #d900ff, 0 0 4px #d900ff, 0 0 5px #d900ff, 0 0 6px#d900ff, 0 0 7px #d900ff, 0 0 8px #d900ff;
  }
}
#piata .zawartosc article .blur{
	background: rgba( 217, 0, 255, 0.50);
	box-shadow: 0 8px 32px 0 rgba( 217, 0, 255, 0.9 );
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	border-radius: 10px;
	border: 0px solid rgba( 255, 255, 255, 0.1 );
}
#piata .zawartosc article{
	padding: 1rem 0 1rem 0;
	line-height: 140%;
	color: white;
	font-weight: 300;
	padding: 2rem;
	max-width: 80vw!important;
}
#piata .zawartosc article h2{
	color: #D900FF;
	font-weight: 700;
	font-size: 4rem;
	padding: 2rem;
	line-height: 100%;
}
#piata .zawartosc article p{}

#piata .zawartosc .grafika-zbiorcza-4-6km-desktop{
	align-content: flex-end;
}
#piata .zawartosc .grafika-zbiorcza-4-6km-mobile{
	display: none;
}


#szosta{
	display: flex;
	background-color: black;
}
#szosta .zawartosc{
	display: flex;
	align-content: center;
	justify-content: center;
	padding: 2rem;
}
#szosta .zawartosc h3{
	font-size: 5rem;
	font-weight: 700;
	padding: 0.6rem 0;
	text-align: right;
	color: rgba(4, 0, 255, 0.50);
/*	text-shadow: 2px 2px rgba( 31, 38, 135, 0.27 );*/
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	
	-webkit-animation: glow 2s ease-in-out infinite alternate;
  	-moz-animation: glow 2s ease-in-out infinite alternate;
 	 animation: glow 2s ease-in-out infinite alternate;
	animation-name: glow-3;
}

@-webkit-keyframes glow-3 {
  from {
    text-shadow: 0 0 1px #fff, 
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 3px #0400ff, 0 0 4px #0400ff, 0 0 5px #0400ff, 0 0 6px#0400ff, 0 0 7px #0400ff, 0 0 8px #0400ff;
  }
}
#szosta .zawartosc article .blur{
	background: rgba( 4, 0, 255, 0.50);
	box-shadow: 0 8px 32px 0 rgba( 4, 0, 255, 0.9 );
	backdrop-filter: blur( 6.5px );
	-webkit-backdrop-filter: blur( 6.5px );
	border-radius: 10px;
	border: 0px solid rgba( 255, 255, 255, 0.1 );
}
#szosta .zawartosc article{
	padding: 1rem 0 1rem 0;
	line-height: 140%;
	color: white;
	font-weight: 300;
	padding: 2rem;
	max-width: 80vw!important;
}
#szosta .zawartosc article h2{
	color: #0400FF;
	font-weight: 700;
	font-size: 4rem;
	padding: 2rem;
	line-height: 100%;
}
#szosta .zawartosc article p{
	color: white;
	text-align: left;
}

#szosta .zawartosc .grafika-zbiorcza-6-11km-desktop img{
	opacity: 0;
}
#szosta .zawartosc .grafika-zbiorcza-6-11km-desktop img:hover{
	opacity: 1;
	transition-duration: 2s;
}
#szosta .zawartosc .grafika-zbiorcza-6-11km-mobile{
	display: none;
	
}


#stopka{
	background-color: black;
	color:  #F2FF00;
	min-height: 9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1vw;
}
#stopka .zawartosc{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1vh 3vw 1vh 3vw;
	gap: 5vw;
	margin: 2vh;
/*	background-color: blue;*/
}
#stopka .zawartosc .stopka-logo {
/*	background-color: red;*/
	max-width: 20rem;
}
#stopka .zawartosc .stopka-kolumny{
	display: flex;
	justify-content: space-between;
}
#stopka .zawartosc .stopka-kolumna1, .stopka-kolumna2, .stopka-kolumna3{
	text-align: left;
	margin: 0 2vw 0 2vw;
}
#stopka .zawartosc .stopka-kolumna1 h5, .stopka-kolumna2 h5, .stopka-kolumna3 h5{
	font-weight: 800;
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: #F2FF00;
	
}
#stopka .zawartosc .stopka-kolumna1 p, .stopka-kolumna2 a, .stopka-kolumna3 a{
	font-weight: 400;
	line-height: 1.3;
	color: #F2FF00;
	text-decoration: none;
	
}
#stopka .stopka-copyright {
	color: #5B5B5B;
	margin-bottom: 0.5rem;
}


/******************************************************************/
/*RWD*/
@media all and (max-width:1100px){
	#pierwsza{
		min-height: 100vh;
	}
	#druga .zawartosc{
		display: flex;
		flex-wrap: wrap;
		
	}
	#trzecia .zawartosc{
		display: flex;
		flex-wrap: wrap;
	}
	#czwarta .zawartosc{
		display: flex;
		flex-wrap: wrap;
	}
	#piata .zawartosc{
		display: flex;
		flex-wrap: wrap;
	}
	#szosta .zawartosc{
		display: flex;
		flex-wrap: wrap;
	}
}
@media all and (max-width: 600px){
	.burger{
		display: block;
	}
	nav{
		display: none;
	}
	body{
	background-position: bottom;
	background-size: cover;
	}
	
	.zawartosc{
		flex-direction: column;
	}
	#pierwsza{
		min-height: 90rem;
	}

	#pierwsza .fala{
		display: none;
	}
	#pierwsza .statek img{
		transform: scale(3) translateY(-40px);
		
	}

	.grafika-zbiorcza-0-200m-desktop{
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	#druga .zawartosc article h2{
		font-size: 4rem;
		text-align: left;
		padding-left: 0;
	}
	#druga .zawartosc h3{
		font-size: 9.1rem;
		padding: 2.1rem 0 1rem 0;
		text-align: center;
	}
	
	
	.grafika-zbiorcza-200-1000m-desktop{
		display: none;
	}
	#trzecia .zawartosc  article h2{
		font-size: 4rem;
		text-align: left;
		padding-left: 0;
	}
	#trzecia .zawartosc h3{
		font-size: 6.3rem;
		padding: 1.1rem 0 1rem 0;
		text-align: center;
	}
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile{
			flex-wrap: nowrap;
			gap: 2rem;
			overflow: scroll;
			justify-content: flex-start;
			padding: 1rem;
			align-items: center;
		}
	
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile{
		display: flex;
	}
		
		/* width */
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile::-webkit-scrollbar {
		  width: 0px;
		}

		/* Track */
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile::-webkit-scrollbar-track {
		  background: #C7E5F9;
			margin: 30vw;
			border-radius: 1rem;
		}

		/* Handle */
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile::-webkit-scrollbar-thumb {
		  background: white;
			border-radius: 1rem;
		}

		/* Handle on hover */
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile::-webkit-scrollbar-thumb:hover {
		  background: white;
		}
		
		
	#trzecia .zawartosc .grafika-zbiorcza-200-1000m-mobile article{
			flex: 1 0 400px;
	
}
	
	
	.grafika-zbiorcza-1-4km-desktop{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#czwarta .zawartosc  article h2{
		font-size: 4rem;
		text-align: left;
		padding-left: 0;
	}
	#czwarta .zawartosc h3{
		font-size: 11rem;
		padding: 2.6rem 0 1rem 0;
		text-align: center;
	}

	
	
	
	
	.grafika-zbiorcza-4-6km-desktop{
		display: none;
	}
	#piata .zawartosc  article h2{
		font-size: 4rem;
		text-align: left;
		padding-left: 0;
	}
	#piata .zawartosc h3{
		font-size: 11rem;
		padding: 2.6rem 0 1rem 0;
		text-align: center;
	}
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile{
			flex-wrap: nowrap;
			gap: 2rem;
			overflow: scroll;
			justify-content: flex-start;
			padding: 1rem;
			align-items: center;
			
		
		}
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile img{
		filter: brightness(50%);
	}
	
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile{
		display: flex;
	}
		
		/* width */
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile::-webkit-scrollbar {
		  width: 0px;
		}

		/* Track */
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile::-webkit-scrollbar-track {
		  background: #d900ff;
			margin: 30vw;
			border-radius: 1rem;
		}

		/* Handle */
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile::-webkit-scrollbar-thumb {
		  background: white;
			border-radius: 1rem;
		}

		/* Handle on hover */
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile::-webkit-scrollbar-thumb:hover {
		  background: white;
		}
		
		
	#piata .zawartosc .grafika-zbiorcza-4-6km-mobile article{
			flex: 1 0 400px;
	
}
	
	
	
	.grafika-zbiorcza-6-11km-desktop{
		display: none;
	}
	#szosta .zawartosc  article h2{
		font-size: 4rem;
		text-align: left;
		padding-left: 0;
	}
	#szosta .zawartosc h3{
		font-size: 10rem;
		padding: 2.3rem 0 1rem 0;
		text-align: center;
	}
	#szosta .zawartosc .grafika-zbiorcza-6-11km-mobile img{
		animation-name: pulsowanie;
		opacity: 1;
		}
	

	
	
	#szosta .zawartosc .grafika-zbiorcza-6-11km-mobile{
		display: flex;
	}
		
	#stopka .zawartosc{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 5rem;
		
	}
	#stopka .zawartosc .logo{
		max-width: 3rem;
	}
	#stopka .zawartosc .stopka-kolumny{
		flex-direction: column;
		gap: 5rem;
		
	}
/**/