/*  =================================================================
    0.0 :ROOT ~ overwrites or extras (if needed)
================================================================== */
    :root {
        --row-width: 1200px; /* max-width */
        --row-half-width: -600px; /* half-width */
        --font-poppins: 'Poppins', sans-serif;
        --font-weight: 400;
		
		--clr-dark-707: #707070;
		--clr-dark-161: #161615;
		--clr-dark-111: #111111;
		--clr-dark-1d1: #1d1d1b;
		--clr-dark-0e0: #0e0e0e;
		--clr-beach: #ece9e0;
		--clr-yellow-dark: #e59b00;
		--clr-yellow-light: #e6ae08;
    }
	
	.bg-beach {
		background-color: var(--clr-beach);
	}
	.bg-dark_1d1 {
		background-color: var(--clr-dark-1d1);
	}
	.bg-dark_0e0 {
		background-color: var(--clr-dark-0e0);
	}
	.bg-dark_1d1 h2, .bg-dark_1d1 h3, .bg-dark_1d1 p, .bg-dark_1d1 li, .bg-dark_1d1 a, .bg-dark_0e0 p, .bg-dark_0e0 a {
		color: var(--clr-white);
	}
	
	.txtYellowDark {
		color: var(--clr-yellow-dark);
	}

	._xl-only {
		display: none;
	}

	[class*=" ri-"], [class^=ri-],
	[class*=" material-symbols-"], [class^=material-symbols-] {
		vertical-align: bottom;
	}
	

/*  =================================================================
    1.0 STANDARDS
================================================================== */
	body, h1, h2, h3, h4, h5, h6, p, ul, ol, label, a, .button, button, input, textarea, address {
        font-family: var(--font-poppins);
		color: var(--clr-black);
    }
    
	main.row, .row.outer {
        padding-left: 10px;
        padding-right: 10px;
    }
	main.row {
		margin-bottom: 20px;
	}
	main.row .content {
		margin-bottom: 260px;
	}
	main.row.padded {
		padding-top: 40px;
	}

/*  1.1 Grid Rework
    -------------------------------------------------------------- */
    .gridFrame {
        grid-gap: 10px;
    }
	.gridFrame.noGap {
        grid-gap: 0;
    }
	.gridFrame.USP {
        row-gap: 40px;
    }

/*  1.2 Clearfix
    -------------------------------------------------------------- */
    .clear, .clearall, .clearfix {
        clear: both;
    }

/*  1.3 Panel stylings
    -------------------------------------------------------------- */
	.panel {
		width: 100%;
		display: block;
		margin: 0 auto;
		background-color: var(--clr-grey_dd);
		border: 2px solid var(--clr-grey_cc);
		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 #cc3300;
		background-color: #ff9966;
		color: #cc3300;
	}
	
	.panel.notice {
		border: 2px solid #ff9966;
		background-color: #ffcc00;
		color: #ff9966;
	}
	
	.panel.success {
		border: 2px solid #339900;
		background-color: #99cc33;
		color: #339900;
	}

/*  1.4 Text stylings
    -------------------------------------------------------------- */
    h1, h2, h3, h4, h5, h6 {
		/*text-transform: uppercase;*/
        margin-bottom: 10px;
    }
    h1 {
		font-weight: 600;
		font-size: 40px;
        line-height: 50px;
	}
	h2 {
		font-size: 45px;
		line-height: 41px;
		padding: 0;
		font-weight: 500;
		text-transform: none;
	}
	h2.floated {
		position: relative;		
		padding-right: 200px;
	}
	h3 {
		font-size: 20px;
		line-height: 30px;
		font-weight: 500;
		text-transform: none;
	}
    p, li {
		font-size: 15px;
		line-height: 24px;
    }
	
	input[type="submit"],
	button,
	.button,
	.btn {
		background-color: var(--clr-yellow-light);
		color: var(--clr-white);
		font-family: var(--font-poppins);
		border-radius: 18px;
	}
	
	.button.big {
		padding: 10px 40px;
	}
	
	.WYSIWYG li i[class*=" ri-"], .WYSIWYG li i[class^=ri-],
	.WYSIWYG li span[class*=" material-symbols-"], .WYSIWYG li span[class^=material-symbols-] {
		color: var(--clr-orange);
		font-size: 20px;
		width: 24px;
		text-align: center;
		line-height: 24px;
	}
	.WYSIWYG li i[class*=" ri-"], .WYSIWYG li i[class^=ri-] {
		display: inline-block;
	}

