/*  =================================================================
    0.0 :ROOT ~ overwrites or extras (if needed)
    ================================================================== */
    :root {
        --row-width: 1180px; /* max-width */
        --row-half-width: -590px; /* half-width */
        --font-primary: 'Kanit', sans-serif;
        --font-secondary: 'Cormorant SC', serif;
        --font-weight: 400;
        
        --gutter-mobile: 20px;
        --gutter-tablet: 20px;
        
        --clr-grey_13: #131313;
        --clr-grey_3b: #3b3b3b;
        --clr-grey_32: #323232;
        --clr-grey_5d: #5d5d5d;
        --clr-grey_8a: #8a8a8a;
		--clr-grey_8e: #8e8e8e;
        --clr-grey_c6: #c6c6c6;
        --clr-grey_dd: #dddddd;
        --clr-grey_ef: #efefef;
        --clr-grey_eb: #ebebeb;
        --clr-grey_f6: #f6f6f6;
        --clr-sand_e0: #e0d7ce;
		
		--clr-grey_e1: #e1e1e1;
		--clr-grey_a1: #a1a1a1;

        --clr-gold: #C0A26E;
		--clr-navbar: #1e1e1e;

		--nav-width: 100%;

        --color-green-rgba: rgba(10, 179, 156, 0.18);
        --color-green-rgb: #0ab39c;		
        --color-red-rgba: rgba(240,101,72, 0.18);
        --color-red-rgb: #F06548;
		
		--swiper-pagination-bullet-horizontal-gap: 6px;
    }
	::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}
	::-webkit-scrollbar-button {
		width: 0px;
		height: 0px;
	}
	::-webkit-scrollbar-thumb {
		background: #C0A26E;
		border: 0px none #C0A26E;
		border-radius: 50px;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #C0A26E;
	}
	::-webkit-scrollbar-thumb:active {
		background: #C0A26E;
	}
	::-webkit-scrollbar-track {
		background: #484848;
		border: 0px none #ffffff;
		border-radius: 50px;
	}
	::-webkit-scrollbar-track:hover {
		background: #484848;
	}
	::-webkit-scrollbar-track:active {
		background: #484848;
	}
	::-webkit-scrollbar-corner {
		background: transparent;
	}
	.inner::-webkit-scrollbar-thumb {
		background: var(--clr-grey_8e);
		border: 0px none var(--clr-grey_8e);
		border-radius: 50px;
	}
	.inner::-webkit-scrollbar-thumb:hover {
		background: var(--clr-grey_8e);
	}
	.inner::-webkit-scrollbar-thumb:active {
		background: var(--clr-grey_8e);
	}

/*  =================================================================
1.0 STANDARDS
================================================================== */
	html {
	  interpolate-size: allow-keywords;
	}
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, label, a, .button, button, input, select, textarea, address {
        font-family: var(--font-primary);
    }
	
	body {
		background-color: #252526;
	}

    main.row, .row.outer {
        padding-left: 20px;
        padding-right: 20px;
    }
    .row.outer.collapsed {
        padding-left: 0;
        padding-right: 0;
    }
	
	/*body:not(.home) #siteContainer {
		padding-top: 80px;
	}*/
	

/*  1.1 BASE - Golors
    -------------------------------------------------------------- */
    .bgGrey_f6 {
        background-color: var(--clr-grey_f6);
    }
	.bgGrey_32 {
        background-color: var(--clr-grey_32);
    }
    .bgGrey_5d {
        background-color: var(--clr-grey_5d);
    }
    .bgGrey_8a {
        background-color: var(--clr-grey_8a);
    }
	.bgGrey_ef {
		background-color: var(--clr-grey_ef);
	}
	.bgGrey_eb {
		background-color: var(--clr-grey_eb);
	}
	.bgGrey_dd {
		background-color: var(--clr-grey_dd);
	}

/*  1.2 BASE - Clearfix
    -------------------------------------------------------------- */
    .clear, .clearall, .clearfix {
        clear: both;
    }
	section {
		padding: 0 20px;
	}
	
/*  1.3 BASE - Panes
    -------------------------------------------------------------- */
	.panel {
		width: 100%;
		display: block;
		margin: 0 auto;
		background-color: var(--color-grey-300);
		border: 2px solid var(--color-grey-600);
		padding: 14px;
		padding-bottom: 13px;
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 20px;
	}

	.panel a {
		text-decoration: underline;
	}
	.panel.alert, 
	.panel.notice, 
	.panel.success {
		text-align: center;
	}

	.panel.alert {
		border: 2px solid var(--color-red-rgb);
		background-color: var(--color-red-rgba);
		color: var(--color-red-rgb);
	}	
	.panel.notice {
		border: 2px solid #ff9966;
		background-color: #ffcc00;
		color: #ff9966;
	}	
	.panel.success {
		border: 2px solid var(--color-green-rgb);
		background-color: var(--color-green-rgba);
		color: var(--color-green-rgb);
	}
	.panel.success p {
		color: var(--color-green-rgb);
	}

/*  1.4 BASE - Text stylings
    -------------------------------------------------------------- */
    h1, h2, h3, h4, h5, h6, cite {
        font-family: var(--font-secondary);
    }
    h1 {
        font-weight: 600;
		font-size: 45px;
		line-height: 38px;
		color: #588170;
    }
    h2, .about h3 {
		/*letter-spacing: -2px;*/
        padding: 0;
        text-transform: none;
        font-size: 24px;
        line-height: 34px;
        font-weight: 400;
    }
	.intro h2 {
		margin-bottom: 25px;
	}
    h2.floated {
        position: relative;		
        padding-right: 200px;
    }
    h3 {
        font-weight: 300;
        font-size: 40px;
        line-height: 50px;
        text-transform: none;
    }
    p, li {
        font-size: 16px;
        line-height: 24px;
    }

	.postText h2 {
		color: #588170;
	}

	.intro p {
		font-size: 20px;
		line-height: 24px;
		color: var(--clr-grey_8e);
		font-weight: 100;
		text-align: center;
	}

    input[type="submit"],
    button,
    .button,
    .btn {
        background-color: var(--clr-black);
        color: var(--clr-white);
        font-family: var(--font-poppins);
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
    }
	
	@keyframes zoomEffect {
		0% { transform: scale(1); }
		50% { transform: scale(1.2); }
		100% { transform: scale(1); }
	}
	.anim-zoom {
		animation: zoomEffect 40s infinite ease-in-out;
	}

