/*
	Theme Name: Custom Template
	Theme URI: https://www.dink.nl
	Description: Basis voor de template
	Version: 1.0
	Author: DINK
	Author URI: https://www.dink.nl

*/



.font-aktiv-grotesk { font-family: "aktiv-grotesk",sans-serif; }
.font-aktiv-grotesk-thin { font-family: "aktiv-grotesk-thin",sans-serif; }
.font-trilby { font-family: "trilby",serif; }
.font-pressio-condensed { font-family: "pressio-condensed",sans-serif; }


:root {
	--font-aktiv: "aktiv-grotesk",sans-serif;
	--font-aktivthin: "aktiv-grotesk-thin",sans-serif;
	--font-trilby: "trilby",serif;
	--font-pressio: "pressio-condensed",sans-serif;

	--color-black:#111;
	--color-red: #E15450;
	--color-grey: #7D7D7D;	

	--text-320:320px;
	--text-270:270px;
	--text-180:180px;
	--text-92:92px;
	--text-72:72px;
	--text-56:56px;
	--text-42:42px;
	
	--text-p-large:32px;
	--text-p-medium:18px;
	--text-p-small:14px;

	--space-30:30px; 
	--space-45:45px; 
	--space-60:60px; 
	--space-90:90px; 
	--space-150:150px; 
	--space-180:180px; 
}

@media screen and (max-width:1400px){
	
	:root {
	--text-320:240px;
	--text-270:200px;
	--text-180:110px;
	--text-92:72px;
	--text-72:65px;
	--text-56:50px;
	--text-42:38px;
	
	--text-p-large:28px;
	--text-p-medium:18px;
	--text-p-small:14px;
	}
}

@media screen and (max-width:1150px){
	:root {
	--text-320:210px;
	--text-270:160px;
	--text-180:90px;
	--text-92:65px;
	--text-72:56px;
	--text-56:45px;
	--text-42:36px;
	
	--text-p-large:24px;
	--text-p-medium:18px;
	--text-p-small:14px;
	}
}

@media screen and (max-width:992px){
	:root {
	--text-320:160px;
	--text-270:110px;
	--text-180:75px;
	--text-92:50px;
	--text-72:46px;
	--text-56:40px;
	--text-42:34px;
	
	--text-p-large:22px;
	--text-p-medium:18px;
	--text-p-small:14px;
		--space-90: 60px;
	}	
}
@media screen and (max-width:767px){
	@media screen and (max-width:992px){
	:root {
	--text-320:110px;
	--text-270:80px;
	--text-180:60px;
	--text-92:40px;
	--text-72:36px;
	--text-56:30px;
	--text-42:24px;
	
	--text-p-large:18px;
	--text-p-medium:16px;
	--text-p-small:13px;
	}	
}
}
@media screen and (max-width:500px){
	
}

