body {
  overflow-x:hidden;
}

#leadheader {
  font-size: 30px;
  font-weight: bold;
  line-height: 32px;
  display: inline-block;
}

.trustpilot-widget {
    margin: 5px 0;
    background: white;
    border-radius: 1em;
} 

h3#leadheader {  
  font-weight: normal;
  font-size: 24px;
}

.geslaagd  {
  font-size: 14pt;
}

img.icon {
  float: left;
  height: 70px;
  margin-right: 20px;
  width: auto;
}

img.clock {
  float: left;
  margin: 5px 5px 0 0;
}

div.banner {
    display: none;
}

#mainpage {
  position: relative;
}

/*Maakt placeholders grijs*/
::-moz-placeholder {
	color: #aaa;
	opacity: 1;
}
::-webkit-input-placeholder {
	color: #aaa;
}
:-ms-input-placeholder {
  color: #aaa;
}

#formpage .gform_wrapper {
  margin: 0;
  width:500px;
}

#leadheader .gf_page_steps .gf_step,
.gform_wrapper .gf_page_steps .gf_step {
  display: inline-block;
  font-size: 15px;
  width: 33.3333%;
  height: auto;
  background-color: #eeeeee;
  padding: 1em 0.5em 1em 1em;
  margin: 0;
  opacity:1;
  position:relative;
}

span.gf_step_label {
    white-space: nowrap;
}

#leadheader .gf_page_steps .gf_step:first-child,
#leadheader .gf_page_steps .gf_step:first-child {
  z-index:4;
  border-right: 4px solid white;
}

#leadheader .gf_page_steps .gf_step:nth-child(2),
#leadheader .gf_page_steps .gf_step:nth-child(2) {
  z-index:2;
  border-right: 4px solid white;
}

.gform_wrapper div.gf_page_steps  {
  border-radius: 10px;
  overflow: hidden;
  width: 500px;
  border: none;
  padding: 0;
  margin: 0;
}

#leadheader .gf_page_steps .gf_step_active,
#leadheader .gf_page_steps .gf_step_active:after,
.gform_wrapper .gf_page_steps .gf_step_active,
.gform_wrapper .gf_page_steps .gf_step_active:after {
  background-color: #ddddff;
}

.gf_step:not(.gf_step_last):after {
    content: "";
    height: 20px;
    width: 20px;
    background: #eeeeee;
    position: absolute;
    margin: auto;
    top: 0;
    right: -13px;
    bottom: 0;
    transform: rotate(45deg);
    border-top: 4px solid white;
    border-right: 4px solid white;
}

#leadheader .gf_page_steps .gf_step_number:before,
.gform_wrapper .gf_page_steps .gf_step_number:before  {
  content: "Stap ";
}


.gform_wrapper .gform_body ul.gform_fields li.gfield_visibility_visible {
  padding: 10px;
  border-radius: 10px;
  background-color: #eeeeee;
}

.gform_wrapper .gform_body ul.gform_fields .gfield_checkbox li,
.gform_wrapper .gform_body ul.gform_fields input[type=text],
.gform_wrapper .gform_body ul.gform_fields .gfield_radio li,
.gform_wrapper .gform_body ul.gform_fields textarea {
  background: white;
  border-radius: 5px;
  padding-left: 5px !important;
  overflow:  visible;
}

.gform_body ul.gform_fields .gfield_checkbox li.valid,
.gform_body ul.gform_fields .gfield_radio li.valid,
.gform_wrapper .gform_body ul.gform_fields div.valid input,
.gform_wrapper .gform_body ul.gform_fields input:read-only,
.gform_wrapper .gform_body ul.gform_fields div.valid textarea {
  background: rgb( 238, 250, 235);
  border:  solid thin rgb(216, 243, 208)
}

input:read-only,
input[readonly] ~ label,
.bedankt,
input:disabled ~ label {color:silver}
.gform_wrapper ul.gfield_radio li input[readonly] + label,
.gform_wrapper ul.gfield_radio li input:disabled + label {
  cursor: default}

#content {min-height: 400px !important;}

form input.pc-search, form input.button.pc-submit {
  width:245px}
form.pc-form {
  width:500px}
  
