* {
  box-sizing: border-box;
}

body {
  width: 100vw;
  max-width: 100vw;
  margin: 0; 
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  overflow-x: hidden;
  color: ;
  background-color: #1a1f21;
}

.body{
  overflow-x: hidden;
}







.topnav-container {
  opacity: 1;
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: #fff;
  border: 0 none;
  box-shadow: rgba(129,152,164,.2) 0px 4px 12px -3px;
  transition: background-color 250ms linear;
  will-change: background-color;
  min-height: 80px;
  width: 100%;
  z-index: 10;
}

.topnav-header img{
  float: left;
  width: 90px;
  height: 70px;
  margin-top: 5px;
  padding-left: 20px;
  margin-right: -35px;
}

.topnav-container a {
  float: left;
  text-align: center;
  padding: 32px 20px 32px 0;
  text-decoration: none;
  color: #1a1f21;
  font-size: 16px;
  font-weight: 300;
}

.topnav-header a{
  color:  #3040b6;
  font-weight: 500;
  text-transform: uppercase;
}

.topnav-links{
  margin: 0 auto;
}

.topnav-contact{
  float: right;
  padding: 20px 20px;
}

.topnav-contact a{
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 14px;
  background-color:  #3040b6 !important;
  color: #fff !important;
}

a.active {
  margin-right: 40px;
  margin-left: 30px;
}

.topnav-container .icon {
  display: none;
}


.topnav-container a:hover, .dropdown:hover .dropbtn {
  color: #3040b6;
}


@media screen and (max-width: 800px) {
  .topnav-links a{
    display: none;
  }
  .topnav-links a.icon {
    float: right;
    display: block;
    margin-right: 5px;
    font-size: 20px;
  }
}

@media screen and (max-width: 800px) {
  .topnav-links.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 20px;
  }
  .topnav-links.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 525px) {
  .topnav-header a{
    display: none;
  }
}

@media screen and (max-width: 350px) {
  .topnav-contact{
    padding: 20px 0;
  }
  .topnav-header a{
    padding: 32px 0 32px 0; 
  }
}

@media screen and (max-width: 300px) {
  .topnav-contact{
    padding: 20px 0;
  }
  .topnav-header a{
    padding: 32px 0 32px 0; 
  }
}








.main-image{
 min-height: 764px;
 margin-top: -80px;
 position: relative;
 overflow-x: hidden;
}

.main-image-image {
 vertical-align: middle;
 opacity: .75;
 overflow-x: hidden;
}


.main-image-text{
  position: absolute;
  top: 300px;
  left: 20px;
  color: #fff;
  max-width: 1000px;
  padding-right: 50px;
  padding-left: 50px;
}

.img1{
  height: 15px;
}
.img2{
  height: 19px;
}
.img3{
  height: 25px;
}

.main-image-text h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 70px;
  margin: 13px 0 0px 0;
}
.main-image p{
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 56px;
}

.main-image a{
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 16px 24px;
  background-color:  #00fffc !important;
  color: #3040b6 !important;
}

.main-image a:hover{
  background-color: #67fffe !important;
}

.telefoon-icon{
  margin: 0 0 -3px 8px;
}

@media screen and (max-width: 800px){
  .main-image-text{
    left: 10px;
  }
  .main-image-text h1{
    font-size: 40px;
  }
  .main-image-text p{
    font-size: 16px;
  }
  .main-image-text a{
    font-size: 16px;
  }
  .main-image-image{
    position: absolute;
    top: 0;
    left: -350px;
    height: 764px;
  }

}

@media screen and (max-width: 300px){
  .main-image-text{
    padding-left: 10px; 
  }
}











.main-featured{
  display: flex;
  font-size: 20px;
  font-weight: 400;
  padding-top: 45px;
  padding-bottom: 35px;
  justify-content: center;
  min-height: 120px;
  background-color: #f8fbfe;
  text-align: inline;
  flex-wrap: wrap;
}

.main-featured div {
  padding: 0 25px 0 25px;
}

.werkspot{
  margin-top: 10px;
}

