@charset "utf-8";
/*  Import font  */
@import url('https://fonts.googleapis.com/css2?family=Faustina:ital,wght@0,300..800;1,300..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*  SELEKTORY GLOBALNE  */
*{
	box-sizing: border-box;
	scroll-behavior: smooth;
}
html{
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
}
body{
	font-size: 20px;
	font-family: "Work Sans", sans-serif;
}
h1{
	font-size: 54px;
	font-family: "Faustina", serif;
	line-height: 125%;
}
h2{
	font-size: 26px;
	font-weight: 600;
	font-family: "Work Sans", sans-serif;
}
h3{}
h4{}
h5{}
h6{}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
	color: inherit;/*?*/
}
p{
	line-height: 140%;
}

/*  NAWIGACJA  */
nav{
	
	padding: 2rem;
	display: flex;
	justify-content: center;
	position: fixed;
	width:100%;
	background:rgba(255, 249, 243, 1);
	z-index: 3;
	transition: 300ms ease-in-out;
}
nav ol{
	width: 100%;
	max-width: 1400px;
	display: flex;
	justify-content:space-between;
	align-items: center;
	display: flex;
	text-align: center;
}
nav ol li{
	
	position: relative;
  	text-decoration: none;
	color:white;
  	padding-bottom: 3px;
}
nav ol li:not(:first-child) a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 0;
  background: #FF7B4D;
  transition: width 0.3s ease;
}
nav ol li:not(:first-child) a:hover::after {
  width: 100%;
}
nav ol li a:hover{
	font-weight: 500;
}
nav ol li a{
	color:#C0B5AD;
	font-size:20px;
	transition: 300ms ease-in-out;
}
nav ol li a img{
	max-width: 100px;
	margin-right: 28px;
}
nav ol li a:hover{
	transition: 300ms ease-in-out;
	color:#F09856;
}

/* -----------NAV MOBILE------------*/
.burger{
	display:none;
	position: fixed;
	top:2rem;
	right:2rem;
	font-size: 2.5rem;
	background-color: #222;
	color:white;
	padding: 0.5rem 0.7rem;
	border-radius: 1rem;
	cursor:pointer;
	z-index:1;
}
.nakladka{
	background: linear-gradient(153deg,rgba(42, 123, 155, 1) 0%, rgba(36, 44, 119, 1) 100%);
	opacity: 1;
	color:white;
	z-index:5;
	position:fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 0%; /*parametr do zmiany w skrypcie*/
	overflow: hidden; /*ukrycie nakladki*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4ms ease-in-out;
	
}
.nakladka ol{
/*	background-color:greenyellow;*/
	text-align: center;
	width: 100%;
}
.nakladka ol li{
border-bottom: 1px solid rgba(150,195,216,0.50);
}
.nakladka ol li a{
/*	background-color: blue;*/
	display: block;
	padding: 2rem;
	font-family: "Work Sans", sans-serif;
	font-weight: 600;
}
.nakladka ol li:hover{
	background-color: rgba(38,166,216,1.00);

}
.nakladka ol li:last-child{
	border: none;
}
.zamknijx{
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: 3.5rem;
	padding: 0 0.8rem 0.7rem;
	border-radius: 1rem;
}

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


/*-------------SEKCJE--------------*/


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

	
}


/*---------------ANIMACJE---------------*/


