/* basic */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root{
	--bezowy:#ede7de;
	--bezowy_2:#f6f3ef;	
	--zolty:#d3ff54;
}
html {
	font-size: 14px;
}
body {

	color: #333;
	margin: 0px auto 0px auto;
	background: #fff;
	font-family:'Space Grotesk', Arial;
}
img{
	max-width:100%;
}
a{
	text-decoration:none;
	color:inherit;
}
.srodek {
  max-width: 1096px;
  margin: 0px auto 0px auto;
  padding-left:6%;
  padding-right:6%;
  position: relative;
  display: block;
}
h1{
	font-size:90px;
	font-weight:400;
	line-height:1em;
	margin:0px;
	letter-spacing:-0.05em;
}
h2{
	font-size:70px;
	font-weight:400;
	line-height:1em;
	margin:0px 0px 0.5em 0px;
	letter-spacing:-0.05em;	
}
h3{
	font-size:42px;
	font-weight:400;
	line-height:1.1em;
	margin:0px 0px 1em 0px;
	letter-spacing:-0.05em;	
}
h3+h2{
	margin-top:-0.6em;
}
h4{
	font-size:1.2rem;
}
header{
	padding-top:3rem;
	padding-bottom:0px;
}
header nav{
	display:inline-block;
}
header strong{
	margin-right:1em;
}
header nav>*{
	display:inline-block;
	border:solid 1px #333;
	padding:0.1em 0.8em;
	border-radius:0.4em;
	margin-right:1em;
	font-size:0.85rem;
	margin-top: 0.5em;
}
header nav .hover, header nav a:hover{
	background:var(--zolty);
	color:#000;
}
main>section{
	padding-top:5rem;
	padding-bottom:3.5rem;
}
.star1:before{
	display:inline-block;
	content:url('img/star.svg');
}
.star2:before{
	display:inline-block;
	content:url('img/star.svg') url('img/star.svg');
}
.star3:before{
	display:inline-block;
	content:url('img/star.svg') url('img/star.svg') url('img/star.svg');
}
.star4:before{
	display:inline-block;
	content:url('img/star.svg') url('img/star.svg') url('img/star.svg') url('img/star.svg');
}
.star5:before{
	display:inline-block;
	content:url('img/star.svg') url('img/star.svg') url('img/star.svg') url('img/star.svg') url('img/star.svg');
}
.trzy_na_dwa{
	display:grid;
	grid-gap:4%;
	grid-template-columns: 2.5fr 312px;
	margin-bottom:1rem;
	margin-top:2rem;
}
.trzy_na_dwa>*:nth-child(2n){
	display:flex;
}
.trzy_na_dwa>*:nth-child(2n)>*{
	margin-top: auto;
}
.trzy_na_dwa p{
	margin-bottom:0px;
}
.bezowy{
	background:var(--bezowy);
}
.button{
	background-color:var(--zolty);
	font-size:1.14rem;
	padding:0.55em 60px 0.55em 1em;
	background-image:url(img/strzalka.svg);
	background-repeat:no-repeat;
	background-position-y:center;
	background-position-x: right;
	display:inline-block;
	border:solid 1px #333;
	border-radius:0.4em;
	color:#333;
	margin-top:1rem;
}
.button:hover{
	background-color:#333;
	color:var(--zolty);
	border:solid 1px var(--zolty);
	background-image:url(img/strzalka_hover.svg);	
}
.ranking{
	width:100%;
	font-weight:bold;
	border-spacing:0px 2px;
}
.ranking td,.ranking th{
	padding-right:3%;
	padding-left:5%;
	text-align:left;
	padding-top:0.6rem;
	padding-bottom:0.6rem;
}
.ranking th{
	background:var(--bezowy);
	font-size:0.9rem;
	padding-top:1em;
	padding-bottom:1em;	
}
.ranking tr:hover td,.ranking tr:hover th{
	background:#fff;
}
.ranking tr:first-child{
	position:relative;
	top:-4px;
}
.ranking tr:first-child th:first-child{
	border-radius:0.5em 0px 0px 0.5em;
}
.ranking tr:first-child th:last-child{
	border-radius:0px 0.5em 0.5em 0px;
}
.ranking tr:nth-child(2) td:first-child{
	border-radius:0.5em 0px 0px 0px;
}
.ranking tr:nth-child(2) td:last-child{
	border-radius:0px 0.5em 0px 0px;
}
.ranking tr:last-child td:first-child{
	border-radius:0px 0px 0px 0.5em;
}
.ranking tr:last-child td:last-child{
	border-radius:0px 0px 0.5em 0px;
}

