@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Paytone+One&display=swap');

#logo, .logo_nav{
	/*position: absolute;*/
	top: 4rem;
	left: 50%;
	transform: translateX(-50%);}

.logo_nav{position: absolute;
	margin-top: -70px;
}


 @font-face {
  font-family: 'Pecita';
  font-style: normal;
  font-weight: normal;
  src: local('Pecita'), url("../fonts/Pecita.woff") format('woff');}


@font-face {
  font-family: 'Brownies';
  font-style: normal;
  font-weight: normal;
	src: local('Brownies Handdrawn'), url("../fonts/Brownies Handdrawn.woff") format('woff');}
	
	@font-face {
  font-family: 'Gasoek Polska';
  font-style: normal;
  font-weight: normal;
  src:url("../fonts/GasoekOne-Regular.otf")
}




*{transition: 0.6s;
	box-sizing: border-box;}

html{scroll-behavior: smooth;
	font-family: "Nunito Sans", sans-serif;
	font_size: 10px; /*1rem = 10px*/}

body{font-size: 1.6rem;
	background-color: #FFFEF1;
	overflow-x: hidden}

h1{}
h2{}
h3{}
h4{}
h5{}
h6{}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #B91C1D; /* albo inny kolor */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* Prosta animacja ładowania */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 5s linear infinite;
}

/* Animacja obracania */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*img{max-width: 100%;}*/

p{line-height: 140%;}

a{text-decoration: none;}

section{display: flex;
		align-items: center;
		justify-content: center;}
 
article{}

section .zawartosc{max-width: 100%;}

#pierwsza{position: relative;}

#logo{justify-content: center;
	align-items: center;
	display: flex;
	margin-top: -70px;
	position: absolute;}

#warzyw{justify-content: center;
		align-items: center;
		display: flex;
		margin: -130px 0 0 -800px;
		position: relative; /* DODAJ TO! */
  		z-index: 1; /* niższy niż #druga */
  		transition: transform 0.05s ease;
  		will-change: transform;}


#klik{/*background-color: blueviolet;*/
	max-width: 100%;
	display: flex;
	justify-content: flex-end;
	padding: 30px;
	}

#switch{border-radius: 50px;
		background-color: #1C861B;
		position: fixed;
		width: 100px;
		height: 50px;
		display: flex;
		justify-content: center;
		padding: 0 5px 0 0;
 		z-index: 10;}

#switch img{width: 45%; 
		 transform: translateX(22px); /* DOMYŚLNIE po prawej */
 		 transition: transform 0.4s ease, content 0.3s ease;
}


#menu {
  position: fixed;
  top: 0;
  right: -100vw; /* Ukryte poza ekranem */
  width: 100vw;
  height: 100vh;
  background-image: url("../IMG/kartka.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: right 0.6s ease;
  z-index: 5;
	display: flex;
	flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo_nav{display: flex;
		justify-content: center;
		align-items: center;
/*		margin-top: -160px;*/
/*	display: none;*/
}

#menu ul {margin-top: 140px;
 		 text-align: center;
}

#menu ul li {}

#menu ul li a {
				font-family: 'Brownies';
  				font-size: 4rem;
				color: #2D3263;}

#menu ul li a:hover {color: #1C861B;}

/* Pokazuje menu */
#menu.show {right: 0;}

#menu .sociale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* odstęp między ikonami */
  margin-top: 40px;
/*	background-color: deeppink;*/
}

.sociale a{
	height: 50px;
	width: 50px;
/*	background-color: red;*/
	display: block;
	background-repeat: no-repeat;
	background-position: center;
}
	
.fb{background: url("../IMG/facebook.png");
}


.fb:hover{
	background: url("../IMG/fb.png") no-repeat;
	background-repeat: no-repeat;
	background-position: center;
}



.insta{
	background: url("../IMG/Instagram.png");
}

.insta:hover{background: url("../IMG/ig.png") no-repeat;
	background-repeat: no-repeat;
	background-position: center;}

#switch.active {
  background-color: #003200; 
	padding: 0 0 0 5px;
	
}

#switch.active img { transform: translateX(-22px);
					transition: transform 0.4s ease, content 0.3s ease;
					content: url("../IMG/nav_hov.svg") }