.trustpilot{
  margin-top: -8px;
}

@media screen and (max-width: 300px){
  .main-featured{
    font-size: 18px;
  }
  .werkspot img{
    width: 150px;
  }
}




.main-how{
  min-height: 550px;
  color: #272727;
  background-color: #fff;
  text-align: center;
  margin-top: -10px;
  padding-top: 50px;
  width: 100vw;
}

.main-how-p{
  margin-top: 50px;
  margin-bottom: -10px;
  font-size: 20px;
}

.main-how h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
}

.main-how-flexbox{
  display: flex;
  justify-content: center;
  padding-bottom: 100px;
  flex-wrap: wrap;
  padding: 0 35px 50px 35px;
}

.main-how-flexbox div{
  max-width: 300px;
  padding-right: 30px;
  min-width: 150px;
}

.main-how h2{
  font-size: 20px;
  font-weight: 500;
}

.main-how-p2{
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 50px;
}

@media screen and (max-width: 800px){
  .main-how h1{
    font-size: 40px;
    padding: 0 50px;
  }
  .main-how-flexbox{
    padding: 0 50px;
  }
}

@media screen and (max-width: 300px){
  .main-how h1{
    padding: 0 25px;
  }
  .main-how-flexbox{
    padding: 0 25px 50px 25px; 
  }
}





.salepoints{
  min-height: 1000px;
  background-color: #f8fbfe;
  text-align: center;
  margin-top: -10px;
  padding: 50px 0 50px 0;
}

.salepoints h1 {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
}

.main-salepoints-flexbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
}

.main-salepoints-subflexbox{
  display: flex;
  min-width: 300px;
  width: 50%;
  padding: 50px 35px;
}

.salepoints h2{
  font-size: 20px;
}

.salepoints p{
  font-size: 16px;
}

@media screen and (max-width: 800px){
  .salepoints h1{
    font-size: 40px;
    padding: 0 50px;
  }
  .main-salepoints-subflexbox{
    width: 100%;
    min-width: 200px;
  }
}

@media screen and (max-width: 300px){
  .main-salepoints-subflexbox{
    padding: 50px 0;
  }
}











.main-ready {
  min-height: 300px;
  background-color: #3040b6;
  text-align: center;
  margin-top: -10px;
  padding: 50px 0 100px 0;
}

.main-ready h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px; 
  color: #fff;
}

.main-ready a{
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 16px 24px;
  background-color:  #00fffc !important;
  color: #3040b6 !important;
}

.main-ready a:hover{
  background-color: #67fffe !important;
}

@media screen and (max-width: 800px){
  .main-ready h1{
    font-size: 40px;
  }
}
/*
#regForm {
  background-color: #3040b6;
  margin: 30px auto;
  font-family: inherit;
  padding: 40px;
  width: 70%;
  min-width: 300px;
  color: #fff
}


input {
  padding: 10px;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
}

.text-input {

}

/* Mark input boxes that gets an error on validation: 
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: 
.tab {
  display: none;
}

.button {
  background-color: #00fffc;
  color: #3040b6;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: 
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: 
.step.finish {
  background-color: #04AA6D;
}

/* The container 
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox 
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox 
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color 
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background 
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) 
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked 
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator 
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

*/









.main-get{
  display: flex;
  background-color: #fff;
  text-align: left;
  padding: 80px 0;
  justify-content: center;
  flex-wrap: wrap;

}

.main-get-flexitem1{
  min-width: 300px;
  width: 40%;
  padding-right: 25px;
  padding-left: 25px;
  margin-right: 190px;
}

.main-get-flexitem2{
  min-width: 220px;
  width: 30%;
  padding: 35px 25px 35px 35px;
  box-shadow: 0px 5px 21px rgba(51,97,110,.2);
  margin-bottom: 24px;
  background-color: #fff;
  border: 1px solid transparent;
}

.main-get h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
  margin-top: -10px;
}

.main-get p{
  font-size: 20px;
  line-height: 1.5;
}