/*  =================================================================
    x.0 NAV
================================================================== */
    nav {
        position: sticky;
        left: 0;
        top: 0;
        z-index: 996;
        width: 100%;
		background-color: var(--clr-dark-111);
		padding-top: 20px;
		padding-bottom: 20px;
        text-align: left;
        font-size: 0;
        line-height: 0;
        vertical-align: bottom;
    }
	
	/*	SEARCH opened state
		-------------------------------------------- */
	nav .mobileBTN {
		position: absolute;
		right: 10px;
		top: 50%;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background-color: var(--clr-yellow-dark);
		font-size: 20px;
		line-height: 40px;
		text-align: center;
	}
	nav .mobileBTN i {
		color: var(--clr-white);
	}
	nav .mobileBTN.search i {
		color: var(--clr-white);
	}
	nav ul {
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		background-color: black;
	}
    nav ul li {
        position: relative;
        display: inline-block;
        font-size: 16px;
        line-height: 30px;
        text-transform: uppercase;
    }
    nav ul li i {
        position: relative;
		display: inline-block;
		font-size: 18px;
		line-height: 30px;
		float: right;
		margin-left: 5px;
		color: var(--clr-white);
    }
    nav ul a {
		cursor: pointer;
		color: var(--clr-white);
		padding: 7px 0;
		float: left;
		line-height: 26px;
		font-weight: 500;
    }
	nav ul a.logo-link {
		display: block;
		height: 40px;
		padding: 7px 0; /* uitgaande van afbeelding min line-height + padding */
	}
    nav ul a.logo-link img {
        width: auto;
        height: 26px;
    }
    nav > ul > li.active > a {
        color: var(--clr-yellow-dark);
        font-weight: 600;
    }
    nav > ul > li.active > a,
    nav > ul > li.active > a i {
        color: var(--clr-white);
    }

    /*nav ul ul {
		background-color: var(--clr-orange);
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		padding: 3px 0 0 0;
		max-width: none;
		width: fit-content;
		box-shadow: inset 0 0 0 3px var(--clr-orange);
		border-top: 2px solid var(--clr-orange);
    }
    nav ul ul li,
    nav ul ul a {
        display: block;
        width: 100%;
        float: none;
        font-size: 13px;
        line-height: 21px;
		white-space: nowrap;
		text-transform: none;
    }
	nav ul ul a {
		color: var(--clr-white);
	}
    nav ul ul li:not(:last-of-type) {
        border-bottom: 1px solid var(--clr-white-fa8);
    }*/
	
	/*	NAV opened state
		-------------------------------------------- */
	nav ul.showed {
		display: block;
        position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		height: calc(100vh - 128px);
		background-color: var(--clr-white);
		padding: 10px 0;
    }
    nav ul.showed li {
        display: block;
    }
	nav ul.showed a {
		display: block;
		float: none;
	}
	nav ul ul.opened {
		display: block;
		display: block;
		width: 100%;
		position: relative;
		left: auto;
		top: auto;
	}


/*  =================================================================
    x.0 HEADER
================================================================== */
    header {
        font-size: 0;
        line-height: 0;
		overflow: hidden;
    }
    header img {
        height: 280px;
        object-fit: cover;
        object-position: center;
    }
	.home header img {
		height: 660px;
	}
	header h1 {
        color: var(--clr-white);
        width: var(--row-width);
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0;
        margin-left: var(--row-half-width);
        padding-left: 20px;
        padding-right: 10px;
		padding-bottom: 160px;
		text-transform: none;
		max-width: 320px;
		font-weight: 700;
    }
	header h1:before,
	header h1:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 10px;
		background-color: var(--clr-yellow-light);
	}
	header h1:before {
		height: 246px;
		width: 31px;
	}
	header h1:after {
		width: 246px;
		height: 31px;
	}
	header h1 small {
		font-weight: 400;
	}


/*  =================================================================
    x.0 SIDEBAR
================================================================== */
	details summary {
		list-style: none !important;
	}
	details summary::-webkit-details-marker {
		display: none !important;
	}