#druga {background-image: url("../IMG/torba.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;  /* wyśrodkuj */
		height: 260vh;
		position: relative; /* ważne! */
  		z-index: 2;;
		margin-top: -630px;}

#druga .zawartosc{display: flex;
				justify-content: center;
				align-content: center;
				margin: 0 500px 0 0;
				transform: rotate(-12.384deg);}

#druga .naklejka{display: inline;
				margin: 0 0 150px 10%;
				height: 439px; width: 460px;
				background-image: url("../IMG/naklejka.png");
				background-repeat: no-repeat;
				background-position: center;}

#druga .naklejka p{padding: 60px 50px 0 40px;
			font-weight: 800;
			color: #6C4207;
			mix-blend-mode: darken;}

#trzecia{background-color: #D21118;
		margin-top: -350px;
		height: 1100px;
		position: static}

#trzecia .zawartosc{padding: 300px 60px 320px}

#trzecia h1{color: #F4E8DA;
			font-family: "Gasoek One";
			font-size: 90px;
			text-align: center;
			padding: 130px 0 130px 0}

#trzecia .artykuly{display: flex;
					justify-content: center;
					gap: 1%}

#trzecia article{justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: column;
				border-radius: 40.743px;
				background: #FFF9F2;
				height: 410px;
				width: 330px;
				color: #003200;
				text-align: justify;
				font-family: "Nunito Sans";
				font-size: 16px;
				line-height: 140%;
				position: relative;}

#trzecia .opis{position: absolute;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #FFF9F2;
				opacity: 0.0;
				padding: 20px;}

#trzecia .opis h3{font-family: "Paytone One";
					font-size: 20px;
					padding: 45px 0 20px 0}

#trzecia .tlo{background-color:rgba(0, 0, 0, 0);
			border-radius: 40.743px;
			height: 410px;
			width: 325px;
			position: absolute;
			 top: 0;
			 left: 0;
			transition: background-color 0.8s ease}

#trzecia h2{color: #003200;
			font-family: "Paytone One";
			font-size: 37.198px;
			text-align: center;
			padding: 0 0 15px 0}

#trzecia p{padding: 0 10px 30px;
			text-align: center;}

#trzecia article.nasiona{transform: rotate(-8deg)}

#trzecia article.ziemia{background-color: #F4E8DA; 
						margin-top: 30px; 
						position: relative}

#trzecia article.owoce{transform: rotate(10deg)}

#trzecia article:hover{transform: translateY(-30px)}

#trzecia article:hover .tlo{background: #1C861B}

#trzecia article:hover .opis {transform: translateY(-15px);
  							 opacity: 1.0;}

 .tabs {justify-content: center;
      display: flex;
      gap: 2%;
      padding: 60px 0;
    }
     .tab {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
		 border-color: #F4E8DA;
      border: 6px dashed transparent;
    }
    .tab.active {
      border-color: #003200;
    }
    .content {
      display: none;
    }
    .content.active {
		padding: 40px 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6%;
		}

.content article{display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				transform: 1s ease;
				
				width: 800px}

.content.active article, 
.content.active .obrazek {
  animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.content article h1{color: #D21118;
					font-family: "Gasoek Polska";
					font-size: 86px;}

.content article h2{color: #FF391B;
					font-family: 'Pecita';
					font-size: 36px;
					padding: 20px 0}

.content article p{font-family: Nunito Sans;
					font-size: 18px;
					color: #6C4207;
					line-height: 140%;
					}

#wzrok .obrazek{background-color: #FFF7D5;
				border-radius: 153.312px;
				position: static;
				width: 266px;
				height: 574px;
				display: flex;
				justify-content: center;
				align-items: center;}

#sluch .obrazek{background-color: #FFDFA6;
				border-radius: 153.312px;
				position: static;
				width: 266px;
				height: 574px;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 30px 0 0}

#smak .obrazek{background-color: #FFD2CB;
				border-radius: 153.312px;
				position: static;
				width: 266px;
				height: 574px;
				display: flex;
				justify-content: center;
				align-items: center;}

#wech .obrazek{background-color: #E0EDB8;
				border-radius: 153.312px;
				position: static;
				width: 266px;
				height: 574px;
				display: flex;
				justify-content: center;
				align-items: center;}

