/*
	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;
		

	--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; 
	
}





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:none}


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}
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;
  }
}

/*------------------------------------*\
    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;}
.white-bg  + .white-bg  {padding-top:0;}



.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-box {position:relative;border-radius:8px;overflow:hidden}
.media-box img {width:100%;}
.video-box {border-radius:8px;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-row {margin-top:var(--space-32);margin-bottom:16px;}

.faq-box {border: 1px solid var(--color-grey-50);background: var(--color-grey-50);width:100%;overflow:hidden;border-radius:8px;margin-bottom:16px;}
.bg-grey-50  .faq-box {border: 1px solid var(--color-grey-75);background: #fff;}


.faq-box h3, .faq-toggle {
    font-size: var(--text-p-large);
    font-weight: 500;
    color: var(--color-grey);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
.faq-toggle {padding:24px 32px;width:100%;text-align:left;cursor:pointer;position:relative;padding-left:66px}
.active .faq-toggle {padding-bottom:8px;}
.faq-content {padding:24px 32px;padding-top:0;}

.faq-box.active {background:var(--color-bordeaux)}
.faq-box.active  .faq-box h3, .faq-box.active .faq-toggle, .faq-box.active {color:#fff}

.faq-toggle span {width:18px;height:18px;border-radius:3px;border:2px solid var(--color-bordeaux);position:absolute;left:32px;top:26px;}
.faq-toggle span:before, .faq-toggle span:after {content:"";position:absolute;height:2px;width:8px;top:calc(50% - 1px);left:calc(50% - 4px);border-radius:2px;background:var(--color-bordeaux)}
.faq-toggle span:after{transform:rotate(90deg)}
.faq-box.active  .faq-toggle span:after {display:none}
.faq-box.active  .faq-toggle span:before, .faq-box.active  .faq-toggle span:after {background:var(--color-orange)}
.faq-box.active  .faq-toggle span{border-color:var(--color-orange)}


@media screen and (max-width:992px){
	.faq-toggle span {top:25px}
}

@media screen and (max-width:768px){
	.faq-toggle {    padding: 16px 24px;    padding-left: 50px;}
	.faq-toggle span {    left: 20px;    top: 17px;}
	.faq-content {		padding: 0 16px 16px;}
	.faq-rows:last-child {margin-bottom:8px}
	
	.faq-row + .faq-row {margin-top:0}
	.faq-row:not(:last-child){margin-bottom:0}
}

/*------------------------------------*\
    BUTTON
\*------------------------------------*/
.btn {
    font-size: var(--text-p-medium);
    font-family: var(--font-family);
    color: var(--color-grey);
    font-weight: 400;
    display: inline-flex;
    line-height: 1;
    padding: 16px 30px;
    background: #fff;
    border-radius: 0;
    min-width: 0;
    text-align: center;
    border: 1px solid var(--color-grey-75);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-style: normal;
    cursor: pointer;
    text-transform: none;
    align-items: center;
   text-transform:none;
	border-radius:30px;
}
.btn:hover, .btn:focus {color:var(--color-grey);background:var(--color-grey-75);border-color:var(--color-grey-75)}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

header {position:fixed;top:0;left:0;width:100%;z-index:2000;padding:36px 0;display:none}
body:not(.home) main {margin-top:120px}
.fixed-header {padding:20px 0;}
header:before {content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background:var(--color-bordeaux);}
header .row {gap:30px;align-items:center;}
.header-logo {width:236px;}
.extra-header-nav {width:auto;margin-left:auto;}
.desktop-nav {width: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}

.extra-header-nav li {display:flex;gap:8px;align-items:center;}
.extra-header-nav li svg {width:20px;fill:var(--color-orange)}

header a {font-size:var(--text-p-medium);color:#fff;font-weight:500;}
header li:hover > a, header li:focus > a, header li.current-menu-item > a, header li.current-menu-ancestor > a {color:var(--color-orange)}

.desktop-nav a {padding:12px 0;}

.home .header:not(.fixed-header):before {opacity:0}


header.nav-up {top:-100%;}



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

.mobbtn {display:block;position:relative;width:30px;height:24px;}
.mobbtn span {position:absolute;left:0;width:100%;height:2px;background:var(--color-orange)}
.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){
	.header-logo {    width: 200px;}
	.menu-items > ul {gap:24px}
	header .row {		gap: 12px;}
}
@media screen and (max-width:1250px){

	header {padding:24px 0;}
	body:not(.home) main {    margin-top: 91px}
	header a {font-size:var(--text-p-small);}
}
@media screen and (max-width:1100px){

	.desktop-nav {display:none}
	body:not(.home) main {    margin-top: 82px}
	.mobbtn-hold {display:block;width:auto;}
	header .row {gap:0;}
}

@media screen and (max-width:767px){
	.header-logo {        width: 120px;        padding-right: 0;    }
	.login-senszit {display:none!important}
	    body:not(.home) main {        margin-top: 72px;    }
}
@media screen and (max-width:450px){
	.lang-switch.desktop {display:none}
	
}





/*------------------------------------*\
    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;
}