@keyframes gradientShift{   
	0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes krewetka {
	0%{}
	50%{transform: translateY(-30px)}
	100%{ }
}
@keyframes krewetkadwa {
	0%{}
	50%{transform: translateY(-40px)}
	100%{ }
}


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


/*-----------SEKCJE POSZCZEGÓLNE--------*/

#pierwsza{
	background:url("../img/tlo12.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #FFF9F3;
	background-position: 120% 40%;
	background-size: 77%;
	min-height: 100vh;
	
}
#pierwsza .zawartosc{
	display: flex;
	justify-content: center;
	gap:120px;
	align-items: center;
}
#pierwsza .zawartosc .left{}
#pierwsza .zawartosc .right{
	margin-top:140px;
	position: relative;	
}
#pierwsza .zawartosc .right .mobile-only{
	display: none;
}
#pierwsza .zawartosc .right .shrimp{
	position: absolute;
	top:-120px;
	animation: krewetka 7s ease-in-out infinite;
}
#pierwsza .zawartosc img{
	
	margin-top: 20px;
}
#pierwsza .zawartosc h1{
	line-height: 125%;
}
#pierwsza .zawartosc .left button{
	background: linear-gradient(270deg, #FF7B4D, #FFD7B8, #FF7B4D);
  	background-size: 600% 600%;
	border: none;
	padding: 24px 48px;
	font-size:24px;
	font-family:"Work Sans", sans-serif;
	font-weight:600;
	color:white;
	border-radius: 1rem;
	transition: 300ms;


}
#pierwsza .zawartosc .left button:hover{
	cursor:pointer;
	transform: scale(1.03);
	transition: 300ms;
	animation: gradientShift 5s ease infinite;
	animation-timing-function: ease-in;
}
#pierwsza .zawartosc p{
	margin-top:20px;
	max-width: 590px;
	margin-bottom:64px;
	font-size:24px;
	lineheight:145;
}
#druga{
	scroll-margin-top: 180px;
	background: url("../img/zasob2.png");
	background-color: #FFE9D6;
	min-height: 50vh;
	background-size: cover;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: -130% 30%;
}
#druga .zawartosc{
	display: flex;
	justify-content: center;
	gap:170px;
	align-items: center;
	margin-bottom: 48px;
}
#druga .zawartosc .left{
	position: relative;
}
#druga .zawartosc .left img{
	margin-top:100px;
}
#druga .zawartosc .left .shrimp{
	position: absolute;
	top:20px;
	animation: krewetkadwa 5s ease-in-out infinite;
}
#druga .zawartosc .right{}
#druga .zawartosc .right span{
	font-weight: 600;
}
#druga .zawartosc .right p{
	max-width:530px;
	line-height: 145%;
	margin-top: 0px;
	margin-bottom:32px;
}
#druga .zawartosc .right h1{
	margin-bottom:32px;
}
#druga .zawartosc{}
#trzecia{
	scroll-margin-top: 140px;
	background-color: #FFF9F3;
	min-height: 80vh;
}
#trzecia .zawartosc{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-top:48px;
	padding-bottom:48px;
}
#trzecia .zawartosc .text{
	max-width:736px;
	text-align: center;
}#trzecia .zawartosc .text h1{
	margin-bottom:32px;
}
#trzecia .zawartosc .text span{
	font-weight:700;
}
#trzecia .zawartosc .obrazki{
	position:relative;
	display: flex;
	gap:75px;
	
}
#trzecia .zawartosc .obrazki{
	display: flex;
	justify-content: center;
	position: relative;
	flex-wrap: wrap;
	flex-shrink: 0;
	margin-top:64px;

}
#trzecia .zawartosc .obrazki::after{
	content:'';
	position: absolute;
	height: 4px;
	width: 940px;
	background-color:#B29783;
	top:-42px;
}
#trzecia .zawartosc .obrazki .jeden .kropka{
	position: relative;
}
#trzecia .zawartosc .obrazki .jeden .kropka::after{
	content:'';
	position: absolute;
	height: 23px;
	width: 4px;
	background-color:#B29783;
	top:-26px;
}
#trzecia .zawartosc .obrazki .dwa .kropka::after{
	content:'';
	position: absolute;
	height: 23px;
	width: 4px;
	background-color:#B29783;
	top:-26px;
}
#trzecia .zawartosc .obrazki .trzy .kropka::after{
	content:'';
	position: absolute;
	height: 23px;
	width: 4px;
	background-color:#B29783;
	top:-26px;
}
#trzecia .zawartosc .obrazki .cztery .kropka::after{
	content:'';
	position: absolute;
	height: 23px;
	width: 4px;
	background-color:#B29783;
	top:-26px;
}


/*---------KROPKI I ICH ŁĄCZENIA----------*/

/*
#trzecia .zawartosc .lines #horizontal{
	width: 938px ;
	height: 4px;
background-color:#B29783 ;}
*/

