body{
 overflow: hidden;
}

.section-form{
 height: 100vh;
 width: 100vw;
}

.form{
 padding: 20px;
 height: auto;
 padding-top: 2.5vh;
 margin-top: 12vh;
 width: 92.5vw;
 margin-left: 2.5vw;
}

*:focus{
 outline: none;
}

.input{
 caret-color: #26a8c7;
}

.titel_form{
 margin-top: -5px;
 text-align: center; 
 font-size: 4em;   
 color: #26a8c7;
}

.input{
 padding: 10px;
 color: #c726c2;
 border: 2px solid black;
 background-color: transparent;
 transition: all 0.2 ease;
}

.text-label{
 position: absolute;
 left: 10px;
 top: -14px;
 padding: 3px;
 color: #f2f7f2;
 background-color: #26a8c7;
 border-radius: 5px;
 transition: all 0.2 ease;
 pointer-events: none;
}

.input:not(:placeholder-shown)~ .text-label,
.input:focus ~ .text-label{
 font-size: 0.9em;
 margin-left: 20%;
}

.sub-input-1{
 position: relative;
 margin-bottom: 15px;
}

.voornaam{
 width: 60%;
 height: 50px;
 margin-left: 20%;
 margin-bottom: 20px;
 border-width: 2.5px;
 border-color: #f2f7f2;
 border-style: solid;
 border-radius: 8px;
 color: #26a8c7;
 -webkit-transition: width .35s ease-in-out;
 transition: width .35s ease-in-out;
}

.voornaam:focus{
 border-color: #26a8c7;
}

.sub-input-2{
 position: relative;
 margin-bottom: 15px;
}

.naam{
 width: 60%;
 height: 50px;
 margin-left: 20%;
 margin-bottom: 20px;
 border-width: 2.5px;
 border-color: #f2f7f2;
 border-style: solid;
 border-radius: 8px;
 color: #26a8c7;
 -webkit-transition: width .35s ease-in-out;
 transition: width .35s ease-in-out;
}

.naam:focus{
 border-color: #26a8c7;
}

.sub-input-3{
 position: relative;
 margin-bottom: 15px;
}

.postcode{
 width: 60%;
 height: 50px;
 margin-left: 20%;
 margin-bottom: 20px;
 border-width: 2.5px;
 border-color: #f2f7f2;
 border-style: solid;
 border-radius: 8px;
 color: #26a8c7;
 -webkit-transition: width .35s ease-in-out;
 transition: width .35s ease-in-out;
}

.postcode:focus{
 border-color: #26a8c7;
}

.sub-input-4{
 position: relative;
 margin-bottom: 15px;
}

.vraag{
 width: 60%;
 height: 50px;
 margin-left: 20%;
 margin-bottom: 20px;
 border-width: 2.5px;
 border-color: #f2f7f2;
 border-style: solid;
 border-radius: 8px;
 color: #26a8c7;
 -webkit-transition: width .35s ease-in-out;
 transition: width .35s ease-in-out;
}

.vraag:focus{
 border-color: #26a8c7;
}

::placeholder{
 font-weight: normal;
 font-family: "mundial", sans-serif;
 font-weight: 400;
 font-style: normal;    
}

.submit{
 height: 40px;
 margin-top: 20px;
 margin-left: 20%;
 padding-bottom: 6px;
 background-color: #26a8c7;
 color: #F2F7F2;
 border-width: 0px;
 border-radius: 10px;
 font-size: 1.5em;
 font-weight: bolder;
 outline: none;
 cursor: pointer;
 transition: background-color 0.65s;
}

.submit:hover{
 background-color: #E6E462;
}

.geel-kwart{
 transform: rotate(-90deg);
 position: absolute;
 bottom: 0;
 left: 0;
 width: 5em;
}

.geel-maan{
 position: absolute;
 top: 0;
 right: 5vw;
 width: 5em;
}


@media (max-width: 768px) {
 section-form{
  display: block;
  overflow: hidden;
 }
 .titel_form{
  font-size: 2em;   
 }

 .form{
  padding: 20px;
  height: auto;
  padding-top: 2.5vh;
  margin-top: 8vh;
  width: 95vw;
  margin-left: 2.5vw;
 }

 .input:not(:placeholder-shown)~ .text-label,
 .input:focus ~ .text-label{
  font-size: 0.6em;
  margin-left: 7%;
 }

 .voornaam{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-bottom: 20px;
 }
 
 .naam{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-bottom: 20px;
 }

 .postcode{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-bottom: 20px;
 }

 .vraag{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-bottom: 20px;
 }

 .submit{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-bottom: 20px;
  transition: none;
 }

 .submit:hover{
  background-color: #26a8c7;
  cursor: default;
 }
}