/*  =================================================================
    x.0 CONTENT
================================================================== */
	
	.vPadding-0 {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	section.imgContainer {
		line-height: 0;
	}
	
	.content > .floated:not(:first-of-type) {
		margin-top: 20px;
	}
	
	.WYSIWYG,
	.row.collapsed.WYSIWYG {
		padding: 0;
	}
	.WYSIWYG.noPad {
		padding: 0;
	}
	
	.WYSIWYG .col {
		padding: 0;
	}
	
	.WYSIWYG h1, .WYSIWYG h3, .WYSIWYG h4, .WYSIWYG h5, .WYSIWYG h6,
	.WYSIWYG p,
	.WYSIWYG ol,
	.WYSIWYG ul,
	.WYSIWYG figure {		
		margin-bottom: 20px;
	}
	
	
	.WYSIWYG .intro h1 {
		font-size: 45px;
		line-height: 65px;
		margin-bottom: 37px;
	}
	.WYSIWYG .intro p {
		font-size: 26px;
		line-height: 39px;
	}
	
	.WYSIWYG h3,
	.textImg section h3 {
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 0;
	}
	.textImg section h3 {
		color: var(--clr-grey-585);
	}
	
	.WYSIWYG li {
		padding-left: 24px;
		position: relative;
	}
	.WYSIWYG li:before {
		font-family: 'remixicon';
		content: '\f3c1';
		position: absolute;
		left: 0;
		top: 0;
		font-size: 6px;
		text-align: center;
		line-height: 24px;
		width: 24px;
		color: var(--clr-black);
	}
	
	.WYSIWYG p.big,
	.WYSIWYG p.small {
		margin-bottom: 0;
	}
	
	.WYSIWYG p.big {
		font-weight: 500;
		font-size: 45px;
		line-height: 65px;
		margin-bottom: 64px;
		padding-right: 10px;
	}
	.WYSIWYG p.big span {
		font-weight: 700;
		font-size: 45px;
		line-height: 65px;
		color: var(--clr-yellow-dark);
	}
	.WYSIWYG p.small {
		padding-left: 10px;
		font-weight: 300;
		font-size: 15px;
		line-height: 34px;
	}
	.btnContainer {
		padding-top: 15px;
	}
	
	/****
	 * USP *
	 ***/
	.USP h3 {
		margin-bottom: 6px;
		font-size: 24px;
		line-height: 34px;
	}
	.USP h3 span {
		color: var(--clr-yellow-dark);
		font-weight: 700;
		display: inline;
	}
	.USP ul,
	ul.cats {
		font-size: 0;
		line-height: 0;
		text-align: left;
	}
	.USP .centered h3,
	.USP .centered ul {
		text-align: center;
	}
	.USP .right h3,
	.USP .right ul {
		text-align: right;
	}
	
	.USP li,
	ul.cats li {
		display: inline-block;
		font-size: 15px;
		line-height: 20px;
	}
	.USP li:not(:last-of-type):after,
	ul.cats li:not(:last-of-type):after {
		content: '|';
		color: var(--clr-white);
		margin: 0 6px;
		vertical-align: bottom;
		font-weight: 100;
	}
	
	.compText p:first-of-type {
		margin-bottom: 10px;
	}
	.compText p:last-of-type {
		color: rgba(0,0,0,0.5);
	}
	
	.company .card {
		position: relative;
		margin-bottom: 40px;
		padding-right: 287px;
	}
	.company h3 {
		color: var(--clr-black);
		font-size: 24px;
		line-height: 34px;
		margin-bottom: 6px;
	}
	.company h3 span {
		display: inline;
		font-weight: 700;
		color: var(--clr-yellow-dark);
	}
	.company span.nr {
		position: absolute;
		right: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
		font-size: 80px;
		line-height: 65px;
		font-weight: 600;
		color: var(--clr-yellow-light);
	}
	
	section.gallery {
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
	}
	.iconSwiper {
		margin: 100px 0 0 0;
	}
	.iconSwiper .swiper-wrapper {
		transition-timing-function:linear !important;
	}
	.iconSwiper .swiper-slide {
		position: relative;
		width: calc(100% / 6);
		/*padding-bottom: calc(100% / 6);*/
		height: 55px;
	}
	.iconSwiper .swiper-slide img {
		width: auto;
		height: 35px;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
	}
	.clientSwiper {
		position: relative;
		margin-right: calc(((var(--row-width) - 130px) / 12) * 1);
	}
	/*.clientSwiper .swiper-slide {
		width: *//*286px*//* calc(((var(--row-width) - 50px) / 12) * 5);
	}*/
	.clientSwiper .swiper-slide figure {
		width: 100%;
		padding-bottom: 100%;
		overflow: hidden;
		margin-bottom: 20px;
		line-height: 0;
	}
	.clientSwiper .swiper-slide figure img {
		position: absolute;
		left: 0;
		top: 0;
		object-fit: cover;
		width: 100%;
		height: 100%;
		transform-origin: center center;
		-webkit-transition: all 400ms linear;
				transition: all 400ms linear;
	}
	.clientSwiper .swiper-slide h3 {
		font-size: 21px;
		line-height: 31px;
		-webkit-transition: color 400ms linear;
				transition: color 400ms linear;
	}
	.clientSwiper .swiper-slide h3 span {
		color: var(--clr-yellow-dark);
		font-weight: 700;
		display: inline;
	}
	
	.clientSwiper .swiper-slide a:hover figure img {
		-webkit-transform: scale(1.2);
				transform: scale(1.2);
	}	
	.clientSwiper .swiper-slide a:hover h3 {
		color: var(--clr-yellow-dark);
	}
	
	.clientSwiper + .swiper-button {
		z-index: 99;
		position: absolute;
		top: 50%;
		right: 0;
		width: calc(((var(--row-width) - 130px) / 12) * 1);
		text-align: center;
		/*-webkit-transform: translateY(-50%);
				transform: translateY(-50%);*/
		-webkit-transform: translateY(-75px);
				transform: translateY(-75px);
		font-size: 60px;
		line-height: 60px;
		color: var(--clr-yellow-light);
		cursor: pointer;
	}
	.contactForm label,
	.contactForm input,
	.contactForm textarea {
		float: left;
		line-height: 22px;
		padding: 10px 0;
		width: 66.66667%;
	}
	.contactForm input,
	.contactForm textarea {
		padding: 5px 10px;
		border: 1px solid #b9b9b9;
		border-radius: 4px;
	}	
	.contactForm textarea {
		height: 96px;
	}
	.contactForm button {
		margin-top: 30px;
	}
	

/*  =================================================================
    x.0 FOOTER
================================================================== */
	.footer h2 {
		margin-bottom: 27px;
	}
	.footer p {
		margin-bottom: 35px;
	}
	.footer .button {
		font-size: 14px;
	}
	footer h3 {
		font-size: 16px;
	}
	footer p,
	footer li {
		font-size: 14px;
		line-height: 24px;
	}
	footer li a {
		text-decoration: underline;
	}
	

/*  =================================================================
    HOVER STATES
================================================================== */
@media (any-hover: hover) { }

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

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

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

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

	h1 {
		max-width:  none;
	}

}