#trzecia .zawartosc .obrazki .jeden{
	position: relative;
}
#trzecia .zawartosc .obrazki .jeden img{
	width:240px ;
	height: 238px;
}
#trzecia .zawartosc .obrazki .jeden .kropka{
	width: 40px;
	height: 40px;
	background-color: #FFFBF8;
	border: 4px solid #B29783;
	border-radius: 40px;
	position: absolute;
	top:-20px;
	left:100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#trzecia .zawartosc .obrazki .jeden .kropka div{
	height:18px;
	width:18px;
	background-color: #B29783;
	border-radius: 40px;
	z-index: 2; 
}
#trzecia .zawartosc .obrazki .dwa{
	position: relative;
}
#trzecia .zawartosc .obrazki .dwa .kropka{
	width: 40px;
	height: 40px;
	background-color: #FFFBF8;
	border: 4px solid #B29783;
	border-radius: 40px;
	position: absolute;
	top:-20px;
	left:100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#trzecia .zawartosc .obrazki .dwa .kropka div{
	height:18px;
	width:18px;
	background-color: #B29783;
	border-radius: 40px;
	z-index: 2; 
}
#trzecia .zawartosc .obrazki .trzy{
	position: relative;
}
#trzecia .zawartosc .obrazki .trzy .kropka{
	width: 40px;
	height: 40px;
	background-color: #FFFBF8;
	border: 4px solid #B29783;
	border-radius: 40px;
	position: absolute;
	top:-20px;
	left:100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#trzecia .zawartosc .obrazki .trzy .kropka div{
	height:18px;
	width:18px;
	background-color: #B29783;
	border-radius: 40px;
	z-index: 2; 
}
#trzecia .zawartosc .obrazki .cztery{
	position: relative;
}
#trzecia .zawartosc .obrazki .cztery .kropka{
	width: 40px;
	height: 40px;
	background-color: #FFFBF8;
	border: 4px solid #B29783;
	border-radius: 40px;
	position: absolute;
	top:-20px;
	left:100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#trzecia .zawartosc .obrazki .cztery .kropka div{
	height:18px;
	width:18px;
	background-color: #B29783;
	border-radius: 40px;
	z-index: 2; 
}

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





#czwarta{
	scroll-margin-top: 180px;
	background: url("../img/zasob4.png");
	background-color: #FFE9D6;
	min-height: 50vh;
	background-size: cover;
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: 480% 50%;
	overflow: hidden;
}
#czwarta .zawartosc{
	display: flex;
	justify-content: space-between;
	gap:120px;
	margin-top:48px;
	margin-bottom:48px;
	
}
#czwarta .zawartosc h1{
	margin-bottom: 32px;
}
#czwarta .zawartosc p{
	margin-bottom: 32px;
	max-width: 600px;
}
#czwarta .zawartosc span{
	font-weight: 600;

}
#czwarta .zawartosc .right{
	position: relative;
}
#czwarta .zawartosc .right .shrimp{
	position: absolute;
	width: 70%;
}
#czwarta .zawartosc .right .shrimp:nth-child(1){
	top:-20px;
	transform: rotate(-10deg);
	animation: krewetkadwa 4s ease-in-out infinite;
}
#czwarta .zawartosc .right .shrimp:nth-child(2){
	width: 70%;
	left:150px;
	transform: rotate(-10deg);
	animation: krewetkadwa 5s ease-in-out infinite;
}
#piata{
	scroll-margin-top: 180px;
	background-color: #FFFBF8;
	min-height: 80vh;
}
#piata .zawartosc{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top:80px;
	margin-bottom: 80px;
	
}
#piata .zawartosc p{
	padding:24px;;
	border: 2px solid #B29783;
	border-radius: 14px;
	max-width: 340px;
}
#piata .zawartosc .rowone{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-top: 32px;
	gap:32px;

	
}
#piata .zawartosc .rowtwo{
	
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px;
	gap:32px;
	
	
}



/*-----------USTAWIANIE CYFEREK-------------*/


