/*
Theme Name:		Sanitär Vogt
Theme URI: 		http://miggroup.ch
Version: 		1.07
Author: 		miggroup
Author URI: 	http://miggroup.ch
*/

@import "https://use.typekit.net/tja6ysl.css";
@import "assets/css/glightbox.css";

* {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}

*:first-child {
	margin-top: 0 !important;
}

*:last-child {
	margin-bottom: 0 !important;
}

html, body {
	overflow-x: hidden;
}

html {
	--box-spacing: 2em;
	--media-text-spacing: 2em;
	--entry-content-spacing: 4rem;
	--entry-content-side-padding: 2em;
	--gap: 2em;
}

html, body {
	font-size: 16px;
	line-height: 1.2;
}


@media (min-width: 650px) {
	html {
		--box-spacing: 7em;
		--media-text-spacing: 5em;
		--entry-content-spacing: 8rem;
		--entry-content-side-padding: 2em;
		--gap: 2em;
	}
}

@media (min-width: 1000px) {
	html, body {
		font-size: 18px;
		line-height: 1.2;
	}

	html {
		--box-spacing: 7em;
		--media-text-spacing: 5em;
		--entry-content-spacing: 8rem;
		--entry-content-side-padding: 2em;
		--gap: 2em;
	}
}


@media (min-width: 1200px) {
	html, body {
		font-size: 20px;
		line-height: 1.2;
	}

	html {
		--box-spacing: 7em;
		--media-text-spacing: 5em;
		--entry-content-spacing: 8rem;
		--entry-content-side-padding: 2em;
		--gap: 2em;
	}
}

@media (min-width: 1400px) {
	html, body {
		font-size: 21px;
		line-height: 1.2;
	}

	html {
		--box-spacing: 7em;
		--media-text-spacing: 5em;
		--entry-content-spacing: 8rem;
		--entry-content-side-padding: 2em;
		--gap: 2em;
	}
}

@media (min-width: 1600px) {
	html, body {
		font-size: 22px;
		line-height: 1.2;
	}

	html {
		--box-spacing: 7em;
		--media-text-spacing: 5em;
		--entry-content-spacing: 8rem;
		--entry-content-side-padding: 2em;
		--gap: 2em;
	}
}

.entry-content {
	margin-top: 0 !important;
	padding-left: var(--entry-content-side-padding) !important;
	padding-right: var(--entry-content-side-padding) !important;
}

.wp-block-group-is-layout-flex {
	gap: var(--gap);
}

.wp-block-media-text.is-style-stacked {
	display: block;
	border-radius: 0.9em;
}

.wp-block-media-text.is-style-stacked .wp-block-media-text__media {
	border-radius: 0.9em 0.9em 0 0;
	overflow: hidden;
}

.wp-block-media-text.is-style-stacked .wp-block-media-text__media img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	padding: 2em;
	box-sizing: border-box;
}

.wp-block-media-text.is-style-stacked .wp-block-media-text__content {
	padding: 1.5em 1.5em 3em 1.5em;
}

.wp-block-media-text:not(.is-style-stacked) .wp-block-media-text__content {
	padding-left: var(--media-text-spacing);
}

	@media (max-width: 600px) {

		.wp-block-media-text:not(.is-style-stacked) .wp-block-media-text__content {
			padding-left: 0 !important;
			padding-right: 0 !important;
			padding-top: 1em !important;
		}

	}

	.frontend .wp-block-media-text:not(.is-style-stacked) .wp-block-media-text__content {
		opacity: 0;
		transform: translateY(2em);
		transition: all 0.5s ease-in-out;
	}

		.frontend .wp-block-media-text.is-in-viewport:not(.is-style-stacked) .wp-block-media-text__content {
			opacity: 1;
			transform: translateY(0);
		}

.wp-block-media-text:not(.is-style-stacked).has-media-on-the-right .wp-block-media-text__content {
	padding-left: 0;
	padding-right: var(--media-text-spacing);
}

