/****************** SETUP ********************/
* {border: 0; margin: 0; padding: 0;
	font-family: "Mulish", sans-serif;
  	font-optical-sizing: auto;}

body {     
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 12px;
	color: #fff;
	background: #000000;
	text-align: left;
	max-width: 100%;
	min-width: 320px;
	/*opacity: 0;*/
}
a {	
	color: #fff;
	text-decoration: none; 
}
p {
	width: 100%;
	text-align: justify;
}
nav ul { list-style: none; }

.clr::after { clear: both; 
			content:"";}

h1 			{
	color: #FFF;
	font-family: Mulish;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 50px; /* 104.167% */	
}
h1 span 			{font-size: 24px;font-weight: normal;color: #bc9d5a;}
h2,h3,h4 	{font-size: 14px;font-weight: normal; }


.pl30 {padding: 0 0 10px 30px;}

/* wychodząca zawartość (#contentWrapper podczas swapu) */
#contentWrapper.htmx-swapping {
  opacity: 0;
  transition: opacity 150ms ease;
}

/* nowo dodane elementy – start z 0 i wejdź do 1 */
#contentWrapper .htmx-added {
  opacity: 0;
  animation: fadeIn 150ms ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}



/****************** BASIC CLASS ********************/
.main-container	{
	max-width: 1700px;
	width: calc(100% - 40px);
	margin: 0 auto;
	display: flex;
	box-sizing: border-box;
}
.main-container-extended	{
	width: 100%;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}
.container 	{display: flex;box-sizing: border-box;min-width: 200px;}


.box-half 	{flex-basis: 50%;min-width: 320px;box-sizing: border-box;}
.box-small	{flex-basis: 33.3%;float: left;box-sizing: border-box;}
.box-large	{flex-basis: 66.6%;float: left;box-sizing: border-box;}

.column-two {flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: stretch;padding-top: 40px;}
.column-two .footer-box, .column-two .box-news, .column-two .box-attachments {flex-basis: 50%;} 

.button-green {
	border-radius: 20px;
	background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 40px;
}
.button-green::after {
			content: "";
			border-radius: 20px;
			background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);
			position: absolute;
			top: 0;
			right: -60px;
			height: 40px;
			width: 40px;
			transition: right .2s;
			z-index: -1;
}
.button-green:hover::after {
			right: 0px;
}

.button-wrapper {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	justify-content: center;
	align-items: flex-start;
	height: 70px;
}
/****************** HEADER ********************/
	header {
		flex-wrap: wrap;
		background: #000;
		position: fixed;
		z-index: 10;
		height: 80px;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
		right: 0;
		transition: height 0.5s ease;
	}	
	header a{
		color: #fff;
	}
	
	header .main-container {
		justify-content: space-between;
		align-items: center;
		transition: height 0.5s ease;
	}
	#logotyp {
		padding: 10px 20px;
	}
	#logotyp img {
		max-width: 98vw;
	}

		nav {
			align-items: center;
			flex-wrap: wrap;
			height: 100%;
			
		}
			nav ul{
				flex-direction: row;
				align-items: center;
				height: 100%;
			}
			nav ul li a{
				font-size: 18px;
				height: 40px;
				position: relative;
				margin: 0 5px;
				padding: 0 25px;
			}
			nav ul li a:hover {color: #1B8984;font-weight: 600;}
			nav ul li:last-child a:hover {color: #fff;}

	header nav .button-green::after {display: none;}

	#showMenu {width: 25px;padding-right: 10px;font-size: 18px;display: flex;flex-direction: row-reverse;display: none;padding: 35px 20px;}
	#showMenu span {padding: 2px 10px 0 0;}
	#showMenu div{
		height: 3px; 
		width: 25px;
		border-radius: 1.5px;
		background: #1B8984;
		margin: 2px 0 6px;
	}

/****************** MAIN FRONT BOX ********************/

.fullWidth-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: url("images/bg_front.jpg") no-repeat top center;
	background-size: cover;
}
.box-front {
	min-height: 500px;
	padding: 300px 0 100px;
}
	.box-front-text {
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		max-width: 500px;
	}
		.box-front-text-big {
			font-size: 68px;
			font-style: normal;
			font-weight: 500;
			line-height: 72px; /* 105.882% */
		}
		.box-front-text-small {
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 28px; /* 175% */
			padding: 10px 0 20px;
		}
		.box-front-text-button{
			border-radius: 20px;
			background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			height: 40px;
			z-index: 1;
		}
		.box-front-text-button a{
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			padding: 0 20px;
			position: relative;
			z-index: 2;
		}
		.box-front-text-button::after {
			content: "";
			border-radius: 20px;
			background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);
			position: absolute;
			top: 0;
			right: -60px;
			height: 40px;
			width: 40px;
			transition: right .2s;
			z-index: 0;
		}

		.box-front-text-button:hover::after {
			right: 0px;
		}