/* IPADS landscape AND mini laptops */
@media only screen and (min-width: 960px) {

    h1 {
		font-size: 60px;
        line-height: 72px;
	}
	h2 {
		padding: 0;
	}
	
	nav .mobileBTN {
		display: none;
	}
	nav ul {
		background-color: transparent;
		display: inline-block;
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
        text-align: center;
        vertical-align: bottom;
	}
    nav ul li.left {
		float: left;
	}
    nav ul li.left a:not(:last-of-type) {
		margin-right: 34px;
	}
    nav ul li.right {
		float: right;
	}
    nav ul li.right a:not(:first-of-type) {
		margin-left: 34px;
	}
	nav ul li:hover ul {
        display: block;
    }

	WYSIWYG.rtl .img {
		order: 2;
	}
	WYSIWYG.rtl .txt {
		order: 1;
	}
}

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

	nav {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	header h1 {
		max-width: none;
		font-size: 89px;
		line-height: 89px;
		padding-left: 100px;
	}
	header h1 small {
		margin-top: 10px;
		padding-left: 5px;
		font-size: 22px;
		line-height: 27px;
	}
	
	.vPadding-100 {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.vPadding-106 {
		padding-top: 106px;
		padding-bottom: 106px;
	}
	.vPadding-117 {
		padding-top: 117px;
		padding-bottom: 117px;
	}
	
}

/* 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) { 
	
}