h2.small {
	font-size: 3.2em;
	line-height: 1.2;
}

.entry-content > .wp-block-group.alignfull {
	padding-top: var(--box-spacing);
	padding-bottom: var(--box-spacing);
}

.entry-content > .wp-block-group.alignfull {
	width: 100vw;
	margin-left: calc(var(--entry-content-side-padding) * -1);
	margin-right: calc(var(--entry-content-side-padding) * -1);
}

.entry-content > * {
	margin-top: var(--entry-content-spacing);
}

.intro {
	min-height: 100vh;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}


	.intro > .wp-block-group {
		width: 25em;
		max-width: calc(100% - 50vh - 4em) !important;
		margin-left: 0 !important;
		margin-right: auto;
		padding-top: calc(var(--box-spacing) * 1.5);
		padding-bottom: calc(var(--box-spacing) * 0.5);
	}

		@media (min-width: 1600px) {
			.intro > .wp-block-group {
				max-width: 45% !important;
			}
		}

	.intro h1 {
		font-size: 2em;
		list-height: 1.2;
		font-weight: 700;
	}

		@media (max-width: 650px) {
			.intro {
				min-height: unset;
			}
			.intro h1 {
				font-size: 2em !important;
			}
		}

		@media (min-width: 1600) {
			.intro h1 {
				font-size: 2.72em;
				list-height: 1.2;
			}
		}

	.intro + h2 {
		margin-top: 0 !important;
	}

	.intro .wp-block-video {
		position: absolute;
		height: 110vh;
		max-height: 80rem;
		aspect-ratio: 2 / 3;
		top: 0;
		right: 0;
		margin-top: 0 !important;
		border-radius: 0 0 9999px 9999px;
		z-index: -1;
		transform: rotate(21.4deg) translateY(-21.4%) translateX(20%);
		overflow: hidden;
	}

		@media (min-width: 1800px) {
			.intro .wp-block-video {
				transform: rotate(21.4deg) translateY(-30.4%) translateX(40%);
			}
		}

		.intro .wp-block-video video {
			width: 200%;
			height: 110%;
			object-fit: cover;
			top: 0;
			left: 50%;
			position: absolute;
			transform: translateX(-30%) translateY(-10%) rotate(-21.4deg);
		}

	@media (max-width: 850px) {
		.intro > .wp-block-group {
			max-width: 55% !important;
		}

		.intro .wp-block-video {
			transform: rotate(21.4deg) translateY(-30%) translateX(40%);
		}
	}

	@media (max-width: 650px) {

		.intro .wp-block-video {
			height: unset !important;
			width: 70%;
			aspect-ratio: 1 / 1;
			border-radius: 9999px;
			position: relative;	
			margin: 10em auto 0 auto !important;
			order: 0;
			transform: none;
		}

		.intro > .wp-block-video video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: none;
			top: 0;
			left: 0;
		}

		.intro > .wp-block-group {
			margin-top: 2em !important;
			max-width: 100% !important;
			padding-top: 0 !important;
		}

		.intro {
			display: flex;
			flex-flow: column wrap;
			gap: 0;
			padding-bottom: 4em !important;
		}

		.intro > * {
			order: 1;
		}

		.intro > .wp-block-group > * {
			order: 0;
		}
		
		
		
		
	}
		

h2 {
	margin-bottom: 1.5em !important;
}

h2.smaller {
	font-size: 3.1em !important;
	line-height: 1.2;
}

@media (max-width: 650px) {
	h2 {
		font-size: 2.5em !important;
		margin-bottom: 0.5em !important;
	}
	h2.smaller {
		font-size: 1.8em !important;
	}
}

.team {
	padding-top: 0 !important;
	margin-top: calc(var(--entry-content-spacing) * -0.25) !important;
	--gap: 2em;
	gap: var(--gap);
	align-items: flex-start;
	flex-flow: row wrap !important;
}

