@charset "UTF-8";
/* CSS Document */

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {font-family: ratio, sans-serif;

font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;font-style: normal;
color: #ffffff;
	background-color: #2a2929;
	font-size: 10px;
}

a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
p{margin: 0;}

.wrapper{width: 100%; overflow-x: hidden;}

#typewriter{display: block;}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

h1{    
font-family: adobe-garamond-pro, serif;
font-weight: 500; font-style: normal;
font-size: 4em;
color: #f5333f; 
	padding-bottom: 8px;
letter-spacing: -2px; 
	 overflow: hidden;
 margin: 0 ; 
	    margin-bottom: 20px;

  animation: typing 1.5s steps(16, end); }

.hold h1{animation: none;}

h2{   font-family: adobe-garamond-pro, serif; font-weight: 400; font-style: normal;

font-size: 2.4rem;  
 }
/*======================================================
                          Navbar
  ======================================================*/
#navbar {
  background: #1e1e1d;
  color: rgb(13, 26, 38);
  position: fixed;
  top: 0;
  height: 60px;
  line-height: 60px;
  width: 100vw;
  z-index: 10;
}

.nav-wrapper {
  margin: auto;
  text-align: center;
  width: 80%;
} @media(max-width: 1000px) {
    .nav-wrapper {
      width: 90%;
    }
  } @media(max-width: 900px) {
      .nav-wrapper {
        width: 100%;
      }
    } 


.logo {
  float: left;
  margin-left: 28px;
  font-size: 1.5em;
  height: 60px;
  letter-spacing: 1px;
  text-transform: uppercase;} 
.logo img {
	height: 49px;
    padding-bottom: 5px;}


#navbar ul {
  display: inline-block;
  float: right;
  list-style: none;
  /* margin-right: 14px; */
  margin-top: -2px;
  text-align: right;
  transition: transform 0.5s ease-out;
  -webkit-transition: transform 0.5s ease-out;
} @media(max-width: 900px) {
    #navbar ul {
      display: none;
    }
  } @media(orientation: landscape) {
      #navbar ul {
        display: inline-block;
      }
    }

#navbar li {
  display: inline-block;
}

#navbar li a {
  color: rgba(255,255,255,1.00);
  display: block;
  font-size: 1.5em;
	font-weight: 400;
  height: 50px;
  letter-spacing: 0.5px;
  margin: 0 20px;
  padding: 0 4px;
  position: relative;
  text-decoration: none;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

#navbar li a:hover {
  /* border-bottom: 1px solid rgb(28, 121, 184); */
  color: #f5333f;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

/* Animated Bottom Line */
#navbar li a:before, #navbar li a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 15px;
 color: #f5333f;}

#navbar li a:before {
  left: 0;
  transition: 0.5s;
}

#navbar li a:after {
  color: #f5333f;
  right: 0;
  /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}

#navbar li a:hover:before {
  background: #f5333f;
  width: 100%;
  transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#navbar li a:hover:after {
  background: transparent;
  width: 100%;
  /* transition: 0s; */
}



/*======================================================
                    Mobile Menu Menu Icon
  ======================================================*/