ul{
  list-style: circle;
  list-style-image: url('images/check.png');
}

.main-get li{
  color: #3040b6;
  line-height: 1.5;
  font-size: 18px;
}

.main-get li:hover{
  color: #3040b6;
  text-decoration: underline;
}

@media screen and (max-width: 800px){
  .main-get-p{
    text-align: center;
  }
  .main-get h1{
    font-size: 40px;
    text-align: center;
  }
  .main-get-flexitem1{
    margin-right: 0;
    padding: 35px 10px 10px 35px;
  }
  .main-get-flexitem2{
    width: 80%;
  }
}






.main-faq{
  background-color: #f8fbfe;
  margin-top: -10px;
  display: flex;
  padding: 100px 100px;
  flex-wrap: wrap;
}

.main-faq-header{
  margin-right: 150px;
  min-width: 350px;
}

.main-faq-header h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
}

.main-faq h2{
  font-weight: 500;
  font-size: 20px;
}

.main-faq p{
  font-size: 16px;
}

.main-faq-questions{
  min-width: 50%;
}

.faq-question{
  padding: 20px 28px;
  margin-bottom: 15px;
  background-color: #fff;
  border: 1px solid transparent;
}

.faq-question img{
  margin-left: 20px; 
}

.faq-question1:hover .drop1{
  display: inline-block;
}

.drop1{
  display: none;
}

.faq-question2:hover .drop2{
  display: inline-block;
}

.drop2{
  display: none;
}

.faq-question3:hover .drop3{
  display: inline-block;
}

.drop3{
  display: none;
}

@media screen and (max-width: 800px){
  .main-faq-header{
    margin-right: 0;
    min-width: 0;
  }
  .main-faq{
    padding: 100px 25px;
  }
  .main-faq-header h1{
    font-size: 40px;
    text-align: center;
  }
}







.main-ready2{
  min-height: 300px;
  background-color: #3040b6;
  text-align: center;
  margin-top: -10px;
  padding: 50px 0 100px 0;
}

.main-ready2 h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px; 
  color: #fff;
  padding: 0 25px;
}

.main-ready2 a{
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 16px 24px;
  background-color:  #00fffc !important;
  color: #3040b6 !important;
}

.main-ready2 a:hover{
  background-color: #67fffe !important;
}

@media screen and (max-width: 800px){
  .main-ready2 h1{
    font-size: 40px;
  }
}






.main-longtext{
  padding: 50px;
  text-align: center;
  background-color: #fff;
}

.main-longtext h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
}