#piata .zawartosc .rowone .jeden{
	position: relative;
}
#piata .zawartosc .rowone .jeden .liczba{
	background-color: #FFFBF8;
	border: 2.5px solid #B29783;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 40px;
	text-align: center;
	top:-16px;
	left:-16px;
}
#piata .zawartosc .rowone .jeden .liczba h4{
	font-family: "Faustina", serif; 
	color: #B29783;
	font-weight:700;
	font-size:20px;
	position: absolute;
	left:14px;
	bottom:10px;
}
#piata .zawartosc .rowone .dwa{
	position: relative;
}
#piata .zawartosc .rowone .dwa .liczba{
	background-color: #FFFBF8;
	border: 2.5px solid #B29783;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 40px;
	text-align: center;
	top:-16px;
	left:-16px;
}
#piata .zawartosc .rowone .dwa .liczba h4{
	font-family: "Faustina", serif; 
	color: #B29783;
	font-weight:700;
	font-size:20px;
	position: absolute;
	left:13px;
	bottom:10px;
}
#piata .zawartosc .rowone .trzy{
	position: relative;
}
#piata .zawartosc .rowone .trzy .liczba{
	background-color: #FFFBF8;
	border: 2.5px solid #B29783;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 40px;
	text-align: center;
	top:-16px;
	left:-16px;
}
#piata .zawartosc .rowone .trzy .liczba h4{
	font-family: "Faustina", serif; 
	color: #B29783;
	font-weight:700;
	font-size:20px;
	position: absolute;
	left:14px;
	bottom:10px;
}
#piata .zawartosc .rowtwo .cztery{
	position: relative;
}
#piata .zawartosc .rowtwo .cztery .liczba{
	background-color: #FFFBF8;
	border: 2.5px solid #B29783;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 40px;
	text-align: center;
	top:-16px;
	left:-16px;
}
#piata .zawartosc .rowtwo .cztery .liczba h4{
	font-family: "Faustina", serif; 
	color: #B29783;
	font-weight:700;
	font-size:20px;
	position: absolute;
	left:12px;
	bottom:10px;
}
#piata .zawartosc .rowtwo .piat img{
	max-width: 300px;
}
#piata .zawartosc .rowtwo .szesc{
	position: relative;
}
#piata .zawartosc .rowtwo .szesc .liczba{
	background-color: #FFFBF8;
	border: 2.5px solid #B29783;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 40px;
	text-align: center;
	top:-16px;
	left:-16px;
}
#piata .zawartosc .rowtwo .szesc .liczba h4{
	font-family: "Faustina", serif; 
	color: #B29783;
	font-weight:700;
	font-size:20px;
	position: absolute;
	left:14px;
	bottom:10px;
}
#piata .zawartosc .siedem p{
	max-width: 1400px;
}
#piata .zawartosc .siedem{
	position: relative;
}
#piata .zawartosc .siedem .liczba{
	background-color: #FFFBF8;
	border: 2.5px solid #B29783;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 40px;
	text-align: center;
	top:-16px;
	left:-16px;
}
#piata .zawartosc .siedem .liczba h4{
	font-family: "Faustina", serif; 
	color: #B29783;
	font-weight:700;
	font-size:20px;
	position: absolute;
	left:12px;
	bottom:10px;
}

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





/*-----------STOPKA----------------*/

#stopka{
	font-size:16px;
	color:white;
	background: linear-gradient(153deg,rgba(42, 123, 155, 1) 0%, rgba(36, 44, 119, 1) 100%);
	min-height:50vh;
}

#stopka .zawartosc{
	margin-top:24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap:64px;
	color:#888EC6;
	
}
#stopka .zawartosc .wrapper{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	overflow: hidden;
	text-align: start;
	color:white;
	margin-top:32px;
	gap:96px;
}
#stopka .zawartosc .wrapper #onecol{
	position: relative;
		width: min(100%, 470px);
	
	
}
#stopka .zawartosc .wrapper #onecol h2{
	font-size: 26px;
	margin-bottom: 34px;
	line-height: 125%;
}
#stopka .zawartosc .wrapper #onecol p{
	line-height: 145%;
	margin-bottom: 32px;
}
#stopka .zawartosc .wrapper #onecol .input{
	position: relative;
}
#stopka .zawartosc .wrapper #onecol .input input{
	padding:20px;
	padding-right:24px;
	border-radius: 14px;
	border: none;
	display:flex;
	width: min(100%,440px); 

}
#stopka .zawartosc .wrapper #onecol .input input:focus{
	decoration:none;
	border:none;
	outline: none;

}

