body, html { 
  height: 100%;
  margin: 0;
} 

/* hamburgermenu */
.hamburger{
  display: inline-block;
  cursor: pointer;
  z-index: 6;
  position: relative;
  top: 30px;
  left: -30px;
  float: right;   
}
.bar1, .bar2, .bar3 {
  width: 45px;
  height: 5px;
  background-color: #ffffff;
  margin: 8px 0;
  border-radius: 10px;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-10px, 9px);
  transform: rotate(-45deg) translate(-10px, 9px);
  background-color: #ffffff;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: #ffffff;
  margin: 8px 0;
}

/* kruis */
.cross{
  display: inline-block;
    cursor: pointer;
    z-index: 4;
    position: relative;
    top: 30px;
    left: -20px;
    float: right;   
}
.bar4 {
  width: 35px;
  height: 5px;
  border-radius: 10px;
  margin: 0px 0;
  transform: rotate(-45deg);
  background-color: #ffffff;
}
.bar5 {
  width: 35px;
  height: 5px;
  border-radius: 10px;
  margin: -8px 0;
  transform: rotate(45deg);
  background-color: #ffffff;
}
#menu {
  display:none;
  overflow: hidden;
  background-color: rgb(122, 172, 172);
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  bottom: 0px;
}

/* menuopen */
.menuall{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  z-index: 3;
}
.menulinks{
  position: relative;
  z-index: 3;
  justify-content:center;
  align-items: center;
  grid-column: 2/6;
  list-style-type: none;
  margin-top: 75px;
}
.menulinks a{
  color: white;
  text-decoration: none;
  font-family: "PoppinsBold", sans-serif;
  font-size: 30px;
  font-weight: bold;
  padding: 0px 12px;
}
.maintext{
  position: relative;
  z-index: 3;
  justify-content:center;
  align-items: center;
  grid-column: 2/10;
  margin-top: 130px;
}
.maintext p{
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #ffffff;
  text-align: left;
  font-weight: normal;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 0%;    
}
.maintext h3{
  font-family: "Windsor", 'Heebo', sans-serif;
  font-size: 46px;
  font-weight: bold;
  line-height: 48px;
  color: #ffffff;
}
.maintext a{
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
}

/* Hamburgermenu */
.topnav {
  overflow: hidden;
  background-color: white;
  position: relative;
  z-index: 2;
}
.topnav #myLinks {
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  font-family: "Futura", sans-serif;
  font-size: 15px;
  font-weight: bold;
}
.topnav a.icon {
  background-color: transparent;
  display: block;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
}
.topnav a:hover {
  background-color: transparent;
  color: black;
}
.topnav #myLinks h3{
  font-family: "Windsor", 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: bold;
}
.topnav #myLinks p{
  font-family: "Poppins", sans-serif;
  font-size: 15px;
/*  font-weight: medium;
*/}
.active {
  background-color: transparent;
  color: white;
}


/* tekst */
p {
	font-family: "Windsor", 'Heebo', sans-serif;
  font-size: 90px;
  line-height: 90px;
  font-weight: bold;
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 40px;
}

#home p{
  color: white;
}

h1 {
  color: white;
  font-family: "Poppins", "Lora", serif;
  font-size: 20px;
  line-height: 1.5;
  margin-left: 40%;
  margin-top: -4%; 
  margin-bottom: 3%;
}

#home{
  display: block;
  padding-top: 250px;
  width: 100%;
}

/* tekst none visible */
#intro, #Nederlands, #Engels, 
#Activiteit1, #Activiteit2, #Activiteit3, #Activiteit4, 
#Activiteit5, #Activiteit6, #Activiteit7, #Activiteit8, 
#Vraag1, #Vraag2, #Vraag3, #Vraag4, 
#Vraag5, #Vraag6, #Vraag7, #Vraag8,
#Activity1, #Activity2, #Activity3, #Activity4,
#Activity5, #Activity6, #Activity7, #Activity8,
#Question1, #Question2, #Question3, #Question4,
#Question5, #Question6, #Question7, #Question8,
#EndEngels{
  display: none;
  padding-top: 230px;
  margin-top: 0px;
  z-index: 7;
}

#EindNederlands{
  display: none;
  padding-top: 140px;
  margin-top: 0px;
  z-index: 7;
}