#dotyk .obrazek{background-color: #B0D7B0;
				border-radius: 153.312px;
				position: static;
				width: 266px;
				height: 574px;
				display: flex;
				justify-content: center;
				align-items: center;}

#piata{height: 680px}

#piata .zawartosc{display: flex;
				padding: 230px 120px;}

#piata article{color: #FF391B;
			font-weight: 400;
			font-family: "Nunito Sans";
			font-size: 18px;
			line-height: 140%;
			padding: 0 30px 0 0}

#piata article p{padding: 0 50px 0 0}

#piata article h1{color: #FF391B;
			font-family: "Gasoek One";
			font-size: 54px;
			padding: 0 0 40px}

.accordion {
  width: 100%;
  font-family: 'Nunito Sans', sans-serif;
}

.accordion-item {
  border-top: 2px solid #FF391B;
  padding: 10px 0;
}

.accordion-header {font-family: "Paytone One";
  background: none;
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  color: #FF391B;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease, padding 1s ease;
  color: #6C4207;
  font-size: 14px;
  padding: 0 0;
}

.accordion-item.active .accordion-content {
  max-height: 200px; /* lub więcej jeśli tekst długi */
  padding: 10px 0;
}

.accordion-item.active .plus::after {font-family: 'Pecita';
  content: "–"; font-size: 20px; 
}
.plus::after {font-family: 'Pecita'; 
  content: "+"; font-size: 30px;
}

header{background: url("../IMG/trawa.png");
background-repeat: repeat-x;
height: 104px;
z-index: 1;
margin-bottom: -20px}


#newsletter{background-color: #1C861B;
			height: 400px; z-index: 3;}

#newsletter .tlo{
				display: flex;
				justify-content: center;
				align-content: center;
				}

#newsletter article{color: #FFF;
				font-family: "Nunito Sans";
				font-size: 18px;
				line-height: 140%;
				text-align: left;}

#newsletter article p{padding: 0 150px 0 0;}

#newsletter #email{background-color: #FFFEF1;
					font-family: "Nunito Sans";
					border-radius: 100px;
					padding: 0 15px;
					display: flex;
					height: 45px;
					width: 420px;
					justify-content: space-around;
					align-items: center;}

#newsletter input{background: none; border: none; 
					font-size: 18px;
					font-family: "Nunito Sans";
					color: #D21118; width: 300px;}

#newsletter button{background: none; border: none; height: 110%}

#newsletter button:hover{transform: translateX(20px);
						opacity: 60%}

#stopka{height: 400px}

#stopka .zawartosc{display: flex; 
					justify-content: center; 
					align-items: center; 
					padding: 40px 80px 40px 20px; /*background-color: dodgerblue;*/}

#stopka .adres{display: flex; justify-content: center;
				align-items: center; /*background-color: hotpink;*/ margin: 0 580px 0 0}

#stopka article{color: #FF391B;
				font-family: "Nunito Sans";
				font-size: 16px;
				line-height: 140%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				/*background-color: blueviolet;*/}

#stopka article p{justify-content: space-between; display: flex; padding: 50px 0}

#stopka .linki{display: flex; 
			flex-direction: column; 
			justify-content: space-between; 
			/*background-color: lavender;*/
			padding: 20px}

#stopka .linki ul{padding: 0 0 40px 0;
					/*background-color: aqua;*/}

#stopka .linki ul li a{color: #FF391B;
				font-family: "Paytone One";
				font-size: 20px;
				line-height: 140%}

#stopka .linki ul li a:hover{color: #9D0A0A}

#stopka .social{display: flex;
 				 gap: 10px; 
				margin-top: 40px}

#stopka .social a{
	height: 50px;
	width: 50px;
/*	background-color: red;*/
	display: block;
	background-repeat: no-repeat;
	background-position: center}

.instagram{background: url("../IMG/Instagram1.png")}

.instagram:hover{background: url("../IMG/Instagram2.png");
				background-repeat: no-repeat;
				background-position: center;}

.faceb{background: url("../IMG/Facebook1.png");	
		background-repeat: no-repeat;
		background-position: center;}

.faceb:hover{background: url("../IMG/Facebook2.png")}