/*  =================================================================
    x.0 NAV
    ================================================================== */
	nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
		padding: 20px;
		z-index: 996;
		background-color: transparent;
		-webkit-transition: background-color 150ms;
				transition: background-color 150ms;
		display: flex;
		/*align-items: center;*/
	}
	nav:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 10px;
		background-color: var(--clr-gold);
		z-index: 1;
		-webkit-transition: background-color 150ms;
				transition: background-color 150ms;
	}
	nav.scrolled {
		background-color: var(--clr-navbar);
	}
	nav.scrolled:before {
		background-color: var(--clr-navbar);
	}
	nav .logo-link {
		/*position: relative;*/
		position: absolute;
		left: 50%;
		top: 27px;
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
		font-size: 0;
		line-height: 0;
		display: inline-block;
		margin: 0;
		z-index: 1;
		font-size: 0;
		line-height: 0;
		-webkit-transition: top 150ms;
				transition: top 150ms;
	}
	/*nav .logo-link img {
		width: auto;
		height: 214px;
	}*/
	nav .logo-link img {
		max-width: 162px;
		-webkit-transition: max-width 150ms;
				transition: max-width 150ms;
	}
	nav .logo-link.big {
		top: 67px;
	}
	nav .logo-link.big img {
		max-width: 260px;
	}
	nav.scrolled .logo-link {
		top: 20px;
	}
	nav.scrolled .logo-link img {
		max-width: 102px;
	}
	
	/* */
	.iconImg {
		position: absolute;
		top: 110px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		width: auto;
		height: 90px/*120px*/;
	}
	
	nav .navBtn {
		font-size: 40px;
		margin-top: 20px;
		color: var(--clr-gold);
		-webkit-transition: margin-top 150ms;
				transition: margin-top 150ms;
	}
	nav.scrolled .navBtn {
		margin-top: 0px;
	}
	nav .menuBTN {
		margin-right: auto;
	}
	nav .searchBTN {
		margin-left: auto;
	}

	aside {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		max-width: var(--nav-width);
		height: 100dvh;
		/*padding: 205px 20px 20px 93px;*/
		padding: 125px 20px 20px 60px;
		z-index: 995;
		background-color: var(--clr-navbar);
		-webkit-transform: translateX(calc(-1 * var(--nav-width)));
				transform: translateX(calc(-1 * var(--nav-width)));
		/* The Magic: Springy Transition */
    	-webkit-transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    			transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	}
	aside.showed {
		-webkit-transform: translatex(0);
				transform: translatex(0);
	}
	aside ul li {
		margin-bottom: /*28px*/18px;
	}
	aside ul a {
		position: relative;
		font-family: var(--font-primary);
		font-weight: 200;
		font-size: /*25px*/21px;
		line-height: /*37px*/33px;
		color: rgba(255,255,255,0.5);
		transition: all 300ms;
	}
	aside ul li.active a {
		color: var(--clr-gold);
		font-weight: 300;
	}
	/*aside ul a:before {
		content: '\EEA3';
		font-family: "remixicon";
		position: absolute;
		left: 0;
		top: 0;
		width: 37px;
		line-height: 37px;
		color: var(--clr-gold);
		font-size: 19px;
		-webkit-transform: translateX(-120px);
				transform: translateX(-120px);
		-webkit-transition: all 300ms;
				transition: all 300ms;
	}*/
	aside ul a:hover {
		color: var(--clr-gold);
	}
	/*aside ul a:hover:before {
		transform: translateX(-37px);
	}*/
	/*nav .logo-link {
		position: relative;
		font-size: 0;
		line-height: 0;
		display: inline-block;
		margin: 20px 0;
		z-index: 1;
	}
	nav .topRow + .logo-link {
		margin: 20px 0;
	}
	nav .topRow + .logo-link + .mobileBTN {
		margin-left: auto;
		order: 2;
	}
	nav .logo-link img {
		width: auto;
		height: 50px;
	}
	nav .row {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	nav .row > .topRow {
		position: absolute;
		top: 0;
		right: -20px;
		text-align: right;
		width: calc(100% + 40px);
		padding: 0 20px;
		display: none;
	}
	
	nav a {
		color: #969696;
	}
	nav a.mobileBTN {
		width: 40px;
		line-height: 40px;
		border: 1px solid #5d5d5d;
		text-align: center;
		font-size: 20px;
		border-radius: 5px;
	}
	nav .active > a {
		font-weight: 600;
        color: #588170;
	}
	nav .topRow a {
		display: inline-block;
		line-height: 24px;
		font-size: 14px;
	}
	nav .row ul {
		margin-left: auto;
		font-size: 0;
		line-height: 0;
		text-align: left;
		display: none;
	}
	nav.showed .row ul {
		display: block;
		position: absolute;
		left: 0;
		top: 90px;
		width: 100%;
		height: calc(100vh - 90px);
		background-color: var(--clr-grey_ef);
		border-top: 2px solid var(--clr-grey_5d);
	}
	nav.showed .row .topRow + .logo-link + .mobileBTN + ul {
		top: 114px;
		height: calc(100vh - 114px);
		left: -20px;
		width: calc(100% + 40px);
		padding-top: 10px;
	}
	nav .row ul li {
		display: inline-block;
	}
	nav .row ul li.topRow {
		text-align: left;
        display: block;
        width: 100%;
        margin-bottom: 14px;
	}
	nav .row ul li:not(:nth-child(1)):not(:nth-child(2)) {
		margin-left: 20px;
	}
	nav.showed .row ul li:not(:first-of-type) {
		margin-left: 0;
	}
	nav.showed .row ul li {
		display: block;
		width: 100%;
		padding-left: 20px;
	}
	nav .row ul a {
		font-size: 18px;
		line-height: 40px;
	}
    nav .row ul li.topRow a {
		display: block;
		font-weight: 400;
		font-size: 18px;
	}
	nav .row ul a.cta {
		display: inline-block;
		background-color: #588170;
		color: var(--clr-white);
		font-size: 16px;
		line-height: 24px;
		padding: 8px 16px;
		border-radius: 40px;
		margin-top: 10px;
	}*/

	.search-bar {
		position: absolute;
		right: 10px;
		top: 38px;
		z-index: 999;
		height: auto;
		width: 456px;
		max-width: calc(100% - 20px);
	}
	.search-bar .sprig-SearchForm {
		position: relative;
		background-color: transparent;
		backdrop-filter: blur(6px);
		display: block;
		border-radius: 33px;
		box-shadow: 0 0 0 1px var(--clr-gold);
		font-size: 0;
		line-height: 0;
		overflow: hidden;
		max-height: 66px;
	}
	.search-bar .sprig-SearchForm .icon {
		/*display: inline-block;
		vertical-align: top;*/
		float:left;
		width: 64px;
		line-height: 64px;
		font-size: 34px;
		text-align: center;
		color: var(--clr-gold);
	}
	.search-bar .sprig-SearchForm input {
		position: relative;
		/*display: inline-block;
		vertical-align: top;*/
		float:left;
		width: calc(100% - 64px);
		background-color: transparent;
		color: #fff;
		font-size: 18px;
		line-height: 62px;
		margin: 0;
		border: 0;
	}
	.results {
		background-color: rgba(37,37,38,0.65);
		backdrop-filter: blur(6px);	
		width: 100%;
		border-radius: 20px;
		padding: 30px;
		margin: 20px 0 0 0;
	}
	.results h2 {
		font-family: var(--font-primary);
		color: var(--clr-gold);
		border-bottom: 1px solid var(--clr-gold);
		padding-bottom: 10px;
		margin: 0;
		font-size: 16px;
		line-height: 28px;
		font-weight: 300;
	}
	.results a.searched-item {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: 200;
		color: #fff;
		padding: 10px 0;
		border-bottom: 1px solid var(--clr-gold);
	}
	.results a.searched-item img {
		max-width: 128px;
		height: 86px;
		margin-right: 40px;
		object-fit: cover;
	}
	.results .inner {
		height: auto;
		max-height: 214px;
		overflow: auto;
		border-bottom: 1px solid var(--clr-gold);
	}
	.results p {
		padding: 10px 0 0 0;
		color: #fff;
		font-weight: 300;
	}
	.results p i,
	.results p a {
		color: var(--clr-gold);
	}
	.results p i {
		margin-right: 20px;
	}

    /*  =================================================================
    x.0 HEADER	
    ================================================================== */
    header,
    .etalage {
        width: 100%;
        height: 475px;
		overflow: hidden;
    }
	
	header {
		position: relative;
		height: 100dvh;
	}
	
	header.withImg:before {
		content: '';
		z-index: 1;
		pointer-events: none;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		box-shadow: 770px 595px 232px 336px rgba(0,0,0,0.4) inset, 306px -194px 250px -16px rgba(0,0,0,0.4) inset;
	}
	header.text {
		height: auto;
		font-size: 0;
		line-height: 0;
	}
	/*header.text,
	.etalage.project {
		margin-bottom: 40px;
	}*/
	header.slider .row {
		height: 100%;
	}
    header img,
    .etalage img {
        height: 100%;
        object-fit: cover;
    }
	/*header:not(.withImg) img {
		animation: zoomEffect 40s infinite ease-in-out;
	}*/
	header.withImg {
		padding-top: 0;
	}
	header.withImg img {
		height: 502px;
	}
    header hgroup,
    .etalage hgroup {
		position: absolute;
		left: 20px;
		top: 50%;
		z-index: 1;
		-webkit-transform: translate(0, -50%);
				transform: translate(0, -50%);
		display: inline-block;
		width: var(--row-width);
		max-width: calc(100% - 40px);
    }
    .etalage h2,
    .etalage h3 {
        color: var(--clr-white);
    }
    .etalage h2 {
		font-size: 34px;
		line-height: 36px;
    }
    .etalage h2 {
        font-weight: 600;
    }
	.etalage h1,
    .etalage h2 {
        font-weight: 400;
        font-size: 44px;
        line-height: 1.1em;
        color: #fff;
    }
    .etalage h2:after {
		content: '.';
        font-size: 60px;
        font-weight: 700;
        color: #90AEA2;
    }
    .etalage h3 {
		letter-spacing: -1px;
        margin-top: 25px;
        padding: 0;
        text-transform: none;
        font-size: 26px;
        line-height: 36px;
        font-weight: 400;
    }
	.etalage.centered {
		text-align: center;
	}
	.etalage.centered h1,
	.etalage.centered h2 {
		font-size: 50px;
		line-height: 55px;
		font-weight: 600;
	}
	.etalage.centered h1 small,
	.etalage.centered h2 small {
		margin-top: 0;
		font-weight: 300;
	}
	.etalage.centered h2:after {
		display: none;
	}

	header.slider .splide,
	header.slider .splide__track,
	header.slider .splide__list {
		height: 100%;
	}
	header.slider .splide__slide {
		position: relative;
	}
	header.slider .splide__slide:before {
		content: '';
		z-index: 1;
		pointer-events: none;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/*box-shadow: 306px 288px 250px -16px #000000BF inset, 770px 595px 142.7px 336px #00000069 inset;*/
		box-shadow: 306px 288px 250px -16px #000000BF inset, /*770px 595px 142.7px 336px #00000069 inset,*/ 0px -417px 23.1px 0px #0000004F inset;

	}
	header.slider .splide img {
		height: 100%;
		object-fit: cover;
	}
	
	header.slider .text-container {
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, 35%);
				transform: translate(-50%, 35%);
		max-width: 100%;
		padding: 0 20px;
		z-index: 4;
		text-align: center;
	}
	header.slider h1 {
		color: var(--clr-white);
		font-family: var(--font-secondary);
		font-weight: 300;
		/*font-size: 65px;
		line-height: 79px;*/
		font-size: 26px;
		line-height: 42px;
		white-space: nowrap;
		margin-bottom: 60px;
	}
	header.slider h1 span {
		opacity: 85%;
	}
	header.slider h1 small {
		text-transform: none;
		font-family: var(--font-primary);
		color: var(--clr-gold);
		font-weight: 200;
		font-size: /*26px*/18px;
		line-height: /*41px*/26px;
		white-space: normal;
	}
	header.slider .text-container.noBtn {
		top: auto;
		bottom: 175px;
		-webkit-transform: translate(-50%, 0);
				transform: translate(-50%, 0);
	}
	header.slider .text-container.noBtn h1 {
		margin-bottom: 0;
	}
	header.slider .text-container.noBtn h1 small {
		color: var(--clr-gold);
	}
	header.slider .button {
		background: var(--clr-gold);
		box-shadow: 0px 4px 4px 0px #00000040;
		width: 100%;
		max-width: 300px;
		line-height: 46px;
		border-radius: 28px;

		font-family: var(--font-primary);
		font-weight: 300;
		font-size: 20px;
		letter-spacing: -3%;
	}

	/* Container for the pagination */
	header.slider .splide__pagination {
		bottom: 40px;
		display: flex;
		align-items: center;
		gap: 10px/*80px*/; /* Increased gap to make room for the line */
		counter-reset: pagination-counter;
		list-style: none;
	}

	/* Individual Pagination Item */
	header.slider .splide__pagination__page {
		background: transparent;
		border: none;
		color: rgba(255, 255, 255, 0.3); /* Faded when inactive */
		font-size: 18px;
		font-family: 'Inter', sans-serif;
		padding: 0;
		transition: color 0.4s ease;
		position: relative;
		cursor: pointer;
		width: auto;
		height: auto;
		transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth springy growth */
	}

	/* The Number (01, 02...) */
	header.slider .splide__pagination__page::before {
		content: "0" counter(pagination-counter);
		counter-increment: pagination-counter;
		font-weight: 100;
		font-family: var(--font-primary);
	}

	/* The Animated Line */
	/* We put the line on the page itself so it can react to the .is-active class */
	header.slider .splide__pagination__page::after {
		content: "";
		position: absolute;
		left: 110%; /* Starts just after the number */
		top: 50%;
		width: 0; /* Start at zero width */
		height: 1px;
		background: var(--primary-color, #ffffff);
		transform: translateY(-50%);
		transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth springy growth */
		pointer-events: none;
	}

	/* When the slide is ACTIVE: Change color and grow the line */
	header.slider .splide__pagination__page.is-active {
		color: #ffffff;
		background: transparent !important;
		margin-right: 70px;
	}

	header.slider .splide__pagination__page.is-active::after {
		width: 40px; /* The line "jumps" out when the number is active */
	}

	/* Hide the line on the very last number so it doesn't point to nothing */
	header.slider .splide__pagination li:last-child .splide__pagination__page::after {
		display: none;
	}
	
	
/*  =================================================================
    x.0 BREADCRUMBS
    ================================================================== */
	.breadcrumb {
		font-size: 12px;
		padding: 0px 20px;
	}
	header.withImg .breadcrumb {
		padding-top: 5px;
	}

	.breadcrumb ol {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
	}
	.breadcrumb li {
		display: flex;
		align-items: center;
		color: #5d5d5d;
		text-transform: lowercase;
	}
	.breadcrumb li:not(:last-child)::after {
		content: "/";
		margin: 0 8px;
		color: #aaa;
	}
	.breadcrumb a {
		text-decoration: none;
		color: var(--clr-green);
		transition: color 0.2s;
	}
	
	
/*  =================================================================
    x.0 SIDEBAR
    ================================================================== */


/*  =================================================================
    x.0 CONTENT
    ================================================================== */
	/*#siteContainer {
		padding-top: 10px;
	}*/
	#siteContainer.bg-img {
		/*background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;*/
		position: relative;
		box-shadow: 0px 708px 141px 0px rgba(0,0,0,0.4) inset;
	}
	body:not(.noPad) #siteContainer,
	#siteContainer.bg-img {
		padding-top: 267px;
	}
	
	#siteContainer.bg-img {
		min-height: 100dvh;
	}
	
	/*#siteContainer:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 10px;
		background-color: var(--clr-gold);
		z-index: 998;
	}*/
	#siteContainer.bg-img:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.44);
		z-index: 1;
	}
	#siteContainer.bg-img section {
		position: relative;
		z-index: 2;
	}

	section, footer {
		padding-left: 20px;
		padding-right: 20px;
	}   

	.home section {
		padding: 0 20px;
	}

    section.etalage {
		padding-left: 0;
		padding-right: 0; 
	}

