@font-face {
  font-family: 'Sucrose Bold Two';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sucrose.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

body {

}

.donna {
  position: absolute;
  top: 0;
  right: 5vh;
  z-index: 800;
  width: 30%;
  transform: rotate(200deg);
  display: none;

}

// * {outline : 1px solid red; } 

/* Fotos */

img {
  width: 100%;
}

.thumbnails {
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 50%));
  -ms-grid-columns: repeat(auto-fill, minmax(30%, 50%) 2fr);
  width: 70%;
  margin: 0 0 0 0;
  height: auto;
  padding: 1%;
}

.thumbnailsie {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 3% 10% 50% 10%;
  height: auto;
  padding: 1%;
}

.thumbnail {
  position: relative;


}

.thumbnailie {
  position: relative;
  width: 50%;
  padding: 1%;
}

#short {
  grid-row: span 4;
  -ms-grid-row-span: 4;
  -ms-grid-row:4;
  object-fit: cover;
  width: 97%;
  height: 22vw;
  max-height: 22vw;
  min-height: 22vw;
  overflow: hidden;
  margin: 0 0 1vw 0;
}

#tall {

  grid-row: span 7;
  -ms-grid-row-span: 7;
  -ms-grid-row:7;
  object-fit: cover;
  width: 97%;
  height: 39vw;
  max-height: 39vw;
  min-height: 39vw;
  overflow: hidden;
  margin: 0 0 1vw 0;
}

/* Header */

.header {
  position: relative;

  width: 100%;
  height: 3vh;
  text-align: justify;
}

.header ul {
    list-style: none;
    padding: 0 5%;
  height: 5vh;
  line-height: 0vh;
  margin: 3vh;

}

.header li {
  display: inline-block;

}

.filler {
    width: 100%;
    display: inline-block;
    height: 0vh;
}

.header > ul > li > a {
  font-family: 'Cabin Sketch', sans-serif;
  font-size: 2vh;
  color: #314f04;
  text-decoration: none;
  text-transform: uppercase;
}

.header > ul > li > a:hover {
  color: #a3abc9;
}

/* Zoeken */

.zoekveld {
  margin: 2vw;
}

.vindveld {
  margin: 2vw;
  padding: 0 0 3vw 0;
}

.zoekveld > label {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
  text-transform: uppercase;
  color: #f7f5ef;
  width: 20%;
  padding: 1vh;
}

.zoekveld > select {
  display:inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.2vw;
  width: 8vh;
}

.zoekveld > input[type=text] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;

  padding: 0.2vw;
}

.zoekveld > input[type=submit] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.2vw;
  width: 8vh;
}

.zoekveldje {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2vw;
  z-index: 999;
}

.zoekveldje > label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
  line-height: 1.2vh;
  font-weight: bold;
  text-transform: uppercase;
  color: #93b0b5;
  width: 20%;
  padding: 1vh 0;
}

.zoekveldje > input[type=text] {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;
  width: 60%;
  padding: 0.2vw;
}

.zoekveldje > input[type=submit] {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.2vw;
  width: 20%;
}

.hoofdzoek {
  font-family: 'Sucrose Bold Two';
  color: #c3dee3;
  font-weight: 700;
  font-size: 3vh;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
  opacity: 0.8;
  text-transform: uppercase;
  text-decoration: none;
}

.kop {
  position: relative;
  background: #fff;
  margin: 2vw 0 2vw 0;
  outline: .3vw solid #756a46;
  border-radius: .5vw;
}

.blad {
  padding: 2vw 0 0 0;
  background: #fff;
  outline: .3vw solid #756a46;
  border-radius: .5vw;
}

.titel {
  position: relative;
  width: 60%;
  margin: 0 auto;
  padding: 0;
}

.blog {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;

}

.blogtitel {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

}

.blogtitel > h2 {
  width: 100%;

}

.blogtitel > h3 {
  width: 70%;

}

.blogtitel > p {
  width: 30%;

  text-align: right;

}

.tagline {

}