.copyright{
	padding: 6px;
	display: flex; 
	justify-content: center; 
	text-align: center;
	/*background-color: lawngreen;*/
	color: #EF2200;
	font-family: "Nunito Sans";
	font-size: 15px;}

@media all and (max-width: 1700px){#trzecia{margin-top: -570px;;}

								#trzecia h1{padding: 150px 0 70px 0;
											font-size: 75px;}}

@media all and (max-width: 1300px){
		
	#trzecia{margin-top: -760px;}
	
#stopka .zawartosc{padding: 40px 100px 40px 120px;}

#stopka .adres{margin: 0 280px 0 0}}

@media all and (max-width: 1200px){
	
#trzecia{margin-top: -700px;
		height: 900px;}

#trzecia h1{padding: 100px 0 100px 0;}
	
#trzecia .tlo{width: 322px;}
	
#stopka .zawartosc{padding: 40px 100px 40px 80px;}
	
#stopka .adres{margin: 0 240px 0 0}}

.content.active {padding: 40px 100px 40px 200px;
				gap: 10%;}

.content article h2{font-size: 28px;}

#piata .zawartosc{display: flex;
				padding: 230px 120px;}

#piata article h1{
			font-size: 44px;
			padding: 0 0 20px}


@media all and (max-width: 1100px){
	#trzecia{height: 900px;}

#trzecia .zawartosc{padding: 150px 60px 200px}

#trzecia h1{padding: 40px 0 130px 0}

#trzecia .artykuly{display: flex;
					justify-content: center;
					gap: 1%}


#trzecia .tlo{width: 310px;}
	
#sluch .obrazek{padding: 0 70px 0 0}
	
.content.active {
		padding: 40px 100px 40px 200px;
		gap: 10%;
		}
	
.content article h2{font-size: 28px;}

	
#piata{height: 600px}

#piata .zawartosc{display: flex;
				padding: 230px 120px;}

#piata article h1{
			font-size: 44px;
			padding: 0 0 20px}
	
#stopka .adres{margin: 0 140px 0 0}}
	
@media all and (max-width: 1000px){

#druga{margin-top: -730px;}
	
#druga .zawartosc{
				margin: 0 350px 0 0;
				transform: rotate(-12.384deg) scale(0.9);}

#druga .naklejka{margin: 0 0 150px 10%;
				transform: scale(0.9);}

#druga .naklejka p{padding: 70px 60px 0 40px;}
	
#trzecia{margin-top: -760px;
		height: 1300px;}

#trzecia .zawartosc{
	padding: 300px 70px 320px}

#trzecia h1{padding: 150px 0 100px 0;}

#trzecia .artykuly{display: flex;
					flex-wrap: wrap;
					gap: 1%}

#trzecia .tlo{width: 330px;}


#trzecia article.nasiona{transform: rotate(-8deg)}

#trzecia article.ziemia{background-color: #F4E8DA; 
						margin-top: 50px; 
						position: relative}

#trzecia article.owoce{transform: rotate(8deg);
						margin-bottom: 30px}
	
#trzecia article:hover{transform: translateY(-30px)}
	
	#newsletter .tlo{padding: 0 100px;}
	
	#newsletter #email{border-radius: 100px;
					padding: 0 6px;}

#newsletter input{width: 200px;}
	
#newsletter article p{padding: 0 80px 0 0;}
	
#stopka .adres{margin: 0 90px 0 0}
	
#stopka .zawartosc{
	padding: 40px 80px 40px 60px;}}
	
	
@media all and (max-width: 900px){
	
#druga{margin-top: -830px;}
	
#trzecia{margin-top: -850px;
		height: 1500px;}

#trzecia h1{padding: 150px 0 100px 0;}
	
#piata{height: 500px}

#piata article h1{
			font-size: 36px;
			padding: 0 0 20px}
	
#newsletter input{width: 230px;}
	
#newsletter article p{padding: 0 20px 0 0;}
	
#stopka img{transform: scale(0.8)}
	
#stopka article{margin-left: -50px}
	
#stopka .adres{margin: 0 120px 0 0}
	
#stopka .zawartosc{
	padding: 40px 40px 40px 40px;}}
	
