* {
  box-sizing: border-box;
}

html, body {  
 margin: 0; padding: 0; width: 100%; height: 100vh;  font-size: 110%; line-height: 150%; color: #999; -webkit-font-smoothing: antialiased;  scroll-behavior: smooth; outline: none; 
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
  font-family: sans, sans-serif; font-family: "Caveat", sans-serif;

}

.flexcontainer, .flexcontainercolumn { 
display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex; 
  margin: auto;
  padding: 0;
  width: 100%;
  justify-content: center;}

 .flexcontainercolumn {flex-direction:column; }
 
div, img {  
box-sizing: border-box;  transition: all .5s linear; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; outline: none; display: block;border: 0; max-width:95%}

a {   
color: #999999;  text-decoration: line; font-weight:300;}
a:hover {   
border: 0; text-decoration: line;  font-weight:700; color: #bb1940;}
.copyright{font-size:80%;}

.schuin{width:40vw; transform: rotate(-3deg);  color:#999; position: relative;  }

.logo{width:60%; max-width:500px; margin:auto; position:relative; display:block;padding-bottom:10px;}
.socials{ }
.email{font-size:100%;}
.col1{margin:30%;margin-top:30px; margin-bottom:0; position:relative; display:block; text-align:center;}
.hided{display:none;}


.knop-container {
  left:10%;
  margin-bottom: 100px;
  margin-top: -75px;
  background-size: contain;
  background-position: left, center;
  background-repeat: no-repeat;
  background-image: url('../beeld/knoprood.png');
  z-index: 20;
  position: relative;
 }
.knop-container:hover {
  background-image: url('../beeld/knopblauw.png');
}
.knop-container img {
	width:30%;
   max-width: 200px;
  cursor: pointer;
  position:absolute;
}
#actieKnopb{	
transition: all 1s linear; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; 
opacity:0;
z-index:22;}
#actieKnopr{ 
transition: all 1s linear; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; 
opacity:1;
z-index:21;}
#actieKnopb:hover{
	opacity:1}



.flexcontainer {
  display: flex;
  justify-content: center;
  gap: 2vw;
  margin-top: 5vh;
}

.overvloei {
  position: relative;
  overflow: hidden;
  width: 30vw;
  height: 20vw;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation-name: imageAnimation;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes imageAnimation {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  22%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === Modal === */

.modal, .modal2 {
  z-index: 99;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.5);
  justify-content: center;
  align-items: center;
}
.modal {
  display: none;
}

.modal-content {
  background: #e6e6e6;
  padding: 30px;
  width: 500px;
  max-width: 90%;
  border-radius: 8px;
}

.modal-content label {
  display: none;
  margin-bottom: 10px;
  font-size: 18px;
}

.modal-content input[type="email"],
.modal-content textarea {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 5px;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 16px;
}

.modal-content textarea {
  height: 120px;
  resize: vertical;
}

.error {
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
  display: none;
}

.close-btn {
  text-align: right;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 10px;
}

.verstuur-container {
  text-align: center;
  margin-top: 15px;
}

.verstuur-container img {
  width: 160px;
  cursor: pointer;
}

@media (min-width: 1px) and  (max-width: 400px) {
.overvloei, #overvloeier1, 	#overvloeier2 { width: 90vw;height: 60vw; }
#overvloeier3 {display:none;}
.col1{margin:5%;margin-top:30px;}
.logo{width:75%; }
.knop-container img {	width:50%;}
.knop-container  {margin-top: 0;}
}

@media (min-width: 401px) and  (max-width: 800px) {
.overvloei, #overvloeier1, 	#overvloeier2 { width: 45vw;height: 30vw; }
#overvloeier3 {display:none;}
.col1{margin:10%;margin-top:30px;}
.logo{width:75%; }
.knop-container img {	width:40%;}
.knop-container  {margin-top: -25px;}
}


@media (min-width: 801px) and (max-width: 50em) {
	
}
@media screen and (min-width: 601px) {

	}
@media screen and (max-height: 900px) {
	
	}

@media screen and (max-height: 1200px) {

}