@media(max-width: 900px) {
  .menuIcon {
    cursor: pointer;
    display: block;
    position: fixed;
    right: 15px;
    top: 20px;
    height: 23px;
    width: 27px;
    z-index: 12;
  }

  /* Icon Bars */
  .icon-bars {
    background: rgba(66,66,66,1.00);
    position: absolute;
    left: 1px;
    top: 45%;
    height: 2px;
    width: 20px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  } 

  .icon-bars::before {
    background: rgba(66,66,66,1.00);
    content: '';
    position: absolute;
    left: 0;
    top: -8px;
    height: 2px;
    width: 20px;
/*     -webkit-transition: top 0.2s ease 0.3s;
    transition: top 0.2s ease 0.3s; */
    -webkit-transition: 0.3s width 0.4s;
    transition: 0.3s width 0.4s;
  }

  .icon-bars::after {
    margin-top: 0px;
    background: rgba(66,66,66,1.00);
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 2px;
    width: 20px;
/*     -webkit-transition: top 0.2s ease 0.3s;
    transition: top 0.2s ease 0.3s; */
    -webkit-transition: 0.3s width 0.4s;
    transition: 0.3s width 0.4s;
  }

  /* Bars Shadows */
  .icon-bars.overlay {
    background: #b08f6e;
    width: 20px;
    animation: middleBar 3s 1 0.5s;
    -webkit-animation: middleBar 3s 1 0.5s;
  } @keyframes middleBar {
      0% {width: 0px}
      50% {width: 20px}
      100% {width: 0px}
    } @-webkit-keyframes middleBar {
        0% {width: 0px}
        50% {width: 20px}
        100% {width: 0px}
      }

  .icon-bars.overlay::before {
    background:#b08f6e;
    width: 20px;
    animation: topBar 3s 1 0.2s;
    -webkit-animation: topBar 3s 1 0s;
  } @keyframes topBar {
      0% {width: 0px}
      50% {width: 10px}
      100% {width: 0px}
    } @-webkit-keyframes topBar {
        0% {width: 0px}
        50% {width: 10px}
        100% {width: 0px}
      }

  .icon-bars.overlay::after {
    background: #b08f6e;
    width: 20px;
    animation: bottomBar 3s 1 1s;
    -webkit-animation: bottomBar 3s 1 1s;
  } @keyframes bottomBar {
      0% {width: 0px}
      50% {width: 15px}
      100% {width: 0px}
    } @-webkit-keyframes bottomBar {
        0% {width: 0px}
        50% {width: 15px}
        100% {width: 0px}
      }


  /* Toggle Menu Icon */
  .menuIcon.toggle .icon-bars {
	      background: #b08f6e;

    top: 5px;
    transform: translate3d(0, 5px, 0) rotate(135deg);
    transition-delay: 0.1s;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .menuIcon.toggle .icon-bars::before {
	      background: #b08f6e;

    top: 0;
    transition-delay: 0.1s;
    opacity: 0;
  }

  .menuIcon.toggle .icon-bars::after {
	      background: #b08f6e;

    top: 10px;
    transform: translate3d(0, -10px, 0) rotate(-270deg);
    transition-delay: 0.1s;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .menuIcon.toggle .icon-bars.overlay {
    width: 20px;
    opacity: 0;
    -webkit-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
  }

}
	.btn{background:none;}
.loadNews[disabled] {
	opacity: 0.5;

}
/*======================================================
                   Responsive Mobile Menu 
  ======================================================*/
.overlay-menu {
  background: #1e1e1d;
    color: #b08f6e;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed !important;
  top: 0;
  right: 0;
  padding: 0 50px;
  transform: translateX(-100%);
  width: 100vw;
  height: 100vh;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
	z-index: 2;
}

.overlay-menu ul, .overlay-menu li {
  display: block;
  position: relative;
	}
.overlay-menu li {
border-bottom: 2px #b08f6e solid;
}
.overlay-menu li:last-child {
border-bottom: 0px #b08f6e solid;
}
.overlay-menu li a {
  display: block;
  font-size: 2.3em;
  letter-spacing: 1px;
/*   opacity: 0; */
  padding: 10px 0;
  text-align: right;
  text-transform: uppercase;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
/*   -webkit-transition: 0.2s opacity 0.2s ease-out;
  transition: 0.2s opacity 0.2s ease-out; */
	text-align: center;
}

.overlay-menu li a:hover,
.overlay-menu li a:active {
color: #f5333f;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
	text-decoration: none;
}

/*======================================================
                   video background 
  ======================================================*/

.splash {
overflow: hidden;
position: absolute;
display: block;
width: 100vw;
height: 85vh;
min-height: 400px;
}

video {
display: block;
position: absolute;
z-index: -1;
object-fit: cover;
    width: 100vw;
    height: 90vh;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}

.tekstblok2 video{
	display: block;
position: relative;
z-index: 1;
 width: 100%    !important;
  height: auto   !important;
left:0;
top: 0;
transform:none;

	
}
/*======================================================
  ======================================================*/
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {padding: 0;}
.row{margin: 0;}

.eerstelinks{ margin-top: 12%;}
.eersterechts{margin-top: 23%;}

/*======================================================
                   tekstblok
  ======================================================*/
.tekstblok{
	background-color: #1e1e1d;
	width: 80%; float: right;
	}
.t_logo{width: 60%; padding-bottom: 48px;}
.pd32{padding: 32px;}
p{line-height: 1.2em; font-size: 1.6em}
.tekstblok a{    color: #b08f6e;
}
.tekstblok2 a{    color: #b08f6e;
}
.knop{padding: 5px 17px 7px 17px;
    background-color: #b08f6e;
    position: absolute;
    right: 20%;
    bottom: -70px;
    font-size: 1.6em;
}
.knop a{color: #fff;  -webkit-transition: color 0.7s ease;
  transition: color 0.7s ease; letter-spacing: 0.5px; font-weight: 400; text-align: center;}
.knop a:hover{color: #f5333e; text-decoration: none;}
.citaat{    float: right;
    width: 80%;
    margin-top: 20%;
    color: #b08f6e; 
	background-image: url(../img/qoute.svg); background-repeat: no-repeat; background-size: 50%;
	min-height: 300px; padding-top: 64px;
    padding-left: 32px;

 }

.citaatspan{    font-family: adobe-garamond-pro, serif; font-weight: 400; font-style: normal;

/*
    background: #2a2929;
    box-shadow: 10px 0 0 #2a2929, -10px 0 0 #2a2929; 
 line-height:inherit; 
*/	
	line-height: 50px; font-size: 22px; padding-top: 50px; padding-right: 32px;  height: 100px; overflow-y: hidden;  transition: all 0.6s ease-in-out;}


.citaatspan:hover{height: auto; padding-top: 0px}

.indent{    
    line-height: 50px;
    font-size: 22px;
  margin-left: 40px;
		padding: 0;

}
.dubbelindent{    
    line-height: 50px;
    font-size: 22px;
  margin-left: 80px;
	padding: 0;
}
@media(max-width: 1000px) {
   .tekstblok{ width: 90%;} 
    }

/*======================================================
                   nieuws
  ======================================================*/

.eersterechts h1{transform: translate(40%, 0);}
.imgholder{background-position: center; background-size: cover; width: 100%; height: 230px;    background-color: #212529;
}
.tekstblok .imgholder{background-position: center; background-size: cover; width: 100%; height: 350px;    background-color: #212529;
}

.volgende{position: absolute;right: 32px; bottom: 32px; font-size: 1.5rem;}
.nieuws{position:relative;}
.nieuws p{padding: 1px 32px 18px 32px; margin: 0;    margin-block-start: 0em;
 }
.nieuws p:last-child{padding: 1px 32px 64px 32px; }

.container {
  display: grid;
  grid-auto-columns: minmax(22rem, auto);
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  grid-gap: 0;
	padding: 0;
	max-width: 80%;
    float: left;
	

}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
 h3{
	padding: 32px 32px 16px 32px;
	font-family: adobe-garamond-pro, serif; font-weight: 400; font-style: normal;

    font-size: 2.4em; color: #f5333e;
 animation: 
    typing 0.5s steps(10, end);
 margin: 0 ; 
  }

.bgblck h2 {
 
  overflow: hidden;
 margin: 0 ; 
  animation: 
    typing 0.5s steps(10, end);
	line-height: 0.9em;
}

pre {
    display: block;
    padding: 0;
    margin:0;
    line-height: 1.2rem;
  font-size: inherit;
    word-break: break-all;
    word-wrap: break-word;
 background-color: transparent;
   border: 0px solid #ccc;
    border-radius: 0; 
}
.meer{ height: 25px; position: absolute; left: 16px; bottom:8px;  text-decoration: none;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease; font-size: 1.6rem;}


.meer:hover {
  color: #f5333f;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}


.item {position: relative; padding-bottom: 30px; height: 390px;   -webkit-transition: all 1s ease;
  }
.eersterechts .container:before{content: none;}
.bgblck{background: #1e1e1d;}
.item img{width: 100%;}
.item h2{padding:0px 16px 0 16px;     margin-top: 16px;     margin-bottom: 8px;
}
.item p{padding: 0 16px 16px 16px;}
.item a{text-decoration: none; color: inherit;}
.blok {width: 25px; height: 25px; position: absolute; right: 0; bottom: 0;}
.blok2 {width: 50px; height: 50px; position: absolute; right: 0; bottom: 0;    background-color:#f5333e;

}

.first {
    color:#8896a8;
}
.second {
    color:#b0636e;
}
.third {
    color:#b08f6e;
}
.fourth {
    color:#5e704a;
}
.fifth {
    color:#f5333e;
}
.firstbg {
    background-color:#8896a8;
}
.secondbg {
    background-color:#b0636e;
}
.thirdbg {
    background-color:#b08f6e;
}
.fourthbg {
    background-color: #5e704a;
}
.fifthbg {
    background-color:#f5333e;
}
/*======================================================
                   prijs
  ======================================================*/

.jury {margin-top:2%;}
.tekstblok2 h1{transform: none;}
.p_logo {
    width: 60%;
    padding-bottom: 48px;
}
.tekstblok2 {
    background-color: #1e1e1d;
    width: 80%;
    float: left;
	margin-left: 2%;
	    position: relative;

}
.prijs .eersterechts{margin-top: 30%;}
.tweederechts{ margin-top: 64px;}


.slider {
  margin: 0 auto;
	padding-bottom: 23px;
}

.slide_viewer {
  height: 340px;
  overflow: hidden;
  position: relative;
}

.slide_group {
  height: 100%;
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
	height: 100%;
    background-size: cover;
	    background-position: center;


}
.blank{height:100%; width: 100%;}
.slide img{

  width: 100%;
}
.slide:first-child {
  display: block;
}

.slide:nth-of-type(1) {
    background-color:#8896a8;
}

.slide:nth-of-type(2) {
    background-color:#b0636e;
}

.slide:nth-of-type(3) {
    background-color:#b08f6e;
}

.slide:nth-of-type(4) {
    background-color: #5e704a;
}

.slide_buttons {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

a.slide_btn {
  color: #474544;
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
  color: #428CC6;
  cursor: pointer;
}



.previous_btn {
     left: 39px;
    margin: auto;
    position: absolute;
    top: 249px;
}

.next_btn {
  right: 39px;
    margin: auto;
    position: absolute;
    top: 249px;
}

.previous_btn, .next_btn {
  cursor: pointer;
  height: 65px;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 65px;
}

.previous_btn:hover, .next_btn:hover {
  opacity: 1;
}

/*======================================================
                   lokien
  ======================================================*/
.lokien .eersterechts {
    margin-top: 30%;
}
.lokien .slider{padding-bottom: 0;}
/*
==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
  position: relative;
  left: -9984px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #b08f6e;
  color: #b08f6e;
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  animation: dotTyping 2.5s infinite linear;
	    margin-top: 10px;

}

@keyframes dotTyping {
  0% {
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  }
  16.667% {
  box-shadow: 9984px -10px 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  }
  33.333% {
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  }
  50% {
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px -10px 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  }
  66.667% {
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  }
  83.333% {
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px -10px 0 0 #b08f6e;
  }
  100% {
  box-shadow: 9984px 0 0 0 #b08f6e, 9999px 0 0 0 #b08f6e, 10014px 0 0 0 #b08f6e;
  }
}

/**
 * 
/*======================================================
                   footer
  ======================================================*/

footer{height: 100px;    background-color:#f5333e; margin-top: 200px; position: relative;
}
.fl{ position: absolute;left: 10%; top:20px;
}
.fr{ position: absolute; right: 10%; top:20px;
}
.fr .foot{text-align: right;}
.foot{    width: 158px;
    display: inline-block;}
.foot a{font-size: 1.6em;}
.foot a:hover{color: #b08f6e; text-decoration: none;  -webkit-transition: color 0.7s ease;
  transition: color 0.7s ease; 
}


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/*======================================================
                   responsive
  ======================================================*/
@media(min-width: 1665px) {
.eersterechts {margin-top: 16%;}	
.eersterechts h1 {transform: translate(27%, 0);}
	
.container{max-width: 90%;	
	    grid-auto-columns: minmax(27rem, auto);
    grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));}
}
@media(min-width: 1220px) {
.eersterechts {
    margin-top: 16%;}
			.lokien .eersterechts h1 {transform:none;}
		.prijs .eersterechts h1 {transform:none;}
}
@media(max-width: 1400px) {	.item h2{font-size: 1.9rem;}
}

@media(max-width: 1220px) {
	.container{max-width: 90%;	
	    grid-auto-columns: minmax(18rem, auto);
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));}
	.eersterechts h1{transform: translate(45%, 0);}
		.lokien .eersterechts h1 {transform:none;}
		.prijs .eersterechts h1 {transform:none;}
	.item h2{font-size: 1.9rem;}

	.knop{right: 10%;}
}

@media(max-width: 990px) {
		.tekstblok{float: none; margin-left: 5%;}
		.tekstblok2{float: none; margin-left: 5%; width: 90%;}
	.citaat{display: none;}
	.prijs .eersterechts {margin-top: 2%;}
		.lokien .eersterechts {margin-top: 2%;}

.prijs .eersterechts h1 {transform:none;}
	.lokien .eersterechts h1 {transform:none;}
	.item h2{font-size: 2.4rem;}
	.eersterechts h1{transform: translate(5%, 375px);}
	.eersterechts {margin-top: 2%;}	
	.knop{right: 5%;}
	.container{width: 90%;	margin-left: 5%;
	    grid-auto-columns: minmax(30rem, auto);
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));}
}

@media(max-width: 930px) {


.eersterechts h1{transform: translate(5%, 375px);}
.container{max-width: 90%;	margin-left: 5%;grid-auto-columns: minmax(28rem, auto);grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));}

}

 
@media(max-width: 767px) {
container{grid-auto-columns: minmax(24rem, auto);grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));float: none;  margin-left: 5%;}
footer{height: 150px;}
.fr .foot{text-align: left;}
.fr{ position: absolute; left: 10%; top: 68px;}
knop{right: 5%;}

.eersterechts{margin-top: -65%;}
.eerstelinks{margin-top: 25%;}
.eersterechts h1{font-size: 3.5em; transform: translate(5%, 375px);}
.tekstblok{float: none; margin-left: 5%;}
	
.previous_btn {left: 50px;}
.next_btn {right: 50px;}	
	.tekstblok h1{
		font-size: 3rem;
	}

}