/*! 
Theme Name: Pieczkowski Fussbodentechnik
Author: webkonditorei 
Author URI: https://webkonditorei.de 
Description: ACF + Tailwind Theme 
Version: 1.0.1 
Text Domain: pieczkowski
*/



html {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	font-size: 18px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Archivo', sans-serif;
	background-color: #fff;
	color: #262626;
}

/* Smooth Page Transition */
@view-transition {
	navigation: auto;
}

/* Load Font */
@font-face {
	font-family: "Archivo";
	src: url("./assets/fonts/Archivo/Archivo-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}


/* Lines */

.horizontal-line {
	width: 100%;
	height: 1px;
	background-color: #D9D9D9;
	display: block;
	position: relative;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	
}


@media(max-width: 767px) {

	.horizontal-line {
			height: 2px;
	
		}
}


@media(min-width: 1165px) {
	.hasborders {
			border-left: 1px solid #D9D9D9;
			border-right: 1px solid #D9D9D9;
		}
}


/* Buttons */

.button-container a, .button-container span {
	transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.button-container:hover a:nth-child(1), .button-container:hover span:nth-child(1) {
transform: translateY(-100%);
}

.button-container:hover a:nth-child(2), .button-container:hover span:nth-child(2) {
	bottom: 0%;
}





/* Desktop Nav */



.menu-item-has-children>a {
	pointer-events: none;
}

#main-header {
	transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;
}

.sticky-active {
top: -200px!important;
}

.sticky-active .hamburger.active {
	transform: none!important;
}

.menu-item, .menu-item a {
	position: relative;
	color: #262626;

}

.current-menu-parent > a, .current-menu-item > a{
	color: #800000;
}


.menu-item > a::before {
	content: '';
		width: 0%;
		height: 2px;
		background-color: #D9D9D9;
		position: absolute;
		bottom: -5px;
		left: 0%;
		transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
}

.menu-item:hover>a::before {
	width: 100%;
}


#menu-header-menue {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}



#menu-header-menue .sub-menu-wrapper {

	position: fixed;
		width: 1166px;
		max-width: 100%;
		left: 0;
		right: 0;
		top: -200vh;
		margin: 0 auto;
		z-index: 999;
		transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .5s;

}



#menu-header-menue .sub-menu {
		z-index: 99999;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: flex-start;
			gap: 20px;
			padding: 90px 30px 30px 30px;
			background-color: #fff;
}



#menu-header-menue .sub-nav-overlay {

	position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #262626;
		opacity: 0;
		visibility: hidden;
		transition: all ease-in-out .2s;
}


.subnavclose {
		position: absolute;
		top: 30px;
		right: 30px;
	}




		#menu-header-menue .activesub .sub-menu-wrapper {

		top: 0%!important;
		
	}

				#menu-header-menue		.activesub .sub-menu-wrapper .sub-nav-overlay {
					opacity: 0.95!important;
					visibility: visible!important;
				}



/* Mobile Nav */
@media(max-width: 1024px) {
	.menu-header-menue-container {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: #ffff;
		top: 0;
		left: -100vw;
		z-index: 999;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding-top: 100px;
		transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .6s;
	}

	.activenav.menu-header-menue-container {
		left: 0vw;
	}

	.sub-menu {
		flex-direction: column;
	}

	#menu-header-menue {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 25px;
		font-size: 20px;
	}

	.menu-item,
	.menu-item>a {
		z-index: 0;
		position: relative;
	}

	.activesub,

	.activesub .sub-menu {
		z-index: 99999999 !important;
		position: relative !important;
	}

	.activesub .sub-menu-wrapper {
		z-index: 9999999;
		height: 100vh;
		padding-bottom: 60px;
		overflow: scroll;
	}

		.subnavclose {
			left: 30px;
		}


}


/* Hamburger */


.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 35px;
	height: 25px;
	cursor: pointer;
	z-index: 9999;
	transition: all 0.2s ease-in-out;
}

.hamburger span {
	display: block;
	height: 2px;
	background-color: #262626;
	border-radius: 0px;
	transition: all 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
	transform-origin: top left;
}

.hamburger span:nth-child(3) {
	transform-origin: bottom left;
}

.hamburger.active span:nth-child(1) {
	transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg);
}

.hamburger.active {
	transform: translateY(-50px);
}


/* Footer Nav */


.mfooter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
}


/* Swiper */

.logoswiper .swiper-wrapper {
	transition-timing-function: linear!important;
}

.reviewswiper .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}


.logoswiper::before {
	position: absolute;
	content: '';
	width: 100px;
	left: -5px;
	top: 0;
	height: 100%;
	background: rgb(247, 247, 247);
		background: linear-gradient(90deg, rgba(247, 247, 247, 1) 12%, rgba(247, 247, 247, 0) 100%);
		z-index: 10;
}


.logoswiper::after {
	position: absolute;
	content: '';
	width: 100px;
	right: -5px;
	top: 0;
	height: 100%;
	background: rgb(247, 247, 247);
		background: linear-gradient(-90deg, rgba(247, 247, 247, 1) 12%, rgba(247, 247, 247, 0) 100%);
	z-index: 10;
}


.swiper-button-prevvv, .swiper-button-nexttt {
	transition: all ease-in-out .2s;
}

