/****************** SETUP ********************/
* {
	border: 0; 
	margin: 0; 
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	box-sizing: border-box;
	text-decoration: none; 
}

body {     
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 14px;
	background: #fff;
	text-align: left;
	max-width: 100%;
	min-width: 320px;
	/*padding-bottom: 500px;*/
	/*opacity: 0;*/
}

	#showMenu {width: 115px;font-size: 18px;flex-direction: row-reverse;display: none;padding: 20px 20px;}
	#showMenu span {padding: 2px 10px 0 0;color: #bdbdbd;}
	#showMenu div{
		height: 3px; 
		width: 25px;
		border-radius: 1.5px;
		background: #467327;
		margin: 2px 0 5px;
	}

a {	color: #1f1f1f}
strong {font-weight: 600;}
h1, h2, h3 {font-weight: 500;}

.content {
	width: calc(100% - 40px);
	max-width: 1300px;
	display: flex;
}


.content-title {
	padding: 40px 0;
	font-size: 32px;
	letter-spacing: 1.6px;
	position: relative;
	color: #515151;	
}


.subpage-title {
	padding: 20px 0;
	font-size: 32px;
	letter-spacing: 1.6px;
	position: relative;
	color: #515151;	
}

.content-title-white {
	color: #fff;
}
	.content-title-white::after {
		content: "";
		width: 125px;
		height: 2px;
		background: #FFF;
		position:absolute;
		left: -150px;
		top: calc(50% - 1px);
	}
	.content-title-white::before {
		content: "";
		width: 125px;
		height: 2px;
		background: #FFF;
		position:absolute;
		right: -150px;
		top: calc(50% - 1px);
	}

	.content-title-dark::after {
		content: "";
		width: 125px;
		height: 2px;
		background: #64A126;
		position:absolute;
		left: -150px;
		top: calc(50% - 1px);
	}
	.content-title-dark::before {
		content: "";
		width: 125px;
		height: 2px;
		background: #64A126;;
		position:absolute;
		right: -150px;
		top: calc(50% - 1px);
	}

.button-dark {
	border-radius: 14px;
	background: #2B2B2B;
	color: #FFF;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 40px;
	margin-top: 20px;
	transition: background 0.5s;
}

.button-dark:hover {
	color: #fff !important;
	background: #73AA3B;
}

.button-green {
	border-radius: 14px;
	background: #73AA3B;
	width: 215px;
	height: 45px;
	flex-shrink: 0;
	padding: 10px 20px;
	font-size: 14px;
	color: #fff;
	transition: background 0.5s;
	font-weight: bold !important;
}
.button-green:hover {
	color: #fff !important;
	background: #2B2B2B;
}
.remove-after::after {
	display: none;
}

#card {
	width: 100%;
	max-width: 425px;
	height: 540px;
}

#button-home {
	position: fixed;
	bottom: 50px;
	right: 50px;
	width: 120px;
	height: 60px;
	border-radius: 14px;
	background: #86b657;
	font-weight: bold;
	color: #fff;
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	line-height: 20px;
	z-index: 9999;
}
#button-home:hover {
	background-color: #2B2B2B;
}

/****************** HEADER ********************/
header {
	border-top: 6px #467327 solid;
	border-bottom: 4px #73AA3B solid;
	display: flex;
	width: 100%;
	justify-content: center;
}
	header .content {
		display: flex;
		justify-content: space-between;
		padding: 20px 0;
		align-items: center;
	}
			header .content nav a {
				padding: 10px 20px;
				font-size: 16px;
				font-weight: 500;
			}
			header .content nav a:hover {
				color: #73AA3B;
			}
			#logotyp img {
				width: auto;
				height: auto;
			}