.taglink {

  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
  line-height: 1.2vh;
  font-weight: bold;
  color: #93b0b5;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0;

}

.bloglijf {
  position: relative;
  width: 100%;

}

.br {
  width:100%;
  object-fit: cover;
  padding: 1vw 0;
}

.sm {
  float: right;
  width: 40%;
  object-fit: cover;
  padding: 0 0 2vw 2vw;
}

.hi {
  display:none;
}


.bloglees {
  width: 70%;
  padding: 0 2vw 2vw 2vw;
}

.fl {
  float: left;
  font-family: 'Sucrose Bold Two';
  color: #f7f5ef;
  font-weight: 900;
  font-size: 8vh;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
  opacity: 0.8;
  text-transform: uppercase;
  line-height: 5vh;
  margin: 1vh 1vh 0 0;

}

.re {

}

.blogzoek {
  width: 30%;
  margin: 0 0 3vw 0;
  padding: 0 2vw;
  z-index: 999;
}


/* Algemeen */

.pagina {
  margin: 2vh 2vw;

}

h1 {
  font-family: 'Sucrose Bold Two';
  color: #f7f5ef;
  font-weight: 900;
  font-size: 32vh;
  line-height: 30vh;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
  opacity: 0.8;
  text-transform: uppercase;
  text-align: center;
  margin: 0;

}

h2 {
  font-family: 'Sucrose Bold Two';
  color: #f7f5ef;
  font-weight: 700;
  font-size: 8vh;
  line-height: 7vh;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
  opacity: 0.8;
  text-transform: uppercase;
  margin: 0;
}

h3 {
  font-family: 'Sucrose Bold Two';
  color: #f7f5ef;
  font-weight: 700;
  font-size: 3vh;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
  opacity: 0.8;
  text-transform: uppercase;
  margin: 0;
}

.kliktitel {
  font-family: 'Sucrose Bold Two';
  color: #c3dee3;
  font-weight: 700;
  font-size: 3vh;
  line-height: 3vh;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
  opacity: 0.8;
  text-transform: uppercase;
  text-decoration: none;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
  color: #4a4127;
}

p1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;
  color: #4a4127;
}

p2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vh;
  color: #ab975b;
}

a.klikvlak {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-decoration: none;
  cursor: pointer;
  z-index: 800;
}

/* Loader */

#pagina {
  height: 100%;
}

#loader {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 40vh auto;
}

#loader div {
  animation: lds-roller 3.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 80px -30px;
}

#loader div:after {
  content: " ";
  display: block;
  position: absolute;
  border-radius: 50%;
  background: #000;
  top: 0;
  right: 0;
}

#loader div:nth-child(1) {
  animation-delay: -0s;
}

#loader div:nth-child(1):after {
  background: #628c67;
  width: 7px;
  height: 7px;
}

#loader div:nth-child(2) {
  animation-delay: -0.14s;
}

#loader div:nth-child(2):after {
  background: #8bba77;
  width: 9px;
  height: 9px;
}

#loader div:nth-child(3) {
  animation-delay: -0.30s;
}

#loader div:nth-child(3):after {
  background: #b8cf70;
  width: 11px;
  height: 11px;
}

#loader div:nth-child(4) {
  animation-delay: -0.48s;
}

#loader div:nth-child(4):after {
  background: #ded35b;
  width: 13px;
  height: 13px;
}

#loader div:nth-child(5) {
  animation-delay: -0.64s;
}

#loader div:nth-child(5):after {
  background: #deb443;
  width: 15px;
  height: 15px;
}

#loader div:nth-child(6) {
  animation-delay: -0.78s;
}

#loader div:nth-child(6):after {
  background: #de8b2c;
  width: 17px;
  height: 17px;
}

#loader div:nth-child(7) {
  animation-delay: -0.9s;
}

#loader div:nth-child(7):after {
  background: #cf5611;
  width: 19px;
  height: 19px;
}

#loader div:nth-child(8) {
  animation-delay: -1.0s;
}

#loader div:nth-child(8):after {
  background: #bf0000;
  width: 21px;
  height: 21px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}