@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Questrial&display=swap');
/*
font-family: 'Montserrat', sans-serif;
font-family: 'Questrial', sans-serif;
*/

body{
    background-color:#fff;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

p{
    font-family: 'Questrial', sans-serif;
    font-size:1.1em;
}
#headercontainer {
    overflow:hidden;
	text-align:center;
    align-items: center;
	background-attachment:fixed;
	background-position: center; /*TODO: animeer naar ongeveer -25% bij openen subpage*/
	transition: background-position 0.6s cubic-bezier(.46,.04,.3,.99); /*TODO*/
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0; 
	bottom: 0; 
	left: 0;

	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*
#headercontainer .tabopen{
    background-position: center -15%;
}
*/

#headercontent{
    overflow:hidden;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-direction:column;
}

#headerlogo img{
    height:10vw;
    margin-bottom:1.5vw;
    
    -webkit-filter: drop-shadow(0px 0px 50px rgba(255,255,255,0.3));
    -webkit-filter: drop-shadow(0px 0px 50px rgba(0,0,0,0.3));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#bbb')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#bbb')";
    z-index:1;
    
    transition:height .5s ease;
}

#navlist{
    list-style:none;
    margin: 0;
    padding: 0px;
    overflow: hidden;
}

#navlist li{
    float:left;
    padding: .5vw 0;
    z-index:1;
}


#navlist a{
    font-size:1.75vw;
    padding: .5vw .9vw;
    color: #fff;
    text-decoration:none;
    text-align: center;
    text-shadow: 0px 0px 13px rgba(0,0,0, 0.9);
    transition: 0.3s;
}

#navlist a:hover {
    background-color: #eee;
    background-color:rgba(255,255,255,.2);
    text-shadow: 0px 0px 13px rgba(0,0,0, 0.5);
}

#navlist a.active{
    color:#111;
    background-color: #fff;
    text-shadow: 0px 0px 13px rgba(0,0,0, 0.0); /*zet opacity terug indien nodig*/
    -webkit-box-shadow: inset 0px 7px 10px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0px 7px 10px -5px rgba(0,0,0,0.3);
    box-shadow: inset 0px 7px 10px -5px rgba(0,0,0,0.3);
}


#header-spacing{
    height:40%; /* = tab closed */
    transition: height 0.6s cubic-bezier(.46,.04,.3,.99);
}

.tabopen #header-spacing{
    height:0;
}


                                /* tabopen animatie easing: cubic-bezier(.46,.04,.3,.99) */


#content{
    overflow: hidden;
    width:100%;
    background-color:#fff;
    
    height:0;       /* = tab closed */
    transition: height 0.6s cubic-bezier(.46,.04,.3,.99);
    
}
.tabopen #content{
    height:60%; 
}

.content-text{
    width:48%;
    margin:2%;
    margin-left:12%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    
    transition:.2s;
    z-index:2;
    text-shadow: 0px 0px 20px rgba(255,255,255, .6);
    
}
.content-text p{

    padding: 10px;
    padding-left:0;
    background-color:white;
/*    -webkit-box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0.3);*/
/*    -moz-box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0.3);*/
/*    box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0.3);*/
}

.content-img{
    width:48%;
    margin:0;
    margin-left:-12%;
    margin-right:12%;
    background: top left no-repeat;
    /*box-shadow: 50px 0px 50px 0 white inset, -50px 0px 50px 0 white inset; */
    overflow:hidden;
    z-index:1;
    transition:.2s;
}

.align-right .content-img {
    margin-left:12%;
    margin-right:0;
}

.align-right .content-text {
    margin-left:-12%;
    margin-right:12%;
    align-items:flex-end;
}
.align-right p{
    text-align:right;
    padding-left:10px;
    padding-right:0;
}