/****************** ANIMACJA ********************/
#animation-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#animation-wrapper video{
	background-size: cover;
	height: 100%;
	width: auto;
	max-width: 100%;
}
/****************** OFERTA ********************/
#main-offer, #page-offer {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 400px;
	background: url(images/bg-kafelki.jpg) no-repeat top center;
	background-size: cover;
	padding: 25px 0;
}
#page-offer {
	margin-top: 20px;
	padding: 0;
}
	/*#main-offer::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 213px;
		background: url(images/bg-main-oferta.jpg) no-repeat top center;
		background-size: cover;
		z-index: -1;
	}*/
	#main-offer .content, #page-offer .content {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	#page-offer .content {
		padding: 25px 0 200px;
	}
		#main-offer-content {
			display: grid;
			grid-template-columns: repeat(3, calc(33.3% - 16.6px));
			grid-template-rows: auto;
			grid-gap: 25px;
			width: 100%;
		}
		.remove-after #main-offer-content {
			padding-top: 25px;
	}
			/************  BOX IN LIST  **********/
			.main-offer-boxWrapper {
				height: 170px;
				width: 100%;
				border-radius: 18px;
				border: 1px solid #979797;
				background: #FFF;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 10;
			}
			.main-offer-boxWrapper:hover {
				background: #f1f1f1 !important;
			}
			.open {
				justify-content: flex-start;
				align-items: flex-start;
				border-radius: 28px;
				border: none;
			}
			#kafel0{
				align-items: flex-start;
			}
			#kafel1{
				align-items: center;
			}
			#kafel2{
				align-items: flex-end;
			}
			#kafel3{
				align-items: flex-start;
			}
			#kafel4{
				align-items: center;
			}
			#kafel5{
				align-items: flex-end;
			}

			.main-offer-boxWrapper a {
				color: #131313;
			
			}

			.box-mainWrapper {
				border-radius: 18px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-direction: column;
				padding: 10px;
				height: 100%;
				width: 100%;
			}

			.bmw-open {
				border: 1px solid #979797;
				width: auto !important;
				height: auto !important;
				background: #FFF;
			}

			/************  BOX IN LIST  **********/


			.main-offer-box {
				height: 100%;
				width: 100%;
				flex-basis: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding-top: 20px;
			}
				.mob-open {
					border-radius: 18px;
					border: 1px solid #73AA3B;
					background: #73AA3B;
					padding-top: 0px;
				}
				.mob-open:hover {
					background: #629231;
				}
				
			.main-offer-box h3 {
				width: 100%;
				text-align: center;
				padding: 10px 10px 30px;
				font-size: 20px;
			}
			.mob-open h3 {
				color: #fff !important;
				padding: 10px 10px 10px;
			}

			.main-offer-subBoxWrapper {
				z-index: 10;
				flex-wrap: nowrap;
				padding: 10px 0 20px;		
				width: 100%;
				max-width: 90vw;
				position: relative;
				color: #626262; 
				font-weight: bold;
				box-sizing: border-box;
				align-items: flex-start;
				justify-content: flex-end;	
			}
			.main-offer-subBoxWrapper {display: none;}

			.main-offer-subSub {
				display: flex;
				flex-direction: column;
				grid-row: 1;
				padding: 0 5px;		
				align-items: flex-end;		
			}
			.main-offerSub-A {
				border-radius: 14px;
				border: 1px solid #E0E0E0;
				background: #F6F6F6; 
				width: 230px;
				margin-bottom: 10px;
			}
			.main-offerSub-A:hover {
				background: #e4e4e4; 
			}

			.main-offerSub-B {
				margin-left: 15px;
				border-radius: 14px;
				border: 1px solid #EBEBEB;
				background: #E4E4E4; 
				margin-bottom: 10px;
			}
			.main-offerSub-B:hover {
				background: #cfcfcf; 
			}

			.main-offerSub-C {
				margin-left: 50px;
				border-radius: 14px;
				border: 1px solid #E0E0E0;
				background: #D3D3D3; 
				margin-bottom: 10px;
				font-size: 12px;
			}
			.main-offerSub-C:hover {
				background: #bdbdbd; 
			}



			

			.main-offer-subBoxWrapper a{
				padding: 10px 25px;
				box-sizing: border-box;
				text-align: center;
				color: #626262; 
			}

			.main-offerSub-A h3{
				position: relative;
			}
			.main-offerSub-B h3{
				font-size: 14px;
				position: relative;
				width: auto;
			}


			.main-offer-boxWrapper .dis, .main-offer-boxWrapper .dis a {
				color: #ddd !important;
				border: 1px solid #dbdbdb;
			}
			
/****************** O FIRMIE ********************/
#main-about {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 50px 0 100px;
}
	#main-about .content {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
		#main-about-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		#main-about-content-left {
			width: 70%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			box-sizing: border-box;
			padding-right: 40px;			
		}
			#main-about-content-left img {
				width: 200px;
				margin-bottom: 20px;
			}
			#main-about-content-left p {
				line-height: 28px;
				padding-bottom: 20px;
			}