#stopka .zawartosc .wrapper #onecol .input input::placeholder{
	font-family: "Work Sans", sans-serif;
	font-size:16px;
	font-weight:500;
	color:#A9a9a9;
}

#stopka .zawartosc .wrapper #onecol .input button{
	background-color:#ff7b4d ;
	border-radius: 14px;
	border:none;
	position:absolute;
	padding:18.5px;
	bottom:0px;
	left:337px;
	width: min(100%, 104px);

}
#stopka .zawartosc .wrapper #onecol .input button:hover{
	background-color:#FFA585;
	cursor: pointer;
	transition: 300ms ease-in;
}
#stopka .zawartosc .wrapper #onecol .input button i{
	color:white;
	font-size:24px;
	padding:0;
}
#stopka .zawartosc .wrapper #twocol{}

#stopka .zawartosc .wrapper #twocol p{
	margin-top:29px;
	line-height: 145%;
}
#stopka .zawartosc .wrapper #threecol{}
#stopka .zawartosc .wrapper #threecol ol li{
	margin-top:29px;
	width: 142px;
}
#stopka .zawartosc .wrapper #fourcol{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#stopka .zawartosc .wrapper #fourcol img{
	margin-bottom:64px;
}
#stopka .zawartosc .wrapper #fourcol .social{
	 color:#ff7b4d;
	font-size:36px;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap:32px;
	font-variant-position: normal;
}
#stopka .zawartosc .wrapper #fourcol .social i:hover{
	transition: 300ms linear;
	transform: scale(1.1);
	color:#FFA585;
	text-align: center;
	cursor: pointer;
}
#stopka .zawartosc{}
#stopka ol li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
	color:white;
  padding-bottom: 3px;
	
}
#stopka ol li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 0;
  background: white;
  transition: width 0.3s ease;
}
#stopka ol li a:hover::after {
	
  width: 100%;
}
#stopka ol li a:hover{
	font-weight: 500;
}

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




/*-------------------RWD------------------*/

@media all and (max-width:1256px){
	#trzecia .zawartosc .obrazki::after{
	content:'';
	position: absolute;
	height: 4px;
	width: 628px;
	background-color:#B29783;
	top:-42px
}
	#trzecia .zawartosc .obrazki .cztery .kropka::after{
	content:'';
	position: absolute;
	height: 61px;
	width: 4px;
	background-color:#B29783;
	top:-64px;
}

}
@media all and (max-width:1122px){
	#piata .zawartosc .rowtwo .piat{order:6;}
	#piata .zawartosc .rowtwo{}
}
@media all and (max-width:1000px){
	nav{
		display:none;
	}
	.burger{display:block;}
	#stopka .zawartosc .wrapper #onecol .input button{left:338px;}
	
}
@media all and (max-width:943px){
	#trzecia .zawartosc .obrazki::after{
	content:'';
	position: absolute;
	height: 4px;
	width: 316px;
	background-color:#B29783;
	top:-42px
}
	#trzecia .zawartosc .obrazki .trzy{
		order:4;
	}
	#trzecia .zawartosc .obrazki .cztery{
	position: relative;
}
	#trzecia .zawartosc .obrazki .cztery .kropka{
	width: 40px;
	height: 40px;
	background-color: #FFFBF8;
	border: 4px solid #B29783;
	border-radius: 40px;
	position: absolute;
	top:100px;
	left:216px;
	display: flex;
	justify-content: center;
	align-items: center;
}
	#trzecia .zawartosc .obrazki .cztery .kropka::after{
			content:'';
			position: absolute;
			height: 4px;
			width: 44px;
			background-color:#B29783;
			top:14px;
			left:32px;
}
	#trzecia .zawartosc .obrazki .trzy .kropka{
	width: 40px;
	height: 40px;
	background-color: #FFFBF8;
	border: 4px solid #B29783;
	border-radius: 40px;
	position: absolute;
	top:100px;
	left:-18px;
	display: flex;
	justify-content: center;
	align-items: center;
}
	#trzecia .zawartosc .obrazki .trzy .kropka::after{
	height: 0px;
}
	#trzecia .zawartosc .obrazki .dwa .kropka:nth-child(2){
		width: 40px;
		height: 40px;
		background-color: #FFFBF8;
		border: 4px solid #B29783;
		border-radius: 40px;
		position: absolute;
		top:218px;
		left:100px;
		display: flex;
		justify-content: center;
		align-items: center;
	
}
	#trzecia .zawartosc .obrazki .dwa .kropka:nth-child(2)::after{
		height: 46px;
		width:4px;
		top:32px;
	
}
	#trzecia .zawartosc .obrazki .trzy .kropka:nth-child(2){
		top:-18px;
		left:101px;
	}
	
	#czwarta{
	background: url("../img/zasob4.png");
	background-color: #FFE9D6;
	background-size: cover;
	background-size: 130%;
	background-repeat: no-repeat;
	background-position: -180% 50%; ;
	}
}