.tabcontent{
    overflow:hidden;
    position: absolute;
    width:100%;
    height:100%;
    display:flex;
    pointer-events: none; /* onzichtbare tabs mogen niet klikbaar/selecteerbaar zijn */
    justify-content:center;
    text-align:left;
    opacity:0;      /* closed tabs */
    
    
    transition: .4s cubic-bezier(.46,.04,.3,.99);
    -webkit-transition: .4s cubic-bezier(.46,.04,.3,.99);
    -moz-transition: .4s cubic-bezier(.46,.04,.3,.99);
    -o-transition: .4s cubic-bezier(.46,.04,.3,.99);
    
    
    /*transition: opacity .6s cubic-bezier(.46,.04,.3,.99);*/
    /*-webkit-transition: opacity .6s cubic-bezier(.46,.04,.3,.99);*/
    /*-moz-transition: opacity .6s cubic-bezier(.46,.04,.3,.99);*/
    /*-o-transition: opacity .6s cubic-bezier(.46,.04,.3,.99);*/
    
    /*transition: left .6s cubic-bezier(.46,.04,.3,.99);*/
    /*-webkit-transition: left .6s cubic-bezier(.46,.04,.3,.99);*/
    /*-moz-transition: left .6s cubic-bezier(.46,.04,.3,.99);*/
    /*-o-transition: left .6s cubic-bezier(.46,.04,.3,.99);*/
    
    
}


.tab-active{
    pointer-events:auto;
    opacity:1;
    left:0;
}

#lang-social-desktop{
    background-color:#fff;
    height: 40px;
    width:200px;
    border-radius:8px;
    position:absolute;
    top:20px;
    right:7%;
    display:flex;
    align-items:center;
    justify-content:space-around;
    
    -webkit-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.7);
    box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.7);
    
    transition: .5s ease-in-out;
}


#lang-select{
    height:24px;
    width:36px;
}
.lang-social:not(.social){
    height:24px;
    width:36px;
}
.social{
    align-self: flex-end;
    display:flex;
    align-items:center;
    transition:color .5s ease;
}
.lang-social{
    color:#555;
}

.button{
    padding:10px;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
    font-size:1.2em;
}


.tabcontent .button{
    margin-top:1.5%;
}

.tabcontent h1{
    margin-bottom:1%;
}
.tabcontent p{
    margin-top:1%;
}







.language-en .lang-nl {
    display:none;
}
.language-nl .lang-en {
    display:none;
}


.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.mobile-only{
    display:none;
}

.desktop-only{
    
}

/* geef tekstselectie een andere kleur*/
::-moz-selection {
    background: #014e70;
    color: #fdfdfd;
    text-shadow: none;
}

::selection {
    background: #014e70;
    color: #fdfdfd;
    text-shadow: none;
}

.bg-color-yellow{
    background-color:#ccb50c;
    transition:background-color .4s;
}
.color-yellow{
    color: #ccb50c;
}
.bg-color-blue{
    background-color: #014e70;
    transition:background-color .4s;
}
.color-blue{
    color: #014e70;
}

.hover-yellow:hover{
    color:#ccb50c;
}
.hover-blue:hover{
    color:#014e70;
}

.hover-bg-darkyellow:hover{
    background-color:#BD9D00;
}
.hover-bg-darkblue:hover{
    background-color:#083549;
}

.hover-color{
    filter:grayscale(100%);
    transition:filter .5s ease;
}
.hover-color:hover{
    filter:grayscale(0%);
}



@media only screen and (max-width: 1500px) {
    #headerlogo img{
        height: 13vw;

    }
    
    #navlist a{
    font-size:2vw;
    }
}

@media only screen and (max-width: 1200px) {
    p{
        font-size:1em;
    }
    
    #lang-social-desktop{
        position:absolute;
        top:20px;
        right:20px;
    }
    
    #headerlogo img{
        height: 15vw;
    }
    
    #navlist a{
        font-size:2.5vw;
    }
}


/*break naar mobile*/

#nav-topbar{
    position:absolute;
    top:-50px;
    height:40px;
    width:100%;
    z-index:4;
    background-color:#fff;
    background-color:rgba(255,255,255,.8);
    
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    
    transition: .5s ease-in-out;
    
}
#nav-icon {
  width: 30px;
  height: 24px;
  margin:8px 15px;
  z-index:5;
  left:0;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #014e70;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 40%;
}