@media screen and (max-width: 800px) {
  /*Verwijdert leadvoordelen op kleine schermen.*/
  div#leadsidebar, div.notice, #headerrating, #bekendvan  {
    display:none;
  }
  header.site-header {
    height: 51px;
    position: relative;
    background: none;
  }
  img.icon {
    display:none;
  }
  .gform_wrapper .gf_page_steps .gf_step {
    font-size:12px;
  }
  body .gform_wrapper ul.gfield_radio li label,
  body .gform_wrapper ul.gfield_checkbox li label,
  #otherchoice {
    font-size: 16px;
    padding: 5px 0;
    margin-left: 5px;
    width: calc(100% - 30px);
  }
  @media screen and (min-height: 250px) {
    .gform_wrapper div.gform_footer,
    .gform_wrapper div.gform_page_footer {
      position: sticky;
      bottom: 0px;
      border: 0;
    }
  }
  body .gform_wrapper .top_label .gfield div.ginput_container {
    margin: 0;
  }
  .gform_wrapper .gform_body ul.gform_fields input[type=text],
  .gform_wrapper .gform_body ul.gform_fields textarea {
    border: none;
  }
}

/*Zorg dat leadvoordelen rechts staat en op gelijke hoogte met leadvoordelen.*/
div#leadsidebar {
  max-height:100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  right:0;
  padding: 0 0 0 1em;
  width: 261px;
}

.roundcorners {
  border-radius:1em;
}
.roundtop {
  border-radius:1em 1em 0 0;
}
.roundbottom {
  border-radius:0 0 1em 1em;
}

div#lastlead {
  background: rgb( 23,  43,  70);
  color:  rgb(255, 255, 255);
  padding: .5em;
  margin-bottom: 1em;
  font-size: 12.5pt;
}

/*Bepaal afmetingen van leadplaatje en afstand van voordelen.*/
div#leadimage{
  width: 251px;
  position: relative;
  margin-bottom:1em;
}
div#leadimage img{
  width: 251px;
  height: auto;
  display: block;
}
div#leadimage img.roundtop {
  width:251px;
  height:167px;
}

/*Zet 40% stikker op het plaatje.*/
div#leadimage img.percent {
  width:110px;
  height:110px;
  float: right;
  position: absolute;
  left: -5px;
  bottom: 59px;
}

/*Zorg voor uitlijning van voordelen.*/
ul.voordelen2 {
  text-align: left;
  margin: 0;
  font-size: 12pt;
  list-style: inside url('https://knoppen.s3.amazonaws.com/postcodecheck.png');
}

/*Verwijder asterisks bij verplichte velden.*/
span.gfield_required {
  display:none;
}

/*Zorg dat disclaimer onderaan staat.*/
#disclaimer {
  position: relative;
  clear: both;
  text-align: center;
  font-style: italic;
  font-size: 18px;
  margin-bottom: 5px;
}

#disclaimer img {
float: none;
  margin: 0 auto 24px;
}

#disclaimer li {
  text-align: center;
}


/*Zorg voor breedte van labels en knop op mobiel*/
.gform_wrapper .gform_footer input.gform_button.button,
.gform_wrapper .gform_page_footer input.gform_next_button.button,
.gform_wrapper .gform_page_footer input.gform_previous_button.button,
.gform_wrapper .gform_page_footer input.gform_button.button,
.gform_wrapper .top_label .gfield .gfield_label,
.gform_wrapper form div.validation_error {
  display: block;
  width: calc(100% - 20px);
  margin-bottom: 5px;
}

.gform_wrapper .gform_page_footer input.button.gform_previous_button {
  display: none;
}

/*Zorg voor uitlijning van groene vinkjes bij ingevulde velden.*/
.ginput_container {position: relative;}
img.ok {
  width: 16px;
  position: absolute;
  top: 0.5em;
  left: calc(100vw - 82px);
}


/*Stel breedte van velden in op mobiel*/
.gform_wrapper .top_label textarea.small,
.gform_wrapper .top_label input.medium,
.gform_wrapper .top_label select.large,
.gform_wrapper .top_label input.large,
.gform_wrapper li ul.gfield_radio li,
.gform_wrapper li ul.gfield_checkbox li{
  display: inline-block;
  width: calc(100% - 30px);
}

/*Stel hoogte van velden in op mobiel.*/
.gform_wrapper .top_label textarea.small {
  height: calc(100% - 68px);
  max-height: calc(100vh - 280px);
}

/*Stel breedte en marge in van radiovelden.*/
.gform_wrapper ul.gfield_radio li label{
  margin-left: 13px;
  display: inline-block;
}
.gform_wrapper li ul.gfield_radio li label,
.gform_wrapper li ul.gfield_checkbox li label,
#otherchoice {
  vertical-align: middle;
 }