/*  x.x WYSIWYG
    -------------------------------------------------------------- */		
	.WYSIWYG h1, .WYSIWYG h3, .WYSIWYG h4, .WYSIWYG h5, .WYSIWYG h6,
    .WYSIWYG p:not(:last-of-type),
    .WYSIWYG ol,
    .WYSIWYG ul,
    .WYSIWYG figure {		
        margin-bottom: 20px;
    }
	.WYSIWYG h2 {
		font-size: 30px;
		line-height: 40px;
		font-weight: 600;
	}
	.WYSIWYG h2.seo {
		color: var(--clr-gold);
	}
	.WYSIWYG h3 {
		font-size: 18px;
		line-height: 24px;
		font-weight: 500;
		padding: 6px 0;
	}
    .WYSIWYG p b,
	.WYSIWYG p strong {
        font-weight: 400;
    }
    .WYSIWYG p a {
		color: var(--clr-grey_8e);
        text-decoration: underline;
    }
	.WYSIWYG ul:not(.summary):not(.contactform) li,
	.WYSIWYG ol li	{
		position: relative;
		padding-left: 32px;
	}
	.WYSIWYG ul:not(.summary) li:before {
		content: '\f3c1';
		font-family: 'remixicon';
		left: 3px;
		top: 3px;
		position: absolute;
		width: 18px;
		line-height: 18px;
		text-align: center;
		border-radius: 50%;
		color: #588170;
		font-size: 6px;
		font-weight: 400;
	}
	.WYSIWYG li span {
		font-weight: 500;
	}
	
	.WYSIWYG .one_col p {
		font-weight: 200;
		font-size: 20px;
		line-height: 26px;
	}
	
	.WYSIWYG .one_col p,
	.WYSIWYG .one_col p a,
    .WYSIWYG p a {
		color: var(--clr-grey_8e);
    }
	.WYSIWYG .one_col p a,
    .WYSIWYG p a {
        text-decoration: underline;
    }
	
	.WYSIWYG.blocked .row {
		max-width: 630px;
		padding: 28px;
	}
	.WYSIWYG.blocked .row:not(.bgGrey_32) {
		background-color: #252526;
	}
	.WYSIWYG.blocked h2, .WYSIWYG.blocked h3, .WYSIWYG.blocked h4, .WYSIWYG.blocked h5, .WYSIWYG.blocked h6 {
		color: var(--clr-gold);
	}
	.WYSIWYG.blocked p,
	.WYSIWYG.blocked a {
		color: var(--clr-white);
	}
	.WYSIWYG.blocked p {
		font-weight: 100;
		font-size: 18px;
		line-height: 24px
	}
	.WYSIWYG.blocked a {
		text-decoration: underline;
	}
	
	/*.WYSIWYG .type2 ._full {
		padding-left: calc(100% - 724px);
	}
	.WYSIWYG .type2.swapped ._full {
		padding-left: 0;
		padding-right: calc(100% - 724px);
	}*/
	.WYSIWYG .txt p,
	.WYSIWYG .type1 .txt li	{
		position: relative;
		font-weight: 200;
		font-size: 16px;
		line-height: 24px;
		color: var(--clr-white);
		margin-bottom: 20px;
	}
	.WYSIWYG .type1 .txt li	{
		padding-left: 24px;
	}	
	.WYSIWYG .type1 .txt li:before {
		font-family: "remixicon";
		content: '\EB7B';
		color: var(--clr-gold);
		line-height: 24px;
		position: absolute;
		left: 0;
		top: 0;
		width: 24px;
		text-align: left;
		font-size: 20px;
	}
	.WYSIWYG .type1 .txt ._thropy li:before {
		content: '\F22F';
	}
	
	.WYSIWYG .icon {
		position: absolute;
		left: calc(100% - 70px);
		top: 30px;
		width: 100%;
		max-width: 160px;
		height: 160px;
		border-radius: 50%;
		background-color: #323232;
	}
	.WYSIWYG .icon:before {
		content: '';
		background-color: var(--clr-gold);
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		max-width: 116px;
		height: 116px;
		border-radius: 50%;
		z-index: 1;
		-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
	}
	.WYSIWYG .icon:after {
		content: '';
		background-color: #323232;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		max-width: 115px;
		height: 115px;
		border-radius: 50%;
		z-index: 2;
		-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
	}
	.WYSIWYG .icon img {
		z-index: 4;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		max-width: 80px;
		-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
	}
	section.WYSIWYG.text_img {
		padding-left: 0;
		padding-right: 0;
	}
	/*.WYSIWYG .type1,
	.WYSIWYG .type2 {
		padding-top: 28px;
		padding-bottom: 28px;
	}*/
	.WYSIWYG .type2 img {
		max-width: 724px;
		float: left;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
	/*.WYSIWYG .type2.swapped img,
	.WYSIWYG .type2.swapped .splide {
		float: right;
	}*/
	.WYSIWYG .type2.swapped .splide {
		overflow: hidden;
	}
	.WYSIWYG .type2 .txt {
		/*position: absolute;
		right: 0;
		top: 70px;
		width: 50%;*/
		width: 100%;
		z-index: 1;
		height: 80vw/*calc(100% - 140px)*/;
		padding: /*50px*/30px;
		background-color: #323232;
	}
	/*.WYSIWYG .type2.swapped .txt {
		right: auto;
		left: 0;
	}*/
	
	.WYSIWYG .txt h2 {
		color: var(--clr-gold);
		line-height: 1em;
		font-size: 40px;
		margin-bottom: 20px;
	}
	.WYSIWYG .type2 .txt h2 {
		font-size: 36px;
	}
	.WYSIWYG .type2 .txt .inner {
		position: relative;
		display: block;
		width: 100%;
		height: calc(100% - 92px);
		overflow-y: auto;
		padding-right: 30px;
	}

/*  x.x .WYSIWYG .type2 slider extention
    -------------------------------------------------------------- */
	.WYSIWYG .type2 .splide {
		position: relative;
		width: 100%;
		max-width: 724px;
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.WYSIWYG .type2 .splide__slide {
		width: 100%;
		overflow: hidden;
	}
	.WYSIWYG .type2 .splide__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.splide__progress,
	.custom__splide__progress {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.1);
		z-index: 1;
		height: 3px;
		width: 100%;
	  }
	  
	.splide__progress__bar,
	.custom__carousel__progress__bar {
		background-color: var(--clr-gold);
		height: 3px;
		transition: width 50ms ease;
		width: 0;
	  }
	 

/*  x.x BUTTON
    -------------------------------------------------------------- */	
	.WYSIWYG a.button {
		display: inline-block;
		background-color: #588170;
		color: var(--clr-white);
		font-size: 16px;
		line-height: 24px;
		padding: 8px 26px;
		border-radius: 40px;
	}	
	.WYSIWYG .btnContainer {
		display: flex;
	}	
	.WYSIWYG .btnContainer._lft {
		justify-content: flex-start;
	}
	.WYSIWYG .btnContainer._cntr {
		justify-content: center;
	}
	.WYSIWYG .btnContainer._rght {
		justify-content: flex-end;
	}
	/*.WYSIWYG.faq-link {
		padding-top: 12px;
		padding-bottom: 0;
	}*/
	.WYSIWYG.faq-link {
		padding-top: 0;
		padding-bottom: 12px;
	}
	.WYSIWYG.faq-link:last-of-type {
		padding-bottom: 0;
	}
	.WYSIWYG.faq-link a.button {
		display: block;
		margin: 0 auto;
		width: 100%;
		max-width: 630px;
		background-color: #252526;
		font-family: var(--font-secondary);
		color: var(--clr-gold);
		line-height: 40px;
		font-size: 22px;
		padding: 28px/* 56px 28px 28px*/;
		font-weight: 500;
		cursor: pointer;
		border-radius: 0;
		text-align: left;
	}
	.WYSIWYG.faq-link a.button i {
		float: right;
	}

/*  x.x TITLE
    -------------------------------------------------------------- */
	header .title {
		position: absolute;
		bottom: 78px;
		left: 50%;
		z-index: 2;
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
	}
	header .title h1,
	section.title h1 {
		text-align: center;
		color: var(--clr-white);
		font-weight: 300;
		font-size: /*65px*/40px;
		line-height: /*79px*/45px;
		margin: 0;
	}
	/*header*/ .title h1 span {
		opacity: 85%;
	}
	header .title h1 small,
	section.title h1 small {
		font-family: var(--font-primary);
		color: var(--clr-gold);
		font-weight: 200;
		font-size: /*30px*/22px;
		line-height: /*45px*/30px;
		margin-top: 10px;
	}
	.bg-img section.title {
		margin-bottom: /*78px*/38px;
	}

/*  x.x USP
    -------------------------------------------------------------- */
	section.USP {
		padding: 0;
	}
	section.USP .row {
		text-align: left;
		font-size: 0;
		line-height: 0;
		display: flex;
		flex-direction: column;
	}
	section.USP .text,
	section.USP figure {
		display: inline-block;
		position: relative;
		width: 100%;
		height: /*300px*/;
	}
	section.USP .text {
		/*max-width: 44.9%;*/
		padding: 20px;
		background-color: var(--clr-white);
		position: relative;
		text-align: center;
	}
	section.USP .text h2 {
		font-family: var(--font-secondary);
		font-weight: 400;
		font-size: 45px/*65px*/;
		line-height: 50px/*79px*/;
		color: var(--clr-black);
	}
	section.USP .text h3 {
		font-family: var(--font-primary);
		font-weight: 300;
		font-size: 18px;
		line-height: 40px;
		letter-spacing: -3%;
		color: var(--clr-gold);
		/*margin-top: -20px;*/
	}
	section.USP figure {
		/*max-width: 55.1%;*/
		background-color: #0B86CA;
		font-size: 0;
		line-height: 0;
	}
	section.USP figure img {
		height: 100%;
		object-fit: cover;
	}

/*  x.x IMAGE COMPARER
    -------------------------------------------------------------- */
	section.tabs {
		/*padding: 100px 0;*/
		text-align: center;
	}
	.tabs-nav {
		position: relative;
		padding: 0 0 12px 0;
		margin: 0 0 35px 0;
		display: inline-block;
		overflow: hidden;
	}
	.tabs-nav:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 1px;
		width: 100%;
		height: 1px;
		background-color: #3f3f3f;
	}

	/* Individual Links */
	.tab-link {
		text-align: left;
		position: relative;
		color: var(--clr-grey_8e);
		line-height: 30px;
		font-size: 20px;
		font-weight: 300;
		z-index: 2;
		transition: color 350ms;
		letter-spacing: -3%;
	}
	.tabs-nav .tab-link:not(:last-of-type) {
		margin-right: 20px;
	}

	.tab-link:hover {
		color: var(--clr-gold);
	}
	.tab-link.active {
		color: var(--clr-gold);
	}

	/* The Moving Magnet Border */
	.indicator {
		position: absolute;
		bottom: 0; /* Offset from the bottom of the container */
		height: 3px;
		background: var(--clr-gold);
		border-radius: 20px;
		z-index: 1;
		/* The "Magnetic" feel comes from this specific cubic-bezier */
		transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1);
		pointer-events: none; /* Prevents the line from blocking clicks */
	}

	.tabs-container {
		text-align: left;
	}
	.tab-inner {
		display: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: all 350ms;
	}
	.tab-inner.active {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}
	.tab-inner figure {
		position: relative;
		width: calc(100% - 88px);
		margin: 0 54px 0 34px;
		padding-bottom: calc(100% - 88px);
		/*-webkit-transform: translateX(-300px);
				transform: translateX(-300px);*/
		opacity: 0;
		-webkit-transition: all 2000ms;
				transition: all 2000ms;
	}
	.tab-inner.active figure {
		/*-webkit-transform: translateX(0);
				transform: translateX(0);*/
		opacity: 1;
	}
	.tab-inner figure img {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		object-fit: cover;
	}
	.tab-inner .text {
		padding: 75px 34px 0 0/*54px*/;
		-webkit-transform: translateX(300px);
				transform: translateX(300px);
		opacity: 0;
		-webkit-transition: all 750ms;
				transition: all 750ms;
	}
	.tab-inner.active .text {
		-webkit-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	.tab-inner .text h2 {
		font-family: var(--font-secondary);
		font-size: 45px;
		line-height: 40px;
		color: var(--clr-gold);
		margin-bottom: 30px;
	}
	.tab-inner .text p {
		font-size: 15px;
		line-height: 28px;
		color: var(--clr-white);
		margin-bottom: 30px;
		font-weight: 200;
	}
	.tab-inner .text a.more {
		text-transform: uppercase;
		font-size: 12px;
		line-height: 28px;
		color: var(--clr-white);
	}

/*  x.x PROJECTS
    -------------------------------------------------------------- */
	/*section.projects,
	section.USP-texts {
		padding: 50px 20px;
	}*/
	section.masonGall .row,
	section.projects .row.big/*,
	section.USP-texts .row*/ {
		max-width: 1776px;
	}
	
	section.projects .splide_prj {
		padding-bottom: 54px;
	}
	
	section.projects .splide__slide img {
		height: auto;
		aspect-ratio: 1776 / 786;
		object-fit: cover;
	}
	section.projects .splide__slide p {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
		padding: 0 10px;
		display: block;
		text-align: right;
		line-height: 40px;
		font-size: 18px;
		font-weight: 200;
		color: var(--clr-white);
	}
	section.projects .splide-counter {
		position: absolute;
		color: var(--clr-white);
		right: 130px;
		bottom: 0;
		font-size: 18px;
		line-height: 40px;
	}
	section.projects .prj_link {
		position: absolute;
		background-color: #252526;
		color: var(--clr-gold);
		left: 0;
		bottom: 0;
		font-size: 18px;
		line-height: 40px;
		font-weight: 400;
	}
	section.projects .splide__arrows {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 40px;
		width: 165px;
		background: #252526;
	}
	section.projects .splide__arrows .splide__arrow {
		border: 1px solid var(--clr-grey_8e);
		background-color: transparent;
		color: var(--clr-grey_8e);
		-webkit-transform: translateY(0);
				transform: translateY(0);
		position: absolute;
		top: auto;
		bottom: 0;
		left: auto;
		right: 0;
		width: 40px;
		line-height: 40px;
		height: 40px;
		-webkit-transition: all 300ms;
				transition: all 300ms;
	}
	section.projects .splide__arrows .splide__arrow.splide__arrow--prev {
		right: 55px;
	}
	section.projects .splide__arrows .splide__arrow:hover {
		border-color: var(--clr-white);
		color: var(--clr-white);
	}
	
	
	section.projects.grid,
	section.socials.overview {
		padding-bottom: 100px;
	}
	section.projects.single,
	section.news.single {
		padding-bottom: 100px;
	}
	section.projects.single {
		padding-top: /*155px*/100px;
	}

/*  x.x USP TEXTS
    -------------------------------------------------------------- */
	/*section.USP-texts {
		padding: 75px 20px;
	}*/
	section.USP-texts .row {
		max-width: 1410px;
	}
	section.USP-texts h2 {
		color: var(--clr-white);
		font-size: /*50px*/44px;
		line-height: 40px;
		margin-bottom: 45px;
	}
	section.USP-texts .gridFrame {
		padding: 30px 0;
		border-top: 1px solid #3f3f3f;
		border-bottom: 1px solid #3f3f3f;
	}
	
	section.USP-texts h3 {
		font-family: var(--font-primary);
		font-size: 20px;
		line-height: 40px;
		letter-spacing: -3%;
		color: var(--clr-grey_e1); 
		margin-bottom: 5px;
		font-weight: 300;
	}
	section.USP-texts h3 small {
		font-size: 16px;
		line-height: 40px;
		color: var(--clr-gold);
		text-transform: uppercase;
		margin-bottom: -10px;
	}
	section.USP-texts p {
		font-size: 18px;
		line-height: 28px;
		letter-spacing: -3%;
		font-weight: 300;
		color: var(--clr-grey_8e);
	}

/*  x.x SOCIALS + EMPLOYEES
    -------------------------------------------------------------- */
	/*section.socials,
	section.employees {
		padding: 75px 20px 0;
	}*/
	section.employees {
		padding-bottom: 40px;
	}
	section.socials a.all {
		position: absolute;
		right: 0;
		top: 50%;
		-webkit-transform: translateY(calc(-50% - 18px));
				transform: translateY(calc(-50% - 18px));
		color: var(--clr-white);
	}
	section.socials h2 {
		font-size: 40px;
		line-height: 60px;
		color: var(--clr-white);
		margin-bottom: 36px;
	}
	section.socials figure,
	section.employees figure {
		margin-bottom: 15px;
	}
	section.socials img,
	section.employees img {
		height: auto;
		/*aspect-ratio: 59 / 77;*/
		object-fit: cover;
		margin-bottom: 10px;
	}
	
	section.employees h4 {
		font-size: 15px;
		line-height: 28px;
		text-transform: uppercase;
		font-weight: 300;
		color: var(--clr-gold);
	}
	section.socials h3,
	section.employees h3 {
		font-size: 20px;
		line-height: 28px;
		font-weight: 300;
		color: var(--clr-white);
	}
	section.socials h3 {
		font-family: var(--font-primary);
		font-weight: 300;
		font-size: 24px;
		color: var(--clr-gold);
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10px;
	}
	
	section.socials .socialSlider {
		padding-bottom: 70px;
	}
	
	section.socials .intro p {
		position: relative;
		text-align: left;
		font-size: 16px;
		line-height: 28px;
		color: var(--clr-grey_8e);
		font-weight: 200;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20px;
	}
	section.socials .intro p {
		position: relative;
		text-align: left;
		font-size: 16px;
		line-height: 28px;
		color: var(--clr-grey_8e);
		font-weight: 200;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20px;
	}
	.socials .extra-info {
		line-height: 28px;
		font-weight: 300;
		color: var(--clr-grey_8e);
	}
	.socials .extra-info time {
		float: left;
		width: fit-content;
		font-size: 15px;
		margin-right: 20px;
	}
	.socials .extra-info span {
		float: left;
		width: fit-content;
		font-size: 14px;
	}

/*  x.x NEWSLETTER
    -------------------------------------------------------------- */
	section.newsletter {
		/*margin-top: 100px;*/
		background-color: var(--clr-white);
		padding: 65px 20px;
	}
	section.newsletter h2 {
		font-size: 36px/*65px*/;
		line-height: 33px/*51px*/;
	}
	section.newsletter h2 span {
		display: inline;
	}
	section.newsletter h3 {
		display: inline-block;
		font-family: var(--font-primary);
		color: var(--clr-gold);
		font-weight: 300;
		text-transform: uppercase;
		font-size: 16px;
		line-height: 28px;
		margin-bottom: 6px;
	}
	section.newsletter .signup input::-webkit-input-placeholder {
        opacity: .6;
    }
    section.newsletter .signup input::-moz-placeholder {
        opacity: .6;
    }
    section.newsletter .signup input:-ms-input-placeholder {
        opacity: .6;
    }
    section.newsletter .signup input:-moz-placeholder {
        opacity: .6;
    }
	
	section.newsletter .signup .socials {
		float: left;
	}
	section.newsletter .socials a {
		color: var(--clr-black);
		font-size: 24px;
	}
	section.newsletter .signup .button {
		float: right;
		line-height: 46px;
		background-color: var(--clr-gold);
		color: var(--clr-white);
		border-radius: 28px;
		font-size: 20px;
		font-weight: 300;
		box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
	}

/*  x.x IMAGE COMPARER
    -------------------------------------------------------------- */
	.comparison-slider {
		position: relative;
		width: 100%;
		margin: 0 auto; 
		aspect-ratio: 16 / 9;
		overflow: hidden;
		box-shadow: 0 4px 10px rgba(0,0,0,0.1);
		--position: 50%;
	}

	.comparison-slider img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		pointer-events: none;
	}

	.image-after {
		clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);
	}

	.slider-line {
		position: absolute;
		inset: 0;
		width: 4px;
		height: 100%;
		background: #ffffff;
		left: var(--position);
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
		pointer-events: none;
	}

	.slider-button {
		position: absolute;
		top: 50%;
		left: var(--position);
		transform: translate(-50%, -50%);
		width: 40px;
		height: 40px;
		background: white;
		border-radius: 50%;
		box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		pointer-events: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.slider-button::before,
	.slider-button::after {
		content: '';
		border: solid #333;
		border-width: 0 3px 3px 0;
		display: inline-block;
		padding: 3px;
	}
	.slider-button::before {
		transform: rotate(135deg);
		margin-right: 4px;
	}
	.slider-button::after {
		transform: rotate(-45deg);
		margin-left: 4px;
	}

	.slider-input {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: ew-resize;
		margin: 0;
	}

/*  x.x PRICING
    -------------------------------------------------------------- */
	.pricing .grid-item {
		padding: 33px;
		background-color: #323232;
	}
	.pricing .grid-item h2 {
		line-height: 28px;
		font-size: 32px;
		color: var(--clr-grey_e1);
		font-weight: 300;
		font-family: var(--font-primary);
		margin-bottom: 35px;
	}
	.pricing .grid-item h3 {
		font-size: 20px;
		line-height: 28px;
		color: var(--clr-gold);
		font-family: var(--font-primary);
		margin-bottom: 12px;
	}
	
	.pricing .grid-item li {
		position: relative;
		padding-left: 28px;
		font-size: 18px;
		line-height: 28px;
		color: var(--clr-grey_8e);
		font-weight: 200;
		margin-bottom: 11px;
	}
	.pricing .grid-item li.unavailable {
		pointer-events: none;
		opacity: 0.4;
	}
	/*.pricing .grid-item li.unavailable:after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
		background-color: var(--clr-grey_8e);
		height: 1px;
		width: 100%;
	}*/
	.pricing .grid-item li:before {
		font-family: "remixicon";
		content: '\EB7B';
		color: var(--clr-gold);
		line-height: 28px;
		position: absolute;
		left: 0;
		top: 0;
		width: 28px;
		text-align: left;
		font-size: 20px;
	}
	.pricing .grid-item li.unavailable:before {
		color: var(--clr-grey_8e);
		content: '\EB99';
	}

/*  x.x QUOTE
    -------------------------------------------------------------- */
	section.quote {
		margin-top: 0px;
		background-color: var(--clr-gold);
		padding: /*106px*/53px 20px;
	}
	section.quote p {
		text-align: center;
		font-weight: 300;
		font-size: /*40px*/30px;
		line-height: /*28px*/20px;
		color: var(--clr-white);
	}
	
/*  x.x SLIDER
    -------------------------------------------------------------- */
	body.home section.projects {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	body.home section.projects .gridFrame {
		row-gap: 20px;
	}
	
	body.home section.WYSIWYG + body.home section.projects {
		padding-top: 0;
	}
    .projects .swiper-slide {
        background-color: #fff;
		font-size: 0;
		line-height: 0;
    }
	
	.projects .text-label,
	.packages.borders .grid-item label {
		opacity: 0;
		visibility: hidden;
		width: fit-content;
		height: 32px;
		background-color: #89857C;
		color: #fff;
		text-align: center;
		font-size: 16px;		
		line-height: 32px;
		position: absolute;
		top: 37px;
		left: -19px;
		border-radius: 4px;
		border-top-left-radius: 0;
		padding: 0 20px;
		box-shadow: 2px 2px 5px 0 rgba(0,0,0, 0.3);
		-webkit-transition: all 300ms ease-in;
				transition: all 300ms ease-in;
	}	
	.projects .text-label:before,
	.packages.borders .grid-item label:before {
		content: "";
		border-bottom: 16px solid #626360;
		border-left: 18px solid transparent;
		position: absolute;
		top: -16px;
		left: 1px;
	}

	.projects .text-label {
		height: 24px;
		font-size: 14px;
		line-height: 24px;
		top: 25px;
	}
	.projects .text-label:before {
		border-bottom: 12px solid #626360;
		border-left: 16px solid transparent;
		top: -16px;
		left: 2px;
	}
	
    .projects .swiper-slide.swiper-slide-active .text-label,
	.packages.borders .grid-item label {
		opacity: 1;
		visibility: visible;
    }
	
    .projects.single .swiper-slide {
		border: 1px solid #efefef;
    }
    .projects .swiper-slide img {
        opacity: .2;
    }
    .projects .swiper-slide.swiper-slide-active img {
        opacity: 1;
    }
    .swiper-3d .swiper-slide-shadow {
        background: transparent;
    }
	.projects .singleSwiper {
		margin-bottom: 10px;
		padding-left: 40px;
		margin-left: -40px;
	}
	.projects .singleSwiper .swiper-slide {
		-webkit-transition: all 300ms ease-in;
				transition: all 300ms ease-in;
	}
	.projects .singleSwiper .swiper-slide:not(.swiper-slide-active) {
		opacity: 0;
		visibility: hidden;
	}

    .projects .col.img {
		padding: 0;
    }
    .projects .col.txt {
        padding: 25px 0 0 0;
    }
    .projects .col.txt p {
		color: var(--clr-grey_5d);
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    .projects .col.txt p b {
		font-size: 18px;
    }
	
    .projects .col.txt .more {
        border: 1px solid #d4d4d4;
		border-radius: 24px;
		display: inline-block;
		width: auto;
		line-height: 32px;
		padding: 7px 20px;
		color: #a2a2a2;
    }
	
    .projects .swiper-button-next {
        right: var(--swiper-navigation-sides-offset, 7%);
    }
    .projects .swiper-button-prev, .projects .swiper-button-next {
        border: 1px solid #d4d4d4;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        color: #a2a2a2;
		margin-top: -250px;
	}
    .projects .swiper-button-prev:after, .projects .swiper-button-next:after {
        font-size: 20px;
    }
	
	.summary {
		margin-bottom: 30px;
	}
    .summary li {
		color: rgb(88, 129, 112);
		font-size: 14px;
        line-height: 40px;
    }
    .summary i {
        font-size: 16px;
        width: 28px;
        height: 28px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #d4d4d4;
        color: #a2a2a2;
        display: inline-block;
        border-radius: 50%;
        margin-right: 10px;
    }

	section.about {
		padding: 20px;
	}
	.about .img img {
        height: 100%;
        object-fit: cover;
    }
	.about .text.bgGrey_dd {
        background-color: var(--clr-grey_eb);
    }
    .about h2,
	.about h3 {
		color: #588170;
		font-weight: 400;
    }
	.about h2 {
		font-size: 40px;
    }
	.about h3 {
        margin-bottom: 50px;
    }
    .about p {
        margin-bottom: 24px;
    }
	.about a.button {
        margin-top: 24px;
		display: inline-block;
		background-color: #588170;
    	color: var(--clr-white);
		font-size: 16px;
		line-height: 24px;
		padding: 8px 16px;
		border-radius: 40px;
	}
	
	.social-share {
		display: block;
		margin-top: 30px;
	}
	.social-share a {
		position: relative;
		display: block;
		float: left;
		text-align: center;
		border-radius: 5px;
		font-weight: 300;
		
		width: 25px;
		height: 25px;
		line-height: 25px;
		font-size: 18px;
		margin-right: 8px;
	}
	
	.social-share a.in {
		background-color: #fff;
		background: linear-gradient(
			45deg,
			#405DE6,
			#5851DB,
			#833AB4,
			#C13584,
			#E1306C,
			#FD1D1D,
			#F56040,
			#FCAF45,
			#FFDC80
		);
		color: #fff;
	}
	
	.social-share a.fb {
		background-color: #3B5999;
		color: #fff;
	}	
	.social-share a.li {
		background-color: #0B86CA;
		color: #fff;
	}

/*  x.x TIMELINE
    -------------------------------------------------------------- */
	.timeline {
		position: relative;
		padding-bottom: 75px;
        counter-reset: section;
    }
	
    .time-container {
		position: relative;
		padding: 100px 0 0 0;
	}
	.timeline-line:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 2px;
        height: 300px;
        background: #FFF;
		background: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(88, 129, 112, 1) 90%);
		z-index: 1;
    }
	.timeline-line:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 2px;
        height: 300px;
        background: #FFF;
		background: linear-gradient(rgba(88, 129, 112, 1) 10%, rgba(255, 255, 255, 1) 90%);
		z-index: 1;
    }
	.timeline-line {
        position: absolute;
        left: 100px;
        top: 0;
        width: 2px;
        height: 100%;
        background-color: rgba(88, 129, 112, 1);
    }
	.timeline-line .bar-fill {
		position: absolute;
		top: 0;
		left: 0;
		height: 0%;
		width: 5px;
		background: linear-gradient(90deg, #4CAF50 0%, #2E7D32 100%);
		transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
	}

	.bar-gray.is-visible .bar-fill {
		height: 100%;
	}
	
	.timeline .card {
        position: relative;
        padding: 25px 0;
		display: flex;
		z-index: 2;
	}
	.timeline .card:first-of-type {
        padding-top: 0;
	}
	.timeline .card:last-of-type {
        padding-bottom: 0;
	}
	.timeline .card-body {
		position: relative;
		width: 100%;
		display: flex;
	}
	.timeline .card-body.left {
		position: relative;
		max-width: 80px;
		color: #588170;
        font-weight: 700;
        font-size: 26px;
        line-height: 33px;
		align-content: center;
		flex-wrap: wrap;
		text-align: center;
	}
	.timeline .card-body.left:after {
		content: '';
		position: absolute;
		top: calc(50% - 7px);
		right: -28px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-color: #588170;
	}
	.timeline .card-body.right {
		max-width: calc(100% - 120px);
		margin-left: 40px;
	}
    .timeline_circle {
        background-color: #588170;
        border-radius: 100%;
        width: 13px;
        min-width: 13px;
        max-width: 13px;
        height: 13px;
        min-height: 13px;
        max-height: 13px;
        position: sticky;
        top: 50vh;
    }
    .timeline .card-body.right .card-content {
		width: 100%;
		max-width: 414px;
		padding: 16px;
		background-color: #FBFBFB;
		margin-bottom: 0;
    }
    .timeline .card h3 {
        color: #588170;
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
		margin-bottom: 8px;
    } 
    .timeline .card p {
        color: #000;
        font-size: 13px;
        font-weight: 400;
        line-height: 21px;
    }
    .timeline .card p a {
        color: #588170;
		text-decoration: underline;
    }
	
    .timeline .card p:not(:last-of-type) {
        margin-bottom: 35px;
    }
    .timeline .card img {
        margin-top: 35px;
    }
	
/*  x.x ETALAGE
    -------------------------------------------------------------- */
	.etalage {
		padding-top: 0;
		padding-bottom: 0;
	}

/*  x.x FAQ
    -------------------------------------------------------------- */
	section.faq {
		padding-bottom: 100px;
	}
	.bg-img section.faq {
		padding-top: 0;
	}
   .faq h2 {
        margin-bottom: 30px;
    }
    details,
    details summary,
    details answer {
        position: relative;
        display: block;
        width: 100%;
    }

    details {
		margin: 0 auto /*24px*/12px;
		max-width: 630px;
		background-color: #252526;
		transition: all 0.3s ease-in-out;
		overflow: hidden;
    }

    details summary,
    details p {
        color: var(--clr-grey_5d);
    }

    details summary {
		font-family: var(--font-secondary);
		color: var(--clr-gold);
        line-height: 40px;
        font-size: 22px;
        padding: 18px 56px 18px 28px;
		font-weight: 500;
		cursor: pointer;
		transition: padding 300ms;
    }
	details[open] summary {
        padding: 18px 56px 18px 28px;
    }
	
    details answer {
        padding: 0 28px 28px 28px;
    }

	details::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
	}

	details[open]::details-content {
		height: auto;
	}
	
    details p {
        line-height: 24px;
        font-size: 18px;
		font-weight: 100;
		color: var(--clr-white);
    }
    details summary:after {
        content: '\EA4E';
        position: absolute;
        right: 28px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        font-family: 'remixicon';
        line-height: 40px;
        font-size: 26px;
    }
    details[open] summary:after {
        content: '\EA78';
    }