@media (max-width: 650px) {
	.team {
		margin-top: 2em !important;
	}
}

.team > * {
	width: calc(50% - calc(var(--gap) * 0.5));
}

	@media (min-width: 700px) {
		.team > * {
			width: calc(33.33% - calc(var(--gap) * 0.75));
		}
	}

	.team-member {

	}

		.team .team-member figure {
			margin-bottom: 1.5em !important;
		}

		.team .team-member figure img {
			background-color: #eee;
		}

		.team-member h3 {
			margin-top: 0 !important;
		}

		@media (min-width: 700px) {
			.team .team-member figure {
				margin-bottom: 2.5em !important;
			}
			
		}

.timeline {
	padding-top: 0 !important;
}

	.history-item {
		font-style: italic;
		max-width: 20em;
	}

		.history-item p.has-x-large-font-size {
			font-size: 7em !important;
			line-height: 1;
			font-weight: 800;
			font-style: normal;
		}

		@media (max-width: 650px) {
			.history-item p.has-x-large-font-size {
				font-size: 4em !important;
			}
		}
	
	.history-item + .history-item {
		margin-top: 12em;
		position: relative;
	}

	.history-item + .history-item::before {
		content: "";
		display: block;
		width: 0.5em;
		height: 7em;
		background-color: var(--wp--preset--color--primary);
		position: absolute;
		top: -9em;
		left: 50%;
		transform: translateX(-50%);
	}

		.frontend .history-item + .history-item::before {
			height: 0;
			transition: all 0.5s ease-in-out;
		}

		.frontend .history-item + .history-item.is-in-viewport::before {
			height: 7em;
		}

	.frontend .history-item {
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}

	.frontend .history-item.is-in-viewport {
		opacity: 1;
	}


	.testimonials {
		display: flex;
		flex-flow: row wrap;
		gap: var(--gap);
	}

	.testimonials > * {
		width: 100%;
	}

	@media (min-width: 500px) {
		.testimonials > * {
			width: calc(50% - calc(var(--gap) * 0.5));
		}
	}

	@media (min-width: 800px) {
		.testimonials > * {
			width: calc(33.33% - calc(var(--gap) * 0.75));
		}
	}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - calc(var(--entry-content-side-padding) * 2));
	z-index: 9999;
	padding-left: var(--entry-content-side-padding);
	padding-right: var(--entry-content-side-padding);
	transition: all 0.5s ease-in-out;
}	

	.is-scrolling header {
		background-color: #fff;
		box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
	}

	.is-scrolling.is-scrolling-down header {
		transform: translateY(-100%);
	}

	header > .wp-block-group {
		max-width: var(--wp--style--global--content-size);
		margin: 0 auto;
		padding-top: 2em;
		padding-bottom: 2em;
		transition: all 0.3s ease-out;
	}

	.is-scrolling header > .wp-block-group {
		padding-top: 1em;
		padding-bottom: 1em;
	}

	header .wp-block-site-logo img {
		width: 10.5em;
		height: auto;
		transition: all 0.3s ease-out;
	}

		.is-scrolling header .wp-block-site-logo img {
			width: 8em;
		}

	header > .wp-block-group:first-child {
		position: relative;
	}

	header .header-nav-toggle {
		cursor: pointer;
		width: 2.5em;
		height: 2.5em;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		overflow: hidden;
	}

		header .header-nav-toggle span {
			width: 100%;
			height: 0.27em;
			background-color: var(--wp--preset--color--primary);
			display: block;
			margin-bottom: 0.27em;
			transition: all 0.3s ease-out;
		}

		body.overlay-nav-open header .header-nav-toggle span {
			background-color: #fff;
		}

		header .header-nav-toggle span:first-child {
			margin-top: 0.75em !important;
		}

		body.overlay-nav-open header .header-nav-toggle span:first-child {
			transform: rotate(45deg);
			margin: 0 !important;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(45deg);
		}

		body.overlay-nav-open header .header-nav-toggle span:last-child {
			transform: rotate(-45deg);
			margin: 0 !important;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-45deg);
		}

	.frontend header .main-nav {
		/* opacity: 0;
		pointer-events: none;
		display: none; */
		position: absolute;
		height: 115vh;
		max-height: 85rem;
		aspect-ratio: 3 / 4;
		max-width: 200%;
		top: 0;
		right: 0;
		margin-top: 0 !important;
		border-radius: 0 0 9999px 9999px;
		z-index: -1;
		transform: rotate(21.4deg) translateY(-401.4%) translateX(200%) ;
		background: #46659D;
		background: linear-gradient(69deg, rgba(70, 101, 157, 1) 0%, rgba(143, 181, 224, 1) 50%, rgba(160, 196, 194, 1) 100%);
		color: #fff;
	}


		.frontend header .main-nav > * {
			transform: rotate(-21.4deg);
		}

		.frontend header .main-nav nav {
			position: absolute;
			left: 30%;
			top: 40%;
			font-weight: 700;
			font-size: 1.8em;
			line-height: 1.2;
		}

	.frontend.overlay-nav-open header .main-nav {
		opacity: 1;
		pointer-events: auto;
		display: block;
		transform: rotate(21.4deg) translateY(-21.4%) translateX(20%) ;
	}