.swiper-button-prevvv:active,.swiper-button-nexttt:active  {
	transform: scale(0.9);
}


.buttonbg {
	transition: all ease-in-out .2s;
}


.swiper-button-disabled .buttonbg {
	fill: #686868;
}

.swiper-button-disabled:active {
	transform: scale(1)!important;
}


/* Lightbox */

.lightboxcontainer {
	background-color: rgba(38, 38, 38, 0.96);
	visibility: hidden;
	opacity: 0;
	transition: all ease-in-out .5s;
}


.lightboxtrigger > svg, .closebox > g > g {
	transition: all ease-in-out .2s;
	transform-origin: center;
}


.lightboxtrigger:hover svg {
	transform: scale(1.06);
}

.active-lightbox {
	visibility: visible!important;
	opacity: 1!important;
}


.closebox:hover > g > g {
	transform: rotate(10deg);
}



.floor-item svg {
	transition: all ease-in-out .2s;
}

.floor-item:hover svg {
	transform: translateX(5px);
}

.fancybox__thumbs {
	display: none;
}



/* Preloader */


.loader {
	width: 55px;
	aspect-ratio: 1;
	--g1: conic-gradient(from 90deg at top 3px left 3px, #0000 90deg, #800000 0);
	--g2: conic-gradient(from -90deg at bottom 3px right 3px, #0000 90deg, #800000 0);
	background:
		var(--g1), var(--g1), var(--g1), var(--g1),
		var(--g2), var(--g2), var(--g2), var(--g2);
	background-position: 0 0, 100% 0, 100% 100%, 0 100%;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	animation: l11 1.5s infinite;
}

@keyframes l11 {
	0% {
		background-size: 35px 15px, 15px 15px, 15px 35px, 35px 35px
	}

	25% {
		background-size: 35px 35px, 15px 35px, 15px 15px, 35px 15px
	}

	50% {
		background-size: 15px 35px, 35px 35px, 35px 15px, 15px 15px
	}

	75% {
		background-size: 15px 15px, 35px 15px, 35px 35px, 15px 35px
	}

	100% {
		background-size: 35px 15px, 15px 15px, 15px 35px, 35px 35px
	}
}





/* Toggle */


.hideit {
	opacity: 0;
	visibility: hidden;
	max-height: 0px;
	overflow: hidden;
}

.active-text {
	color: #800000;
}

#togglesquare {
	transition: all ease-in-out .2s;
}

.slideleft {
	left: 5px;
}

.slideight {
	right: 5px;
}


/* Gradient Overlay */


.blackgradient {
	background: linear-gradient(185deg, rgba(38, 38, 38, 0.00) 7.36%, #262626 109.63%);
}


@media(max-width: 768px) {
	.blackgradient {
		background: linear-gradient(188deg, rgba(38, 38, 38, 0.00) -102.93%, #262626 107.58%);
	}
}


/* Overlay Box */


.overlay-box {
	background-color: rgba(38, 38, 38, 0.9);
	transition: all ease-in-out .2s;
	opacity: 0;
}

.team-box:hover .overlay-box {
	opacity: 1;
}


/* Filter */


.filter-container select {
	background-color: #f7f7f7;
	padding: 17px 25px 17px 17px;
	cursor: pointer;
	-webkit-appearance: none;
	
	-moz-appearance: none;

	appearance: none;

}

.filter-container select + svg {
	transition: all ease-in-out .2s;
}

.filter-container select:hover + svg {
	transform: rotate(180deg);
}



.filter-container select:focus {
	border: none!important;

}


.loaderholder {
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: all ease-in-out .2s;
	transform: scale(0);
	
}

#filter-results {
	transition: all ease-in-out .2s;
}

.fadeout {
	opacity: 0;
}

.growloader {
	transform: scale(1);
}

 

/* FAQ */


.faq-content {
	transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .4s;
	max-height: 0px;
	overflow: hidden;
}

.faq-trigger svg {
	transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .4s;
}

.activeunfold svg {
	transform: rotate(45deg);
}

.activeunfold-content {
	max-height: 5000px;
}


.faq-content ul {
	list-style: inside;
	padding: 25px 0;

}

.faq-content ul li {
	color: #686868;

}



/* Form */
.form-container label,
.form-container legend {
	color: #6B6B6B !important;
}

.form-container input {
	border: none !important;
	box-shadow: none!important;
}

.form-container ul input::before {
	border-radius: 0px !important;
	border: none !important;
	box-shadow: none !important;
}

.form-container input[type=checkbox]:checked:after {
	border-color: #800000 !important;
}

.form-container textarea {
	border: none !important;
	box-shadow: none !important;
}


.form-container button {
	border-radius: 0px;
	background: #800000!important;
	padding: 20px 25px !important;
	height: auto !important;
}

.wpforms-submit-container {
	display: flex;
	justify-content: flex-end;
}


.wp-block-column {
	margin: 0 auto!important;
}

.wpforms-uploader .modern-title, .wpforms-uploader .modern-hint {
	display: none;
}


/* News Popup */

.blureffect {
	background-color: rgba(38, 38, 38, 0.95);
}


.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}


.bg-blurred {
	background: rgba(177, 176, 176, 0.35);
		backdrop-filter: blur(12.5px);
		
}