/*  x.x REVIEWS
    -------------------------------------------------------------- */
    /*section.reviews .row {
        max-width: 1410px;
	}*/
    .swiper.reviews {
		/*padding-top: 75px;*/
        padding-bottom: 70px;
    }
	.swiper.reviews .swiper-slide,
	.reviews article {
		position: relative;
		background-color: var(--clr-grey_32);
		padding: /*95px*/70px /*85px*/45px /*40px*/20px /*85px*/45px;
		color: var(--clr-grey_8e);
    }
	.swiper.reviews .swiper-slide .icon,
	.reviews article .icon {
		position: absolute;
		top: /*22px*/11px;
		left: /*80px*/40px;
		display: block;
		line-height: 1em;
		font-size: /*60px*/50px;
		color: var(--clr-gold);
	}
	
	.reviews .opener {
		position: absolute;
		bottom: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: /*var(--clr-grey_8e)*/#4f4f4f;
		font-weight: 500;
		font-size: 24px;
		z-index: 2;
	}
	
	.review-text .rev-inner {
		position: relative;
		width: 100%;
		overflow: hidden;
		-webkit-transition: max-height ease 200ms;
				transition: max-height ease 200ms;
	}
	.review-text .rev-inner p {
		font-size: 16px;
		color: var(--clr-grey_e1);
		line-height: 24px;
		font-weight: 200;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.swiper-slide .review-text.showText .rev-inner p {		
		display: block;
	}
	
    .review-text {
        border-bottom: 1px solid var(--clr-gold);
		font-size: 15px;
		line-height: 26px;
		padding-bottom: 25px;
		margin-bottom: 25px;
    }
    .review-author {
        font-weight: 300;
        font-size: 18px;
		line-height: 28px;
        margin-bottom: 0;
		color: var(--clr-grey_e1);
    }
	.review-author img {
        max-width: 34px;
		height: auto;
		object-fit: contain;
		float: left;
		margin-right: 20px;
    }
	.review-author small {
		display: block;
		font-weight: 300;
        font-size: 12px;
		line-height: 28px;
		color: var(--clr-gold);
    }
	
/*  x.x SWIPER
    -------------------------------------------------------------- */
    /*.swiper.reviews,
	.socialSlider {
        padding-bottom: 70px;
    }*/
    .swiper-pagination-bullet {
        opacity: 1;
        background-color: /*#fff*/#3f3f3f;
        width: /*12px*/1px;
        height: /*12px*/16px;
		/*box-shadow: 0 0 0 2px #588170;*/
		border-radius: 0;
		-webkit-transition: all 300ms;
		transition: all 300ms;
    }
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: /*#588170*/var(--clr-gold);
        height: /*12px*/24px;
		-webkit-transform: translateY(3px);
				transform: translateY(3px);
    }

    .gallery .grid-item,
	.gallery .swiper-slide {
		width: auto !important;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		margin: auto;
		pointer-events: none;
	}
	.gallery figure a {
		display: inline-block;
		vertical-align: middle;
		pointer-events: auto;
	}
	.gallery .splide__slide img,
	.gallery .swiper-slide img {
		width: auto;
		height: 80px;
		filter: grayscale(100);
	}

	.masonGall {
		padding-top: 100px;
	}
	.masonGall video {
		width: 100%;
		object-fit: fill;
		aspect-ratio: 31 / 43;
	}

