/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*body {
  background-image:url("achtergrond1.JPEG");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: Verdana;
}*/
body {
  width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
}
.slideshow {
  position: fixed;
  height: 100%;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 0;
}

.container1 {
  height: 70vh;
  /*width: calc(100vw - 18px);*/
  background-color: #617d3c;
  position: relative;
  margin-top: 100vh;
  border-top: 5px solid rgba(225,225,225,0.5);
  text-align: center;
  z-index: 9;
}
.fotoblock h1 {
  margin-top: 0vh;
  font-size: 400%;
  color: green;
}

.fotoblock {
  background-color: rgba(255,255,255,0.8);
  width: 90vh;
  height: 10vh;
  position: sticky;
  top: 80vh;
  transition: 0.7s;
  font-family: 'Encode Sans Expanded', sans-serif;
  margin: auto;
  text-align: center;
  z-index: 11;
}
.fotoblock h1 {
  top: 1vh;
}

.slideshow li {
  height: 100%;
  background-size: cover;
  position: absolute;
  width: 100%;
  z-index: -120;
}
.knop {
  border: 2px solid #617d3c;
  border-radius: 20px;
  width: 225px;
  height: 25px;
  background-color: #617d3c;
  margin: auto;
  margin-top: 34vh;
  transition: 0.4s;
  text-align: center;
  font-family: 'Encode Sans Expanded', sans-serif;
  position: relative;
  display: block;
  text-decoration: none;
}
.knop:hover {
  background-color: white;
  color: green;
}
.knop h2 {
  margin-top: 1px;
  font-size: 15px;
  text-decoration: none;
  color: white;
}
.knop:hover h2 {
  color: green;
}
.knop a span h2 {
  text-decoration: none;
}

body {
  height: 115vh;
  margin-top: 0;
  font-family: 'Slabo 27px', serif;
  margin-left: 0;
}
.textbox1 {
  margin: auto;
  height: 40vh;
  width: 80%;
  background-color: rgba(225,225,225,1);
  margin-top: 100px;
  z-index: 18;
  border-radius: 5px;
}

.textb1 {
  font-family: 'Slabo 27px', serif;
  color: #617d3c;
  ltop: 10%;
}

.foto2 {
  width: 100%;
  margin-top: 165vh;
  position: absolute;
  z-index: 16;
  background: purple url(foto2.jpg);
  background-size: cover;
  height: 80vh;
}

.foto2overlay {
  width: 100%;
  top: 165vh;
  position: absolute;
  z-index: 17;
  background-color: black;
  opacity: 0.5;
  height: 80vh;
}

.textblock1 {
  width: 30vw;
  margin-top: 25vh;
  height: 35vh;
  background-color: white;
  margin-left: 8vw;
  top: 0;
}

.knop2 {
  width: 15vw;
  position: absolute;
  background-color: green;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  top: 218vh;
  z-index: 20;
  color: white;
  border-radius: 40px;
  font-size: 0.7vw;
  margin-left: 15vw;
  border: 2px solid #0f7700;
  height: 4vh;
  transition: .5s ease;
  font-family: 'Encode Sans Expanded', sans-serif;
}
.knop2 h2 {
  margin-top: .75vh;
}
.knop2:hover {
  background-color: white;
}
.knop2:hover h2 {
  color: #0f7700;
}

.navbar {
  width: 100%;
  background-color: #789b4a;
  overflow: hidden;
  position: fixed;
  z-index: 99;
  top: 0;
}
.navbar a, p {
  float: left;
  text-align: center;
  padding: 2px 0;
  width: 14.28%;
  transition: all 0.3s ease;
  color: white;
  font-size: 7px;
  text-decoration: none;
  font-family: 'Encode Sans Expanded', sans-serif;
}

.navbar a h2 {
  
}

.navbar a:hover {
  background-color: #8ab353;
}