@media all and (max-width: 800px){
	
#warzyw{margin: -250px 0 0 -800px;}
	
#druga{margin-top: -830px;}

#druga .naklejka{margin: 0 0 150px 10%;
				transform: scale(0.8);}
	
#trzecia{margin-top: -850px;
		height: 1800px;}

#trzecia h1{padding: 150px 0 30px 0;}
	
#trzecia .artykuly{display: flex;
					flex-wrap: wrap;}

#trzecia .tlo{width: 330px;}


#trzecia article.nasiona{transform: rotate(-8deg) translateY(50px)}

#trzecia article.ziemia{background-color: #F4E8DA; 
						position: relative;}

	#trzecia article.owoce{transform: rotate(8deg);}
	
	#trzecia article.nasiona:hover{transform: translateY(20px)}
	
#trzecia article:hover{transform: translateY(-30px)}
	
.tabs {
      display: none;
    }

#czwarta .zawartosc{padding: 0 30px 0;
						display: flex; 
						flex-wrap: nowrap;
						overflow: scroll;}
	
.content {padding: 0 200px;
		display: flex;
		flex-wrap: wrap;
		gap: 0%; 
    }
	
.content.active {gap: 0%;
		width: 420px;
		padding: 0 200px;
		display: flex;
		flex-wrap: wrap;
		margin-top: -60px;
		}
	
	#sluch{justify-content: center;}
	
	#sluch article{width: 400px; text-align: center;}
	
	#sluch article h1{text-align: center; padding: 0;}
	
	#sluch .obrazek{padding: 0;}
	
	#dotyk{justify-content: center;}
	
	#dotyk article{width: 400px; text-align: center;}
	
	#dotyk article h1{text-align: center; padding: 0;}
	
	#dotyk .obrazek{padding: 0;}
	
#smak{justify-content: center;}
	
#smak article{width: 400px; text-align: center;}
	
#smak article h1{text-align: center; padding: 0 0 0 55px}
	
#wech{justify-content: center;}
	
#wech article{width: 330px;
				text-align: center;}
	
#wzrok .obrazek{margin-top: 35px; padding: -20px}
	
.content img{transform: scale(0.9)}
	
#czwarta .obrazek{transform: scale(0.8)}
	
.content article{align-items: flex-start;
				margin-top: -100px}

	
.content article h1{text-align: center;
					padding: 50px 0 0 }

.content article h2{font-size: 30px;
					text-align: center;
					padding: 20px 0}

.content article p{font-family: Nunito Sans;
					font-size: 18px;
					color: #6C4207;
					line-height: 140%;
					text-align: center;}
	
	#piata{height: 700px}	
	
	#piata .zawartosc{display: flex;
					flex-wrap: wrap;
					gap:10%;}
	
	#piata article{padding: 0 0 50px;
					display: flex;
					flex-direction: column;
					justify-content: center;}
	
	#piata article h1{font-size: 60px;
					padding: 0 100px 20px;
					text-align: center;
					line-height: 140%;}
	
	#piata p{text-align: center;}
	
	.accordion {height: 100%;}
	
	#newsletter .tlo{padding: 60px}
	
	#newsletter article{font-size: 16px; padding: 0 20px
	}
	
	#newsletter #email{width: 350px}
	
	#stopka{height: 700px}

	
	#stopka .zawartosc{display: flex; flex-wrap: wrap; justify-content: center; padding: 0;}
	
	#stopka .adres{display: flex; flex-wrap: wrap; justify-content: center; margin: 0; text-align: center; padding: 0; width: 750px}
	
	#stopka img{padding: 0 200px;
				
				margin-top: -40px;
				transform: scale(1)}
	
	#stopka article{
					justify-content: center;
					align-items: center;
					width: 300px;
					align-content: center;
					}
	
	#stopka article p{text-align: center; 
					justify-content: center; 
					padding: 20px 0; 
					margin-left: 40px}

#stopka .linki{display: flex; 
				justify-content: center; 
				text-align: center;
				padding: 0;
				margin: 0;
				}

#stopka .linki ul{padding: 0 0 0 0;}

#stopka .social{display: flex;
  				justify-content: center;
 				 gap: 10px; 
				margin-top: 40px}}