/*  x.x REVIEWS
    -------------------------------------------------------------- */
	.socials .gridFrame {
		row-gap: 40px;
	}
	.socials h2 {
		margin-bottom: 30px;
	}
	.socials h3 {
		display: block;
		font-size: 15px;
		line-height: 1.3em;
		color: #588170;
		font-weight: 500;
	}

/*  x.x PACKAGES
    -------------------------------------------------------------- */
	section.borders .gridFrame {
		gap: 36px;
	}
	section.borders .grid-item {
		background-color: #f7f7f7;
		padding: 20px;
	}
	section.borders .grid-item.padded {
		padding-top: 80px;
	}

/*  x.x CTA
    -------------------------------------------------------------- */
	section.cta {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	section.packages + section.cta {
		padding-top: 0;
	}
	
	.cta .row {
		text-align: center;
	}
	.cta a {
		display: inline-block;
		padding: 22px 50px;
		background-color: var(--clr-green);
		color: var(--clr-white);
		line-height: 26px;
		font-size: 20px;
	}
	.WYSIWYG p a.button,
	a.cta {
		display: inline-block;
		background-color: #89857C;
		color: var(--clr-white);
		font-size: 16px;
		line-height: 24px;
		padding: 8px 16px;
		border-radius: 40px;
		margin-top: 20px;
		text-decoration: none;
	}

/*  x.x PROJECTS
    -------------------------------------------------------------- */	
	.projects.grid .gridFrame {
		gap: 0px;
	}
	.projects article {
		font-size: 0;
		line-height: 0;
	}
	.projects .overview figure {
        position: relative;
    }
	.projects.grid .overview figure {
        margin-bottom: 0;
    }
    .projects .overview figure img {
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.summary li img,
	.projects .overview li img {
		max-width: 26px;
		height: 26px;
		object-fit: contain;
		float: left;
		margin: 6px;
		margin-left: 0;
	}
	.projects h2 {
        font-weight: 700;
        font-size: 40px;
        line-height: 55px;
        color: #588170;
		margin-bottom: 40px;
	}
	.projects h3 {
        font-weight: 700;
        font-size: 25px;
        line-height: 1em;
        color: #588170;
		margin-bottom: 20px;
	}	
	.projects.grid figure a {
		height: 100%;
	}
	.projects.grid figcaption {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.75);
		display: none;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all 300ms;
				transition: all 300ms;
	}
	.projects.grid h3 {
		font-family: var(--font-secondary);
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -30%);
				transform: translate(-50%, -30%);
        font-size: 24px;
        line-height: 40px;
        color: var(--clr-white);
		font-weight: 200;
		width: 100%;
		padding-bottom: 20px;
		margin-bottom: 0px;
		text-align: center;
		/*border-bottom: 1px solid var(--clr-white);*/
	}
	.projects.grid .icon {
		position: absolute;
		bottom: 60px;
		left: 50%;
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
		font-size: 40px;
	}
	.projects.grid img.icon {
		max-width: 40px;
		height: 40px;
		aspect-ratio: auto;
		object-fit: contain;
		bottom: 28px;
	}
	
	.projects .gridFrame.pointers {
		background-color: #454545;
		row-gap: 0;
		column-gap: 1px;
		margin-bottom: 40px;
	}
	
	.projects h3 small {
       /* padding-top: 6px;*/*
        font-weight: 500;
        font-size: 16px;
        line-height: 1em;
	}
	.projects .pointers h3 {
		padding: 20px;
		text-align: center;
		background-color: #323232;
	}
	.projects.grid h3 small {
        font-size: 14px;
		color: var(--clr-gold);
		line-height: 40px;
		font-weight: 300;
		margin-top: -10px;
		margin-bottom: 10px;
	}
	.projects.grid i.ticon {
		font-size: 30px;
		line-height: 30px;
		color: var(--clr-gold);
		/*transform: scale(2, 1);*/
		margin: 125px 0 0 0;
		font-weight: 100;
	}
	.projects.single h3 {
		font-family: var(--font-primary);
		font-size: /*26px*/22px;
		line-height: /*40px*/30px;
		color: var(--clr-white);
        font-weight: 200;
		margin-bottom: /*10px*/0;
	}
	.projects.single h3 small {
		font-weight: 300;
		text-transform: uppercase;
		font-size: /*20px*/16px;
		color: var(--clr-gold);
		padding: 0;
		line-height: /*40px*/32px;
	}
	.projects h3.marged {
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.projects.single .WYSIWYG {
		padding-top: 40px;
	}
	.projects .WYSIWYG p {
		/*line-height: 28px;
		font-size: 20px;
		color: #8e8e8e;
		font-weight: 400;*/
		font-weight: 200;
		font-size: 20px;
		line-height: 26px;
		color: var(--clr-grey_8e);
		margin-bottom: 15px;
		letter-spacing: -3%;
	}
	.projects .small p {
		line-height: 24px;
		font-size: 16px;
	}
	.projects .overview .summary {
		text-align: left;
		font-size: 0;
		line-height: 0;
		vertical-align: top;
		margin-bottom: 15px;
	}
    .projects .overview .summary li {
		display: block;
        color: #588170;
        font-size: 15px;
    }
    .projects .overview .summary li:not(:last-of-type) {
		margin-right: 23px;
    }
	.projects span.fakeBtn {
		display: inline-block;
		background-color: #588170;
		color: var(--clr-white);
		font-size: 16px;
		line-height: 24px;
		padding: 8px 26px;
		border-radius: 40px;
	}
	.projects.grid span.fakeBtn {
		position: absolute;
		left: 50%;
		bottom: 30px;
		z-index: 2;
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
	}
	.projects .thumbSwiper .swiper-slide img {
		opacity: .2;
    }
	.projects .thumbSwiper .swiper-slide.swiper-slide-thumb-active img {
		opacity: 1;
	}

/*  x.x CAROUSEL
    -------------------------------------------------------------- */
	.etalage + .carousel {
		margin-top: -100px;
	}
	section.carousel {
		background-color: #588170;
		padding: 60px 20px;
	}	

/*  x.x DESIGNPHASE
    -------------------------------------------------------------- */
	section.designphase {
		padding-left: 20px;
		padding-right: 20px;
	}
	section.designphase .gridFrame {
		row-gap: 20px;
	}
	.designphase .grid-item {
		background-color: #323232;
		padding: 24px 24px 19px 24px;
	}
	.designphase .grid-item span {
		font-size: /*105px*/75px;
		line-height: 1em;
		color: var(--clr-gold);
		font-weight: 200;
		display: inline-block;
		margin-bottom: 20px;
	}
	.designphase h3 {
		color: var(--clr-grey_e1);
		font-weight: 300;
		font-size: /*32px*/28px;
		line-height: /*28px*/24px;
		margin-bottom: 24px;
	}
	.designphase h3:after {
		content: '/';
		color: var(--clr-gold);
		margin-left: 5px;
	}
	.designphase p {
		color: var(--clr-grey_8e);
		font-size: /*18px*/16px;
		line-height: /*28px*/24px;
		font-weight: 200;
	}
	.designphase p:not(:last-of-type) {
		margin-bottom: 24px;
	}
	.designphase figure {
		margin-top: 28px;
		line-height: 0;
		font-size: 0;
	}
	.designphase figure img {
		height: auto;
		aspect-ratio: 107 / 56;
		object-fit: cover;
	}
	.designphase figure figcaption {
		padding: 23px;
		line-height: 34px;
		font-weight: 500;
		font-size: 19px;
		background-color: #588170;
		color: #fff;
		float: left;
		width: 100%;
	}
	.designphase figure figcaption span {
		line-height: 32px;
		font-weight: 300;
		display: inline-block;
		border-radius: 50%;
		width: 32px;
		border: 1px solid #fff;
		text-align: center;
		margin-right: 23px;
	}
	.designphase figure figcaption i {
	    display: inline-block;
    	vertical-align: top;
    	font-size: 17px;
	}
	
/*  x.x ADDRESS
    -------------------------------------------------------------- */
	.addresses p {
		Line-height: 22px;
		margin-bottom: 6px;
	}

/*  x.x CTA
    -------------------------------------------------------------- */
	form #andersInputContainer:not(.visible), form #yesInputContainer:not(.visible), form #personsInputContainer:not(.visible), form #importanceInputContainer:not(.visible), form #socInputContainer:not(.visible) {
		display: none;
	}
	form #andersInputContainer, form #yesInputContainer, form #personsInputContainer, form #importanceInputContainer, form #socInputContainer {
		position: absolute;
		left: 300px;
		bottom: 0;
		width: 300px;
	}
	form #yesInputContainer {
		left: 100px;
		bottom: 35px;
	}
	form #andersInputContainer input, form #yesInputContainer input, form #personsInputContainer input, form #importanceInputContainer input, form #socInputContainer input {
		width: 100%;
		max-width: none;
	}
	form .row {
		padding-bottom: 20px;
	}
	form h3 {
		line-height: 30px;
		font-size: 20px;
		font-weight: 500;
	}
	form h3 + p {
		font-size: 14px;
		margin-bottom: 15px;
	}
	form .floated {
		position: relative;
		padding-left: 200px;
		margin-bottom: 5px;
	}
	form .floated span {
		display: block;
		width: 100%;
		max-width: 200px;
		position: absolute;
		left: 0;
		top: 0;
		line-height: 32px;
		font-size: 14px;
	}
	
	form .floated.full {
		padding-left: 0;
	}
	form .floated.full span {
		position: relative;
		left: auto;
		top: auto;
		max-width: none;
	}
	form .floated.full {
		padding-left: 0;
	}