footer {
	margin-top: var(--entry-content-spacing) !important;
}

	footer > .wp-block-group {
		padding-top: calc(var(--box-spacing) * 0.5);
		padding-bottom: calc(var(--box-spacing) * 0.8);
	}

	footer a {
		text-decoration: none
	}

	footer .logo-footer {
		width: 14em;
		height: auto;
		margin-bottom: 3em !important;
	}

	footer .is-phone, 
	footer .is-mail,
	footer .is-address {
		padding-left: 2.5em;
		position: relative;
	}
	
	footer .is-phone::before, 
	footer .is-mail::before,
	footer .is-address::before {
		content: "";
		display: block;
		width: 1.45em;
		height: 1.45em;
		background-image: url(assets/images/phone.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		left: 0;
		top: -0.1em;
	}

	footer .is-mail::before {
		background-image: url(assets/images/mail.svg);
	}

	footer .is-address::before {
		background-image: url(assets/images/address.svg);
	}
	

.references {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gap);
}

	.references > .wp-block-cover {
		aspect-ratio: 4 / 3;
		width: 100%;
		min-height: 0 !important;
	}

	@media (min-width: 700px) {
		.references > .wp-block-cover {
			width: calc(50% - calc(var(--gap) * 0.5));
		}
	}

	.references > .wp-block-cover .wp-block-cover__background {
		transform: scaleY(0);
		transform-origin: bottom;
		transition: all 0.35s ease-in-out;
	}

		.references > .wp-block-cover:hover .wp-block-cover__background {
			transform: scaleY(1);
		}

	.references > .wp-block-cover .wp-block-cover__inner-container {
		padding-left: 30%;
		padding-bottom: 2em;
		padding-right: 2em;	
		text-align: left !important;
		opacity: 0;
		transform: translateY(1em);
		transition: all 0.35s ease-in-out;
	}

		.references > .wp-block-cover:hover .wp-block-cover__inner-container {
			opacity: 1;
			transform: translateY(0);
		}

		.references > .wp-block-cover .wp-block-cover__inner-container * {
			text-align: left !important;
		}


.slider {

}

.slider .wp-block-group {
	width: 100%;
}

.flickity-page-dots {
	bottom: -3em !important;
}

@media (max-width: 650px) {
	.slider {
		margin-bottom: 2em !important;
	}
	.flickity-page-dots {
		bottom: -2em !important;
	}
}



.flickity-page-dots .dot {
	background-color: #fff !important;
}



@media (max-width: 500px) {
	

	footer .has-text-align-right {
		text-align: left !important;
	}
}