/****************** MAIN KONTAKT ********************/
#main-contact {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding-top: 50px;
	background: #F5F5F5;
}
	#main-contact .content {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
		#main-contact-content {
			display: flex;
			justify-content: space-between;
			padding-bottom: 50px;
			width: 100%;
		}
		#main-contact-content-left {
			width: 40%;
			text-align: right;
			font-size: 14px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			position: relative;
			box-sizing: border-box;
			padding-right: 40px;
		}
			#main-contact-content-left::after {
				content: "";
				right: 0;
				top: 0;
				bottom: 0;
				position: absolute;
				background: #CCC;
				width: 1px;
			}
				#main-contact-content-left h1 {
					font-size: 24px;
					width: 100%;
					padding: 10px 0;
				}
				#main-contact-content-left a {
					text-align: right;
					font-size: 16px;
					padding: 10px 0;
					position: relative;
				}
				#main-contact-email::after {
					background: url(images/ico-mail.svg) no-repeat center center;
					content: "";
					position: absolute;
					left: -30px;
					height: 24px;
					width: 24px;	
					top: 6px;		
				}
				#main-contact-tel::after {
					background: url(images/ico-phone.svg) no-repeat center center;
					content: "";
					position: absolute;
					left: -30px;
					height: 24px;
					width: 24px;	
					top: 6px;				
				}
				#main-contact-address::after {
					background: url(images/ico-location.svg) no-repeat center center;
					content: "";
					position: absolute;
					left: -30px;
					height: 24px;
					width: 24px;	
					top: 6px;		
				}
		#main-contact-content-right {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			width: 60%;
			box-sizing: border-box;
			padding-left: 40px;
			font-size: 16px;
		}
			#main-contact-formTitle {
				font-size: 24px;
				padding: 10px 0;
			}
				#contact-form-user {
					display: flex;
					justify-content: space-between;
					padding-top: 10px;
					max-width: 550px;
				}
					#contact-form-user div {
						display: flex;
						flex-direction: column;
					}
					#contact-form-user div input {						
						border-radius: 10px;
						border: 1px solid #DADADA;
						background: #F1F1F1;
						padding: 5px;
						width: 250px;
					}
					#main-contact-formInfo {
						color: #73AA3B;
						padding: 20px 0;
					}
				#contact-form-text {
					width: 100%;
					padding: 20px 0;
				}
				#contact-form-text textarea {
					width: 100%;
					max-width: 550px;			
					border-radius: 10px;
					border: 1px solid #DADADA;
					background: #F1F1F1;
					padding: 10px;
					min-height: 150px;;
				}
				