@media all and (max-width: 800px){
	h1{font-size: 40px;}
	p{font-size: 16px;}
 	.zawartosc{flex-direction: column; display: flex;  justify-content: center;
	max-width: 400px;}
	
	#pierwsza .zawartosc .right .mobile-only{
		margin-top:72px;;
    	display: block;
		background: linear-gradient(270deg, #FF7B4D, #FFD7B8, #FF7B4D);
  		background-size: 600% 600%;
		border: none;
		padding: 24px 60px;
		font-size:24px;
		font-family:"Work Sans", sans-serif;
		font-weight:600;
		color:white;
		border-radius: 1rem;
		transition: 300ms;
		
  	}
	#pierwsza .zawartosc .right .mobile-only:hover{
	cursor:pointer;
	transform: scale(1.03);
	transition: 300ms;
	animation: gradientShift 5s infinite;
	animation-timing-function: ease-in-out;
}
	#pierwsza .zawartosc .left .desktop{
		display:none;
	}
	#pierwsza .zawartosc .left button{display: flex; order:2;}
	#pierwsza .zawartosc img{display: flex; width: 80%;}
	#pierwsza .zawartosc h1{margin-top:120px;}
	#pierwsza .zawartosc {
		display: flex;
		justify-content: center;
	}
	#pierwsza .zawartosc .right{
		padding-bottom: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top:-30px;}
	#druga{scroll-margin-top: 0px;}
	#druga .zawartosc{
		display: flex;
		justify-content: center;
		gap:40px;}
	#druga .zawartosc .left{
		display: flex;
		justify-content: center;}
	#druga .zawartosc .left img{width: 80%; margin-top:48px;}
	#trzecia .zawartosc .text{ text-align: left;}
	#trzecia .zawartosc .obrazki::after{
	content:'';
	position: absolute;
	height: 4px;
	width:0px;
	background-color:#B29783;
	top:-42px;
}
	#trzecia .zawartosc .obrazki{margin-top:32px;}
	#trzecia .zawartosc .obrazki .jeden .kropka{
		top: 216px;
		left:101px;
	}
	#trzecia .zawartosc .obrazki .jeden .kropka::after{
		width: 0px;
	}
	#trzecia .zawartosc .obrazki .dwa .kropka{
		left:100px;
	}
	#trzecia .zawartosc .obrazki .dwa .kropka::after{
		height: 44px;
		top:-44px
	}
	#trzecia .zawartosc .obrazki .trzy{
		order:3;
	}
	#trzecia .zawartosc .obrazki .trzy .kropka{
		top:216px;
		left:100px;
	}
	#trzecia .zawartosc .obrazki .cztery{
		order:4;
	}
	#trzecia .zawartosc .obrazki .cztery .kropka{
		top:-20px;
		left:100px;
	}
	#trzecia .zawartosc .obrazki .cztery .kropka::after{
		height: 48px;
		width: 4px;
		top:-48px;
		left:14px;
	}
	#trzecia .zawartosc .obrazki .trzy .kropka::after{
		top:-45px;
	}
	#czwarta .zawartosc{
	display: flex;
	justify-content: space-between;
	gap:20px;
	margin-top:48px;
	margin-bottom:48px;}
	#czwarta{
		background: url("../img/zasob4.png");
		background-color: #FFE9D6;
		background-size: contain;
		background-size: 160%;
		background-repeat: no-repeat;
		background-position: -50% 20%; 
		}
	#czwarta .zawartosc .right{margin-top: 20px;}
	#czwarta .zawartosc .right .shrimp:nth-child(1){
		top:20px;
		width:60%;
	}
	#czwarta .zawartosc .right .shrimp:nth-child(2){
		width:60%;
		top:40px;}
	#czwarta .zawartosc .right{margin-top: 0px;}
	#piata .zawartosc .rowone{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 32px;
		gap:32px;
	}
	#piata .zawartosc .rowtwo{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap:32px;
	}
	#piata .zawartosc .siedem{
		display:flex;
		justify-content: center;
		margin: auto;
		max-width: 340px;
		margin-bottom:-20px;
	}
	#stopka .zawartosc .wrapper{display: flex;
		justify-content: center;
		text-align: center;}
	#stopka .zawartosc .wrapper #onecol{}
	#stopka .zawartosc .wrapper #onecol .input button{left:297px;}
	#stopka .zawartosc .wrapper #twocol{margin-right: 20px;margin-left: 20px;}
	
}
@media all and (max-width: 500px){
	#czwarta{
		background: url("../img/zasob4.png");
		background-color: #FFE9D6;
		background-size: contain;
		background-size: 150%;
		background-repeat: no-repeat;
		background-position: -50% 150%; 
		}
	
	#stopka .zawartosc .wrapper #onecol .input button{left:297px;}
}
@media all and (max-width: 400px){
	#stopka .zawartosc .wrapper #onecol .input button{left:218px;}
	#czwarta .zawartosc .right .shrimp:nth-child(2){
		left:120px;
		
	}
}
	@media all and (max-width: 320px){
	#stopka .zawartosc .wrapper #onecol .input button{left:218px;}
	#czwarta .zawartosc .right .shrimp:nth-child(2){
		left:100px;
		
	}

}/*------------------------------------*/



