/* --------------------
Set root URL
for LESS compiling
-------------------- */
@base-url: "/wp-content/themes/blaeser/static";

// Breakpoints
@mobile-s: ~"(max-width: 325px)";
@mobile-m: ~"(max-width: 374px)";
@mobile-ml: ~"(max-width: 500px)";
@mobile-l: ~"(max-width: 768px)";
@tablet: ~"(max-width: 992px)";
@desktop-l: ~"(max-width: 1200px)";
@desktop-xl: ~"(max-width: 1400px)";
@desktop-xxl: ~"(max-width: 1600px)";
@desktop-xxxl: ~"(min-width: 1601px)";

/* --------------------
Imports
-------------------- */
@import "framework.less";
@import (less) "fancybox_v3.css";
@import (less) "bootstrap-grid.css";
@import "icons.less";
@import "slick.less";
@import "slick-theme.less";
@import "@{base-url}/cookies/_cookie-notice.less";

/* --------------------
Fonts
-------------------- */
.icons {
	font-family: "vm-fencing-systems" !important;
	content: attr(data-icon);
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: "opensans-regular";
	src: url("@{base-url}/styles/fonts/opensans-regular.ttf") format("truetype");
	font-style: normal;
}

@font-face {
	font-family: "opensans-semibold";
	src: url("@{base-url}/styles/fonts/opensans-semibold.ttf")
		format("truetype");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "opensans-bold";
	src: url("@{base-url}/styles/fonts/opensans-bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "opensans-extrabold";
	src: url("@{base-url}/styles/fonts/opensans-extrabold.ttf")
		format("truetype");
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "opensans-bold";
}

.nheader__main-nav .menu-item a {
	font-family: "opensans-extrabold";
}

/* --------------------
Colors
-------------------- */
@background: #1f1f1f;
@border: #e7e9ee;
@plain: #adadad;

@black: #222629;
@gray: #efefef;
@blue: #2546ae;
@purple: #66116d;
@dark-blue: #182859;

/* --------------------
General
-------------------- */
.block {
	display: block;
}
.inlineblock {
	display: inline-block;
}
.none {
	display: none;
}
.absolute {
	position: absolute;
}
.relative {
	position: relative;
}
.fixed {
	position: fixed;
}
.hidden {
	overflow: hidden;
}

/* --------------------
Body
-------------------- */
body {
	font-family: "opensans-regular";
	color: @plain;
	background: @background;
	&.lock {
		overflow: hidden;
	}
	a {
		text-decoration: none;
	}
	&:before {
		.fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		content: "";
		opacity: 0;
		visibility: hidden;
		z-index: 803;
		background: fade(@black, 80%);
		transition:
			opacity 0.25s ease,
			visibility 0.25s ease;
	}
	&:after {
		.fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		content: "";
		opacity: 0;
		visibility: hidden;
		z-index: 9990;
		.transition(all 0.2s ease);
	}
	&.dark {
		&:after {
			opacity: 1;
			visibility: visible;
			background: fade(@dark-blue, 80%);
			background: rgba(18, 0, 19, 0.8);
		}
	}
	&.dark-2019 {
		&:before {
			opacity: 1;
			visibility: visible;
		}
	}
	&.logged-in {
		background: #1f1f1f;
	}
}
p {
	font-size: 14px;
	line-height: 26px;
	color: @plain;
}

.editor {
	.fl;
	width: 100%;
	p {
		.fl;
		width: 100%;
		line-height: 28px;
		margin-bottom: 28px;
	}

	h1 {
		.fl;
		font-family: "opensans-bold";
		.relative;
		width: 100%;
		padding-top: 30px;
		width: 100%;
		max-width: 480px;
		font-size: 34px;
		text-transform: uppercase;
		color: @dark-blue;
		&:before {
			.absolute;
			width: 56px;
			height: 7px;
			background: @dark-blue;
			top: 0;
			left: 0;
			content: "";
		}
	}
	h3 {
		.fl;
		font-family: "opensans-bold";
		width: 100%;
		font-size: 18px;
		line-height: 28px;
		margin-bottom: 10px;
		color: @purple;
	}
	h4 {
		.fl;
		font-family: "opensans-bold";
		width: 100%;
		font-size: 16px;
		line-height: 26px;
		margin-bottom: 10px;
		color: @purple;
	}
	h5 {
		.fl;
		font-family: "opensans-bold";
		width: 100%;
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 10px;
		color: @purple;
	}

	ul {
		.fl;
		width: 100%;
		margin-bottom: 24px;
		li {
			.fl;
			width: 100%;
			font-size: 14px;
			line-height: 32px;
			color: @plain;
			border-top: none !important;
			&:before {
				.fl;
				width: 7px;
				height: 7px;
				background: @purple;
				content: "";
				margin: 13px 10px 0 0;
			}
			a {
				color: @purple;
			}
		}
	}

	&.big-italic {
		h1 {
			width: 100% !important;
			padding: 0 !important;
			max-width: 100% !important;
			margin-bottom: 20px !important;
			font-size: 26px !important;
			&:before {
				display: none !important;
			}
		}
		p {
			font-family: "opensans-semibold";
			font-size: 18px;
			font-style: italic;
		}
	}

	&.padding {
		padding: 40px 40px 0;
		.specifications {
			.fl;
			width: 100%;
			margin-bottom: 28px;
			.col-1-5 {
				padding: 10px 20px 20px;
				background: #e9ebef;
				border-right: 2px solid white;
				p {
					margin-bottom: 0;
				}
			}
			.col-4-5 {
				padding: 10px 20px 20px;
				background: #f3f6fb;
				p {
					margin-bottom: 0;
				}
			}
		}
	}
	&.contact-page {
		width: 50%;
		h1,
		h2 {
			.fl;
			padding-top: 0 !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			width: 100%;
			max-width: 480px;
			font-size: 28px !important;
			margin-bottom: 20px !important;
			&:before {
				display: none !important;
			}
		}
	}
	&.contact-form {
		margin-top: 50px;
		margin-bottom: 20px;
		h1,
		h2 {
			.fl;
			padding-top: 0 !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			width: 100%;
			max-width: 480px;
			font-size: 28px !important;
			margin-bottom: 20px !important;
			&:before {
				display: none !important;
			}
		}
	}
}

@media only screen and (max-width: 1024px) {
	.editor {
		&.padding {
			padding: 30px 20px 0;
		}
		&.contact-page {
			.contact-wrapper {
				p {
					font-size: 16px;
				}
			}
		}
	}
}
@media only screen and (max-width: 767px) {
	.editor {
		&.big-italic {
			p {
				font-size: 14px !important;
				line-height: 26px;
			}
		}
		h1 {
			&:before {
				top: 10px;
				height: 3px;
				width: 40px;
				left: 0;
			}
		}
	}
}

@media only screen and (max-width: 480px) {
	.editor {
		&.contact-page {
			width: 100%;
			margin-bottom: 20px;
			.contact-wrapper {
				margin-top: 0;
			}
		}
	}
}

/* --------------------
Buttons
-------------------- */
.button {
	.inlineblock;
	.ac;
	font-size: 16px;
	text-transform: uppercase;
	height: 44px;
	background: @purple;
	border: 2px solid @purple;
	color: white;
	padding: 0 30px;
	line-height: 40px;
	.border-radius(21px);
	&:hover {
		background: white;
		color: @purple;
		border: 2px solid white;
	}
	&.outline {
		background: none;
		&.white {
			border: 2px solid white;
			&:hover {
				background: white;
				color: @dark-blue;
			}
		}
	}
}

/* --------------------
Sections
-------------------- */
.section {
	.fl;
	.relative;
	width: 100%;
	z-index: 1;
	z-index: 801;
	.cntr {
		width: 100%;
		height: 100%;
		max-width: 1200px;
		margin: 0 auto;

		.right.col-1-2 {
			padding: 0 20px 0 40px;
		}
		.left.col-1-2 {
			padding: 0 20px;
			.module {
				margin-bottom: 28px;
			}
		}

		@media only screen and (max-width: 768px) {
			.right.col-1-2 {
				padding: 0 20px;
			}
		}

		@media only screen and (max-width: 640px) {
			.right.col-1-2 {
				width: 100%;
			}
			.left.col-1-2 {
				width: 100%;
			}
		}

		/* --------------------
		Product list
		-------------------- */
		.product-list {
			.fl;
			width: 100%;
			ul {
				.fl;
				width: 100%;
				li {
					.ac;
					padding: 20px;
					.inner {
						.fl;
						.relative;
						width: 100%;
						background: white;
						overflow: hidden;
						border-bottom: 2px solid darken(@gray, 5%);
						.border-radius(5px 5px 10px 10px);
						.image-wrapper {
							.fl;
							.relative;
							width: 100%;
							overflow: hidden;
							border-top: 5px solid @blue;
							.border-radius(5px 5px 0 0);
							p {
								.absolute;
								font-family: "opensans-bold";
								.ac;
								width: 100%;
								left: 0;
								top: 50%;
								margin-top: -7px;
								color: white;
								text-transform: uppercase;
								font-size: 14px;
								opacity: 0;
								visibility: hidden;
								.transform(translateX(-10px));
								.transition(all 0.35s ease-in-out);
							}
							img {
								.fl;
								width: 100%;
								max-height: 162px;
								height: auto;
							}
							&:before {
								.absolute;
								width: 500px;
								height: 500px;
								right: 0;
								bottom: -45px;
								background: @dark-blue;
								opacity: 0.9;
								content: "";
								-webkit-backface-visibility: hidden;
								.transform(rotate(30deg) translateX(-100%));
								.transition(all 0.3s ease-in-out);
							}
							&:after {
								.absolute;
								width: 65px;
								height: 135px;
								right: -30px;
								bottom: -45px;
								background: @dark-blue;
								opacity: 0.9;
								content: "";
								-webkit-backface-visibility: hidden;
								.transform(rotate(30deg) translateX(0));
								.transition(all 0.3s ease-in-out);
							}
						}
						h3 {
							.fl;
							.relative;
							font-family: "opensans-bold";
							width: 100%;
							font-size: 20px;
							text-transform: uppercase;
							padding: 27px 20px;
							color: @dark-blue;
							border-top: 1px solid @gray;
							&.small {
								font-size: 16px;
								line-height: 22px;
							}
							&:after {
								.absolute;
								.icons;
								color: white;
								font-size: 30px;
								width: 30px;
								height: 40px;
								right: 0;
								top: -40px;
								content: "c";
								.transition(all 0.2s ease-in-out);
							}
						}
						&:hover {
							.image-wrapper {
								p {
									opacity: 1;
									visibility: visible;
									.transform(translateX(0));
								}
								&:before {
									.transform(rotate(0deg) translateX(0));
								}
								&:after {
									.transform(rotate(0deg) translateX(100%));
								}
							}
							h3 {
								&:after {
									.transform(translateX(100%));
								}
							}
						}
						&.lock {
							.image-wrapper {
								p,
								&:before,
								&:after {
									.none;
								}
							}
						}
					}
				}
			}
		}
	}

	/* --------------------
	Page product
	-------------------- */
	&.products {
		padding: 90px 0;
		.cntr {
			max-width: 1200px;
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			h2,
			h1 {
				.fl;
				font-family: "opensans-bold";
				font-size: 30px;
				color: @dark-blue;
				text-transform: uppercase;
				padding: 0 20px;
				margin-bottom: 50px;
				&.tax-title {
					margin-bottom: 10px;
				}
			}
			.tax-h3 {
				.inlineblock;
				clear: left;
				width: 100%;
				margin-bottom: 40px;
				padding: 0 20px;
			}
			.term-desc {
				clear: both;
				padding: 0 20px;
				margin-top: -20px;
				margin-bottom: 20px;
				max-width: 70%;
				h1,
				h2,
				h3,
				h4,
				h5,
				h6 {
					.inlineblock;
					color: @dark-blue;
					width: 100%;
					padding: 0;
					margin-bottom: 10px;
					margin-top: 10px;
				}
				p {
					margin-bottom: 20px;
					a {
						color: @purple;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				ul,
				ol {
					margin-bottom: 20px;
					li {
						.relative;
						font-size: 14px;
						line-height: 32px;
						padding-left: 20px;
						a {
							color: @purple;
							&:hover {
								text-decoration: underline;
							}
						}
					}
				}
				ul {
					li {
						&:before {
							.absolute;
							top: 13px;
							left: 4px;
							width: 7px;
							height: 7px;
							background: @purple;
							content: "";
						}
					}
				}
				&.content-bottom {
					.inlineblock;
					margin-top: 40px;
				}
			}
		}
		.content {
			&.has-download {
				padding-left: 0;
			}
		}
	}

	@media only screen and (max-width: 1024px) {
		.product-list {
			ul {
				li {
					.col-1-3;
				}
			}
		}
	}

	@media only screen and (max-width: 768px) {
		.product-list {
			ul {
				li {
					.col-1-2;
				}
			}
		}
	}

	@media only screen and (max-width: 480px) {
		.product-list {
			ul {
				li {
					.col-1-1;
				}
			}
		}

		&.products {
			padding: 30px 0;
			.cntr {
				h2 {
					margin-bottom: 20px;
				}
				.term-desc {
					max-width: 100%;
				}
			}
		}
	}

	&.single-product-section {
		.cntr {
			.hidden;
		}
	}

	&.related-products {
		padding-bottom: 90px;
		background: @background;
		.cntr {
			h2 {
				.fl;
				font-family: "opensans-bold";
				font-size: 24px;
				color: @dark-blue;
				text-transform: uppercase;
				padding: 0 20px;
				margin-bottom: 20px;
			}
		}
	}
}

/* -------------
Sidebar front
------------- */
.sidebar {
	.absolute;
	right: 0;
	width: 340px;
	padding: 0 20px;
	&.taxonomy {
		margin-top: 128px;
	}
	&.is_stuck {
		right: ~"calc((100% - 1200px) / 2)";
	}
}

.content {
	.fl;
	width: 100%;
	padding-right: 340px;
	padding-left: 20px;
}

@media only screen and (max-width: 1200px) {
	.sidebar {
		&.is_stuck {
			right: 0px;
		}
	}
}

@media only screen and (max-width: 950px) {
	.sidebar {
		.relative;
		.fl;
		width: 100%;
		right: auto;
	}
	.content {
		padding: 0 20px;
	}
	.section {
		&.single-product-section {
			.cntr {
				padding-bottom: 0;
				&:after {
					.none;
				}
			}
		}
	}
}

@media only screen and (max-width: 480px) {
	.sidebar {
	}
	.content {
		margin-top: -30px;
		padding: 0;
		.module-blok {
			.inner-module {
				.border-radius(0);
			}
		}
	}
}

.module-blok {
	.fl;
	width: 100%;
	margin-bottom: 40px;
	.inner-module {
		.fl;
		.relative;
		width: 100%;
		overflow: hidden;
		border-bottom: 2px solid darken(@gray, 5%);
		border-top: 5px solid @blue;
		.border-radius(5px 5px 10px 10px);
		.inside {
			.fl;
			.relative;
			width: 100%;
			background: white;
			h2 {
				.fl;
				width: 100%;
				padding: 40px;
				color: @dark-blue;
				font-size: 20px;
				text-transform: uppercase;
				margin-bottom: 0;
			}
			.row {
				.fl;
				width: 100%;
				h3 {
					.fl;
					width: 100%;
					padding: 20px 40px;
					background: #e9ebef;
					color: @dark-blue;
					text-transform: uppercase;
					margin-bottom: 20px;
				}
				p {
					.fl;
					width: 100%;
					padding: 0 40px;
					margin-bottom: 20px;
					a {
						color: @plain;
						&:hover {
							color: @dark-blue;
						}
					}
					span {
						.fl;
						font-family: "opensans-bold";
						width: 75px;
						color: @dark-blue;
					}
					&.no-mb {
						margin-bottom: 0;
					}
				}
			}
		}
		ul {
			.fl;
			width: 100%;
			padding: 0;
			> li {
				.fl;
				width: 100%;
				border-top: 1px solid @gray;
				a {
					.fl;
					.relative;
					padding: 20px 40px 20px 70px;
					color: @plain;
					font-size: 14px;
					line-height: 24px;
					&:before {
						.fl;
						.absolute;
						.icons;
						left: 40px;
						font-size: 16px;
						margin-right: 15px;
						margin-top: 5px;
						content: "f";
						color: @dark-blue;
					}
					&:hover {
						color: @dark-blue;
					}

					&.disabled {
						pointer-events: none;
						&:before {
							content: "g";
						}
					}
				}
			}
		}
	}
	&.hu {
		.inner-module {
			.inside {
				.row {
					p {
						span {
							width: 100px;
						}
					}
				}
			}
		}
	}
	&.small {
		.inner-module {
			.inside {
				h2 {
					padding: 30px;
					text-transform: none;
				}
			}
			ul {
				> li {
					a {
						padding: 20px;
						padding-left: 60px;
						&:before {
							left: 30px;
						}
					}
				}
			}
			.button-wrapper {
				.fl;
				width: 100%;
				padding: 40px 20px 20px;
				border-top: 1px solid darken(@gray, 5%);
				.button {
					.fl;
					width: 100%;
					&:hover {
						border: 2px solid @purple;
					}
				}
				p.disclaimer {
					.fl;
					font-size: 12px;
					line-height: 20px;
					margin-top: 16px;
				}
			}
		}
		&.usp {
			.inner-module {
				.inside {
					ul {
						li {
							.relative;
							padding: 17px 20px 17px 60px;
							font-size: 14px;
							line-height: 24px;
							&:before {
								.absolute;
								left: 26px;
								top: 20px;
								width: 17px;
								height: 15px;
								content: "";
								background: url("@{base-url}/images/checked.svg")
									top left / 17px no-repeat;
							}
						}
					}
				}
			}
		}
		&.cta {
			z-index: 2;
			.inner-module {
				.button-wrapper {
					padding-top: 20px;
				}
			}
		}
	}
}

@media only screen and (max-width: 640px) {
	.module-blok {
		.inner-module {
			.inside {
				h2 {
					padding: 20px;
					font-size: 16px;
				}
				.row {
					h3 {
						padding: 20px;
					}
					p {
						padding: 0 20px;
					}
				}
			}
			ul {
				> li {
					a {
						padding: 20px;
						padding-left: 50px;
						&:before {
							left: 20px;
						}
					}
				}
			}
		}
		&.small {
			.inner-module {
				.button-wrapper {
					.button {
						font-size: 14px;
					}
				}
			}
		}
	}
}

.contact-wrapper {
	.fl;
	width: 100%;
	p {
		font-family: "opensans-semibold";
		font-size: 16px;
		line-height: 28px;
	}
	.buttons-wrapper {
		.fl;
		width: 100%;
		margin: 20px 0 20px;
		.button {
			.fl;
			.cb;
			text-transform: none;
			margin: 0 0 10px;
			&:before {
				.fl;
				margin-right: 10px;
			}
			&.icon-phone-mobile {
				&:before {
					font-size: 24px;
					margin-top: 9px;
				}
			}
			&.icon-email-envelope {
				&:before {
					margin-top: 12px;
				}
			}
		}
	}
}

@media only screen and (max-width: 767px) {
	.contact-wrapper {
		margin-top: 20px;
		p {
			margin-bottom: 0;
		}
		.buttons-wrapper {
			.button {
				.al;
				width: 100%;
				padding: 0 15px;
				margin: 5px 0;
				&.icon-phone-mobile {
					&:before {
						margin-left: -4px;
						margin-right: 5px;
						margin-top: 9px;
					}
				}
			}
		}
	}
}

.video-wrapper {
	.fl;
	.relative;
	height: 0;
	padding-bottom: 52.6%;
	width: 100%;
	overflow: hidden;
	margin-top: 60px;
	margin-bottom: 28px;
	.border-radius(5px);
	.video-thumb {
		.absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3;
		overflow: hidden;
		.border-radius(5px);
		.transition(all 0.2s ease-in-out);
		@media only screen and (max-width: 767px) {
			.none;
		}
		&:before {
			.absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: @dark-blue;
			opacity: 0.8;
			content: "";
			z-index: 4;
		}
		&:after {
			.absolute;
			.icons;
			.ac;
			font-size: 30px;
			line-height: 58px;
			color: white;
			width: 76px;
			margin-top: -28px;
			height: 56px;
			top: 50%;
			left: 50%;
			margin-left: -38px;
			background: @dark-blue;
			content: "e";
			z-index: 5;
			.border-radius(5px);
		}
		img {
			.absolute;
			width: 100%;
			height: auto;
			z-index: 2;
		}
		&:hover {
			opacity: 0;
			visibility: hidden;
		}
	}
	iframe {
		.absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}

.triggers {
	.fl;
	.ac;
	width: 100%;
	margin-bottom: 60px;
	.trigger-wrapper {
		.inlineblock;
		border: 2px solid #e4e4e4;
		.border-radius(5px);
		a {
			.relative;
			&:before {
				.absolute;
				background: #e4e4e4;
				top: 0;
				height: 100%;
				width: 100%;
				content: "";
				max-width: 0;
				z-index: -1;
				.transition(max-width 0.4s ease-in-out);
			}
			&:first-child {
				&:before {
					right: 0;
				}
			}
			&:last-child {
				&:before {
					left: 0;
				}
			}
		}
	}
	a {
		.fl;
		font-size: 14px;
		color: @black;
		padding: 20px;
		&:hover {
		}
		&.active {
			&:before {
				max-width: 100%;
			}
		}
	}
}

@media only screen and (max-width: 1024px) {
	.triggers {
		a {
			font-size: 12px;
			padding: 10px 8px;
		}
	}
}

@media only screen and (max-width: 480px) {
	.triggers {
		margin-bottom: 30px;
	}
}

.tab {
	.none;
	&.active {
		.block;
	}
}

/* --------------------
Error 404
-------------------- */
.error404 {
	h3 {
		margin-bottom: 20px;
		padding: 0 20px;
	}
	.home {
		.relative;
		padding-right: 20px;
		padding: 0 20px;
		&:before {
			.absolute;
			top: 5px;
			right: 0;
		}
	}
}

/* --------------------
WPCF7
-------------------- */
.wpcf7 {
	input,
	textarea,
	select,
	radio {
		font-family: "opensans-regular";
		width: 100%;
		font-size: 16px;
		padding: 10px 20px;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		border: 1px solid @border;
		.border-radius(4px);
		&:focus,
		&:active {
			border-color: darken(@border, 20%);
		}
	}
	textarea {
		resize: none;
	}
	button {
		border: 2px solid @purple;
		cursor: pointer;
		&:hover {
			border: 2px solid @purple;
		}
	}
	.wpcf7-form-control-wrap {
		.inlineblock;
		width: 100%;
		margin-bottom: 10px;
	}

	.screen-reader-response {
		.none;
	}
	.wpcf7-not-valid-tip {
		.inlineblock;
		font-size: 14px;
		color: #dd0000;
		padding-top: 4px;
		padding: 7px 0 0 20px;
		margin-bottom: 5px;
	}
	.wpcf7-response-output {
		.inlineblock;
		padding: 10px;
		font-size: 14px;
		line-height: 20px;
		.border-radius(4px);
		border: none;
		&.wpcf7-validation-errors {
			color: #dd0000;
			border: 2px solid #dd0000;
			margin-top: 10px;
		}
		&.wpcf7-mail-sent-ok {
			color: #25a700;
			border: 2px solid #25a700;
			margin-top: 10px;
		}
	}
}

/* --------------------
Reference
-------------------- */
.single-reference {
	.module-blok {
		.inside {
			.image-wrapper-main {
				height: 300px;
				img {
					.none;
				}
			}
		}
		.inner-module {
			.image-gallery {
				.inlineblock;
				width: ~"calc(100% + 20px)";
				margin-left: -10px;
				li {
					.fl;
					width: 33.3333%;
					padding: 0 10px;
					margin-bottom: 20px;
					&:before {
						.none;
					}
					a {
						.relative;
						.hidden;
						.inlineblock;
						width: 100%;
						height: 150px;
						border-top: 5px solid @blue;
						border-bottom: 2px solid darken(@gray, 5%);
						.border-radius(5px 5px 10px 10px);
						&:before {
							.absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							content: "";
							margin: 0 !important;
							background: fade(@dark-blue, 80%);
							opacity: 0;
							.transition(opacity 0.3s ease);
						}
						&:after {
							.absolute;
							width: 30px;
							height: 34px;
							left: 50%;
							top: 50%;
							content: "";
							opacity: 0;
							background: url("@{base-url}/images/zoom.svg") left
								top / 30px no-repeat;
							.transform(translateX(-50%) translateY(-50%));
							.transition(opacity 0.3s ease);
						}
						&:hover {
							&:before,
							&:after {
								opacity: 1;
							}
						}
					}
				}
			}
		}
		&.related-content {
			h3 {
				font-size: 18px;
				padding: 20px;
				color: @dark-blue;
			}
			.inner-module {
				border-top: 0;
				border-bottom: 0;
				margin-bottom: 40px;
				ul {
					> li {
						a {
							.inlineblock;
							width: 100%;
							&:before {
								.none;
							}
						}
					}
				}
			}
		}
	}
	@media only screen and (max-width: 640px) {
		.module-blok {
			.inner-module {
				.image-gallery {
					li {
						width: 50%;
					}
				}
			}
		}
	}
}

.fancybox-bg {
	background: darken(@dark-blue, 13%) !important;
}
.fancybox-slide {
	&--image {
		.fancybox-content {
			background: white;
			.fancybox-image {
			}
		}
		body.single-reference & {
			.fancybox-content {
				.fancybox-image {
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
			}
		}
	}
	@media only screen and (max-width: 640px) {
		&--image {
			.fancybox-content {
				.fancybox-image {
				}
			}
			body.single-reference & {
				.fancybox-content {
					.fancybox-image {
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}
}

.fancybox-thumbs {
	background: @black;
	a {
		&:before {
			border-color: @purple_dark_2019;
		}
	}
}

.fancybox-navigation {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99995;
}

/*
*
* Redesign 2019
*/

@purple_2019: #66116d;
@purple_dark_2019: #590f5e;
@backgr_dark: #3d3d3d;
@backgr_dark: #1f1f1f;
@text-white: fade(white, 60%);

body.new-vmf.subsite-3 {
	background: @backgr_dark;
}

.section {
	&--grey-bg {
		background: #f6f6f6;
		padding: 100px 0 80px 0;
	}
	@media only screen and (max-width: 640px) {
		&--grey-bg {
			padding: 40px 0 20px;
		}
	}
}

.container {
	&--medium {
		max-width: 1235px;
	}
	&--small {
		max-width: 900px;
	}
}

.nheader {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 901;
	border-bottom: 1px solid #d8d8d8;
	transition: transform 0.4s ease;
	body.new-vmf & {
		border-bottom: @black;
	}
	&.headroom--unpinned {
		transform: translateY(0px);
	}
	&__top {
		position: relative;
		background: #f6f6f6;
		z-index: 2;
		body.new-vmf & {
			background: @backgr_dark;
		}
	}
	&__top-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 56px;
	}
	&__part-of {
		color: fade(@black, 40%);
		font-size: 12px;
		line-height: 15px;
		body.new-vmf & {
			color: @text-white;
		}
	}
	&__lang-cont {
		flex-grow: 0;
	}
	&__lang {
		position: relative;
		display: flex;
		align-items: center;
		> p {
			font-size: 12px;
			line-height: 24px;
			color: fade(@black, 40%);
			margin-right: 24px;
			body.new-vmf & {
				color: @text-white;
			}
		}
	}
	&__bottom {
		position: relative;
		background: white;
		body.new-vmf & {
			background: black;
		}
	}
	&__bottom-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-height: 120px;
	}
	&__logo {
		display: flex;
		text-indent: -9999px;
		width: auto;
		max-width: 100%;
		height: 55px;

		svg {
			display: flex;
			text-indent: -9999px;
			width: auto;
			height: auto;
		}

		@media @desktop-xl {
			height: 48px;
		}
	}
	&__main-nav-col {
		flex-grow: 0;
	}
	&__main-nav {
		ul.menu {
			display: flex;
			align-items: center;
			gap: 40px;

			@media @desktop-xl {
				gap: 30px;
			}

			@media @desktop-l {
				gap: 0px;
			}
		}
		.menu-item {
			&.hide {
				display: inline-block;
			}
			&.hide-on-new {
				display: none;
			}
			a {
				font-family: "opensans-extrabold";
				display: flex;
				align-items: center;
				height: 120px;
				// padding: 0 10px;
				font-size: 16px;
				line-height: 1;
				color: black;
				text-transform: uppercase;
				transition: color 0.25s ease;
				white-space: nowrap;
				&:hover {
					color: fade(black, 60%);
				}
				body.new-vmf & {
					color: #f1f1f1;
				}
				// @media only screen and (max-width: 1120px) {
				// 	padding: 0 20px;
				// }
			}
			&.products-sub {
				position: relative;
				> a {
					position: relative;
					gap: 8px;
					// padding-right: 56px;
					&:after {
						position: relative;
						top: 0;
						right: 0;
						width: 12px;
						height: 8px;
						background: url("@{base-url}/images/chevron-black.svg")
							top left / 12px no-repeat;
						content: "";
						transition:
							transform 0.25s ease,
							color 0.25s ease;
						body.new-vmf & {
							background: url("@{base-url}/images/chevron-white.svg")
								top left / 12px no-repeat;
						}
					}
					&:hover {
						&:after {
							transform: rotate(180deg);
						}
					}
				}
				&:hover {
					> ul.sub-menu {
						opacity: 1;
						visibility: visible;
						transform: translateY(0);
					}
				}
			}
			&:last-child {
				> a {
					.nbutton;
					text-transform: none;
				}
			}
			> ul.sub-menu {
				position: absolute;
				display: flex;
				flex-flow: column nowrap;
				background: white;
				top: 120px;
				left: -20px;
				width: fit-content;
				transform: translateY(-20px);
				opacity: 0;
				visibility: hidden;
				transition: all 0.2s ease;
				padding: 0 40px 20px 20px;
				body.new-vmf & {
					background: black;
				}
				.menu-item {
					a {
						position: relative;
						height: 53px;
						text-transform: none;
						&:after {
							position: absolute;
							top: 22px;
							right: 0;
							width: 12px;
							height: 8px;
							background: url("@{base-url}/images/chevron-black.svg")
								top left / 12px no-repeat;
							transform: rotate(-90deg);
							opacity: 0;
							transition: all 0.25s ease;
							content: "";
							body.new-vmf & {
								background: url("@{base-url}/images/chevron-white.svg")
									top left / 12px no-repeat;
							}
						}
						body.new-vmf & {
							color: #f1f1f1 !important;
						}
					}
					&:hover {
						a {
							&:after {
								transform: rotate(-90deg) translateY(5px);
								opacity: 1;
							}
						}
					}
					&:last-child {
						margin-left: 0;
						border-bottom: 0;

						a {
							font-family: "opensans-extrabold";
							justify-content: flex-start;
							background: none;
							color: black;
							padding: 0 20px;
							&:hover {
								color: fade(black, 6%);
							}
						}

						@media @desktop-l {
							margin-top: 24px !important;
						}
					}
				}
			}
		}
	}
	#lang_sel {
		.fr;
		position: relative;
		color: @plain;
		width: auto;
		body.new-vmf & {
			color: white;
			&:before {
				background: darken(@backgr_dark, 3%);
			}
			ul {
				> li {
					a {
						position: relative;
						color: white;
						background-color: darken(@backgr_dark, 3%) !important;
						svg {
							position: absolute;
							width: 14px;
							height: 14px;
							top: ~"calc(50% - 7xp)";
							right: 20px;
							path {
								fill: fade(white, 80%);
							}
						}
					}
					ul {
						border-color: black;
						li {
							border-color: black;
							&:hover {
								a {
									svg {
										path {
											fill: fade(white, 20%);
										}
									}
								}
							}
						}
					}
				}
			}
		}
		&:before {
			position: absolute;
			left: 0;
			top: 0;
			width: ~"calc(((100vw - 1440px) / 2) + 100%) ";
			height: 100%;
			background: #ececec;
			content: "";
		}
		ul {
			.fl;
			> li {
				.fl;
				.relative;
				a {
					.fl;
					.relative;
					padding: 22px 25px 22px 52px;
					color: fade(@black, 40%);
					background-color: #ececec !important;
					font-size: 12px;
					border: 0;
					background: none;
					max-height: 56px;
					&:before {
						.absolute;
						left: 15px;
						top: 15px;
						width: 25px;
						height: 25px;
						background-image: url("@{base-url}/images/flags.png");
						background-repeat: no-repeat;
						background-size: 39px;
						content: "";
						transform: scale(0.8);
						.border-radius(50%);
					}

					&:after {
						.absolute;
						.icons;
						.ac;
						width: 14px;
						top: 50% !important;
						right: 0 !important;
						margin-top: -7px;
						font-size: 16px;
						content: "a";
						border: none !important;
					}
					&:hover {
						color: fade(@black, 70%);
					}
				}
				ul {
					.absolute;
					.none;
					background: @gray;
					right: 0;
					top: 56px;
					overflow: hidden;
					width: 190px;
					border-color: darken(@gray, 5%);
					li {
						width: 100%;
						border-top: 1px solid darken(@gray, 5%);
						&:first-child {
							border-top: none;
						}
						a {
							width: 100%;
							&:after {
								.none;
							}
							&:hover {
								color: @plain;
								background: darken(@gray, 5%);
							}
						}
					}
				}

				&:hover {
					ul {
						.block;
					}
				}
			}
		}
	}
	&__nav-toggle {
		display: none;
	}
	&--no-nav {
		.nheader__bottom-inner {
			height: 120px;
		}
	}
	@media only screen and (max-width: 1480px) {
		#lang_sel {
			&:before {
				width: ~"calc(100% + 20px)";
			}
		}
	}
	@media only screen and (max-width: 1280px) {
		&__main-nav {
			.menu-item {
				a {
					height: 86px;
					font-size: 14px;
				}
				&.products-sub {
					a {
						&:after {
							top: 0;
						}
					}
				}
				> ul.sub-menu {
					top: 86px;
				}
			}
		}
		&--no-nav {
			.nheader__bottom-inner {
				height: 86px;
			}
		}
	}
	@media @desktop-l {
		&.headroom--unpinned {
			transform: translateY(0px);
		}
		&__nav-toggle {
			position: absolute;
			top: 14px;
			right: 20px;
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			border: 0;
			background: none;
			z-index: 5;
			&.nheader__nav-toggle--open {
				.nheader__nav-toggle-inner {
					&:before {
						transform: rotate(-225deg);
						top: 5px;
					}
					&:after {
						transform: rotate(-135deg);
						bottom: 5px;
						max-width: 30px;
					}
				}
			}
		}
		&__nav-toggle-inner {
			position: relative;
			width: 30px;
			height: 12px;
			padding: 0;
			border: 0;
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			background: none;
			cursor: pointer;
			&:before,
			&:after {
				position: absolute;
				width: 100%;
				max-width: 30px;
				height: 2px;
				right: 0;
				background: #fff;
				content: "";
				transition:
					max-width 0.5s ease-in-out,
					background 0.3s ease-in-out,
					transform 0.5s ease-in-out,
					top 0.5s ease-in-out,
					bottom 0.5s ease-in-out;
			}
			&:before {
				top: 0;
				transform-origin: 50%;
			}
			&:after {
				bottom: 0;
				max-width: 25px;
			}
		}
		&__top-inner {
			height: 44px;
		}
		&__main-nav {
			position: fixed;
			padding: 0 20px;
			top: 68px;
			left: 0;
			width: 100%;
			height: 100%;
			height: ~"calc(100vh - 68px)";
			background: white;
			-webkit-overflow-scrolling: touch;
			transform: translateX(100%);
			transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
			body.new-vmf & {
				background: @backgr_dark;
			}
			&--open {
				transform: translateX(0);
			}
			&.headroom--unpinned {
				height: ~"calc(100vh - 57px)";
			}
			ul.menu {
				flex-flow: column nowrap;
				align-items: flex-start;
				margin-top: 10px;
				padding-bottom: 100px;
			}
			.menu-item a {
				height: 40px;
			}
			.menu-item {
				width: 100%;
				&.products-sub {
					a {
						&:after {
							display: none;
						}
					}
					.nheader__nav-trigger {
						position: absolute;
						top: 0;
						right: 10px;
						width: 40px;
						height: 40px;
						background: url("@{base-url}/images/chevron-black.svg")
							center center / 12px no-repeat;
						content: "";
						transition:
							transform 0.25s ease,
							color 0.25s ease;
						&--open {
							transform: rotate(180deg);
						}
					}
				}
				> ul.sub-menu {
					position: relative;
					overflow: hidden;
					left: auto;
					top: auto;
					opacity: 1;
					visibility: visible;
					transform: translateY(0);
					padding: 0 20px 0 20px;
					height: auto;
					max-height: 0;
					transition:
						max-height 0.5s ease,
						padding 0.5s ease;
					&--open {
						max-height: 900px;
						padding: 10px 20px 20px 20px;
						transition:
							max-height 0.8s ease,
							padding 0.8s ease;
					}
					.menu-item {
						a {
							height: 38px;
						}
						&:last-child {
							padding: 0;
						}
					}
				}
			}
		}
		&__bottom {
			z-index: 1;
		}
		&__bottom-inner {
			height: 68px;
		}
		/* &__logo {
			width: 180px;
			height: 34px;
			background-size: 180px;
			body.new-vmf & {
				background-size: 180px;
			}
		} */
		#lang_sel {
			ul {
				> li {
					a {
						max-height: 44px;
						padding: 16px 25px 15px 52px;
						&:before {
							top: 9px;
						}
					}
					ul {
						top: 44px;
						width: 100%;
					}
				}
			}
		}
		&--no-nav {
			.nheader__bottom-inner {
				height: 68px;
			}
		}
	}
	@media only screen and (max-width: 640px) {
		&__part-of {
			display: none;
		}
	}
}

.npage-header {
	z-index: 802;
	// margin-top: 120px;
	@media only screen and (max-width: 1400px) {
		&--detection-small {
			margin-top: 236px;
		}
	}
	@media only screen and (max-width: 1280px) {
		// margin-top: 86px;
		&--detection-small {
			margin-top: 202px;
		}
	}
	@media only screen and (max-width: 1000px) {
		// margin-top: 68px;
	}
}

.nheader-image {
	position: relative;
	overflow: hidden;
	float: left;
	width: 100%;
	max-width: 100%;
	height: 250px;
	transition: max-width 0.6s ease;
	&--detection-open {
		max-width: 100%;
	}
	body.home & {
		height: 500px;
		&:after {
			left: 60%;
			height: 100%;
			background-size: 2730px;
		}
		.header-content {
			padding-left: 20px;
		}
	}
	body.page-template-page-contact & {
		&:after {
			display: none;
		}
	}
	&__bg {
		position: absolute;
		min-width: 100vw;
		min-height: 100%;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 1;
		filter: grayscale(1);
	}
	&__content-container {
		height: 100%;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
	&__map-canvas {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	@media only screen and (max-width: 1480px) {
		body.home & {
			.header-content {
				padding: 0;
			}
		}
	}
	@media only screen and (max-width: 1400px) {
		body.home & {
			height: 520px;
			&:after {
				height: 520px;
			}
		}
	}
	@media only screen and (max-width: 1280px) {
		&--detection-open {
			max-width: ~"calc(100% - 310px)";
		}
	}
	@media only screen and (max-width: 1024px) {
		height: 250px;
		&:after {
			height: 100%;
			left: 80%;
		}
		body.home & {
			height: 300px;
			&:after {
				height: 100%;
				left: 80%;
			}
		}
		&--detection-open {
			margin-top: 120px;
			max-width: 100%;
		}
	}
	@media only screen and (max-width: 768px) {
		&:after {
			left: 86%;
		}
		body.home & {
			&:after {
				left: 86%;
			}
		}
	}
	@media only screen and (max-width: 640px) {
		height: 150px;
		&:after {
			height: 100%;
			left: 150%;
		}
		body.home & {
			height: 250px;
			&:after {
				height: 100%;
				left: 150%;
			}
		}
		&__bg {
			width: 120%;
		}
		&--detection-open {
			margin-top: 0;
		}
	}
}

.header-content {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	z-index: 3;
	max-width: 560px;
	body.home & {
		max-width: 670px;
		.header-content__title {
			font-size: 52px;
			line-height: 58px;
		}
	}
	&__subtitle {
		font-family: "opensans-semibold";
		font-size: 14px;
		line-height: 1;
		letter-spacing: 4px;
		color: fade(white, 50%);
		text-transform: uppercase;
		margin-bottom: 8px;
	}
	&__title {
		font-family: "opensans-extrabold";
		font-size: 52px;
		line-height: 1;
		color: white;
		text-transform: uppercase;
	}
	&__anchor {
		margin-top: 30px;
	}
	> .breadcrumbs {
		display: flex;
		flex-flow: column nowrap;
		> span {
			display: inline-block;
			> a {
				font-family: "opensans-semibold";
				display: inline-block;
				font-size: 14px;
				line-height: 1;
				letter-spacing: 4px;
				color: fade(white, 50%);
				text-transform: uppercase;
				margin-bottom: 8px;
				transition: color 0.25s ease;
				&:hover {
					color: white;
				}
			}
			> span {
				font-family: "opensans-extrabold";
				display: inline-block;
				font-size: 42px;
				line-height: 1;
				color: white;
				text-transform: uppercase;
				body.single & {
					font-size: 42px;
				}
			}
			&.span-1-3,
			&.span-2-3 {
				position: relative;
				padding-right: 30px;
				&:after {
					position: absolute;
					right: 10px;
					top: 4px;
					width: 11px;
					height: 9px;
					opacity: 0.5;
					content: "";
					background: url("@{base-url}/images/chevron-white.svg") top
						left / 10px no-repeat;
					transform: rotate(-90deg);
				}
			}
		}
		&--has-three {
			display: inline-block;
		}
	}
	@media only screen and (max-width: 1024px) {
		> .breadcrumbs {
			> span {
				> span {
					font-size: 42px;
				}
			}
		}
		&__title {
			font-size: 52px;
		}
	}
	@media only screen and (max-width: 768px) {
		body.home & {
			.header-content__title {
				font-size: 40px;
				line-height: 46px;
			}
			.header-content__anchor {
				margin-top: 20px;
			}
		}
		&__title {
			font-size: 40px;
		}
		&__anchor {
			margin-top: 20px;
		}
		> .breadcrumbs {
			> span {
				> span {
					font-size: 40px;
				}
			}
		}
	}
	@media only screen and (max-width: 640px) {
		body.home & {
			.header-content__subtitle {
				font-size: 12px;
			}
			.header-content__title {
				font-size: 24px;
				line-height: 30px;
			}
			.header-content__anchor {
				margin-top: 10px;
				transform: scale(0.7);
				transform-origin: 0 0;
			}
		}
		&__title {
			font-size: 24px;
		}
		&__anchor {
			margin-top: 10px;
			transform: scale(0.7);
			transform-origin: 0 0;
		}
		> .breadcrumbs {
			> span {
				> a {
					font-size: 12px;
				}
				> span {
					font-size: 24px;
				}
			}
		}
	}
}

.sub-menu-2019 {
	display: none;
}

.button-2019 {
	font-family: "opensans-bold";
	font-size: 16px;
	line-height: 18px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	padding: 0 36px;
	background: @purple_2019;
	color: white;
	transition:
		background 0.25s ease,
		color 0.25s ease,
		border 0.25s ease;
	&--white-ghost {
		background: none;
		border: 2px solid white;
		&:hover {
			background: white;
			color: @purple_2019;
		}
	}
	&--no-border {
		border: 0;
	}
}
button.button-2019 {
	cursor: pointer;
	border: 0;
}

.nbutton {
	font-family: "opensans-bold" !important;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	line-height: 18px;
	height: 60px;
	background: @purple_2019;
	color: white;
	padding: 0 40px;
	transition: background 0.25s ease;
	border: 0;

	&:hover {
		background: @purple_dark_2019;
	}

	&__chevron {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		right: -60px;
		width: 100%;
		max-width: 80px;
		height: 60px;
		background: @purple_dark_2019;
		transition: transform 0.25s ease;
		z-index: -1;
		> svg {
			transform: rotate(-90deg) translateY(10px);
		}
		&:after {
			position: absolute;
			top: 0;
			right: -28px;
			width: 0;
			height: 0;
			border-top: 30px solid transparent;
			border-left: 28px solid @purple_dark_2019;
			border-bottom: 30px solid transparent;
			content: "";
		}
	}
	&--with-chevron {
		display: inline-flex;
		align-items: center;
		font-size: 16px !important;
		color: white !important;
		text-decoration: none !important;
		&:hover {
			.nbutton__chevron {
				transform: translateX(20px);
			}
		}
	}
	&--contact {
		display: inline-flex;
		margin-bottom: 20px;
		color: white !important;
		text-decoration: none !important;
		font-size: 16px;
		line-height: 18px;
		padding-left: 70px;
		&:before {
			position: absolute;
			left: 30px;
			font-size: 25px;
		}
	}
	&--phone {
		&:before {
		}
	}
	&--mail {
		&:before {
			font-size: 18px;
		}
	}
	&--in-editor {
		display: inline-flex;
		color: white !important;
		text-decoration: none !important;
		&:after {
			position: absolute;
			top: 0;
			right: -28px;
			width: 0;
			height: 0;
			border-top: 30px solid transparent;
			border-left: 28px solid @purple_2019;
			border-bottom: 30px solid transparent;
			transition: border 0.25s ease;
			content: "";
		}
		&:hover {
			&:after {
				border-left: 28px solid @purple_dark_2019;
			}
		}
	}
	@media only screen and (max-width: 480px) {
		padding: 0 20px;
		&--contact {
			padding-left: 60px;
			&:before {
				left: 20px;
			}
		}
	}
}

.nheader__main-nav .menu-item:last-child > a {
	@media @desktop-l {
		height: 48px;
		margin-top: 14px;
	}
}

button.nbutton {
	cursor: pointer;
}

.country-detection-container {
	position: relative;
	z-index: 802;
	@media only screen and (max-width: 1400px) {
		position: absolute;
		left: 0;
		top: 176px;
		width: 100%;
		height: 60px;
		display: flex;
		body.single-product & {
			top: 0;
		}
	}
	@media only screen and (max-width: 1280px) {
		top: 142px;
	}
	@media only screen and (max-width: 1000px) {
		position: fixed;
		top: auto;
		bottom: 0;
		body.single-product & {
			top: auto;
		}
	}
}

.country-detection {
	position: absolute;
	top: 176px;
	right: 0;
	z-index: 802;
	transition: transform 0.6s ease;
	transform: translateX(-100%);
	transform: translateX(0);
	&__inner {
		display: flex;
		flex-flow: column nowrap;
		width: 280px;
		height: 500px;
	}
	&__block {
		text-align: center;
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 33.3333%;
		background: @black;
		&--is-button {
			border: 0;
			border-top: 1px solid fade(white, 20%);
			cursor: pointer;
			transition: background 0.25s ease;

			pointer-events: none;

			&:hover {
				background: black;
			}
			svg {
				margin-bottom: 20px;
			}
		}
		&--grey {
			background: #f1f1f1;
			padding: 0 20px;
		}
		&--inner {
			display: none;
		}
		body.new-vmf & {
			&--grey {
				background: black;
				> p {
					color: fade(white, 80%);
				}
			}
		}
	}
	&__marker {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 0;
	}
	&__small {
		font-family: "opensans-semibold";
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		font-size: 13px;
		line-height: 20px;
		color: fade(white, 80%);
		text-transform: uppercase;
	}
	&__italic {
		font-family: "opensans-regular";
		font-size: 14px;
		line-height: 24px;
		color: fade(@black, 80%);
		font-style: italic;
	}
	&__country {
		font-family: "opensans-extrabold";
		position: relative;
		font-size: 20px;
		line-height: 1;
		color: white;
		text-transform: uppercase;
		margin-top: 8px;
	}
	&__destination {
		font-family: "opensans-semibold";
		position: relative;
		font-size: 13px;
		line-height: 20px;
		color: white;
		text-transform: uppercase;
		text-decoration: underline;
		margin-top: 20px;
		&:hover {
			text-decoration: none;
		}
	}
	&__country-small,
	&__select-country-small {
		font-family: "opensans-semibold";
		position: fixed;
		left: 80px;
		height: 80px;
		padding: 0 40px;
		margin: 0;
		border: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 14px;
		line-height: 24px;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		z-index: 3;
		transition: background 0.25s ease;
		cursor: pointer;
		> svg {
			transform: rotate(90deg);
			margin-right: 16px;
		}
	}
	&__country-small {
		background: @black;
		bottom: auto;
		top: 676px;
		left: 0;
		transform: rotate(-90deg);
		transform-origin: left top;
		&:hover {
			background: darken(@black, 5%);
			.country-detection__select-country-small {
				background: @black;
			}
		}
		&--on-product {
			bottom: -500px;
		}
	}
	&__select-country-small {
		background: black;
		top: 676px;
		left: 0;
		transform: rotate(-90deg) translateX(-100%);
		transform-origin: left top;
		z-index: 4;
		&:hover {
			background: @black;
			.country-detection__country-small {
				background: darken(@black, 5%);
			}
		}
		&--on-product {
			bottom: -500px;
		}
	}
	@media only screen and (max-height: 1000px) {
		&__country-small,
		&__select-country-small {
			top: 596px;
		}
	}
	@media only screen and (max-width: 1400px) {
		&__country-small,
		&__select-country-small {
			position: relative;
			top: auto;
			left: auto;
			transform: rotate(0) translateX(0);
			width: 50%;
			height: 60px;
			&--on-product {
				bottom: auto;
			}
		}
		&__inner {
			height: 520px;
		}
	}
	@media only screen and (max-width: 1280px) {
		top: 142px;
		&--expanded {
			.country-detection__inner {
				width: 280px;
			}
			.country-detection__country {
				font-size: 20px;
			}
			.country-detection__block {
				&--grey {
					padding: 0 20px;
				}
			}
		}
	}
	@media only screen and (max-width: 1024px) {
		width: 100%;
		&--expanded {
			.country-detection__inner {
				width: 100%;
				height: 120px;
				flex-flow: row nowrap;
			}
			.country-detection__block {
				width: 33.3333%;
				height: 100%;
				&--is-button {
					border-top: 0;
					border-left: 1px solid fade(white, 20%);
				}
			}
		}
		&__small {
			font-size: 12px;
			line-height: 16px;
		}
		&__country {
			font-size: 18px;
			margin-top: 5px;
		}
		&__italic {
			font-size: 12px;
			line-height: 16px;
		}
		&__destination {
			font-size: 12px;
			line-height: 16px;
			margin-top: 10px;
		}
		&__marker {
			transform: translateX(-50%) translateY(-50%) scale(0.5);
		}
	}
	@media only screen and (max-width: 1000px) {
		top: 113px;
	}
	@media only screen and (max-width: 768px) {
		&__country-small,
		&__select-country-small {
			font-size: 12px;
			line-height: 18px;
			padding: 0 20px;
			> svg {
				min-width: 20px;
				margin-right: 5px;
			}
		}
	}
	@media only screen and (max-width: 640px) {
		display: none;

		&--expanded {
			.country-detection__small {
				font-size: 10px;
				line-height: 14px;
			}
			.country-detection__country {
				font-size: 16px;
			}
			.country-detection__destination {
				font-size: 11px;
				line-height: 14px;
			}
			.country-detection__block {
				width: 50%;
				&--grey {
					display: none;
				}
			}
		}
	}
	@media only screen and (max-width: 400px) {
		&__country-small,
		&__select-country-small {
			position: relative;
			padding-left: 40px;
			> svg {
				position: absolute;
				left: 10px;
				top: 10px;
			}
		}
		&__country-small {
			> svg {
				top: 21px;
			}
		}
		&__select-country-small {
			> svg {
				left: 20px;
				top: 19px;
			}
		}
	}
}

.country-selection {
	position: fixed;
	display: flex;
	left: 0;
	top: 176px;
	z-index: 803;
	width: 100%;
	background: #f1f1f1;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.4s ease;
	&.headroom--unpinned {
		transform: translateY(-56px);
	}
	&--open {
		opacity: 1;
		visibility: visible;
	}
	&__sites {
		display: flex;
		width: 50%;
	}
	&__sites-left,
	&__sites-right {
		display: flex;
		flex-flow: column nowrap;
		width: 50%;
	}
	&__site {
		&:last-child {
			.country-selection__site-anchor {
				border-bottom: 0;
			}
		}
	}
	&__site-anchor {
		font-family: "opensans-semibold";
		font-size: 14px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 82px;
		background: @black;
		color: #c0c1c5;
		padding: 0 64px;
		text-transform: uppercase;
		border-right: 1px solid #383c3f;
		border-bottom: 1px solid #383c3f;
		transition:
			background 0.25s ease,
			color 0.25s ease;
		> svg {
			transform: rotate(-90deg);
			path {
				transition: fill 0.25s ease;
			}
		}
		&:hover {
			background: @purple_2019;
			color: white;
			> svg {
				path {
					fill: white;
				}
			}
		}
		&--has-sub {
			position: relative;
			&:after {
				position: absolute;
				top: 0;
				right: -40px;
				width: 0;
				height: 0;
				border-top: 41px solid transparent;
				border-left: 40px solid @purple_2019;
				border-bottom: 41px solid transparent;
				transition: opacity 0.25s ease;
				opacity: 0;
				content: "";
			}
			&:hover {
				&:after {
					opacity: 1;
				}
			}
		}
		&--return {
			font-family: "opensans-bold";
			width: 100%;
			border: 0;
			background: none;
			color: @purple_2019;
			text-transform: none;
			justify-content: flex-start;
			background: #f1f1f1;
			cursor: pointer;
			> svg {
				margin-right: 15px;
				transform: rotate(90deg);
			}
		}
		&--country {
			font-weight: 400;
			background: none;
			border-right: 0;
			border-bottom: 0;
			text-transform: none;
			color: @black;
			&:hover {
				color: @purple;
				background: darken(#f1f1f1, 5%);
			}
		}
	}
	&__countries {
		position: relative;
		width: 50%;
	}
	&__countries-close {
		display: none;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 50px;
		height: 50px;
		padding: 0;
		border: 0;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: darken(#f1f1f1, 5%);
		> svg {
			transform: rotate(90deg);
		}
	}
	&__countries-list {
		position: absolute;
		left: 40px;
		top: 82px;
		width: ~"calc(100% - 80px)";
		opacity: 0;
		visibility: hidden;
		&--active {
			opacity: 1;
			visibility: visible;
		}
	}
	&__country {
		float: left;
		width: 50%;
	}
	@media only screen and (max-width: 1280px) {
		top: 142px;
		&__site-anchor {
			padding: 0 30px;
			height: 60px;
			&--has-sub {
				&:after {
					right: -30px;
					border-top: 30px solid transparent;
					border-left: 30px solid #6f1b74;
					border-bottom: 30px solid transparent;
				}
			}
		}
		&__countries-list {
			top: 60px;
		}
	}
	@media only screen and (max-width: 1000px) {
		top: 113px;
	}
	@media only screen and (max-width: 768px) {
		&__sites {
			width: 100%;
			transition: transform 0.5s ease;
			z-index: 2;
			&--open-sub {
				transform: translateX(-100%);
			}
		}
		&__site-anchor {
			font-size: 12px;
			padding: 0px 15px;
			&--has-sub {
				&:after {
					display: none;
				}
			}
		}
		&__countries {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		&__countries-close {
			display: flex;
		}
		&__countries-list {
			transform: translateX(30px);
			transition:
				transform 0.3s ease,
				opacity 0.3s ease,
				visibility 0.3s ease;
			&--active {
				transform: translateX(0);
				transition:
					transform 0.3s 0.6s ease,
					opacity 0.3s 0.6s ease,
					visibility 0.3s 0.6s ease;
			}
		}
	}
}

.neditor {
	font-family: "opensans-regular";
	font-size: 14px;
	line-height: 26px;
	color: fade(@black, 80%);
	body.new-vmf & {
		color: @text-white;
	}
	&.big-italic {
		padding: 40px;
		p {
			font-family: "opensans-semibold";
			font-size: 18px;
			line-height: 28px;
			margin-bottom: 20px;
			font-style: italic;
			color: fade(@black, 60%);
			body.new-vmf & {
				color: @text-white;
			}
		}
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: "opensans-bold";
		margin-bottom: 10px;
		body.new-vmf & {
			color: white;
		}
	}
	h1 {
		font-size: 20px;
	}
	h2 {
		font-size: 18px;
	}
	h3 {
		font-size: 16px;
		text-transform: uppercase;
	}
	p {
		margin-bottom: 20px;
	}
	p,
	a {
		font-family: "opensans-regular";
		font-size: 14px;
		line-height: 26px;
		color: fade(@black, 80%);
		body.new-vmf & {
			color: @text-white;
		}
	}
	a {
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
	ol,
	ul {
		margin-bottom: 20px;
	}
	ol li,
	ul li {
		position: relative;
		padding-left: 18px;
		&:before {
			position: absolute;
			left: 0;
			content: "";
		}
	}
	ul li {
		&:before {
			width: 8px;
			height: 12px;
			top: 7px;
			background: url("@{base-url}/images/chevron-purple-right.svg")
				center center / 100% no-repeat;
		}
	}
	ol {
		counter-reset: li-counter;
		li {
			&:before {
				font-family: "opensans-bold";
				color: @purple_2019;
				content: counter(li-counter);
				counter-increment: li-counter;
			}
		}
	}
}

.nform {
	.wpcf7 {
		.button {
			.nbutton;
			border-radius: 0;
		}
		input,
		textarea,
		select {
			font-size: 13px;
		}
	}
	body.new-vmf & {
		.wpcf7 {
			input,
			textarea,
			select {
				background: black;
				color: white;
				border: 1px solid black;
			}
		}
	}
}

.popular-products,
.nproducts {
	background: white;
	padding: 95px 0 55px 0;
	&__title {
		font-family: "opensans-extrabold";
		font-size: 30px;
		color: @black;
		text-transform: uppercase;
		margin-bottom: 12px;
	}
	&__intro {
		max-width: 830px;
		margin-bottom: 40px;
	}
	body.new-vmf & {
		background: @backgr_dark;
	}
	@media only screen and (max-width: 1024px) {
		padding: 55px 0 35px;
	}
	@media only screen and (max-width: 640px) {
		padding: 25px 0 0;
	}
}

.popular-product,
.nproduct {
	&__inner {
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 40px;
		&:hover {
			.popular-product__anchor,
			.nproduct__anchor {
				max-width: 80px;
			}
			.popular-product__image,
			.nproduct__image {
				border-color: rgb(197, 197, 197);
			}
		}
		&--is-image {
			position: relative;
			height: 0;
			padding-bottom: 100%;
			&:after {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: @purple_2019;
				opacity: 0;
				visibility: hidden;
				transition:
					opacity 0.25s ease,
					visibility 0.25s ease;
				content: "";
			}
			&:hover {
				&:after {
					opacity: 0.3;
					visibility: visible;
				}
			}
		}
	}
	&__image {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		padding-top: 30px;
		height: 330px;
		border: 1px solid #ebebeb;
		margin-bottom: 30px;
		transition: border 0.25s ease;
		overflow: hidden;

		.page-template-page-products &,
		.archive & {
			height: 268.75px;

			img {
				max-height: 160px;
			}
		}

		body.new-vmf & {
			background: #f1f1f1;
			background: white;
			border: 0;
		}
	}
	&__img {
		max-width: ~"calc(100% - 30px)";
		max-height: 230px;

		/*
		max-width: none;
	    max-height: none;
	    object-fit: cover;
	    width: 100%;
	    height: 100%;
	    filter: grayscale(100%);
*/
	}
	&__anchor {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 60px;
		height: 60px;
		background: @purple_2019;
		transition: max-width 0.25s ease;
		> svg {
			transform: rotate(-90deg);
		}
		&:after {
			position: absolute;
			top: 0;
			right: -28px;
			width: 0;
			height: 0;
			border-top: 30px solid transparent;
			border-left: 28px solid @purple_2019;
			border-bottom: 30px solid transparent;
			content: "";
		}
	}
	&__name {
		color: @black;
		line-height: 20px;
		margin-bottom: 12px;
		body.new-vmf & {
			color: #f1f1f1;
		}
	}
	&__description {
		color: @black;
		font-size: 14px;
		line-height: 26px;
		body.new-vmf & {
			color: #f1f1f1;
		}
	}
	&--download {
		body.new-vmf & {
			.nproduct__image {
				height: 250px;
				background: black url("@{base-url}/images/pdf-file.svg") center
					center / 50px no-repeat;
			}
		}
	}
	@media only screen and (max-width: 1280px) {
		&__image {
			height: 300px;
		}
	}
	@media only screen and (max-width: 640px) {
		&__image {
			height: 200px;
			margin-bottom: 15px;
		}
	}
}

.cta-section {
	padding: 0 0 0 0;
	background: white;
	body.new-vmf & {
		background: @backgr_dark;
	}
}

.cta {
	&__inner {
		display: flex;
		height: 680px;
	}
	&__left {
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		width: 47.2222%;
		height: 100%;
		background: @purple_2019;
		z-index: 2;
		padding: 40px;
		&:after {
			position: absolute;
			top: 0;
			right: -306px;
			width: 0;
			height: 0;
			border-top: 340px solid transparent;
			border-left: 306px solid @purple_2019;
			border-bottom: 340px solid transparent;
			content: "";
		}
	}
	&__title {
		font-family: "opensans-extrabold";
		font-size: 45px;
		line-height: 48px;
		color: white;
		text-transform: uppercase;
	}
	&__subtitle {
		font-family: "opensans-regular";
		font-size: 14px;
		line-height: 24px;
		color: fade(white, 80%);
		margin-top: 18px;
		max-width: 380px;
	}
	&__buttons {
		margin-top: 37px;
		display: flex;
	}
	&__button {
		margin-right: 20px;
	}
	&__right {
		position: relative;
		display: flex;
		width: 52.7777%;
		height: 100%;
	}
	&__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(1);
	}
	@media only screen and (max-width: 1024px) {
		&__inner {
			height: 450px;
		}
		&__left {
			padding-right: 0;
			&:after {
				right: -202px;
				border-top: 225px solid transparent;
				border-left: 202px solid @purple_2019;
				border-bottom: 225px solid transparent;
			}
		}
		&__title {
			font-size: 36px;
			line-height: 39px;
		}
	}
	@media only screen and (max-width: 900px) {
		&__buttons {
			flex-flow: column nowrap;
			a {
				margin-right: 0;
				&:last-of-type {
					margin-top: 10px;
					background: @purple_dark_2019;
				}
			}
		}
	}
	@media only screen and (max-width: 768px) {
		&__left {
			width: 55%;
			padding: 20px 0 20px 20px;
		}
		&__title {
			font-size: 28px;
			line-height: 30px;
		}
		&__right {
			width: 45%;
		}
	}
	@media only screen and (max-width: 640px) {
		&__inner {
			flex-flow: column nowrap;
			height: auto;
		}
		&__title {
			font-size: 24px;
			line-height: 26px;
		}
		&__subtitle {
			margin-top: 10px;
		}
		&__buttons {
			margin-top: 20px;
		}
		&__left {
			width: 100%;
			padding: 20px;
			order: 2;
			align-items: stretch;
			flex: 0 1 auto;
			&:after {
				display: none;
			}
		}
		&__left-content {
			display: flex;
			flex-flow: column nowrap;
		}
		&__right {
			order: 1;
			width: 100%;
			flex: 0 0 auto;
			height: 200px;
		}
		&__image {
			height: 200px;
		}
	}
}

.footer-2019 {
	background: @black;
	background: black;
	padding: 96px 0;
	margin-top: 0px;
	z-index: 801;
	@media only screen and (max-width: 1024px) {
		padding: 46px 0;
	}
	@media only screen and (max-width: 1000px) {
		margin-bottom: 60px;
		border-bottom: 1px solid black;
	}
}

.footer {
	&--no-margin {
		margin-top: 0;
	}
}

.logos-footer.logos-footer-2019 {
	display: inline-flex;
	width: 100%;
	margin: 0;
	margin-top: 0px;
	padding: 80px 0;
	background: white;
	.container {
		.logo-footer {
			display: flex;
			justify-content: center;
			img {
				max-height: 80px;
				max-width: 215px;
				align-self: center;
			}
		}
	}
	body.new-vmf & {
		background: @backgr_dark;
	}
	@media only screen and (max-width: 1024px) {
		padding: 20px 0;
		.container {
			.logo-footer {
				img {
					margin: 40px 0px 40px 0px;
				}
			}
		}
	}
	@media only screen and (max-width: 768px) {
		margin-top: 0;
		padding: 0;
		.container {
			.logo-footer {
				img {
					margin: 40px 0px 40px 0px;
				}
			}
		}
	}
	@media only screen and (max-width: 640px) {
		margin-top: 0px;
	}
}

.footer {
	&__nav-container {
		display: flex;
		justify-content: center;
		margin-bottom: 60px;
		> ul {
			display: flex;
		}
		li {
			&:last-of-type {
				a {
					margin-right: 0;
				}
			}
		}
		a {
			font-family: "opensans-bold";
			font-size: 16px;
			line-height: 1;
			color: white;
			text-transform: uppercase;
			margin-right: 40px;
			transition: color 0.25s ease;
			&:hover {
				color: fade(white, 60%);
			}
		}
	}
	&__logo {
		position: relative;
		display: flex;
		justify-content: center;
		margin-bottom: 75px;
		&:before,
		&:after {
			position: absolute;
			left: 0;
			top: 19px;
			width: ~"calc(50% - 56px)";
			height: 2px;
			background: fade(white, 10%);
			content: "";
		}
		&:after {
			left: auto;
			right: 0;
		}
	}
	&__logo-center {
		position: relative;
		display: flex;
		justify-content: center;
		width: 112px;
		height: 38px;
	}
	&__bottom {
		display: flex;
		justify-content: space-between;
		gap: 120px;
		@media @desktop-l {
			flex-flow: wrap;
		}
		@media @mobile-l {
			gap: 30px;
		}
	}
	&__bottom-left {
		display: flex;
		flex-flow: column nowrap;
	}
	&__site-name {
		font-family: "opensans-bold";
		font-size: 16px;
		line-height: 1;
		color: white;
		margin-bottom: 16px;
	}
	&__contact-info {
		display: flex;
		justify-content: space-between;
	}
	&__contact-info-left {
		display: flex;
		flex-flow: column nowrap;
		margin-right: 70px;
		> p {
			font-family: "opensans-regular";
			font-size: 14px;
			line-height: 24px;
			color: fade(white, 80%);
		}
	}
	&__contact-info-right {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-end;
		> a {
			font-family: "opensans-bold";
			font-size: 14px;
			line-height: 24px;
			color: white;
			transition: color 0.25s ease;
			&:hover {
				color: fade(white, 60%);
			}
		}
	}
	&__bottom-right {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-end;
		align-items: flex-end;
		p,
		a {
			font-family: "opensans-regular";
			font-size: 14px;
			line-height: 24px;
			color: fade(white, 30%);
		}
		a {
			transition: color 0.25s ease;
			&:hover {
				color: white;
			}
		}
		@media @desktop-l {
			flex-flow: column;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
	}
	@media only screen and (max-width: 1024px) {
		&__contact-info {
			flex-flow: column nowrap;
		}
		&__contact-info-right {
			margin-top: 10px;
		}
		&__nav-container {
			margin-bottom: 30px;
		}
		&__logo {
			margin-bottom: 30px;
		}
	}
	@media only screen and (max-width: 768px) {
		&__bottom {
			flex-flow: column nowrap;
		}
		&__bottom-right {
			align-items: flex-start;
			margin-top: 30px;
		}
		&__nav-container {
			margin-bottom: 10px;
			> ul {
				flex-flow: row wrap;
				> li {
					text-align: center;
					width: 50%;
					flex-basis: 50%;
					margin-bottom: 20px;
				}
			}
			a {
				margin-right: 0;
			}
		}
	}
}

.nsproduct {
	padding: 40px 0 0 0;
	&__nav {
		font-family: "opensans-regular";
		position: relative;
		display: inline-block;
		font-size: 14px;
		line-height: 24px;
		color: fade(@black, 60%);
		transition: color 0.25s ease;
		padding-left: 28px;
		margin-bottom: 40px;
		body.new-vmf & {
			color: #f1f1f1;
			&:hover {
				color: white;
			}
			&:before {
				background: url("@{base-url}/images/chevron-left-white.svg")
					center center / 100% no-repeat;
			}
		}
		&:hover {
			color: @black;
		}
		&:before {
			position: absolute;
			left: 0;
			top: 7px;
			width: 7px;
			height: 10px;
			background: url("@{base-url}/images/chevron-left-grey.svg") center
				center / 100% no-repeat;
			content: "";
		}
		> span {
			text-transform: uppercase;
		}
	}
	&__image-container {
		padding-right: 15px;
	}
	&__image-link {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50px;
		min-height: 580px;
		border: 0;
		background: white;
		&:after {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: @purple_2019;
			opacity: 0;
			visibility: hidden;
			transition:
				opacity 0.25s ease,
				visibility 0.25s ease;
			content: "";
		}
		&:hover {
			&:after {
				opacity: 0.3;
				visibility: visible;
			}
		}
	}
	&__image {
		max-width: 100%;
	}
	&__basic-info {
		padding-left: 15px;
		padding-top: 45px;
	}
	&__title {
		display: flex;
		flex-flow: column nowrap;
		font-family: "opensans-extrabold";
		font-weight: 800 !important;
		font-size: 40px !important;
		line-height: 48px;
		color: @black;
		text-transform: uppercase;
		margin-bottom: 24px !important;
		body.new-vmf & {
			color: white;
		}
	}
	&__large {
		margin-bottom: 6px;
	}
	&__sub {
		font-family: "opensans-semibold";
		font-size: 14px;
		line-height: 1;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: fade(@black, 60%);
		body.new-vmf & {
			color: @text-white;
		}
	}
	&__security-container {
		display: inline-flex;
		padding: 18px 25px;
		background: #f1f1f1;
		margin-bottom: 32px;
		body.new-vmf & {
			background: black;
		}
	}
	&__sec-g {
		path {
			&.active {
				fill: #6f1b74;
				opacity: 1;
				body.new-vmf & {
					fill: white;
				}
			}
		}
	}
	&__downloads {
		display: flex;
		flex-flow: column nowrap;
		align-items: baseline;
		a {
			margin-bottom: 16px;
			min-width: 230px;
		}
	}
	&__security-content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding-left: 17px;
		p {
			font-family: "opensans-bold";
			font-size: 14px;
			line-height: 1;
			text-transform: uppercase;
			color: @purple_2019;
			margin: 0 !important;
			body.new-vmf & {
				color: white;
			}
			&.nsproduct__security-note {
				font-family: "opensans-semibold";
				font-size: 12px;
				line-height: 14p;
				margin-top: 8px !important;
				color: fade(@black, 60%);
				text-transform: none;
				body.new-vmf & {
					color: @text-white;
				}
			}
		}
	}
	&__security-svg {
		position: relative;
		width: 52px;
		height: 45px;
	}
	&__security-nr {
		font-family: "opensans-extrabold" !important;
		font-size: 14px !important;
		line-height: 1 !important;
		color: @purple_2019 !important;
		position: absolute;
		bottom: 12px;
		margin-bottom: 0 !important;
		left: 50%;
		transform: translateX(-50%);
		body.new-vmf & {
			color: white !important;
		}
	}
	&__short-desc {
		margin-bottom: 32px;
		p {
			color: fade(@black, 80%);
			body.new-vmf & {
				color: @text-white;
			}
			margin-bottom: 18px;
		}
	}
	&__applications {
		display: flex;
		flex-flow: row wrap;
		max-width: 550px;
		margin-bottom: 32px !important;
	}
	&__applications-title {
		body.new-vmf & {
			color: white;
		}
	}
	&__application {
		width: 50%;
		padding-right: 18px;
		body.new-vmf & {
			color: @text-white;
		}
	}
	&__show-form {
		margin-top: 16px;
	}
	&__tabs {
		background: white;
		body.new-vmf & {
			background: @backgr_dark;
		}
	}
	&__tab-buttons {
		display: flex;
		flex-flow: row nowrap;
	}
	&__tab-button {
		font-family: "opensans-semibold";
		font-size: 13px;
		line-height: 28px;
		color: fade(@black, 60%);
		text-transform: uppercase;
		height: 56px;
		padding: 0 32px;
		border: 0;
		transition:
			color 0.25s ease,
			background 0.25s ease;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: none;
		white-space: nowrap;
		body.new-vmf & {
			background: darken(@backgr_dark, 3%);
			color: @text-white;
			&:hover {
				color: white;
			}
			&--active {
				background: black;
				color: white;
			}
		}
		&:hover {
			color: @purple_2019;
		}
		&--active {
			font-family: "opensans-bold";
			background: #f6f6f6;
			color: @purple_2019;
		}
	}
	&__tab-content-wrapper {
		background: #f6f6f6;
		body.new-vmf & {
			background: black;
		}
	}
	&__tab-content-container {
		position: relative;
		min-height: 300px;
		transition: all 0.4s ease;
	}
	&__tab-content {
		position: absolute;
		top: 88px;
		left: 0;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.25s ease,
			visibility 0.25s ease;
		&--active {
			opacity: 1;
			visibility: visible;
			transition:
				opacity 0.25s 0.2s ease,
				visibility 0.25s 0.2s ease;
		}
	}
	&__tab-content-left,
	&__tab-content-right {
		flex-shrink: 0;
		flex-basis: 50%;
	}
	&__tab-content-left {
		padding-right: 30px;
	}
	&__tab-content-right {
		padding-left: 30px;
	}
	&__related-title {
		display: flex;
		justify-content: center;
		h2 {
			font-family: "opensans-extrabold";
			font-size: 32px;
			line-height: 1;
			color: @black;
			text-transform: uppercase;
			margin-bottom: 48px;
			body.new-vmf & {
				color: white;
			}
		}
	}
	&__wp-content {
		max-width: 730px;
	}
	&__gal-col {
	}
	&__gal-image {
		position: relative;
		display: flex;
		width: 100%;
		height: 395px;
		overflow: hidden;
		margin-bottom: 40px;
		&:after {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: @purple_2019;
			opacity: 0;
			visibility: hidden;
			transition:
				opacity 0.25s ease,
				visibility 0.25s ease;
			content: "";
		}
		&:hover {
			&:after {
				opacity: 0.3;
				visibility: visible;
			}
		}
		&--video {
			background-color: white;
			&:before {
				top: ~"calc(50% - 25px)";
				left: ~"calc(50% - 20px)";
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 25px 0 25px 40px;
				border-color: transparent transparent transparent @purple_2019;
				opacity: 1;
				content: "";
				z-index: 10;
			}
		}
	}
	&__gal-img {
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		max-height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		object-fit: cover;
		&--video {
			max-width: 80%;
			max-height: 80%;
			min-width: 80%;
			min-height: 0;
			opacity: 0.7;
		}
	}
	&--tabs,
	&--gallery {
		padding: 0 0 0 0;
		margin-top: 100px;
		background: #f6f6f6;
		body.new-vmf & {
			background: black;
		}
	}
	&--gallery {
		padding: 90px 0;
	}
	&--tabs-wp-content {
		padding: 90px 0;
	}
	&--related {
		padding: 100px 0 40px;
	}
	@media only screen and (max-width: 1400px) {
		margin-top: 60px;
		&--gallery,
		&--related,
		&--tabs {
			margin-top: 0;
		}
	}
	@media only screen and (max-width: 1024px) {
		&__title {
			font-size: 32px !important;
			line-height: 40px;
		}
		&__tab-content {
			top: 44px;
		}
		&--gallery,
		&--related {
			margin-top: 0;
			padding: 60px 0 40px;
		}
	}
	@media only screen and (max-width: 1000px) {
		margin-top: 0;
		&--tabs {
			margin-top: 40px;
		}
	}
	@media only screen and (max-width: 900px) {
		&__tab-content-wrapper {
			background: none;
		}
		&__tab-content-container {
			background: #f6f6f6;
		}
		&__tab-buttons {
			flex-flow: row wrap;
		}
		&__tab-button {
			border: 1px solid #f6f6f6;
			width: 50%;
			flex-basis: 50%;
			padding: 0 15px;
		}
		&__tab-content {
			padding: 0 20px;
		}
		&--tabs {
			background: none;
		}
	}
	@media only screen and (max-width: 768px) {
		&__image-container {
			padding-right: 0;
		}
		&__basic-info {
			padding-top: 30px;
			padding-left: 0;
		}
	}
	@media only screen and (max-width: 640px) {
		&__nav {
			margin-bottom: 20px;
		}
		&__image-link {
			padding: 20px;
			min-height: 400px;
		}
		&__title {
			font-size: 24px !important;
			line-height: 32px;
		}
		&__security-container {
			padding: 18px;
		}
		&__tab-button {
			font-size: 11px;
			line-height: 14px;
			white-space: normal;
			padding: 0 8px;
		}
		&--tabs {
			margin-top: 10px;
		}
		&--tabs-wp-content {
			padding: 40px 0 25px 0;
		}
		&__tab-content {
			flex-flow: column nowrap;
			top: 30px;
		}
		&__tab-content-left {
			padding-right: 0;
		}
		&__tab-content-right {
			padding-left: 0;
		}
		&__related-title {
			justify-content: flex-start;
			h2 {
				font-size: 22px;
				margin-bottom: 32px;
			}
		}
		&__gal-image {
			height: 250px;
		}
		&--first {
			padding-top: 20px;
		}
		&--gallery,
		&--related {
			padding: 40px 0 0 0;
		}
	}
	@media only screen and (max-width: 420px) {
		&__image-link {
			min-height: 250px;
		}
	}
}

.ncontent {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: @purple_2019;
		body.new-vmf & {
			color: white;
		}
	}
	&__block-title {
		font-size: 20px !important;
		padding: 30px 40px !important;
		color: @purple_2019 !important;
		body.new-vmf & {
			color: white !important;
		}
	}
	&__block-list {
		li {
			a {
				color: @black !important;
				padding-left: 80px !important;
				&:hover {
					color: @purple_2019 !important;
				}
				&:before {
					display: none;
				}
				&:after {
					position: absolute;
					left: 40px;
					top: 20px;
					width: 19px;
					height: 21px;
					background: url("@{base-url}/images/pdf-file.svg") center
						center / 100% no-repeat;
					content: "";
				}
			}
		}
		body.new-vmf & {
			li {
				border-top: 1px solid @backgr_dark;
				a {
					color: @text-white !important;
					&:hover {
						color: white !important;
					}
				}
			}
		}
	}
	&__buttons-wrapper {
		display: flex;
		flex-flow: column nowrap;
		align-items: baseline;
	}
	&__locations {
		display: flex;
	}
	&__location {
		flex-shrink: 0;
		flex-basis: 50%;
	}
	&__inside {
		background: none !important;
	}
	&__row {
		margin-left: 0;
		margin-right: 0;
		h3 {
			background: darken(#f6f6f6, 5%) !important;
			color: @purple_2019 !important;
		}
		body.new-vmf & {
			h3 {
				background: darken(@backgr_dark, 3%) !important;
				color: white !important;
			}
		}
	}
	@media only screen and (max-width: 640px) {
		&__block-title {
			padding: 20px !important;
		}
		&__block-list {
			li {
				a {
					padding: 15px 20px !important;
					padding-left: 60px !important;
					&:after {
						left: 20px;
						top: 16px;
					}
				}
			}
		}
	}
	&--page {
		padding: 7rem 0;
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-bottom: 2.4rem;
		}
	}
}
.ncontent__block {
	.ncontent__inner {
		border-top: 0;
		border-bottom: 0;
		background: #f6f6f6;
		padding-bottom: 10px;
		.border-radius(0);
		body.new-vmf & {
			background: black;
		}
	}
}

.triggers-2019 {
	.trigger-wrapper {
		border-color: @purple_2019;
		border-radius: 0;
		a {
			transition: color 0.4s ease;
			&:before {
				background: @purple_2019;
			}
			&.active {
				color: white;
			}
		}
	}
	body.new-vmf & {
		a {
			color: @text-white;
			&.active {
				color: white;
			}
		}
	}
}

.popup-container.popup-container-2019 {
	border-top: 0;
	.close {
		&:before,
		&:after {
			background: @purple_2019;
		}
	}
}

.ncontact {
	padding: 90px 0;
	@media only screen and (max-width: 640px) {
		padding: 30px 0;
	}
}
.ncontact-block {
	display: flex;
	flex-flow: column nowrap;
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid fade(white, 10%);
	&__inner {
		display: flex;
		height: 100%;
	}
	&__left,
	&__right {
		display: flex;
		flex-flow: column nowrap;
	}
	&__left {
		padding-right: 12px;
		width: 100%;
	}
	&__right {
		width: 55%;
		padding: 16px;
		background: black;
	}
	&__location {
		color: white;
		font-size: 20px;
		line-height: 1.5;
		margin-bottom: 24px;
		min-height: 40px;
	}
	&__address {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 48px;
	}
	&__buttons {
		display: flex;
		flex-flow: column nowrap;
		margin-top: auto;
	}
	&__button {
		font-size: 13px;
		height: 50px;
		line-height: 26px;
		text-align: center;
		padding: 0 15px 0 35px;
		white-space: nowrap;
		&:before {
			left: 15px;
		}
		&:last-of-type {
			margin-bottom: 0;
		}
		&.nbutton--phone {
			&:before {
				left: 12px;
			}
		}
	}
	&__title {
		color: white;
		line-height: 1.5;
		margin-bottom: 21px;
	}
	&__person {
		display: flex;
		flex-flow: column nowrap;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid fade(white, 20%);
		&:last-of-type {
			margin-bottom: 0;
			border-bottom: 0;
		}
	}
	&__name,
	&__function {
		color: white;
		line-height: 1.5;
		font-size: 14px;
	}
	&__name {
		font-weight: 700;
	}
	&__function {
		color: fade(white, 60%);
		margin-bottom: 12px;
		font-size: 14px;
	}
	&__email,
	&__phone {
		font-size: 14px;
		color: fade(white, 60%);
		text-decoration: none;
		line-height: 1.5;
		&:hover {
			text-decoration: underline;
		}
	}
	@media only screen and (max-width: 640px) {
		padding-bottom: 20px;
		margin-bottom: 20px;
		&__inner {
			flex-flow: column nowrap;
		}
		&__left,
		&__right {
			width: 100%;
			padding-right: 0;
			padding-left: 0;
		}
		&__right {
			margin-top: 20px;
			padding-right: 16px;
			padding-left: 16px;
		}
		&__address {
			margin-bottom: 20px;
		}
		&__location {
			min-height: 0;
			margin-bottom: 14px;
		}
	}
}

/* --------------------
New 22-02-2022
-------------------- */
.page-2022 {
	p {
		margin-bottom: 1.8rem;
	}
	h2 {
		margin-bottom: 1rem;
	}
	h3,
	h4 {
		margin-bottom: 0.7rem;
	}
	ul {
		margin: -20px 0px 28px 0px;
	}
	li {
		list-style-type: disc;
		margin-left: 30px;
		font-size: 14px;
		line-height: 28px;
	}
	a {
		color: #ffffff;
	}
	a:hover {
		color: #ffffff;
		text-decoration: underline;
	}
}

/* Homepage */
.page-id-3201 {
	.new-col-lg-3 {
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
		@media (max-width: 1200px) {
			-ms-flex: 0 0 33.333333%;
			flex: 0 0 33.333333%;
			max-width: 33.333333%;
		}
		@media (max-width: 992px) {
			-ms-flex: 0 0 50%;
			flex: 0 0 50%;
			max-width: 50%;
		}
		@media (max-width: 480px) {
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
		}
	}
	.popular-product__image,
	.nproduct__image {
		height: 256px;
		@media (max-width: 480px) {
			height: 220px;
		}
	}
}
/* --------------------
Introduction Block
-------------------- */
.section__mobile-only {
	margin-bottom: -45px;
	position: relative;
	z-index: 899;
	float: left;
	width: 100%;
	@media only screen and (max-width: 1050px) {
		margin-bottom: 0px;
	}
	.col-middle {
		flex: 0 0 45%;
		margin: 0 auto;
		margin-top: 45px;
		position: relative;
		border: 1px solid #3b3b3b;
		padding: 20px;
		@media only screen and (max-width: 1200px) {
			flex: 0 0 90%;
			margin: 50px auto 0px auto;
		}
		@media only screen and (max-width: 1050px) {
			flex: 0 0 90%;
			margin: 75px auto 0px auto;
		}
		@media only screen and (max-width: 1025px) {
			margin: 55px auto 0px auto;
		}
		@media only screen and (max-width: 640px) {
			flex: unset;
			width: 100%;
			margin: 25px 20px 0px 20px;
		}
		p {
			color: #ffffff;
		}
		h3 {
			color: #ffffff;
			width: 90%;
			line-height: 24px;
		}
		.close-window {
			cursor: pointer;
			position: absolute;
			top: 13px;
			right: 20px;
			font-size: 30px;
			transition: 0.3s ease;
			&:hover {
				color: #ffffff;
			}
		}
	}
}

.msg-container {
	position: relative;
}

.col-middle-header {
	position: absolute;
	background: #0000008a;
	padding: 20px;
	width: 420px;
	right: 20px;
	top: 200px;
	z-index: 900;
	@media only screen and (max-width: 1050px) {
		display: none;
	}
	p {
		color: #ffffff;
	}
	h3 {
		margin-bottom: 0.7rem;
		color: #ffffff;
		width: 90%;
		line-height: 22px;
	}
	.close-window {
		cursor: pointer;
		position: absolute;
		top: 13px;
		right: 20px;
		font-size: 30px;
		transition: 0.3s ease;
		&:hover {
			color: #ffffff;
		}
	}
}

@media only screen and (max-width: 1000px) {
	.col-middle,
	.col-middle-header {
		flex: unset;
		margin: 45px 20px 0px 20px;
	}
}

@media only screen and (max-width: 640px) {
	.col-middle,
	.col-middle-header {
		flex: unset;
		margin: 30px 20px 0px 20px;
	}
}

/* --------------------
FAQ Section
-------------------- */
.gutter-content {
	margin: 90px 0px 0px 0px;
}

.faq-container-1 {
	max-width: 622px;
	margin: 0 auto;
	p {
		color: #c6c6c6;
	}
	.faq-section-title {
		font-family: "Open Sans", sans-serif;
		font-weight: 800;
		color: #fff;
		text-transform: uppercase;
		margin-bottom: 8px;
		font-size: 20px;
	}
}

.accordion {
	margin: 15px 0px 0px 0px;
}

.accordion-item {
	background: #000000;
	margin: 0px 0px 15px 0px;
	transition: 0.25s ease;
	border-bottom: 3px solid #530061;
}

.accordion-item:last-child {
	margin: 0px 0px 0px 0px;
}

button#accordion-button {
	width: 100%;
	display: flex;
	align-items: center;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
	transition: 0.25s ease;
	padding: 20px 30px 20px 30px;
}

/* Hover state */
button#accordion-button:hover {
	color: rgba(255, 255, 255, 0.6);
}

.accordion-title {
	font-size: 14px;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	text-align: left;
	padding-right: 15px;
}

.faq-chevron {
	width: 14px;
	height: 100%;
	margin-left: auto;
	will-change: transform;
	transform: rotate(0deg);
	transition: 0.25s ease;
}

.chevron-svg {
	background: #ffffff;
}

/* Aria states */
.accordion .accordion-item button[aria-expanded="false"] {
	color: #ffffff;
}

.accordion .accordion-item button[aria-expanded="true"] {
	color: #ffffff;
}

.accordion button[aria-expanded="true"] + .accordion-content {
	opacity: 1;
	max-height: 100%;
	transition: all 0.25s ease;
	will-change: opacity, max-height;
}

button[aria-expanded="true"] .faq-chevron {
	transform: rotate(180deg);
}

/* Content */
.accordion .accordion-content {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition:
		opacity 0.25s ease,
		max-height 0.25s ease;
	will-change: opacity, max-height;
	font-size: 1rem;
	font-weight: 400;
	margin: 0px 0px 0px 0px;
}

.accordion .accordion-content p {
	padding: 0px 65px 20px 30px;
	font-size: 14px;
	line-height: 23px;
	color: #ffffff;
}

@media only screen and (max-width: 640px) {
	.gutter-content {
		margin: 50px 0px 0px 0px;
	}
	button#accordion-button {
		padding: 18px 20px 18px 20px;
	}
	.accordion .accordion-content p {
		padding: 0px 20px 20px 20px;
	}
}

/* --------------------
Contact Block
-------------------- */
.cta__locationtitle {
	font-size: 18px;
	font-weight: 800;
	line-height: 28px;
	color: #ffffff;
	margin-top: 32px;
}

.cta__buttons {
	margin-top: 22px;
}

/* --------------------
Homepage - Contact Block
-------------------- */
.contact-block {
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	position: relative;
	display: flex;
	flex-flow: wrap;
	&__inner {
		display: flex;
		flex-flow: column;
		flex-grow: 1;
		background: #6f1a73;
		padding: 140px 40px 140px 40px;
		position: relative;
		width: calc(100% / 4);
	}
	&__inner:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-left: 60px solid #500053;
		border-bottom: 50px solid transparent;
		transform: rotate(90deg);
		top: -20px;
		left: 60px;
	}
	&__inner:first-child {
		margin-right: 10px;
	}
	&__inner:nth-child(2) {
		margin: 0px 5px 0px 5px;
	}
	&__inner:last-child {
		margin-left: 10px;
	}
	&__location-title {
		color: #fff;
		font-size: 24px;
		line-height: 30px;
		margin-bottom: 10px;
	}
	&__contact-info-container {
		display: flex;
		flex-flow: column;
		margin-top: 30px;
	}
	&__contact-info {
		font-family: "Open Sans", sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 14px;
		color: #fff;
		padding: 0px 0px 20px 0px;
		transition: 0.25s ease;
		&:hover {
			color: #bdbdbd;
		}
	}
	@media only screen and (max-width: 1000px) {
		&__inner {
			padding: 90px 30px 60px 30px;
			width: 100%;
		}
		&__inner:before {
			left: 50px;
		}
		&__inner:first-child {
			margin-right: 0px;
		}
		&__inner:nth-child(2) {
			margin: 20px 0px 20px 0px;
		}
		&__inner:last-child {
			margin-left: 0px;
		}
	}
	@media only screen and (max-width: 768px) {
		&__contact-info {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2px solid #fff;
			padding: 20px;
			&:last-child {
				border: 0px;
				margin-top: 10px;
				background: #590f5e;
			}
		}
	}
}

/* --------------------
Footer - Social Icons
-------------------- */
.footer-social-icon-wrapper {
	display: flex;
	flex-flow: column;
}

.footer-social-inner {
	display: flex;
	margin-top: 6px;
}

.footer__bottom {
	justify-content: normal;
}

.footer__contact-info-right {
	margin-top: 10px;
}

.footer__bottom-right {
	margin-left: auto;
	justify-content: space-between;
}

.footer-social-icon {
	will-change: transform;
	transition: 0.3s ease;
	margin-right: 15px;
}

.footer-social-icon:last-child {
	margin-right: 0px;
}

.footer-social-icon:hover {
	transform: translate3d(0px, -3px, 0px);
}

.footer-social-title {
	text-transform: uppercase;
}

.facebook-icon,
.instagram-icon,
.twitter-icon,
.linkedin-icon,
.youtube-icon {
	height: 34px;
	width: 34px;
	background-size: contain;
	background-repeat: no-repeat;
}

.facebook-icon {
	background-image: url("/wp-content/themes/blaeser/static/images/facebook-light-dark.svg");
}

.instagram-icon {
	background-image: url("/wp-content/themes/blaeser/static/images/instagram-light-dark.svg");
}

.twitter-icon {
	background-image: url("/wp-content/themes/blaeser/static/images/twitter-light-dark.svg");
}

.linkedin-icon {
	background-image: url("/wp-content/themes/blaeser/static/images/linkedin-light-dark.svg");
}

.youtube-icon {
	background-image: url("/wp-content/themes/blaeser/static/images/youtube-light-dark.svg");
}

.footer-logo-badge {
	max-height: 110px;
	padding-bottom: 10px;
}

/* Padding turned off because there are no logos left to display */
.logos-footer.logos-footer-2019 {
	padding: 0px;
}

.footer-2019 {
	margin-top: 75px;
}

@media only screen and (max-width: 768px) {
	.footer-social-icon-wrapper {
		margin-top: 32px;
	}
	.footer__bottom-right {
		margin-left: unset;
	}
	.footer-logo-badge {
		margin: 10px 0px 30px 0px;
	}
	.footer-2019 {
		margin-top: 35px;
	}
}

/* --------------------
About us
-------------------- */
.about-us-full-column {
	display: flex;
	margin: 0 auto;
	width: 70%;
}

.neditor.big-italic p {
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
}

.neditor.big-italic p:last-child {
	margin-bottom: 0px;
}

.inner-module .ncontent__inner {
	padding-bottom: 0px;
}

@media only screen and (max-width: 768px) {
	.about-us-full-column {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* New Product Block */
.product-announcement-container {
	display: flex;
	flex-flow: wrap;
	margin-top: 20px;
}

.product-announcement-content {
	flex-basis: 30%;
}

.product-announcement-content-top {
	padding: 20px 40px 20px 40px;
	background: #66116d;
	color: #fff;
	font-size: 22px;
}

h2.product-announcement-title {
	font-family: "opensans-extrabold";
	line-height: 26px;
}

.product-announcement-content-body {
	padding: 35px 40px 40px 40px;
	background: #fff;
}

.product-announcement-content-body h3 {
	font-family: "opensans-extrabold";
	color: #66116d;
	line-height: 24px;
	font-size: 18px;
	margin-bottom: 20px;
}

.product-announcement-image {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.product-announcement-image-container {
	flex-basis: 70%;
	position: relative;
}

.product-announcement-image-container a {
	position: absolute;
	right: 40px;
	top: 40px;
}

.product-announcement-image,
.product-announcement-main-image {
	height: 100%;
	width: 100%;
	display: flex;
}

.product-announcement-image {
	margin: 25px 0 25px 0;
}

.product-announcement-main-image {
	padding-left: 20px;
	object-fit: cover;
}

.product-announcement-usp p {
	color: #1d1d1b;
}

.product-announcement-usp svg {
	height: 12px;
	width: fit-content;
	fill: #5bbe00;
	margin-right: 10px;
}

.product-announcement-button {
	margin-top: 25px;
}

@media only screen and (max-width: 1200px) {
	.product-announcement-content {
		flex-basis: 35%;
	}
	.product-announcement-image-container {
		flex-basis: 65%;
	}
}

@media only screen and (max-width: 992px) {
	.product-announcement-content,
	.product-announcement-image-container {
		flex-basis: 100%;
	}
	.product-announcement-main-image {
		padding-left: 0px;
	}
	.product-announcement-image-container a {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.product-announcement-container {
		margin-top: 20px;
	}
	.product-announcement-image-container a {
		position: absolute;
		right: 30px;
		top: 30px;
	}
	.product-announcement-content-body {
		padding: 25px 30px 30px 30px;
		background: #fff;
	}
	.product-announcement-content-top {
		padding: 25px 30px 25px 30px;
	}
	.product-announcement-content-body h3 {
		margin-bottom: 10px;
	}
	.product-announcement-image {
		margin: 20px 0 20px 0;
	}
}

.popular-product:nth-child(1) {
	order: 1;
}

.popular-product:nth-child(5) {
	order: 2;
}

.popular-product:nth-child(7) {
	order: 3;
}

.popular-product:nth-child(6) {
	order: 4;
}

.popular-product:nth-child(2) {
	order: 5;
}

.popular-product:nth-child(1) {
	order: 6;
}

.popular-product:nth-child(3) {
	order: 7;
}

.popular-product:nth-child(8) {
	order: 8;
}
/* --------------------
Animations
-------------------- */
/**
 * ----------------------------------------
 * animation slide-in-left-1
 * ----------------------------------------
 */
.slide-in-left-1 {
	-webkit-animation: slide-in-left-1 0.5s
		cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
	animation: slide-in-left-1 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@-webkit-keyframes slide-in-left-1 {
	0% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide-in-left-1 {
	0% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-in-left-2
 * ----------------------------------------
 */
.slide-in-left-2 {
	-webkit-animation: slide-in-left-2 0.5s
		cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0.15s;
	animation: slide-in-left-2 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both
		0.15s;
}

@-webkit-keyframes slide-in-left-2 {
	0% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide-in-left-2 {
	0% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-in-left-3
 * ----------------------------------------
 */
.slide-in-left-3 {
	-webkit-animation: slide-in-left-3 0.5s
		cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
	animation: slide-in-left-3 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@-webkit-keyframes slide-in-left-3 {
	0% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide-in-left-3 {
	0% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation fade-in-bottom-scroll
 * ----------------------------------------
 */
.show,
.time-item {
	opacity: 0;
}

.fade-in-bottom-scroll {
	animation: fade-in-bottom-scroll 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
		0.3s both;
}

@keyframes fade-in-bottom-scroll {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.fade-in-bottom-scroll-1 {
	animation: fade-in-bottom-scroll-1 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
		0.4s both;
}

@keyframes fade-in-bottom-scroll-1 {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.fade-in-bottom-scroll-2 {
	animation: fade-in-bottom-scroll-2 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
		0.5s both;
}

@keyframes fade-in-bottom-scroll-2 {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation fade-in-bottom-time-line
 * ----------------------------------------
 */
.time-item {
	visibility: hidden;
	opacity: 0;
}

.fade-in-bottom-time-line {
	visibility: visible;
	animation: fade-in-bottom-time-line 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
		both;
}

@keyframes fade-in-bottom-time-line {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.3s
		cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s both;
	animation: fade-in-bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s
		both;
}

@-webkit-keyframes fade-in-bottom {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes fade-in-bottom {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
.fade-in {
	-webkit-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.gradient-overlay {
	position: absolute;
	top: 0px;
	height: 100%;
	width: 100%;
	background: linear-gradient(
		145deg,
		rgba(0, 0, 0, 0.79877889) 40%,
		#6f1b74 130%
	);
	z-index: 2;
}

.wire-banner-container {
	display: flex;
	justify-content: center;
	background: #e30613;
}

.wire-banner {
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.25s ease;
	img {
		height: auto;
		width: 480px;
	}
}

@media only screen and (max-width: 470px) {
	.wire-banner {
		img {
			height: auto;
			width: 90%;
		}
	}
}

.countdown-cont {
	width: 100vw;
	display: flex;
	justify-content: center;
	background: #1e1e1e;
	padding: 0 16px;
}

#countdown {
	color: #fff;
	min-height: 48px;
	width: 480px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	@media only screen and (max-width: 650px) {
		justify-content: center;
	}
}

.countdown-numbers {
	font-family: "opensans-semibold";
	color: #e30613;
	font-size: 26px; /* Larger font size for numeric values */
}

.countdown-other {
	font-family: "opensans-semibold";
	font-size: 26px;
	margin-left: 6px;
	margin-right: 40px;
	&:last-child {
		margin-right: 0px;
	}
}

@media only screen and (max-width: 650px) {
	.countdown-numbers {
		font-size: 18px; /* Larger font size for numeric values */
	}
	.countdown-other {
		font-size: 18px; /* Smaller font size for text labels */
		margin-right: 16px;
	}
}

.job-notice {
	z-index: 10;
	position: relative;
	background: #66106d;
	padding: 30px;
	color: #fff;
	p {
		color: #fff;
	}
	a {
		background: #000;
		&:hover {
			background: #2e0930;
		}
	}
	h3 {
		margin-bottom: 12px;
		font-size: 20px;
		line-height: 1.4;
		text-transform: uppercase;
		font-family: "opensans-extrabold", sans-serif;
	}
	&.desktop-version {
		@media only screen and (max-width: 1200px) {
			display: none;
		}
	}
}

.job-notice-mobile {
	display: none;
	@media (max-width: 1200px) {
		display: block;
		margin-top: 20px;
		.job-notice {
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	@media (max-width: 768px) {
		.job-notice {
			padding: 1.25rem;
		}
	}
}

@media (max-width: 768px) {
	.product-announcement-content-top {
		padding: 20px 20px 20px 20px;
	}
	.product-announcement-content-body {
		padding: 20px 20px 20px 20px;
	}
	.section__mobile-only.col-middle {
		padding: 20px 20px 20px 20px;
	}
}

.vacature {
	padding-bottom: 1rem;
	h2 {
		margin-bottom: 2.4rem;
	}
}

.product-announcement-button {
	&:hover {
		text-decoration: none !important;
	}
}

.vacature-special {
	h2 {
		font-size: 1.375rem !important;
	}
	.spacer {
		margin-bottom: 2.875rem !important;
		line-height: 1.6;
	}
	p {
		color: #909090 !important;
	}
	.ncontent--page {
		@media (max-width: 768px) {
			padding: 4rem 0 !important;
		}
	}
}

.solar {
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.79);
	.row {
		margin-left: -10px;
		margin-right: -10px;
	}
	.col-xl-6 {
		padding-right: 10px;
		padding-left: 10px;
	}
	&__bg {
		position: absolute;
		right: 0;
		top: -30px;
		width: 100%;
		height: auto;
	}
	&__cover {
		object-fit: cover;
		height: 100%;
		top: 0;
		z-index: -1;
		position: absolute;
		width: 100%;
		height: auto;
	}
	&__content {
		position: relative;
		align-items: center;
		display: flex;
		gap: 1.875rem;
		padding: 20px;
		margin: 20px 0 20px 0;
		background: linear-gradient(296deg, #000000 -100%, #f59c00 100%);
		border-radius: 0px;
		justify-content: space-between;
		overflow: hidden;
		min-height: 160px;
		@media (max-width: 776px) {
			align-items: flex-start;
			flex-flow: column;
			min-height: unset;
			gap: 26px;
		}
		&__logo {
			z-index: 1;
			img {
				width: 170px;
				padding-bottom: 10px;
				@media (max-width: 776px) {
					width: 100px;
					padding-bottom: 0px;
				}
			}
		}
		&__title {
			.label {
				background: #fff;
				width: fit-content;
				padding: 4px 6px 5px 6px;
				line-height: 1;
				font-family: "opensans-bold";
				color: #000;
				font-size: 14px;
				margin-right: 10px;
				@media (max-width: 776px) {
					font-size: 12px;
				}
			}
			h2 {
				display: flex;
				align-items: center;
				text-transform: uppercase;
				color: #fff;
				font-family: "opensans-extrabold";
				font-size: 20px;
				@media (max-width: 776px) {
					font-size: 14px;
				}
			}
			h3 {
				font-family: "opensans-extrabold";
				color: #000;
				text-transform: uppercase;
				margin-top: 11px;
				font-size: 26px;
				@media (max-width: 776px) {
					font-size: 22px;
				}
				span {
					font-family: "opensans-semibold";
				}
			}
		}
		&__buttons {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			gap: 16px;
			@media (max-width: 776px) {
				gap: 12px;
				width: 100%;
			}
			a {
				background: #000000;
				height: 48px;
				padding: 0 20px 0 20px;
				@media (max-width: 776px) {
					font-size: 14px;
					height: 42px;
					padding: 0 10px 0 10px;
				}
				img {
					height: 14px;
					margin-right: 10px;
				}
				&:hover {
					background: #181818;
				}
			}
		}
	}
	.first-block {
		@media (max-width: 992px) {
			margin: 20px 0 0 0;
		}
	}
}

.page-template-vacature {
	.nheader-image {
		height: unset;
	}
	.header-content {
		padding: 2.5rem 0 2.5rem 0;
	}
	.header-content__title {
		font-size: 2.625rem;
		line-height: 1.1;
		@media (max-width: 768px) {
			font-size: 1.75rem;
			line-height: 1.2;
		}
	}
}

.single-stellenangebote {
	.nheader-image {
		height: unset;
	}
	.header-content {
		padding: 2.5rem 0 2.5rem 0;
	}
	.header-content__title {
		font-size: 2.625rem;
		line-height: 1.1;
		@media (max-width: 768px) {
			font-size: 1.75rem;
			line-height: 1.2;
		}
	}
	.vacature-back {
		display: flex;
		align-items: center;
		margin-bottom: 60px;
		color: #909090 !important;
		font-size: 14px;
		svg {
			margin-right: 10px;
		}
		&.center {
			justify-content: center;
			text-align: center;
			margin: 0 auto;
			margin-top: 50px;
		}
	}
	.vacature-back-purple {
		display: flex;
		align-items: center;
		margin-bottom: 60px;
		color: #fff !important;
		svg {
			margin-right: 10px;
		}
		&.center {
			justify-content: center;
			text-align: center;
			margin: 0 auto;
			margin-top: 50px;
		}
	}
}

.post-type-archive-stellenangebote {
	.nproduct__image {
		align-items: center;
		padding: 0;
	}
}

.vacancies-found {
	margin-bottom: 60px;
	color: #fff;
}

.page-2022 li {
	line-height: 23px;
	padding-bottom: 10px;
}

.custom-form {
	border-radius: 1rem;
	padding: 46px;
	flex-direction: column !important;
	display: flex;
	background: #171717;
	border: 1px solid #2e2e2e;
	flex-flow: column;
	box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 60px;
	margin: 3rem 0 0 0;
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea {
		height: 52px;
		border: 1px solid transparent;
		background: #ffffff;
		border-radius: 0.375rem !important;
		padding: 0 16px 0 16px !important;
		font-family: "opensans-regular", sans-serif !important;
		font-size: 0.875rem;
		transition: box-shadow 0.25s ease;
		font-size: 14px !important;
	}
	textarea {
		padding: 12px 16px !important;
	}
	.gform_wrapper.gravity-theme .gfield textarea {
		font-family: "opensans-regular", sans-serif !important;
	}
	label {
		font-family: "opensans-bold", sans-serif;
		font-size: 0.875rem;
		color: #ffffff;
		margin-bottom: 16px !important;
		font-size: 14px !important;
	}
	legend {
		font-family: "opensans-bold", sans-serif;
		font-size: 0.875rem;
		color: #a4a4a4;
		margin-bottom: 16px !important;
		font-size: 14px !important;
	}
	.gfield--type-name legend {
		color: #fff;
	}
	.gfield--type-name label {
		color: #a4a4a4;
		margin-bottom: 0 !important;
	}
	.gform_button,
	.gform_button_select_files {
		height: 60px;
		padding: 0px 24px;
		border-radius: 0;
		font-family: "opensans-extrabold", sans-serif;
		text-transform: uppercase;
		display: flex;
		align-items: center;
		border: 1px solid #000000;
		cursor: pointer;
		background: #129d46;
		color: #ffffff;
		transition: 0.25s ease;
		font-size: 14px !important;
		border-radius: 0.375rem;
	}
	#gform_submit_button_1 {
		width: 100%;
	}
	.gform_button_select_files {
		background: #fff;
		color: #000;
		margin: 16px auto 0 auto;
	}
	.gform_wrapper.gravity-theme .ginput_complex label {
		padding-top: 10px;
	}
	.gform_wrapper.gravity-theme .gform_fields {
		grid-row-gap: 50px;
	}
	.gform_wrapper.gravity-theme .gform_validation_errors > h2 {
		font-size: 14px !important;
	}
	.gform_wrapper.gravity-theme .description,
	.gform_wrapper.gravity-theme .gfield_description,
	.gform_wrapper.gravity-theme .gsection_description,
	.gform_wrapper.gravity-theme .instruction {
		font-weight: 500 !important;
		font-family: "opensans-bold";
		font-size: 14px;
		border-radius: 5px;
	}
	.gform_wrapper.gravity-theme .gfield_validation_message,
	.gform_wrapper.gravity-theme .validation_message {
		padding: 15px 16px !important;
	}
	span {
		font-size: 14px;
	}
	.gform_confirmation_message {
		display: flex;
		background: ~"rgb(18 157 70 / 8%)";
		border: 1px solid #129d46;
		padding: 24px;
		border-radius: 6px;
		p {
			margin: 0;
			padding: 0;
			font-family: "opensans-bold";
			font-size: 14px;
			color: #fff !important;
		}
	}
}