.gform_wrapper.gf_browser_chrome ul.gfield_checkbox li input[type=checkbox],
.gform_wrapper.gf_browser_chrome ul.gfield_radio li input[type=radio] {
  vertical-align: middle;
  margin:0;
  height: 1em;
  width: 1em !important;
}


 
@media screen and (min-width: 550px) {
  
  /*Geef labels een vaste breedte.*/
  .gform_wrapper .top_label .gfield .gfield_label {
    display: inline-block;
    width: 160px;
  }
  .gform_wrapper .top_label .gfield.bedankt-formulier-productvraag label.gfield_label {
    display: none;
  }
  .gform_wrapper .gform_body ul.gform_fields .gfield_radio li {
  width: 288px;
}
  .gform_wrapper .top_label .bedankt-formulier-productvraag .gfield_label {
    width: 100%;
  }
  /*Stel breedte van velden in op grote schermen en zet ze op een regel met label.*/
body .gform_wrapper .top_label .gfield .ginput_container {
    margin: 0;
    vertical-align: top;
    display: inline-block;
    width: 320px;
   }
body .gform_wrapper .top_label .lichter .ginput_container{ width: 480px;} 


  img.ok {left: 295px;}

  .gform_wrapper .top_label textarea {height: 176px !important;} /*Stel hoogte van velden in op grote schermen.*/
  .gform_wrapper .top_label textarea,
  .gform_wrapper .top_label input.medium,
  .gform_wrapper .top_label input.large,
  .gform_wrapper .top_label select.large { width: 288px !important;} /*Stel breedte van velden in op grote schermen.*/
  .gform_wrapper .gfield_radio li { width: 312px;} /*Stel breedte van radiovelden in op grote schermen.*/
  .gform_wrapper li ul.gfield_radio li label,
  .gform_wrapper li ul.gfield_checkbox li label { width: 260px;} /*Stel breedte van radiovelden in op grote schermen.*/
  #otherchoice { width: 256px;} /*Stel breedte van radiovelden in op grote schermen.*/
}


.gform_wrapper .gf_progressbar_wrapper .gf_progressbar,
.gform_wrapper .top_label .ginput_container,
.gform_wrapper .gfield_radio li,
#disclaimer,
.gform_wrapper .gform_footer input.gform_button.button,
.gform_wrapper .gform_page_footer input.gform_button.button,
.gform_wrapper .gform_page_footer input.gform_next_button.button,
.gform_wrapper .gsection,
.gform_wrapper form div.validation_error  { width: 500px;}                                                                                                

input.pc-search, input.pc-submit {
  height: 56px;
  padding: 6px;
  width: 230px}
  

body .gform_wrapper label.gfield_label,
body .gform_wrapper legend.gfield_label {
    font-size: 16px;
}

.button.postcode,
button.postcode,
input.postcode[type="button"],
input.postcode[type="reset"],
input.postcode[type="submit"],
.pum-close.button,
.gform_wrapper .gform_page_footer input.gform_next_button.button {
  background: rgb( 48, 206,  61);
  color: rgb(255, 255, 255);
  border-color: rgb( 48, 206,  61)}
  

.pum-close.button {
  font-size: 20px}
  
.likebtn_container {
display: none}


div.header-widget-area img {
    width: 100%;
    margin: 5px}
    
.gform_wrapper .top_label .lichter .gfield_label {
  display:none;
}
    
body .gform_wrapper ul li.lichter ul.gfield_checkbox label {
  font-size:12px;
  width: 100%;
}
    
.gform_wrapper.gf_browser_chrome .lichter .gfield_checkbox li input[type=checkbox] {
  vertical-align: top;
  margin-top: 0.3em;
}

.gfield_description {
  color: red;
}

.notice,
.pre-postcode {display: none;}

@media screen and (min-width: 800px) {
  div.banner {
    display: block;
    background-size: cover;
    background-position: center;
    position: absolute;
    margin: auto;  
    width: 100vw;
    max-width: 100vw;
    height: 400px;
    top: -10px;
    left: calc((100vw - 100%) /-2);
    right: 0;
    z-index: -1;
    filter: none;
  }
  div.widget-area.header-widget-area {
    float: right}
  div.header-widget-area img {
    width: 290px}
  .field_description_above {
    position:relative}
  .gfield_description {
    position: absolute;
    top: 25px}
  .gfield_checkbox img.ok {
    left: 455px; top: 4px;}
    
  input[type=text],
  #otherchoice {
    height:45px}

  #greypage {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:black;
    opacity:0.4;
  }

  #formpage {
    background: white;
    padding: 20px;
    position:relative;
    width: 540px;
    min-height: 320px;
  }
  div.header-widget-area #bekendvan {
    display: block
  }
}


@media screen and (max-width: 1023px)  {
  .wrap .title-area {
        display: inline-block;
    width: 50%;
  }
  div.widget-area.header-widget-area {    
    width: 50%;
    float: right;
    height: 50px;
    overflow: hidden;
  display: inline-block;}
}

@media only screen and (min-width: 1023px) {
  .full-width-content .content {
    padding: 0 200px;
  }
}