/*------------BACKGROUND---RWD---------------*/
@media all and (max-width:1500px){
	#druga{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -400% 40%;
	background-size: 90%;
}
}
@media all and (max-width:1500px){
	#druga{
		background-position: 230% 50%;
	background-size: 140%;
	}
}
@media all and (max-width:900px){
	#druga{
		background-position: 150% 50%;
	background-size: 180%;
	}
	#czwarta .zawartosc .right{
		
}
}
@media all and (max-width:800px){
	#pierwsza{
		background: none;
		background-color: #FFF9F3;
	}
	#druga{
		background: none;
		background-color: #FFE9D6;
	}
	#czwarta{
		background: none;
		background-color: #FFE9D6;
	}
}
@media all and (max-width:2275px){
	#pierwsza {
		background-position:170% 40%; ;
		background-size:84%;
	}
}@media all and (max-width:2075px){
	#pierwsza {
		background-position:280% 25%; ;
		background-size:90%;
	}
}
@media all and (max-width:1800px){
	#pierwsza {
		background-position: 660% 20%; ;
		background-size:96%;
	}
}
@media all and (max-width:1675px){
	#pierwsza {
		background-position: 660% -20%; ;
		background-size:96%;
	}
}
@media all and (max-width:1565px){
	#pierwsza {
		background-position:500% -110%; ;
		background-size:95%;
	}
}
@media all and (max-width:1565px){
	#pierwsza {
		background-position:-70% 10%; ;
		background-size:120%;
	}
}
@media all and (max-width:1355px){
		#pierwsza {
		background-position:-40% 20%; 
		background-size:130%;
	}
}
@media all and (max-width:1191px){
	#pierwsza{background-position:-10% 30%; 
		background-size:150%;
}
}
@media all and (max-width:1091px){
	#pierwsza{background-position:5% 25%; 
		background-size:170%;
}
}
@media all and (max-width:940px){
	#pierwsza{background-position:15% 15%; 
		background-size:180%;
}
}
@media all and (max-width:930px){
	#pierwsza{background-position:20% 20%; 
		background-size:190%;
}
	
}
/*------------------------------------*/