/****************** STATS BOX ********************/
#main-stats {
	background: linear-gradient(180deg, #0E0E0E 0%, #171717 100%);
	padding-bottom: 50px;
}
#main-stats .main-container{
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.main-text-middle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 20px;
}
	.main-text-middle-green{
		color: #1B8984;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-align: center;
	}
	.main-text-middle-white{
		text-align: center;
		font-size: 36px;
		font-style: normal;
		font-weight: 600;
		line-height: 50px; /* 156.25% */
		padding: 10px 20px 20px;
		max-width: 760px;
	}
		.main-fourboxess {
			display: grid;
			grid-template-columns: repeat(4, calc(25% - 37.5px));
			grid-template-rows: auto;
			grid-gap: 50px;
			width: calc(100% - 30px);
			max-width: 1400px;
		}
			.fourboxess {
				border-radius: 20px;
				background: linear-gradient(180deg, #1A1A1A 0%, #262626 100%);
				box-sizing: border-box;
				padding: 20px 20px 70px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				position: relative;
			}
			.fourboxess:hover .fourboxess-button{
				border: 2px solid #1B8984;
			}
			.fourboxess:hover .fourboxess-number{
				font-size: 70px;
			}
			.fourboxess:hover .fourboxess-ico{
				filter: invert(43%) sepia(75%) saturate(458%) hue-rotate(128deg) brightness(88%) contrast(87%);
			}

			.fourboxess-button-wrapper {
				position: absolute;
				bottom: 20px;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				height: 50px;

			}


			.fourboxess-ico {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				width: 100%;
				transition: filter .2s;
			}
			.fourboxess-ico img {
				height: 70px;
				width: auto;
			}
			.fourboxess h3 {
				font-size: 22px;
				font-style: normal;
				font-weight: 600;
				line-height: 32px; /* 150% */
				padding: 20px 0;
				width: 100%;
			}
			.fourboxess-number {
				text-align: center;
				font-size: 86px;
				font-style: normal;
				font-weight: 200;
				line-height: 50px; /* 71.429% */
				padding: 30px 0 50px;
				width: 100%;
				transition: font-size .2s;
			}

			.fourboxess-button {
				border-radius: 20px;
				border: 2px solid #353535;
				height: 40px;
				padding: 0 40px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transition: border .5s;
				/**background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);**/
			}



			.fourboxess-button a {
				text-align: center;
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				line-height: 30px; /* 187.5% */
			}
		#disclaimer {
			color: #777575;
			text-align: center;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			padding: 40px 20px 0px;
			max-width: 700px;
			width: calc(100% - 30px);
		}

		#disclaimer a {
			color: #afadad;
			text-decoration: underline;
		}