/****************** SUBPAGE ********************/
#subpage {
	display: flex;
	flex-direction: column;
	align-items: center;
}
	#subpage .content {
		flex-direction: column;
		align-items: center;
	}
		.subpage-title {
			text-align: center;	
			width: 100%;
			background: #73AA3B;	
			display: flex;
			justify-content: center;			
		}
			.subpage-title .content {
				align-items: flex-start !important;
			}
			.subpage-title .content div{
				position: relative;
				color: #fff;
				font-size: 36px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
			
			.subpage-title .content div::before {
				content: "";
				width: 60px;
				height: 2px;
				background: #FFF;
				position:absolute;
				right: -85px;
				top: calc(50% - 1px);
			}

		#subpage-content {
			border-radius: 14px;
			border: 1px solid #979797;
			background: #FFF;
			box-sizing: border-box;
			padding: 30px 40px;
			margin-top: 25px;
			width: 100%;
			flex-basis: 100%;
			flex-grow: 10;
		}
			#subpage-content p {
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 28px; 
				padding-bottom: 10px;
			}

			#subpage-content-title {
				color: #467327;
				font-size: 26px;
				font-weight: 600;
				position: relative;
				width: 100%;
				padding-bottom: 15px;
			}
			#subpage-content-title h1{
				color: #467327;
				font-size: 26px;
				font-weight: 600;
			}

				#subpage-content-title::after {
					background: #467327;
					content: "";
					width: 125px;
					height: 2px;
					position:absolute;
					left: 0;
					bottom: 0;
				}
				#subpage-content-desc {
					padding-top: 20px;
				}
					#subpage-content-desc a{
						font-weight: bold;
						color: #243b15;
						text-decoration: underline;
					}
					#subpage-content-desc a:hover{
						color: #467327;
					}



					#subpage-content-desc h2{
						padding: 10px 0 15px;
					}
					#subpage-content-desc p{
						color: #000;
						font-size: 16px;
						font-weight: 400;
						line-height: 34px;
						padding-bottom: 20px;
					}
					
					#subpage-content-desc ul{
						padding: 0px 0 15px 30px;
						list-style: none;
					}
						#subpage-content-desc ul li {
							padding: 8px 0;
							position: relative;
							font-size: 16px;
							font-weight: 400;
							line-height: 28px;
						}
						#subpage-content-desc ul li::after {
							background: #73AA3B;
							content: "";
							position: absolute;
							top: calc(50% - 4px);
							left: -20px;
							height: 8px;
							width: 8px;
							border-radius: 4px;
						}

			.page-projects-list {
				padding-top: 20px;							
				display: grid;
				grid-template-columns: repeat(3, calc(33.3% - 33.3px));
				grid-template-rows: auto;
				grid-gap: 50px;
				width: 100%;
				max-width: 100%;
				position: relative;
			}
				 .page-projects-list .projects-box {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					position: relative;
					padding-bottom: 10px;
					border-bottom: 1px #ececec solid;
				}
				
				.projects-box .projects-img-wrapper, .news-img-wrapper {
					width: 100%;
					height: 250px;
				}
				.projects-box .projects-img-wrapper img, .news-img-wrapper img {
					width: 100% !important;
					height: 100% !important;
					object-fit: cover !important;
				}
		#page-map {
			width: 100%;
			height: 500px;
		}
			#page-map iframe {
				width: 100% !important;
				height: 100% !important;
			}

		#list-offer {
			justify-content: flex-start;
			width: 100%;
			max-width: 1300px;
			display: flex;
			padding: 25px 0 0;
			position: relative;
				overflow: hidden;

		}
		
			#list-offer-wrapper {
				display: flex;
				height: 100%;
			}
			.list-offer-box {
				border-radius: 14px;
				border: 1px solid #D9D9D9;
				background: #FFF;
				box-sizing: border-box;
				padding: 15px 20px;
				max-width: 250px;
				margin-right: 25px;
				color: #4C4C4C;
				text-align: center;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: background 0.2s, color 0.2s, border 0.2s;
				flex-shrink: 0;
			}
			.list-offer-box:hover, .selected{
				border: 1px solid #73AA3B;
				background: #73AA3B;
				color: #fff;
			}



			#list-offer-arrows {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 110px;
				background: #fff;
				z-index: 10;
				box-sizing: border-box;
				padding-top: 25px;
				display: flex;
				justify-content: flex-end;
			}
				#list-offer-arrows div{
					border-radius: 14px;
					border: 1px solid #D9D9D9;
					background: #FFF;
					height: 100%;
					width: 45px;
					margin-left: 10px;
					position: relative;
					cursor: pointer;
				}

				
				#list-offer-right::after, #list-offer-right::before {
					content: "";
					height: 3px;
					width: 10px;
					background: #BABABA;
					position: absolute;
					border-radius: 2px;
					left: calc(50% - 6px);
					top: calc(50% - 1.5px);
					transform: rotate(45deg);
					transform-origin: bottom right;
					transition: background 0.2s;
				}
				#list-offer-right::before {
					transform: rotate(-45deg);
					transform-origin: top right;
				}

				#list-offer-left::after, #list-offer-left::before {
					content: "";
					height: 3px;
					width: 10px;
					background: #BABABA;
					position: absolute;
					border-radius: 2px;
					left: calc(50% - 4px);
					top: calc(50% - 1.5px);
					transform: rotate(45deg);
					transform-origin: top left;
					transition: background 0.2s;
				}
				#list-offer-left::before {
					transform: rotate(-45deg);
					transform-origin: bottom left;
				}
				#list-offer-right:hover::after, #list-offer-right:hover::before, #list-offer-left:hover::after, #list-offer-left:hover::before {
					background: #73AA3B;
				}

	