/* button none visible */
#buttonNederlands, #buttonEnglish, 
#buttonActiviteitNL, #buttonActiviteitA1, #buttonActiviteitA2, #buttonActiviteitA3, #buttonActiviteitA4,
#buttonActiviteitA5, #buttonActiviteitA6, #buttonActiviteitA7, #buttonActiviteitA8,
#buttonVraagNL, #buttonVraagNLV1, #buttonVraagNLV2, #buttonVraagNLV3, #buttonVraagNLV4,
#buttonVraagNLV5, #buttonVraagNLV6, #buttonVraagNLV7, #buttonVraagNLV8, 
#buttonActivityENG, #buttonActivityENGA1, #buttonActivityENGA2, #buttonActivityENGA3, #buttonActivityENGA4,
#buttonActivityENGA5, #buttonActivityENGA6, #buttonActivityENGA7, #buttonActivityENGA8,
#buttonQuestionENG, #buttonQuestionENGV1, #buttonQuestionENGV2, #buttonQuestionENGV3, #buttonQuestionENGV4,
#buttonQuestionENGV5, #buttonQuestionENGV6, #buttonQuestionENGV7, #buttonQuestionENGV8,
#buttonYes, #buttonNo, #buttonJa, #buttonNee {
  display: none;
  z-index: 10;
  margin-bottom: 30px;
}

/* button */
button{
  display: block;
	width: 190px;
	height: 65px;
	border-radius: 5%;
  cursor: pointer;
  font-family: "Futura", sans-serif;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.5px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.buttongreen{
  background-color: #85b3a6; 
  color: white;
  float:left;
  margin-left: 33%;
  margin-right: 5%;
  border: 1px solid #0E1E3A;
  border-radius: 50px;
}

.buttongreen:active{
  background-color: white;
  color: #24BA56;
}

.buttongreen:hover{
  background-color: white;
  color: #85b3a6;
}

.buttonwhite{
	background-color: white;
	color: #0E1E3A;
  float:left;
  margin-right: 5%;
  border: 1px solid #0E1E3A;
  border-radius: 50px;
}
.buttonwhite:active{
  background-color: #85b3a6;
  color: white;
}
.buttonwhite:hover{
  background-color: #85b3a6;
  color: white;
    border-style: none;

}
.buttonwhite2:active{
  background-color: #85b3a6;
  color: white;
}
.buttonwhite2:hover{
  border: 1px solid #BFBFBF;
  color: #BFBFBF;
}
.buttonwhite2{
  float:left;
  background-color: transparent;
  margin-left: 42%;
  bottom: 60px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    padding: 1em 2em;
}


/* tablet */
@media screen and (max-width:1268px){
  #home{
    padding-top: 90px;
  }
  .home p{
    font-size: 66px;
    line-height: 68px;
  }
  .maintext{  
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 110px;
  }
  #intro, #Nederlands, #Engels, 
  #Activiteit1, #Activiteit2, #Activiteit3, #Activiteit4, 
  #Activiteit5, #Activiteit6, #Activiteit7, #Activiteit8, 
  #Vraag1, #Vraag2, #Vraag3, #Vraag4, 
  #Vraag5, #Vraag6, #Vraag7, #Vraag8,
  #Activity1, #Activity2, #Activity3, #Activity4,
  #Activity5, #Activity6, #Activity7, #Activity8,
  #Question1, #Question2, #Question3, #Question4,
  #Question5, #Question6, #Question7, #Question8,
  #EindNederlands, #EndEngels{
    padding-top: 165px;
  }

  p {
    font-size: 46px;
    line-height: 48px;
  }
  .buttongreen{
    margin-left: 28%;
  }
  
}
/* mobile */
@media screen and (max-width:700px){
  p {
    font-size: 35px;
    line-height: 39px;
  }
  h1 {
    font-size: 18px;
    margin-left: 23%;
    margin-bottom: 8%;
  }
  button{
    width: 165px;
    height: 65px;
    font-size: 14px;
    line-height: 18px;
  }
  .buttonwhite2{
    margin-left: 30%;
  }
  .buttongreen{
    margin-left: 4%;
    margin-right: 4%;
  }
  .buttonwhite{   
    margin-right: 0%;
  }
  #intro, #Nederlands, #Engels, 
  #Activiteit1, #Activiteit2, #Activiteit3, #Activiteit4, 
  #Activiteit5, #Activiteit6, #Activiteit7, #Activiteit8, 
  #Vraag1, #Vraag2, #Vraag3, #Vraag4, 
  #Vraag5, #Vraag6, #Vraag7, #Vraag8,
  #Activity1, #Activity2, #Activity3, #Activity4,
  #Activity5, #Activity6, #Activity7, #Activity8,
  #Question1, #Question2, #Question3, #Question4,
  #Question5, #Question6, #Question7, #Question8,
  #EndEngels{
    padding-top: 150px;
  }

  #EindNederlands{
    padding-top: 90px;
  }
  .hamburger{
    top: 20px;
    left: -30px;
  }
  .cross{
    top: 20px;
    left: -30px;
  }
  #home{
    padding-top: 120px;
  }
  .maintext p{
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
    text-align: left;
    font-weight: normal;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0%;    
  }
  .maintext h3{
    font-size: 28px;
    line-height: 40px;
  }

  .maintext{
    margin-top: 30px;
    grid-column: 2/12;
    margin-left: 0px;
    margin-right: 0px;
  }
}