/****************** ABOUT BOX ********************/
	#img_placeholder {
		width: 396px;
		height: 581px;
		flex-shrink: 0;
		border-radius: 20px;
		background: #1A6966;
	}
	#main-about {		
		position: relative;
		z-index: 1;
	}
	#main-about-bg {		
		position: absolute;
		z-index: 1;
		opacity: 1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;		
		background: url("images/bg_front.jpg") no-repeat top center #000;
		background-size: cover;
		background-color: rgba(0,0,0,.85);
		background-blend-mode: darken;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}
	#main-about .main-container {
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
		padding: 100px 0;
		position: relative;
		z-index: 2;
	}
	#about-right, #about-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		width: 50%;
		padding: 0 25px;
		box-sizing: border-box;
	}
	#about-right {
		justify-content: center;
		align-items: flex-start;
		height: 100%;
	}
	
		#about-green{
			color: #1B8984;
			font-size: 16px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			text-align: left;
		}
		#about-desc {
			font-size: 20px;
			font-style: normal;
			font-weight: 400;
			line-height: 34px; /* 170% */
			padding: 40px 0 60px;
			max-width: 500px;
		}
		#about-link .button-green {
			padding: 0 30px;
			font-size: 16px;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
		}

/****************** SERVICES BOX ********************/
#main-services {
	background: linear-gradient(180deg, #0E0E0E 0%, #171717 100%);
	padding: 50px 0 100px;
}
#main-services .main-container{
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
	#main-services .main-fourboxess .fourboxess:last-child, #main-subpage .main-fourboxess .fourboxess:last-child {
		background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%) !important;
	}

	#main-services .main-fourboxess .fourboxess:last-child .fourboxess-button, #main-subpage .main-fourboxess .fourboxess:last-child .fourboxess-button{
		background: linear-gradient(180deg, #1A1A1A 0%, #262626 100%);
		border: none;
	}



/***** SUBPAGE ********************************/
#main-subpage {
	background: linear-gradient(180deg, #0E0E0E 0%, #171717 100%);
	padding: 150px 0 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#main-subpage .main-container{
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}


	#main-subpage-title {
		display: flex;
		flex-direction: column;
		padding-bottom: 50px;
	}

	#main-subpage-title-green{
		color: #1B8984;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-align: center;
	}
	#main-subpage-title-white{
		text-align: center;
		font-size: 46px;
		font-style: normal;
		font-weight: 600;
		line-height: 60px; /* 156.25% */
		padding: 10px 20px 20px;
		max-width: 760px;
	}




#subpage-content {
	min-height: 60vh;
	width: 100%;
	max-width: 1200px;
}
	#subpage-content p {
		font-size: 18px;
		text-align: left;
		line-height: 38px;
		font-weight: 300;
		padding-bottom: 20px;
		color: #b1cfcd;
	}
	
	#subpage-content p strong {
		font-weight: 700;
	}
	#subpage-content ul {
		padding: 10px 0 20px 80px;
		list-style: none;
	}
		#subpage-content ul li{
			padding: 15px 0;
			font-size: 18px;
			position: relative;
			font-weight: 300;
		}
		#subpage-content ul li::after{
			content: "";
			width: 10px;
			height: 10px;
			border-radius: 5px;
			background: #1B8984;
			position: absolute;
			top: calc(50% - 5px);
			left: -50px;
		}
.stul {
	text-decoration: underline;
}
	#subpage-content p a{
			color: #1B8984;
			font-size: 14px;
			padding-left: 20px;
	}

	.faq-title {padding: 20px 0;display: flex;width: 100%;align-items: baseline;}
	.faq-title h3 {padding-left: 20px;font-size: 28px;}
	.faq-title span {font-size: 34px;color: #1b8984;font-weight: bold;}

	.about-person {width: 90%;max-width: 1000px;display: flex;padding: 40px 0;margin: 0 auto;align-items: center;}
	.about-person .about-img {width: 300px; height: 300px; border-radius: 150px;overflow: hidden;min-width: 300px;}
	.about-person .about-img img {width: 100%; height: auto;}

	.about-desc {padding: 0 0 20px 40px;}
		.about-title {padding-bottom: 20px;display: flex;align-items: baseline;}
		.about-title span {font-size: 18px;color: #1b8984;font-weight: bold;}
		.about-title h3   {font-size: 28px;font-weight: bold;padding-left: 10px;}



		
/****************** FOOTER ********************/
footer {
	background: #000;
	border-top: 5px #1A6966 solid;
	padding: 50px 0;
	color: #8b8b8b;
}

	footer .main-container{
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

		#footer-left {
			width: 240px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
			#footer-desc {
				padding: 10px 0 0;
			}
			#footer-left p {
				text-align: left;
				margin-bottom: 10px;
			}
			#footer-socials{
				display: flex;
				flex-direction: row;
			}
			#footer-socials a {
				height: 32px;
				width: 32px;
				border-radius: 10px;
				background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20px;
			}		
			#footer-socials a:last-child{margin-right: 0;}

		#footer-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}


			#footer-dane {
				padding-bottom: 20px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: first baseline;
			}	
			#footer-dane div {
				width: 180px;
			}	
			#footer-dane p{
				text-align: right;
				font-size: 12px;
				line-height: 18px;;
			}
			#footer-dane p strong{
				font-size: 16px;
			}
	
			#footer-creators p{text-align: right;}