@media all and (max-width: 700px){
	body{overflow-x: hidden}
	
	#warzyw{margin-top: 70px;}
	
	#druga{background-image: url("../IMG/sekcja 2.png"); 
	background-size: contain;
	margin-top: -800px}
	
	#druga .zawartosc{margin: 90px 0 0 0}

	#druga .naklejka{margin: 0 0 100px 70px;
				transform: scale(1.1);}
	
	#trzecia{margin-top: -670px;
		height: 1800px;}

	#trzecia h1{padding: 170px 0 50px 0;
			font-size: 75px;}

	#czwarta .zawartosc{padding: 0;}
	
	
	#sluch{justify-content: center;}
	
	#sluch article{width: 350px; text-align: center; padding: 0;}
	
	#sluch article h1{text-align: center; padding: 0;}
	
	#sluch .obrazek{padding: 0 0 20px;}
	
	#dotyk{justify-content: center;}
	
	#dotyk article{width: 350px; text-align: center;}
	
	#dotyk article h1{text-align: center; padding: 0;}
	
	#dotyk .obrazek{padding: 0 0 20px;}
	
#smak{justify-content: center;}
	
#smak article{width: 400px; text-align: center;}
	
#smak article h1{text-align: center; padding: 0 0 0 55px}
	
#wech{justify-content: center;}
	
#wech article{width: 330px;
				text-align: center;}


#piata .zawartosc{display: flex;
						justify-content: center;
						align-items: center;
						padding: 230px 80px;}
	
#piata article p{justify-content: center;
					text-align: center; 
					padding: 0;}
	
	
.accordion {justify-content: center;
			display: flex;
			margin-left: 20px;
			align-items: center;
			flex-direction: column;
			height: 100%;}
	
#newsletter .tlo{padding: 60px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;}
	
#newsletter article{font-size: 16px; 
					padding: 0 20px 30px 20px;
					text-align: center;
	}
	
	#newsletter #email{width: 400px}
	
	#newsletter input{width: 300px;}
	
	
#stopka .linki{padding: 20px;}
	
	#stopka article p{margin: auto;}
	
	#stopka article{ margin: auto;}
	
@media all and (max-width: 600px){
	#druga .naklejka{margin:0 0 150px;
				transform: scale(0.9);}

#druga .zawartosc{margin: 90px 0 0 20px}

#trzecia{margin-top: -800px;}

#trzecia h1{padding: 150px 0 50px 0;}
	
.content {padding: 0 150px;}
	
.content.active {padding: 0 150px 0 150px;}
	
.content img{transform: scale(0.9)}
	
#czwarta .obrazek{transform: scale(0.6);
					margin-top: -40px;}
	
.content article{align-items: flex-start;
			padding: 0;}
	
	#wzrok .obrazek{margin-top: 10px}

	
.content article h1{text-align: center;
					padding: 10px 10px 0;
					font-size: 60px}

.content article h2{font-size: 24px;
					text-align: center;
					padding: 20px 0px 20px 10px}

.content article p{padding: 0;}
	
#smak{justify-content: center;}
	
#smak article{width: 310px; text-align: center;}
	
#smak article h1{text-align: center; padding: 0 0 0 55px}
	
#wech{justify-content: center;}
	
#wech article{width: 330px;
				text-align: center;
				margin-top: -400px;}}

@media all and (max-width: 499px){
	
	#druga{margin-top: -700px;}
	
	#trzecia{margin-top: -2800px;}
	
	#trzecia h1{font-size: 55px;
				padding: 40px 0 0 0}
	
	#trzecia article{width: 250px;}
	
	#trzecia .tlo{width: 250px;}
	
	#trzecia .opis{font-size: 14px;}
	
	#trzecia .opis h3{font-size: 18px}
	
	#klik{padding: 20px 15px;}

	#switch{transform: scale(0.9); z-index: 99999999999999999999;}
	
	#trzecia{margin-top: -500px;}
	
	
	#piata article p{justify-content: center;
					text-align: center; 
					padding: 0 110px;}
	
	#piata .zawartosc{padding: 0 60px;}
	
	.accordion {
		height: 100%;}}
	
	@media all and (max-width: 300px){#trzecia{margin-top: -2600px}
	
		#trzecia h1{font-size: 20px}}}