/*  x.x CONTACT
    -------------------------------------------------------------- */
	.WYSIWYG.cntct-txt h2 {
		font-size: /*50px*/44px;
		line-height: /*55px*/40px;
		font-weight: 300;
		margin-bottom: 28px;
	}
	.WYSIWYG.cntct-txt p {
		font-size: 16px;
		color: var(--clr-grey_e1) !important;
		line-height: 24px;
		font-weight: 200;
	}
	.WYSIWYG.blocked.cntct-txt .row {
		padding: 50px 20px;
	}
	.WYSIWYG.blocked .row.contact-form {
		padding: 50px 25px;
		background-color: #252526;
		margin-bottom: 100px;
	}
	.contactform {
		list-style: none !important;
	}
	.contactform li {
		padding: 0;
	}
	.contactform li:not(:last-of-type) {
		margin-bottom: 25px;
	}
	.contactform li:before {
		display: none;
	}
	.contactform li label {
		font-size: 14px;
		line-height: 30px;
		color: var(--clr-gold);
		display: block;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	.contactform li input,
	form input,
	.contactform li textarea,
	form textarea,
	.contactform li select,
	form select {
		display: block;
		width: 100%;
		background-color: var(--clr-white);
		color: var(--clr-grey_8e);
		line-height: 26px;
		padding: 12px 20px;
		font-weight: 300;
		margin: 0;
		border: 0;
	}
	.newsletter form {
		display: block;
		margin-bottom: 10px;
	}
	.newsletter form input {
		border: 1px solid var(--clr-grey_8e);
	}
	.contactform li select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E");
		    background-size: 20px;
		background-position: center right 20px;
	}
	
	input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #5d5d5d;
    }
    input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
        color: #5d5d5d;
    }
    input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
        color: #5d5d5d;
    }
    input:-moz-placeholder, select:-moz-placeholder, textarea:-moz-placeholder {
        color: #5d5d5d;
    }
	
	form textarea {
		height: 96px;
	}
	form input.street, form input.nr, form input.zip, form input.place {
		float: left;
	}
	form input.street {
		max-width: calc(80% - 5px);
		margin-right: 5px;
		margin-bottom: 5px;
	}
	form input.nr {
		max-width: 20%;
		margin-bottom: 5px;
	}
	form input.zip {
		max-width: calc(40% - 5px);
		margin-right: 5px;
	}
	form input.place {
		max-width: 60%;
	}
	form .optGroup input {
		position: relative;
		float: left;
		max-width: 22px;
		margin: 5px 0;
		line-height: 22px;
		padding: 0px;
	}
	form .optGroup input:after {
		content: '';
		position: absolute;
		width: 12px;
		max-width: none;
		margin: 0;
		height: 12px;
		padding: 0px;
		left: 4px;
		top: 4px;
		background-color: transparent;
	}
	form .optGroup input:checked:after {
		background-color: var(--clr-grey_5d);
	}
	form .optGroup input[type="checkbox"],
	form .optGroup input[type="radio"] {
		padding: 0;
		height: 22px;
	}
	form .optGroup label {
		float: left;
		display: block;
		line-height: 20px;
		width: calc(100% - 32px);
		padding-left: 10px;
		margin: 0 0 5px 0;
		font-size: 13px;
	}
	form .optGroup label.before-next-input {
		width: calc(50% - 35px);
	}
	form .optGroup label.before-next-input + input {
		float: left;
		display: block;
		width: 50%;
		max-width: none;
		margin: 0 0 5px 0;
	}
	form .floated input[type="file"] {
		padding-left: 0;
	}
	form .floated ::file-selector-button {
		border: 2px solid transparent;
		padding: 0 10px;
		border-radius: 0;
		background-color: #d5d5d5;
		line-height: 28px;
		margin-right: 30px;
	}
	
	form button {
		display: block;
		background-color: var(--clr-gold);
		font-size: 20px;
		line-height: 24px;
		padding: 16px;
		border-radius: 40px;
		width: 100%;
		font-weight: 300;
	}
	
	.navi {
		margin-top: /*22px*/44px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	/*.navi span {
		float: left;
		display: block;
		margin-top: 10px;
	}*/	
	
	.news .btn,
	.navi .btn {
		display: inline-block;
		background-color: transparent;
		color: var(--clr-gold);
		text-transform: uppercase;
		font-size: 18px;
		line-height: 24px;
	}
	/*.navi .btn.overview {
		float: left;
	}*/
	.navi .btn {
		/*font-size: 14px;
		line-height: 18px;
		padding: 3px 10px;
		border-radius: 12px;*/
		font-size: 24px;
		line-height: 1em;
		/* padding: 3px 10px; */
		/* border-radius: 12px;*/
	}
	
	.news .btn.next:not(.disabled),
	.news .btn.prev:not(.disabled),
	.navi .btn.next:not(.disabled),
	.navi .btn.prev:not(.disabled) {
		background-color: transparent;
		/*box-shadow: 0px 0px 0px 1px rgb(255, 255, 255, 0.5) inset;*/
		color: /*rgb(255, 255, 255, 0.5)*/var(--clr-gold);
	}
	.news .btn.disabled,
	.navi .btn.disabled	{
		/*background: rgb(255, 255, 255, 0.2);*/
		cursor: auto;
		pointer-events: none;
		color: rgb(255, 255, 255, 0.1);
	}
	
	/*.navi .btn.next {
		margin-left: auto;
	}
	.navi .btn.prev {
		margin-right: auto;
	}*/
	
	.news .btn.overview i,
	.navi .btn.overview i	{
		display: inline-block;
		font-size: 28px;
		/*-webkit-transform: rotate(90deg);
				transform: rotate(90deg);*/
	}

	body.home .contact {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	.contactform li {
		position: relative;
		line-height: 0;
		font-size: 0;
	}
	.contactform label,
	.contactform small,
	.contactform input,
	.contactform select,
	.contactform textarea {
		display: inline-block;
		vertical-align: top;
		font-size: 14px;
		line-height: 24px;
		padding: 4px 10px;
		margin-bottom: 10px;
	}
	.contactform .g-recaptcha {
		display: inline-block;
		vertical-align: top;
		margin-bottom: 10px;
	}
	.contactform label {
		padding: 4px 0;
		width: 100%;
	}
	.contactform small {
		width: calc(100% - 24px);
		font-size: 14px;
		line-height: 20px;
	}
	.contactform input,
	.contactform select,
	.contactform textarea {
		width: 100%;
		border: 1px solid var(--clr-grey-d5d);
		color: var(--clr-grey-585);
	}
	.contactform textarea {
		height: 120px;
	}
	.contactform .instruct,
	.contactform label.tiny {
		font-size: 14px;
		text-transform: none;
		color: var(--clr-grey_e1);
	}
	.contactform .instruct {
		color: var(--clr-grey_a1);
		margin-bottom: 12px;
		line-height: 1.1em;
		font-style: italic;
		font-weight: 200;
	}
	.contactform input[type="checkbox"] {
		padding: 0;
		margin: 4px 0;
		width: 24px;
		height: 24px;
		position: relative;
		float: left;
		margin: 0 10px 0 0;
	}
	.contactform input[type="checkbox"]:after {
		content: '';
		position: absolute;
		left: 5px;
		top: 5px;
		width: 14px;
		height: 14px;
		background-color: transparent;
	}
	.contactform input[type="checkbox"]:checked:after {
		background-color: var(--clr-gold);
	}
	

/*  =================================================================
    FOOTER
    ================================================================== */
	footer {
		padding: 64px 20px 50px;
		background-color: #252526;
		position: relative;
		z-index: 2;
	}
	#siteContainer.bg-image footer,
	body.home footer {
		margin-top: 0;
	}
    footer .row.top {
		padding-bottom: 30px;
	}
	footer .logo-link img {
		width: auto;
		height: 95px;
	}
	footer .logo-link {
		display: block;
		margin-bottom: 20px;
	}
	
	footer .block {
		display: block;
		width: 100%;
		float: left;
		margin-bottom: 40px;
	}
	footer .block:not(:first-of-type) {
		width: 48%;
		margin-right: 4%;
	}
	footer .block:last-of-type {
		margin-right: 0;
	}

	footer h2 {
		font-family: var(--font-primary);
		color: var(--clr-grey_e1);
		font-size: 22px;
		line-height: 37px;
		font-weight: 300;
		letter-spacing: 0;
	}

	footer p, footer li, footer a {
		color: var(--clr-grey_8e);font-weight: 300;
	}
	footer p, footer li {
		text-align: left;
		font-size: 15px;
		line-height: 22px;
	}
	footer p:not(:last-of-type) {
		margin-bottom: 34px;
	}
	footer p span {
		font-size: 10px;
	}
	footer p span.soci {
		display: inline-block;
		margin-top: 34px;
		font-size: 24px;
	}
	footer a.button {
		display: inline-block;
		background-color: #89857C;
		color: var(--clr-white);
		font-size: 16px;
		line-height: 24px;
		padding: 8px 16px;
		border-radius: 40px;
	}
	footer .circle {
		position: relative;
		display: block;
		margin: 0 auto;
		/*border-radius: 50%;*/
		width: 110px;
		height: auto;
		/*background-color: #1c1c1c;*/
	}
	/*footer .circle:after {
		content: '';
		position: absolute;
		display: block;
		left: 0;
		top: 0;
		border-radius: 50%;
		width: 100%;
		height: 100%;
		border: 1px solid #252526;
		box-shadow: 0 0 0 2px #252526;
		z-index: 1;
		pointer-events: none;
	}*/
	
	footer .copy p {
		margin: 0;
		text-align: left;
		font-size: 12px;
	}
	footer .copy p,
	footer .copy p a {
		color: #585858;
	}
	footer .copy p a {
		text-decoration: none;
	}
	

    /*  =================================================================
    MEDIA QUERIES
    ================================================================== */
    /* MOBILE */
    @media only screen and (min-width: 572px) { }

    @media only screen and (min-width: 572px) and (orientation: landscape) { }
    @media only screen and (min-width: 572px) and (orientation: portrait) { }

    /* IPADS portrait */
    @media only screen and (min-width: 768px) and (min-height: 600px) { }

    /* IPADS */
    @media only screen and (min-width: 768px) {
		
		:root {
			--nav-width: 369px;
		}
		
		.home nav .logo-link {
			top: 47px;
		}
		.iconImg {
			top: 130px;
			height: 120px;
		}
		
		header .title h1,
		section.title h1,
		header.slider h1 {
			font-size: 65px;
			line-height: 79px;
		}
		header .title h1 small,
		section.title h1 small {
			margin-top: -10px;
		}
		
		header.slider h1 span {
			opacity: 85%;
		}
		
		header .title h1 small,
		section.title h1 small,
		header.slider h1 small {
			font-size: 26px;
			line-height: 41px;
		}
		
		/*  x.x WYSIWYG
		-------------------------------------------------------------- */		
		.WYSIWYG .swapped .txt {
			order: 1;
		}
		.WYSIWYG .swapped .show-for-large {
			order: 2;
		}
		.WYSIWYG .swapped .img {
			order: 3;
		}
	
		/*.WYSIWYG .type1,
		.WYSIWYG .type2 {
			padding-top: 28px;
			padding-bottom: 28px;
		}*/
		
		section.WYSIWYG.text_img {
			padding-left: 20px;
			padding-right: 20px;
		}
		
		.WYSIWYG .type2.swapped img,
		.WYSIWYG .type2.swapped .splide {
			float: right;
		}
		
		.WYSIWYG .type2 .txt {
			position: absolute;
			right: 0;
			top: 70px;
			width: 50%;
			height: calc(100% - 140px);
			padding: 50px;
		}
		.WYSIWYG .type2.swapped .txt {
			right: auto;
			left: 0;
		}
		
		/*  x.x USP
		-------------------------------------------------------------- */
		section.USP .row {
			flex-direction: row;
		}
		section.USP .text,
		section.USP figure {
			height: 300px;
		}
		section.USP .text {
			max-width: 44.9%;
			padding: 0;
		}
		section.USP .text h2 {
			font-size: 65px;
			line-height: 79px;
		}
		section.USP .text h3 {
			margin-top: -20px;
		}
		section.USP figure {
			max-width: 55.1%;
		}
		section.USP .row:nth-of-type(odd) .text,
		section.USP .row:nth-of-type(even) figure {
			order: 1;
		}
		section.USP .row:nth-of-type(odd) figure,
		section.USP .row:nth-of-type(even) .text {
			order: 2;
		}
		
		/*  x.x REVIEWS
		-------------------------------------------------------------- */
		.swiper.reviews .swiper-slide,
		.reviews article {
			padding: 105px 65px 40px 65px;
		}
		.swiper.reviews .swiper-slide .icon,
		.reviews article .icon {
			top: 32px;
			left: 60px;
			font-size: 60px;
		}
		
		/*  x.x DESIGNPHASE
		-------------------------------------------------------------- */
		.designphase .grid-item span {
			font-size: 105px;
		}
		.designphase h3 {
			font-size: 32px;
			line-height: 28px;
		}
		.designphase p {
			font-size: 18px;
			line-height: 28px;
		}
		
		/*  x.x NEWSLETTER
		-------------------------------------------------------------- */
		section.newsletter {
			padding: 105px 20px;
		}
		section.newsletter h2 {
			font-size: 65px;
			line-height: 51px;
		}
		
		/*  x.x QUOTE
		-------------------------------------------------------------- */
		section.quote {
			padding: /*106px*/78px 20px;
		}
		section.quote p {
			font-size: /*40px*/35px;
			line-height: /*28px*/24px;
		}
		
		/*  x.x CONTACT
		-------------------------------------------------------------- */
		.WYSIWYG.cntct-txt h2 {
			font-size: 50px;
			line-height: 55px;
		}
		.WYSIWYG.blocked.cntct-txt .row {
			padding: 50px 40px;
		}
		.WYSIWYG.blocked .row.contact-form {
			padding: 50px 100px;
		}
		
		
		/*  =================================================================
		FOOTER
		================================================================== */		
		footer .block {
			display: block;
			width: fit-content;
			float: left;
			margin: 0;
		}
		footer .block:not(:first-of-type) {
			width: fit-content;
			margin-right: 0;
		}
		
		footer .block:not(:first-of-type) {
			margin-left: 70px;
		}
		
	}

    /* IPADS landscape AND mini laptops */
    @media only screen and (min-width: 960px) {
		
		/*  x.x DESIGNPHASE
		-------------------------------------------------------------- */
		.designphase .grid-item {
			padding: 48px 48px 38px 48px;
		}
		
		.navi span {
			float: right;
			display: block;
			margin-top: 0;
		}
		
		/*  x.x PROJECTS
		-------------------------------------------------------------- */		
		section.projects .splide_prj {
			padding-bottom: 0;
		}
		section.projects .splide__slide p {
			position: relative;
			right: auto;
			bottom: auto;
			width: 100%;
			padding: 14px 0 0 0;
			width: calc(100% - 183px);
		}
		
		/*  x.x QUOTE
		-------------------------------------------------------------- */
		section.quote {
			padding: 106px 20px;
		}
		section.quote p {
			font-size: 40px;
			line-height: 28px;
		}
		
		#siteContainer.bg-img footer,
		body.home footer {
			margin-top: 0;
		}
		
    }

    /* SMALL SCREENS */
    @media only screen and (min-width: 1280px) { }

    /* WEIRD HEADER TEXT BREAKPOINT ~ must be paddings or margins */
    @media only screen and (min-width: 1340px) { }

    /* SMALL SCREENS */
    @media only screen and (min-width: 1440px) { }
    @media only screen and (min-width: 1600px) { }
    @media only screen and (min-width: 1920px) { }

/*  =================================================================
    TOUCH DEVICES
    ================================================================== */
    @media (pointer:coarse) {
		
		/*.WYSIWYG .type2 .txt .inner p {
			color: red;
		}*/
		.WYSIWYG .type2 .txt::after {
			content: "";
			position: absolute;
			/*bottom: 50px;
			left: 0;
			width: 100%;*/
			bottom: 30px;
			left: 30px;
			width: calc(100% - 63px);
			height: 75px;
			background: linear-gradient(transparent, #323232);
			pointer-events: none;
			transition: opacity 0.3s ease;
			pointer-events: none;
		}
		/* Verberg de fade wanneer de container wordt aangeraakt of gefocust */
		.WYSIWYG .type2 .txt::after .inner:active,
		.WYSIWYG .type2 .txt::after .inner:focus-within {
			opacity: 0;
		}
		
	}

/*  =================================================================
    HOVER STATES
    ================================================================== */
    @media (any-hover: hover) {
		
		.breadcrumb a:hover {
			color: var(--clr-grey_5d);
		}
		
		footer .copy p a:hover {
			text-decoration: underline;
		}
		
		.WYSIWYG p a:hover,
		.timeline .card p a:hover,
		.WYSIWYG .one_col p a:hover {
			color: var(--clr-gold);
			text-decoration: none;
		}

		.projects.grid article:hover figcaption {
			display: block;
			visibility: visible;
			opacity: 1;
		}
		
	}