.ranking td{
	background:var(--bezowy_2);
	font-size:1.15rem;
}
.ranking tr>td:nth-child(2):empty:before,.ranking tr>td:nth-child(3):empty:before{
	content:"-";
}
.czarna{
	background:#333333;
	color:#fff;
	padding-top:6rem;
	padding-bottom:6rem;
}
.czarna>.srodek>img:last-child{
	float:right;
	position:relative;
	top:-12em;
}
.czarna >.srodek > img.male_logo{
	width:218px;
	height:auto;
	margin-top: -9em;
	top:unset;
}
.faq{
	border-bottom:solid 1px #fff;
}
.faq:last-child{
	border-bottom:none;
}
.faq>p{
	max-width:761px;
	padding-left:3%;
	padding-bottom:1rem;
}
h3+.galeria_trzy{
	margin-top:3rem;
}
.galeria_trzy>*{
	width:32.7%;
	margin-right:0.9%;
	height:auto;
	display:inline-block;
	margin-top:0.5rem;
}
.galeria_trzy>*:last-child{
	margin-right:0px;
}
.galeria_dwa{
	
}
.galeria_dwa>*{
	width:49.5%;
	margin-right:1%;
	height:auto;
	display:inline-block;
	margin-top:0.5rem;
}
.galeria_dwa>*:last-child{
	margin-right:0px;
}
video{
	max-width:100%;
	height:auto;
	margin-top:0.5rem;
	border-radius:0.5rem;
}
footer{
	padding:3rem 0px;
	text-align:right;
}
footer .srodek{
	text-align:right;
}
footer .srodek>*{
	display:inline-block;
	margin-left:10%;
	font-size:1rem;
}

.mobile{
	display:none;
}
@media screen and (max-width: 960px) {
	.desktop{
		display:none;
	}
	.mobile{
		display:block;
	}
	main>section{
		overflow:hidden;
	}
	h1{
		font-size:62px;
	}
	h2{
		font-size:62px;
		letter-spacing:-0.05em;
	}
	h2 span{
		display:block;

	}
	h3{
		font-size:34px;
		letter-spacing:-0.05em;		
	}
	.trzy_na_dwa{
		display:block;
	}
	.ranking th{
		display:none;
	}
	.ranking tr,.ranking td{
		display:block;
	}
	.ranking tr{
		margin-bottom:1rem;
		border-radius:0.5rem;
		overflow:hidden;
		display:flex;
		flex-wrap:wrap;
		background:var(--bezowy_2);		
	}
	.ranking tr>td:first-child{
		font-size:34px;
		font-weight:normal;
		width:20%;
	}
	.ranking td{
		font-size:24px;
		padding-right:4%;
		padding-left:6%;
		padding-top:1rem;
		padding-bottom:1.5rem;
		width:100%;
		box-sizing:border-box;		

	}
	.ranking tr:nth-child(2) td:first-child{
		border-radius:unset;			
	}
	.ranking tr>td:last-child>img{
		height:24px;
		width:24px;
	}
	.ranking tr>td:nth-child(2){
		width:80%;
		font-size:34px;
	}	
	.ranking tr+tr+tr>td+td+td{
		display:none;
	}
	.ranking tr>td:nth-child(2):empty:before,.ranking tr>td:nth-child(3):empty:before{
		content:"";
	}
	.ranking tr td>a{
		display:block;
	}
	.czarna .srodek>img:last-child{
		float:none;
		margin-top:3rem;
		margin-left:auto;
		margin-right:auto;
		display:block;
		top:0px;
	}
	.czarna .srodek>img.male_logo{
		position:static;
		margin:3rem auto 0px auto;
		display:block;
	}
	footer{
		text-align:center;
	}
	footer .srodek > *{
		margin-left:0px;
		line-height:2.5em;
		display:block;
	}
}
@media screen and (max-width: 460px) {
	footer .srodek {
	  text-align: center;
	}
	.galeria_trzy > *,.galeria_dwa>*{
		width:100%;
		display:block;
	}
	.czarna .srodek>img:not(.male_logo):last-child{
		position:relative;
		top:unset;
		margin-top:3rem;
		width: 138%;
		max-width:unset;
		left: -19%;
	}	
}