#nav-icon span:nth-child(4) {
  top:81%;
}

#nav-icon.open span:nth-child(1) {
  top: 40%;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 40%;
  width: 0%;
  left: 50%;
}
#nav-icon.open{
    left:355px;
}


#nav-backdrop{
    position:absolute;
    z-index:3;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color:#000;
    opacity:0;
    transition: opacity .5s ease;
}


@media only screen and (max-width: 960px) {
    #nav-backdrop.open{
        opacity:.4;
    }
    
    #headerlogo img{
        height: 18vw;
    }
    
    #nav-topbar{
        top:0;
        transition: .5s ease-in-out;
    }
    
    #nav{
        position:absolute;
        width:0;
        height:100%;
        z-index:10;
        left:0;
        background-color:#eee;
        overflow:hidden;
        transition:.5s ease-in-out;
    }
    
    #nav.open{
        width:360px;
    }

    #navlist{
        z-index:11;
        margin-top:50px;
        width:100%;
        align-items:flex-start;
        justify-content:flex-start;
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }
    
    
    #navlist li a{
        margin-left:-70px;
        padding: 10px 0px;
        white-space: nowrap;
        opacity:0;
        overflow:hidden;
        transition:.5s ease-in-out;
        text-align:left;
        width:100%;
        color:#222;
        text-shadow:none;
        font-size:2em;
    }
    
    
    
    #navlist li{
        white-space: nowrap;
        width:360px;
        padding:0;
        display:flex;
        align-items:flex-start;
        overflow:hidden;
        transition:.5s ease-in-out;
    }
    
    #nav.open li a{
        margin-left:0;
        padding-left:20px;
        opacity:1;
    
    }
    
    #navlist a:hover {
        background-color: #ddd;
        text-shadow: 0px 0px 13px rgba(0,0,0, 0.0);
    }

    #navlist a.active{
        color:#111;
        background-color: #fff;
        text-shadow: 0px 0px 13px rgba(0,0,0, 0.0); /*zet opacity terug indien nodig*/
        -webkit-box-shadow: inset 0px 7px 10px -5px rgba(0,0,0,0);
        -moz-box-shadow: inset 0px 7px 10px -5px rgba(0,0,0,0);
        box-shadow: inset 0px 7px 10px -5px rgba(0,0,0,0);
    }
    #navlist li .active{
        background-color:#fff;
        
    }
    
    #lang-social-desktop{
        top:60px;
        right:-250px;
    }
    #lang-social-mobile{
        position:absolute;
        left:20px;
        width:320px;
        opacity:0;
        bottom:40px;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:space-around;
        transition: .5s ease-in-out;
        
    }
    .open #lang-social-mobile{
        opacity:1;
    }
    
    #lang-social-mobile a{
        text-decoration:none;
    }
    
    
    
    
    #header-spacing{
        height:65%; /* = tab closed */
        transition: height 0.6s cubic-bezier(.46,.04,.3,.99);
    }
    
    
    
    
    
    
    
    
    .tabopen #content{
        height:65%; 
    }
    
    .content-text{
        width:90%;
        margin:2%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
    
        transition:.2s;
        z-index:2;
        text-shadow: 0px 0px 20px rgba(255,255,255, .6);
    
    }
    
    .align-right .content-text{
        align-items:flex-start;
        margin-left:0;
        margin-right:0;
    }
    
    .content-text p{
        padding: 0;
        -webkit-box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0);
        -moz-box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0);
        box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0);
        text-align:left;
    }


    
    
    
    
    
    .mobile-only{
        display:block;
    }

    .desktop-only{
        display:none;
    }
    
}


@media only screen and (max-width: 767px) {
    #headerlogo img{
        height: 22vw;
    }
    #nav-topbar{
        height:50px;
    }
    
    #nav-icon {
        width: 36px;
        height: 28.8px;
        margin:10.6px 15px;
        
    }

    #nav-icon span {
        height: 5px;
    }
    
    
}







.centered {
	text-align: center
}

.mt {
	margin-top: 80px;
}

.mb {
	margin-bottom: 80px;
}
.hidden{
    display:none;
}