header .main-container.menu-open {
  height: auto;
}
/****************** ICON BOX ********************/

	
/****************** RESPONISIVE RULES ********************/

	@media all and (max-width: 1300px) { 	
		.fourboxess .fourboxess-number {font-size: 70px;}
		.fourboxess:hover .fourboxess-number {font-size: 52px;}
	}
	
	@media all and (max-width: 1150px) { 	
		.fourboxess .fourboxess-number {font-size: 52px;}
		.fourboxess:hover .fourboxess-number {font-size: 38px;}
	}

	@media all and (max-width: 1000px) { 	
		.main-fourboxess {grid-template-columns: repeat(3, calc(33.3% - 33.3px));}
		#main-about .main-container {flex-direction: column-reverse;}
			#about-right, #about-left {width: 100%;}
			#about-right {padding-bottom: 40px;}
			#about-desc {max-width: 100%;}
		.fourboxess .fourboxess-number {font-size: 70px;}
		.fourboxess:hover .fourboxess-number {font-size: 52px;}
	}
	

	@media all and (max-width: 799px) { 	
		.main-fourboxess {	grid-template-columns: repeat(2, calc(50% - 25px));	}
		.fourboxess .fourboxess-ico{filter: invert(43%) sepia(75%) saturate(458%) hue-rotate(128deg) brightness(88%) contrast(87%);	}	
		footer .main-container {flex-direction: column;}	
			#footer-left {width: 100%;padding-bottom: 20px;align-items: center;}
			#footer-right {width: 100%;}
				#footer-left p {text-align: center;}
	}
	

	@media all and (max-width: 699px) { 	
		.main-fourboxess {grid-template-columns: repeat(2, calc(50% - 25px));}
		.fourboxess .fourboxess-ico{filter: invert(43%) sepia(75%) saturate(458%) hue-rotate(128deg) brightness(88%) contrast(87%);}

		header .main-container {align-items: flex-start;}
		#logotyp {padding: 20px;}
		#showMenu {display: flex;}
		header {height: auto;padding-bottom: 20px;overflow: hidden;height: auto;}
		header .main-container {height: auto;}	
		nav {flex-direction: column;align-items: flex-end;}
		nav ul {flex-direction: column;align-items: flex-end;}	
		nav ul li {text-align: right;padding: 5px 0;}
		nav ul li a {text-align: right;padding: 5px 20px;display: flex;}
	}


	@media all and (max-width: 550px) { 	
		.main-fourboxess {grid-template-columns: repeat(1, 100%);}
		.box-front-text-big {font-size: 50px;}
		.fourboxess .fourboxess-number {position: absolute;top: 10px;right: 20px;text-align: right;}
		#img_placeholder {max-width: 100%;}
		#footer-creators p {text-align: center !important;}
		#footer-dane {justify-content: center;align-items: center;width: 100%;}
		#footer-dane p {text-align: center !important;}	
		#main-services .fourboxess .fourboxess-ico {position: absolute;top: 15px;right: 15px;width: 70px;}
		.fourboxess h3 {padding-top: 0;}		
		.fourboxess-button {
			padding: 0 50px;
			background: linear-gradient(0deg, #1B8984 0%, #1A6966 100%);
			border: 0;
		}		
		.fourboxess:hover .fourboxess-button{border: 0;}
	}