/****************** FOOTER ********************/

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #393939;
}
	footer .content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		#footer-left {
			display: flex;
			flex-direction: column;
		}
		#footer-contact-a {
			padding: 10px 0 10px 30px;
			box-sizing: border-box;
		}
			#footer-contact-email {
				position: relative;
				margin-right: 50px;
			}			
			#footer-contact-email::after {
				background: url(images/ico-mail.svg) no-repeat center center;
				content: "";
				position: absolute;
				left: -30px;
				height: 24px;
				width: 24px;	
				top: -3px;
			}			
			#footer-contact-tel {
				position: relative;
			}			
			#footer-contact-tel::after {
				background: url(images/ico-phone.svg) no-repeat center center;
				content: "";
				position: absolute;
				left: -30px;
				height: 24px;
				width: 24px;	
				top: -3px;			
			}
			#footer-contact-address {
				position: relative;
			}			
		#footer-contact-b {
			padding: 10px 0 10px 30px;
			box-sizing: border-box;
		}	
			#footer-contact-address::after {
				background: url(images/ico-location.svg) no-repeat center center;
				content: "";
				position: absolute;
				left: -30px;
				height: 24px;
				width: 24px;	
				top: -6px;		
			}
	#footer-right {
		display: flex;
		flex-direction: column;
		text-align: right;
	}		
		#footer-right nav {
			padding: 10px 0 40px;
			position: relative;
		}
		#footer-right nav::after {
			content: "";
			position:absolute;
			bottom: 0;
			right: 0;
			left: 40px;
			height: 1px;
			background: #D7D7D7;
		}
			#footer-right nav a {
				padding-left: 40px;
				color: #393939;
			}			
			#footer-right nav a:hover {
				color: #73AA3B;
			}
		#footer-copy {
			padding: 10px 0;
			color: #666;
		}
			#footer-copy p {
				padding: 10px 0;
				font-size: 12px;
			}
			#footer-copy p a {
				padding: 10px 0;
				color: #666;
			}

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

	@media all and (max-width:1200px) { 
		.main-offerSub-A {width: 210px;}
		.main-offerSub-B {width: 195px;}
		.main-offerSub-C {width: 160px;}
	}
	@media all and (max-width:1000px) { 
		.main-offerSub-A {width: 180px;}
		.main-offerSub-B {width: 165px;}
		.main-offerSub-C {width: 130px;}
		.main-offer-subBoxWrapper a{padding: 10px 15px;}
	}
	@media all and (max-width:950px) { 
		.main-offerSub-A {width: 160px;}
		.main-offerSub-B {width: 145px;}
		.main-offerSub-C {width: 110px;}
		.main-offer-subBoxWrapper a{padding: 10px 10px;}
		
	}
	@media all and (max-width:850px) { 
		.main-offerSub-A {width: 150px;}
		.main-offerSub-B {width: 135px;}
		.main-offerSub-C {width: 100px;}
		.main-offer-subBoxWrapper a{padding: 5px 5px;}
		#main-about-content {flex-direction: column;}
		#main-about-content-left {padding: 0px 0px 40px 0px;}
		#main-contact-content {flex-direction: column;align-items: center; justify-content: center;}
		#main-contact-content-left, #main-contact-content-right {padding: 20px 0;text-align: center;width: 100%;text-align: center;align-items: center;}
		#main-contact-content-left::after {display: none;}

		
		header .content 	{flex-direction: column;	}
	}

	@media all and (max-width:680px) { 
		footer .content {flex-direction: column;}
		#footer-right {text-align: center;}
		#main-offer-content {grid-template-columns: repeat(2, calc(50% - 16.6px));}
		.main-offer-subBoxWrapper {flex-wrap: wrap;}
		.main-offerSub-A {width: 180px;}
		.main-offerSub-B {width: 165px;}
		.main-offerSub-C {width: 130px;}

		#subpage-content-desc img {max-width: 70vw !important;height: auto !important;}
	}

	@media all and (max-width:600px) { 
		#showMenu			{display: flex;}
		header nav {display: flex;flex-direction: column;}		
		header nav a {text-align: center;padding: 15px 20px 10px !important;margin-bottom: 20px;}			
	}

	@media all and (max-width:480px) { 
		#card, #card img {max-width: 90vw;}
		#main-offer-content {grid-template-columns: repeat(1, 100%);}
		#animation-wrapper {display: none;}
		header .content {flex-direction: column;justify-content: center;padding: 40px 0;align-items: center;}
		#logotyp {padding-bottom: 30px;}
		#logotyp img{height: 60px;}
		#main-contact-content-right {padding: 20px; box-sizing: border-box;}
		#contact-form-user {max-width: 100%;flex-direction: column;width: 100%;}
		#contact-form-user form{max-width: 100%;width: 100%;}
	}
	@media (min-width:800px) and (max-width:1000px) { 
	}