.longtext{
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.main-longtext p{
  font-size: 20px;
  margin: 0 0 16px;
  line-height: 1.5;
}

.main-longtext a{
  text-decoration: none;
}

.main-longtext a:hover{
  text-decoration: underline;
}

@media screen and (max-width: 800px){
  .main-longtext{
    padding: 50px 30px;
  }
  .main-longtext h1{
    font-size: 40px;
  }
  .main-longtext p{
    font-size: 14px;
  }
}









.main-tasks-container{
  background-color: #fff;
  margin-top: -45px;
}

.main-tasks-title h1{
  padding: 100px 0 0 0;
  margin-bottom: -5px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
  text-align: center;
}

.main-tasks{
  display: flex;
  justify-content: center;
  padding: 28px;
  flex-wrap: wrap;
}

.task{
  box-shadow: 0px 5px 21px rgba(51,97,110,.2);
  width: 22%;
  padding: 30px;
  margin: 12px;
  min-width: 250px;
}

.task img{
  width: 100%
}

.task h2{
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.task p{
  font-size: 16px;
  line-height: 1.5;
}

@media screen and (max-width: 800px){
  .main-tasks-title h1{
    font-size: 40px;
  }
  .task h2{
    font-size: 18px;
  }
  .task p{
    font-size: 14px;
  }
}









.main-clients-container{
  background-color: #fff;
  margin-top: -45px;
}

.main-clients-text h1{
  padding: 100px 0 0 0;
  margin-bottom: -5px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
  text-align: center;
}

.main-clients{
  display: flex;
  justify-content: center;
  padding: 28px;
  flex-wrap: wrap;
}

.client{
  box-shadow: 0px 5px 21px rgba(51,97,110,.2);
  width: 30%;
  padding: 30px;
  margin: 12px;
  min-width: 250px;
}

.client p{
  font-size: 18px;
  line-height: 1.5;
}

@media screen and (max-width: 800px){
  .main-clients-text h1{
    font-size: 40px;
    padding: 100px 15px 0 15px;
  }
  .main-clients-text p{
    font-size: 16px;
  }
}










.main-services-container{
  background-color: #fff;
  margin-top: -45px;
  text-align: center;
}

.main-services-text h1{
  padding: 100px 0 20px 0;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
}

.main-services{
  display: flex;
  justify-content: center;
  padding: 28px;
  flex-wrap: wrap;

}

.service{
  padding: 24px 12px;
  margin-right: 24px;
  margin-bottom: 24px;
  border: 1px solid #eaecf8;
  border-radius: 4px;
  background-color: #f8fbfe;
  width: 164px;
}

.service a{
  text-decoration: none;
  color: inherit;
}

.service img{
  height: 56px;
  width: 56px;
  border-radius: 10px;
}

.service p{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.service1:hover{
  background-color: #eaecf8;
}
.service2:hover{
  background-color: #eaecf8;
}
.service3:hover{
  background-color: #eaecf8;
}
.service4:hover{
  background-color: #eaecf8;
}
.service5:hover{
  background-color: #eaecf8;
}
.service6:hover{
  background-color: #eaecf8;
}
.service7:hover{
  background-color: #eaecf8;
}
.service8:hover{
  background-color: #eaecf8;
}
.service9:hover{
  background-color: #eaecf8;
}
.service10:hover{
  background-color: #eaecf8;
}
.service11:hover{
  background-color: #eaecf8;
}
.service12:hover{
  background-color: #eaecf8;
}
.service13:hover{
  background-color: #eaecf8;
}
.service14:hover{
  background-color: #eaecf8;
}
.service15:hover{
  background-color: #eaecf8;
}

@media screen and (max-width: 800px){
  .main-services-text h1{
    font-size: 40px;
  }
}







.ondersteuning-container{
  background-color: #fff;
  text-align: center;
  margin-top: -45px;
  padding-bottom: 100px;
}

.main-ondersteuning{
  padding-top: 200px;
}

.ondersteuning-container p{
  line-height: 1.5;
  width: 55%;
  margin: 0 auto;
}

.ondersteuning-container h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
}

.opties-flex{
  display: flex;
  justify-content: center;
  padding: 28px;
  flex-wrap: wrap;
  padding-top: 50px;
}

.optie{
  width: 300px;
  margin: 0 24px 24px 0;
  background-color: #fff;
  border: 1px solid transparent;
  padding: 0 12px 25px 0;
  box-shadow: 0px 5px 21px rgba(51,97,110,.2);
}

.optie img{
  margin: 0 auto 20px auto;
}

.optie-text{
  padding: 15px;
  margin: 0 auto;
}

.optie a{
  color: #fff;
  background-color: #3040b6;
  border-color: #3040b6;
  padding: 15px 50px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}

.optie2{
  margin-top: -15px;
}

.optie a:hover{
  background-color: #25328e;
  border-color: #232f86;
}

@media screen and (max-width: 800px){
  .ondersteuning-container h1{
    font-size: 40px;
  }
  .ondersteuning-container p{
    font-size: 16px;
  }
}










.ready3{
  min-height: 300px;
  background-color: #3040b6;
  text-align: center;
  margin-top: -10px;
  padding: 50px 0 100px 0;
}

.ready3 h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px;
  padding: 0 15px; 
  color: #fff;
}

.ready3 a{
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 16px 24px;
  background-color:  #00fffc !important;
  color: #3040b6 !important;
}

.ready3 a:hover{
  background-color: #67fffe !important;
}

@media screen and (max-width: 800px){
  .ready3 h1{
    font-size: 40px;
  }
}










.info-container{
  margin-top: -45px;
  display: block;
  background: #f8fbfe;
  padding: 40px 0;
}

.main-info-flexbox{
  display: flex;
  justify-content: center;
  padding: 28px;
  flex-wrap: wrap;
}

.info{
  width: 25%;
  min-width: 250px;
}

.info h2{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 30px;
}

.info p{
  font-size: 16px;
  line-height: 1.2;
}

.info a{
  text-decoration: none;
  color: inherit;
}

.info a:hover{
  text-decoration: underline;
}

@media screen and (max-width: 800px){
  .info{
    padding-left: 25px;
  }
}

.whatsapp-icon{
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 10;
}

.whatsapp-icon img{
  width: 50px;
  height: 50px;
}


 /* Dropdown Button */
.dropbtn {
  background-color: inherit;
  color: inherit;
  border: none;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}


/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: inherit;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 




















/* Onderwerpen styles */

.verstopping{
  min-height: 300px;
  background-color: #3040b6;
  text-align: center;
  margin-top: -10px;
  padding: 130px 0 100px 0;
}

.verstopping h1{
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 60px; 
  color: #fff;
  padding: 0 25px;
}

.verstopping a{
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 16px 24px;
  background-color:  #00fffc !important;
  color: #3040b6 !important;
}

.verstopping a:hover{
  background-color: #67fffe !important;
}

@media screen and (max-width: 800px){
  .verstopping h1{
    font-size: 40px;
  }
}








.main-get2{
  display: flex;
  background-color: #fff;
  text-align: left;
  padding: 80px 0;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.main-get2 h1{
  font-size: 60px;
}

.main-get-flexitem4{
  min-width: 300px;
  width: 80%;
  padding-right: 25px;
  padding-left: 25px;
}

.onderwerp-text h2{
  font-size: 25px;
  padding-top: 50px;
  text-align: left;
}

.onderwerp-text h3{
  font-size: 20px;
  padding-top: 20px;
  text-align: left;
}

.onderwerp-text p{
  font-size: 18px;
  border-bottom: 1px solid #e6ebed;
  padding-bottom: 20px;
  text-align: left;
  line-height: 1.5;
}

.main-get-flexitem3{
  min-width: 220px;
  max-height: 510px;
  width: 30%;
  padding: 35px 25px 35px 35px;
  box-shadow: 0px 5px 21px rgba(51,97,110,.2);
  margin-bottom: 24px;
  background-color: #fff;
  border: 1px solid transparent;
}

@media screen and (max-width: 800px){
  .main-get2 h1{
    font-size: 40px;
  }
  .onderwerp-text p{
    font-size: 14px;
  }
}
















.body2{
  background-color: #3040b6 !important;
}


.offerte-form-container {
  width: 50%;
  margin: 100px auto;
  margin-top: 150px;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
}

.offerte-form-container a {
  text-decoration: none;
  color: #d8d8d8;
}

.offerte-form-container a:hover {
  color: #00cc99;
}

.offerte-form-text {
  text-align: center;
  margin: auto;
}

.offerte-form-text h2 {
  color: #fff;
  font-size: 48px;
  word-wrap: wrap;
}

.offerte-form-text p {
  line-height: 1.6em;

}

.offerte-form-form {
  width: 100%;
}

form {
  width: 100%;
}

table {
  margin: auto;
}

tr {
  width: 100%;
}

td {
  width: 100%;
}

label {
  line-height: 1.6em;
  color: #fff;
}

input, textarea {
  position: relative;
  width: 100%;
  margin: 0 0 30px;
  padding: 12px 19px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #3040b6 !important;
  background-color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 5px;
  /*background-image: linear-gradient(148deg,#2e2e2e 5%,#1c1c1c 5%,#1c1c1c 50%,#2e2e2e 50%,#2e2e2e 55%,#1c1c1c 55%,#1c1c1c 100%);*/
  background-size: 18.87px 11.79px;
}

@media (max-width: 500px) {
  .offerte-form-container  {
    width: 70%;
  }
}