.foto3 {
  z-index: 13;
  background-image:url("omgeving.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 237vh;
  position: absolute;
  width: 100%;
  height: 80vh;
}
.foto3overlay {
  width: 100%;
  height: 80vh;
  top: 237vh;
  position: absolute;
  z-index: 14;
  background-color: black;
  opacity: 0.5;
}

.textblock2 {
  margin-top: 25vh;
  height: 35vh;
  width: 30vw;
  background-color: white;
  margin-left: 8vw;
  z-index: 15;
}
.Logo1 {
  width: 4%;
  poisition: fixed;
  z-index: 99;
  margin-left: 47.5%;
  top: 0;
}
.knop3 {
  width: 15vw;
  position: absolute;
  background-color: green;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  top: 290vh;
  z-index: 20;
  color: white;
  border-radius: 40px;
  font-size: 0.7vw;
  margin-left: 15vw;
  border: 2px solid #0f7700;
  height: 4vh;
  transition: .5s ease;
  font-family: 'Encode Sans Expanded', sans-serif;
}
.knop3 h2 {
  margin-top: .75vh;
}
.knop3:hover {
  background-color: white;
}
.knop3:hover h2 {
  color: #0f7700;
}
.foto4 {
  z-index: 11;
  background-image:url("foto4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 316vh;
  position: absolute;
  width: 100%;
  height: 80vh;
}
.foto4overlay {
  width: 100%;
  height: 80vh;
  top: 316vh;
  position: absolute;
  z-index: 12;
  background-color: black;
  opacity: 0.5;
}

.textblock3 {
  margin-top: 25vh;
  height: 35vh;
  width: 30vw;
  background-color: white;
  margin-left: 60vw;
  z-index: 13;
}
.knop4 {
  width: 15vw;
  position: absolute;
  background-color: green;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  top: 369vh;
  z-index: 13;
  color: white;
  border-radius: 40px;
  font-size: 0.7vw;
  margin-left: 67vw;
  border: 2px solid #0f7700;
  height: 4vh;
  transition: .5s ease;
  font-family: 'Encode Sans Expanded', sans-serif;
}
.knop4 h2 {
  margin-top: .75vh;
}
.knop4:hover {
  background-color: white;
}
.knop4:hover h2 {
  color: #0f7700;
}
.foto5 {
  z-index: 11;
  background-image:url("foto2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 396vh;
  position: absolute;
  width: 100%;
  height: 80vh;
}
.foto5overlay {
  width: 100%;
  height: 80vh;
  top: 396vh;
  position: absolute;
  z-index: 12;
  background-color: black;
  opacity: 0.5;
}
.textblock4 {
  margin-top: 25vh;
  height: 35vh;
  width: 30vw;
  background-color: white;
  margin-left: 60vw;
  z-index: 13;
}
.knop5 {
  width: 15vw;
  position: absolute;
  background-color: green;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  top: 449vh;
  z-index: 13;
  color: white;
  border-radius: 40px;
  font-size:  0.7vw;
  margin-left: 67vw;
  border: 2px solid #0f7700;
  height: 4vh;
  transition: .5s ease;
  font-family: 'Encode Sans Expanded', sans-serif;
}
.knop5 h2 {
  margin-top: .75vh;
}
.knop5:hover {
  background-color: white;
}
.knop5:hover h2 {
  color: #0f7700;
}
.introtext {
  position: absolute;
  z-index: 97;
  margin: 0;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0,0,0,0.2);
  font-family: 'Encode Sans Expanded', sans-serif;
  color: white;
  border: 3px solid white;
  width: 45%;
  box-shadow: 0px 0px 1px 0px white;
  min-width: 45%;
}
.introtext hq1 {
  font-family: sans-serif;
}
.introtext h1 {
  font-size: 1.8vw;
}
.introtext h2 {
  font-size: 1.2vw;
}

.info-window img {
  width: 80px;
  height: auto;
  float: left;
  margin-right: 20px;
}
.info-window p,
.info-window h1 {
  margin: 0;
}
.info-window {
  width: 35vh;
}
.container3 {
  width: 100%;
  height: 80vh;
  margin-top: 466vh;
  background-color:rgb(132, 153, 105);
  z-index: 95;
  position: absolute;
}

#laatste {
  animation-name: foto3;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  z-index: 7;
}

#eerste {
  animation-name: foto1;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  z-index: 7;
}
#middelste {
  animation-name: foto2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  z-index: 7;
}
@keyframes foto1 {
    10%,25%   {opacity: 1;}
    0%,33%,100%  {opacity: 0;}
}
@keyframes foto2 {
    0%,25%,66%,100%   {opacity: 0;}
    33%,50%  {opacity: 1;}
}
@keyframes foto3 {
    0%,66%,100%   {opacity: 1;}
    10%,50%  {opacity: 0;}
}
#vanilla-slideshow-container { 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	text-align: center;
	top: 0;
	padding: 0;
  margin: 0;
}

#vanilla-slideshow .vanilla-slide { 
	width: 100%; 
	height: 100%; 
	background-size: cover; 
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: absolute; 
	top: 0; 
	left: 0; 
	opacity: 0;
}

#vanilla-slideshow .vanilla-slide.vanilla-active { 
    opacity: 1;
}

#vanilla-slideshow .vanilla-slide img {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { 
  #vanilla-slideshow .vanilla-slide img {
    left: 50%;
    margin-left: -512px; 
  }
}



#vanilla-slideshow-previous {
	position: absolute;
	left: 10px;
	top: 50%;
	width: 4.8vw;
	height: 5vh;
	background-position: 0 100%;
	cursor: pointer; 
	opacity: 0.8;
	z-index: 5; 
	display: none;
}

#vanilla-slideshow-next {
	position: absolute;
	right: 10px;
	top: 50%;
	width: 48px;
	height: 50px;
	background-position: 100% 100%;
	cursor: pointer; 	
	opacity: 0.8;
	z-index: 5; 
	display: none;
}

#vanilla-slideshow-previous:hover, #vanilla-slideshow-next:hover {
	opacity: 1;
}


#vanilla-indicators {
	display: inline-block;
	z-index: 5;
	position: absolute;
	bottom: 50px;
	left: 50%;
}

.vanilla-indicators {
	box-shadow: 0 0 10px #333333;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	float: left;
	margin-right: 3px;
	cursor: pointer;
}

.vanilla-indicators.vanilla-active {
	background-color: #ffffff;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
}
@media screen and (min-width:600px) {
  #vanilla-slideshow-next:not {display: none;}
}
@media screen and (min-width:600px) {
  .textblock1: {display:none;}
}