a{
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

/*------------------------------------*\
    MAIN


\*------------------------------------*/
body, html {margin:0;padding:0}
*,*:after,*:before {	-moz-box-sizing:border-box;	box-sizing:border-box;	-webkit-font-smoothing:antialiased;	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;}
html {	font-size:62.5%;}

.clear:before,.clear:after {    content:' ';    display:table;}
.clear:after {    clear:both;}
.clear {    *zoom:1;}

img {	max-width:100%;	vertical-align:bottom;height:auto}

a{text-decoration:none;}


.standaard-content a:not(.btn) {font-weight:bold;color:var(--color-black);text-decoration:underline;}
.standaard-content a:not(.btn):hover, .standaard-content a:not(.btn):focus {color:var(--color-red)}

a:focus {	outline:0;}
a:hover,a:active {	outline:0;}
input:focus {	outline:0;	border:none;}

/*------------------------------------*\
    Fonts
\*------------------------------------*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom:0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {   font-family: var(--font-pressio); margin: 0;color:var(--color-black); font-weight:800;line-height:1.3;text-transform:uppercase}


body {font-size:var(--text-p-medium);line-height:1.6;font-family: var(--font-aktiv);color:var(--color-black);font-weight:normal;}
 


h1, .h1 {font-size:var(--text-h1)}
h2, .h2 {font-size:var(--text-h2)}
h3, .h3 {font-size:var(--text-h3)}
h4, .h4, h5, .h5, h6, .h6 {font-size:var(--text-h4)}




p, .fold-content { margin-top:0;margin-bottom:24px}
.large-content p, .intro-content { margin-top:0;margin-bottom:30px}
@media screen and (max-width:992px){
p, .fold-content { margin-top:0;margin-bottom:16px}
.large-content p, .intro-content { margin-top:0;margin-bottom:24px}	
}

p:last-child, .fold-content:last-child {margin:0}


.standaard-content ul:not(.btn-list), .standaard-content ul:not(.btn-list) li, .standaard-content ol {padding:0;margin:0;list-style:none;display:block}
.standaard-content ul:not(.btn-list) li {position:relative;padding-left:28px;margin-bottom:12px;display:flex;width:100%;gap:16px}
.standaard-content ul:not(.btn-list) li:last-child {margin-bottom:0;}
.standaard-content ul:not(.btn-list), .standaard-content ol {margin-bottom:20px;}
.standaard-content ul:not(.btn-list):last-child, .standaard-content ul li:last-child, .standaard-content ol:last-child {margin-bottom:0}
.standaard-content ul:not(.btn-list) li:before {    content: "";    position: absolute;    left: 0;    top: 0;    line-height: 1;    content: "";    background: url(assets/images/icons/check.svg);    width: 17px;    height: 22px;    border-radius: 50%;    display: inline-block;    background-size: contain;    background-repeat: no-repeat;    background-position: center center;}



.bold-content {font-weight:500}


.standaard-content.text-center ul:not(.btn-list) li {justify-content:center;text-align:left;}

.standaard-content ol { counter-reset: li}
.standaard-content ol li {display:block;padding-left:20px;position:relative;}
.standaard-content ol li:before{counter-increment: li;content: counter(li)'.'; color: var(--color-red);
  display: inline-block; position:absolute;left:0;top:0;}

.standaard-content ul + .btn, .standaard-content ol + .btn {margin-top:5px;}

.btn-list , .btn-list  li {padding:0;margin:0;list-style:none }
.btn-list {display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;}
.text-center .btn-list {justify-content:center;}

.text-center {text-align:center}


.fold-content {display:none}

.double-columns {  column-count: 1;	}

@media (min-width: 768px) {
  .double-columns {
    column-count: 2;
	column-gap: 30px;
  }
}


.standaard-content h2, .standaard-content h3 {font-size:var(--text-42)}
.standaard-content h4 {font-size:var(--text-32)}
.standaard-content h5, .standaard-content h6 {font-size:var(--text-24)}

.text-small {font-size:var(--text-p-small)}
.text-medium {font-size:var(--text-p-medium)}
.text-large {font-size:var(--text-p-large);line-height:1.5}


.black-bg .titel .small {color:#fff}


.margin-top-30 {margin-top:var(--space-30)}
.margin-top-45{margin-top:var(--space-45)}
.margin-top-90{margin-top:var(--space-90)}


/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 1750px;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding: 0 15px;
}

.row {margin-left:-15px;margin-right:-15px;}
.row>* {padding-right:15px;padding-left:15px;}

.content-row {padding:var(--space-60) 0;position:relative;}
@media screen and (max-width:992px){
	.content-row {padding:var(--space-45) 0;}
}

.content-row:first-child {padding-top:0;}
.white-bg  + .white-bg, .black-bg + .black-bg  {padding-top:0;}





.black-bg {background-color:var(--color-black)}

.label {display:inline-block;width:auto;line-height:1.5;color:#fff;padding:5px 15px;font-size:16px;}
.label.red {background:var(--color-red);}




.titel-group {position:relative;}
.titel-label {position:absolute;left:0;top:0;width:auto;}

.titel-box span {display:block;line-height:1;text-transform:uppercase}

.titels-standaard span.small {padding:0 25%}
.titels-standaard span.large {text-align:center;font-size:var(--text-180);}
.titels-columns span.large {font-size:var(--text-320);line-height: .9;}

.titel-box span.small {color:var(--color-black);font-size:var(--text-92);}
.titel-box span.large {color:var(--color-red);}

.titels-columns .titel {    display: flex;    flex-wrap: wrap;    align-items: center;    gap: 30px;    padding-left: 16.66667%;}


@media screen and (max-width:992px){
	.titel-label {position:relative;margin-bottom:20px;}
	.titels-standaard span.small {
    padding: 0 20%;
}
	.titels-columns .titel {padding-left:0;}
}

@media screen and (max-width:650px){
	.titels-standaard span.small {    padding: 0 ;}
	.titels-standaard span.large {text-align:left}
	.titels-columns .titel {display:block;}
	.titel-box span.small br {display:none}
	.titels-columns span.large {    font-size: var(--text-180);}
}


.media-box {position:relative;overflow:hidden}
.media-box img {width:100%;}
.video-box {overflow:hidden;position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%;height: auto;} 
.video-box iframe, .video-box object, .video-box embed { position: absolute;top: 0;	left: 0;width: 100%;height: 100%;}

.video-link {display:block;position:relative}
.video-link.overlay {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
.video-link span {position:absolute;top:calc(50% - 40px);left:calc(50% - 40px);border:6px solid #fff;border-radius:50%;width:80px;height:80px}
.video-link:before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-bordeaux);opacity:.6}
.video-link span:before {content:"";position:absolute;  width: 0; 
  height: 0; 
     border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 30px solid #fff;top:calc(50% - 17px);left:calc(50% - 13px)}
.video-link:hover span {width:70px;height:70px;top:calc(50% - 35px);left:calc(50% - 35px);}




/*------------------------------------*\
    FAQ
\*------------------------------------*/
.faq-content-row {padding:180px 0;}
.white-bg + .faq-content-row.black-bg {margin-top:90px}



.faq-row {margin-top:80px}

.faq-box {color:var(--color-grey);border-top:1px solid var(--color-grey);position:relative;padding:45px 0 45px 25%}
.faq-box a:not(.btn){text-decoration:underline;}
.faq-box a:not(.btn):hover, .faq-box a:not(.btn):focus {color:var(--color-red)}
.faq-box:last-child {border-bottom:1px solid var(--color-grey)}
.faq-count {line-height:1.3;font-family:var(--font-pressio);font-weight:800;color:#fff;font-size:var(--text-42);position:absolute;left:0;top:45px}

.faq-toggle span {width:30px;height:30px;border-radius:3px;position:absolute;right:0;top:14px;}
.faq-toggle span:before, .faq-toggle span:after {content:"";position:absolute;height:2px;width:15px;top:calc(50% - 1px);left:calc(50% - 7.5px);border-radius:0;background:#fff}
.faq-toggle span:after{transform:rotate(90deg)}
.faq-box.active  .faq-toggle span{transform:rotate(45deg)}

.faq-content {margin-top:25px;    padding-right: 33.3333%;}
.faq-box button {text-align:left;position:relative;padding:0;margin:0;-webkit-appearance:none;appearance:none;border:none;background:none;width:100%;display:block;padding-right:40px;}
.faq-box h3, .faq-box button {font-family:var(--font-pressio);font-weight:800;color:#fff;font-size:var(--text-42);}


@media screen and (max-width:1400px){
	.faq-content-row {padding:90px 0;}
	.white-bg + .faq-content-row.black-bg {margin-top:60px}
}
@media screen and (max-width:992px){
	.faq-content-row {padding:60px 0;}

	.white-bg + .faq-content-row.black-bg {margin-top:15px}
	.faq-box {    padding: 30px 0 30px 60px;}
	.faq-count {top:30px}
	.faq-toggle span {top:8px}
	.faq-row {margin-top:60px}
	.faq-content {padding-right:45px}
}
@media screen and (max-width:768px) {
    .faq-toggle span {
        top: 1px;
    }
	.faq-box {  padding-left:45px}
	.faq-row {margin-top:45px}
}
/*------------------------------------*\
    BUTTON
\*------------------------------------*/
.btn {
    font-size: 24px;
    font-family: var(--font-aktiv);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    line-height: 1;
    padding: 15px 30px;
    background: var(--color-black);
    border-radius: 0;
    min-width: 0;
    text-align: center;
    border: 1px solid var(--color-black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-style: normal;
    cursor: pointer;
    text-transform: none;
    align-items: center;
}
.btn:hover, .btn:focus {color:#fff;background:var(--color-red);border-color:var(--color-red)}

.btn.red{background:var(--color-red);border-color:var(--color-red)}
.btn.red:hover, .btn.red:focus {background:var(--color-black);border-color:var(--color-black)}


button[type="submit"].btn {width:100%;}
button[type="submit"].btn svg {margin-left:auto}

@media screen and (max-width:992px){
	.btn {padding: 15px 20px;font-size:20px;}
	button[type="submit"].btn svg {width:17px}
}
@media screen and (max-width:767px){
	
}
/*------------------------------------*\
    HEADER
\*------------------------------------*/

header {position:relative;top:0;left:0;width:100%;z-index:2000;padding:30px 0;}

body:not(.home) main {margin-top:120px}

header .row {gap:30px;align-items:center;}
.desktop-nav {width:auto;margin-left:auto;}

header ul, header li {padding:0;margin:0;list-style:none;}
.menu-items > ul {display:flex;align-items:center;gap:32px;}
.menu-items > ul > li {display:flex;}

.menu-items li {position:relative;}
.menu-items .sub-menu {position:absolute;top:100%;display:none}

header a {font-size:20px;color:var(--color-black);font-weight:800;font-family:var(--font-pressio);line-height:1;padding:10px;border-bottom:2px solid transparent;text-transform:uppercase}
header li:hover > a, header li:focus > a, header li.current-menu-item > a, header li.current-menu-ancestor > a {border-color:var(--color-red)}

.header-logo {width:137px;}
header .header-logo a {padding:0;display:block;}


.sidenav, .mobbtn-hold {display:none}

.mobbtn-hold {margin-left:auto}
.mobbtn {display:block;position:relative;width:30px;height:24px;cursor:pointer}
.mobbtn span {position:absolute;left:0;width:100%;height:2px;background:var(--color-black)}
.mobbtn span:nth-child(1) {top:3px;}
.mobbtn span:nth-child(2) {top:11px;}
.mobbtn span:nth-child(3) {top:19px;}

.mobbtn.active span:nth-child(1) {top:11px;transform:rotate(45deg);width:80%;left:10%;}
.mobbtn.active span:nth-child(2) {width:0;left:50%;}
.mobbtn.active span:nth-child(3) {top:11px;transform:rotate(-45deg);width:80%;left:10%;}

@media screen and (max-width:1400px){
	body:not(.home) main {margin-top:60px}
}


@media screen and (max-width:1150px){

	/*.desktop-nav {display:none}
	.mobbtn-hold {display:block;width:auto;}*/
}
@media screen and (max-width:992px){
	body:not(.home) main {margin-top:30px}
	header a {font-size:16px;}
	.header-logo {
    width: 110px;
}
}

/*------------------------------------*\
    Background
\*------------------------------------*/

body {
    --size: calc(100vw / 6);

    background-image:
        linear-gradient(#f7f7f7 2px, transparent 2px),
        linear-gradient(90deg, #f7f7f7 2px, transparent 2px);

    background-size: var(--size) var(--size);
}



/*------------------------------------*\
  FORMS
\*------------------------------------*/
form label {display:block;margin-bottom:0;font-size:var(--font-p-medium);;font-weight:normal;color:var(--color-black);font-size:0;text-indent:-999px;visbility:hidden}
form br {display:none}
form p {margin:0}

input[type="text"], input[type="email"], textarea, input[type="password"], input[type="tel"], input[type="date"] {
    width: 100%;border-radius:0;font-family:var(--font-aktiv);font-weight:normal;
    height: 60px;
	border:none;
    border-bottom: 1px solid var(--color-grey);
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: var(--space-30);
    color: var(--color-black);padding-left:0;outline:none;font-size:var(--font-p-medium);
}
textarea {resize:none;height:100px;padding-top:10px;outline:none;}


input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-black) !important;color:var(--color-black)!important
}
input:autofill {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-black)!important;
	color:var(--color-black)!important
}



.wpcf7-not-valid-tip {display:none!important}
.wpcf7-not-valid {    border-color: var(--color-red)!important;}

.wpcf7 form .wpcf7-response-output {
   border: 2px solid var(--color-black);
    background:  var(--color-black);
    margin: 0;
    padding: 10px 20px;
    width: 100%;
    float: left;
    text-align: center;    margin-top: 20px;color:#fff;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color:  var(--color-red);
    background:  var(--color-red);
}

.wpcf7 form.sent .wpcf7-response-output {
	
	 border-color: var(--color-black);
    background:  var(--color-black);
}


@media screen and (max-width:767px){
	input[type="text"], input[type="email"], textarea, input[type="password"], input[type="tel"], input[type="date"] {height:45px;margin-bottom:15px}
	textarea {height:100px}
}
/*------------------------------------*\
    Footer
\*------------------------------------*/

footer {border-bottom:30px solid var(--color-black);padding:150px 0 105px}
footer ul, footer li, .direct-contact, .direct-contact li {padding:0;margin:0;list-style:none;}

.footer-copyright {margin-top:90px;align-items:center;}
.footer-copyright li {display:inline-block;}
.footer-copyright ul {display:flex;align-items:center;}

footer .socials {justify-content:flex-end;gap:20px;}
.socials a {display:flex;width:45px;height:45px;background:var(--color-black);border-radius:50%;align-items:center;justify-content:center;}
.socials a:hover, .socials a:focus {background:var(--color-red)}

.copyright-menu ul{gap:15px 45px;} 
.copyright-menu a {color:var(--color-grey);font-size:16px;}
.copyright-menu a:hover, .copyright-menu a:focus {color:var(--color-red)}

.direct-contact, .direct-contact li {display:block;line-height:1;padding:0!important}
.direct-contact li:before {display:none}
.direct-contact {margin-top:var(--space-90);}

.direct-contact a {text-transform:uppercase;font-family:var(--font-pressio);font-size:var(--text-56);font-weight:800;color:var(--color-black);text-decoration:none}
.direct-contact a:hover, .direct-contact a:focus {color:var(--color-red)}

.footer-contact > div:first-child {margin-bottom:30px}


@media screen and (max-width:992px){
	footer {    border-bottom: 20px solid var(--color-black);    padding: 60px 0 45px;}	
	.footer-top .margin-top-90 {margin-top:45px;}
	.footer-copyright {margin-top:60px;}
}

@media screen and (max-width:767px){
	.footer-contact {display:flex;flex-wrap:wrap;margin-bottom:45px}
	.footer-contact > div:first-child {margin-bottom:0}
	.footer-contact > div {width:50%;}
	.footer-contact ul {width:100%;margin-top:30px}
	footer .socials {    justify-content: center;gap:15px;}
	footer .socials svg {width:25px;height:25px}
	.socials a {width:40px;height:40px;}
}
/*------------------------------------*\
    Selection
\*------------------------------------*/
::selection {
	background:var(--color-red);
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:var(--color-red);
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:var(--color-red);
	color:#FFF;
	text-shadow:none;
}