/*==================================================
 Main
==================================================*/

html{
    height: 100%;
}
body{
    position: relative;
	min-height: 100%;
    padding-bottom: 140px;
    font-family: 'Open+Sans', sans-serif;
    font-weight: 400;
    color: #464648;    
	background: url('../img/achtergrond_herfst.jpg') top center no-repeat #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/*==================================================
 Campagne
==================================================*/

/* Kleuren */
.blauw{color: #148dc5;}
.oranje{color: #ef7715;}
.groen{color: #4cae32;}


/* Form */
.form-control{
    height: 50px;
    border-radius: 5px;
}
.FlowupLabels .fl_label {
    top: 14px;
    color: #888;
}
.FlowupLabels .fl_wrap.focused .fl_label, .FlowupLabels .fl_wrap.populated .fl_label, .no-js .FlowupLabels .fl_label {
    top: 6px;
    font-size: 13px !important;
}
.FlowupLabels .fl_wrap.focused .fl_label {
    top: 6px;
    font-size: 13px !important;
}
i.form-control-feedback.glyphicon.glyphicon-refresh, i.form-control-feedback.glyphicon.glyphicon-remove, i.form-control-feedback.glyphicon.glyphicon-ok {
    right: 0px !important;
    top: 50% !important;
    transform: translateY(-50%);
}


/* Custom checkbox */
.checkbox input[type="checkbox"]{
    margin-left: 0px;
}
.checkbox label:after {
    content: '';
    display: table;
    clear: both;
}
.checkbox .cr {
    position: relative;
    display: inline-block;
    margin-top: 3px;
    border: 1px solid #000;
    border-radius: 0;
    width: 1.3em;
    height: 1.3em;
    width: 16px;
    height: 16px;
    float: left;
    background-color: #fff;
}
.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .7em;
    line-height: 0;
    top: 50%;
    left: 15%;
}
.checkbox .focus-border{
    position: absolute;
    opacity: 0;
    left: 0px;
    margin-top: 3px;
    border-radius: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.checkbox label input[type="radio"] {
    opacity: 0;
}
.checkbox label input[type="radio"]+.cr>.cr-icon {
    opacity: 0;
}
.checkbox label input[type="radio"]:focus~.focus-border {
    opacity: 1;
}
.checkbox label input[type="radio"]:checked+.cr>.cr-icon {
    opacity: 1;
}
.checkbox label input[type="radio"]:disabled+.cr {
    opacity: .5;
}
.checkbox label {
    padding-left: 0px;
}
.checkbox label p{
    margin: 0;
    padding-left: 25px;
    font-size: 18px;
    font-weight: 300;
    line-height: 140%;
}


/* Buttons */
.def-btn{
    margin-top: 0px;
    background-color: #ff7700;
    border-radius: 5px;
}
.def-btn:after{
    top: 50%;
    transform: translateY(-50%);
}
.def-btn:hover{
    background-color: #fe8b26;
}

.start-btn{
    width: 480px;
    max-width: 100%;
    padding: 15px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.25px;
}

.antw-btn{
    font-weight: 600;
    letter-spacing: 0.25px;
}
.antw-btn:after{
    content: "";
}

.ja-btn,
.nee-btn{
    font-size: 20px;
    font-weight: 500;
    padding: 20px;
    background-color: #96C665;
}
.ja-btn:hover, ja-btn:focus,
.nee-btn:hover, .nee-btn:focus{
    background-color: #a7d678;
}

.prijs-btn{
    width: 100%;
    border-radius: 0px;
    font-weight: 400;
    text-align: left;
    background-color: #96C665;
}
.prijs-btn:hover, .prijs-btn:focus{
    background-color: #a7d678 !important;
}

.form-btn{
    margin-top: 10px;
    width: 100%;
    font-size: 22px;
    font-weight: 300;
    background-color: #e76863;
    background-color: #43b02a;
}
.form-btn:hover, .form-btn:focus{
    background-color: #c82e28;
    background-color: #54c53a;
}

/* Links */
a, a:link, a:visited, a:active, a:focus{
    color: #464648;
}



/*==================================================
 Header
==================================================*/

.header{
    margin-bottom: 40px;
    padding: 15px 0px;
    border-bottom: 1px solid rgba(255,255,255,.6);
    background-color: rgba(255,255,255,.6);
}
.logo, .logo-holder{
    font-size: 18px;
    line-height: 100%;
}
.logo-holder{
    display: flex;
}
.logo-holder div:first-child{
    margin-right: 10px;
}
.logo-holder div:last-child{
    padding-top: 5px;
}
.logo-holder .small{
    font-size: 0.7em;
    color: #999;
}
.social-col{
    padding-top: 7px;
}

p.adv{
    position: absolute;
    top: -10px;
    right: 5px;
    font-size: 12px;
    color: #999;
}
.prijzen-img-holder img {
    width: 900px;
}


/*==================================================
 Pagina-1
==================================================*/

/* Stap 1 */
.content-holder{
    padding: 30px 20px;
    background-color: rgba(255,255,255,.9);
    -webkit-box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 8%);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.08);
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 8%);
}
h1.titel{
    font-size: 24px;
    font-weight: 300;
}
h2.subtitel{
    position: relative;
    margin-bottom: 0px;
    display: inline-block;
    font-size: 46px;
}
span.naar-keuze{
    position: absolute;
    right: -135px;
    bottom: -65px;
    padding: 10px 15px;
    font-size: 22px;
    line-height: 100%;
    background-color: #4CAE32;
    transform: rotate(8deg);
    z-index: 20;
    
    width: 105px;
    height: 105px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    right: -120px;
}
.vraag-beeld{
    margin-left: 0px;
    border-radius: 5px;
}


.button-col p{
    margin-top: 15px;
    font-size: 18px;
}
    
.prijzen-img-holder {
    margin: 60px auto;
}


.vraag-nr{
    margin: 40px auto 25px;
    font-size: 16px;
    font-weight: 400;    
}
.question-holder, .prijs-holder{
    background-color: rgba(255,255,255,.9);
    -webkit-box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 8%);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.08);
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 8%);
}
.question-holder{
    margin-top: 100px;
    padding: 20px 80px 20px 20px;
}
.question-holder .vraag{
    margin: 0px auto 30px;
    min-height: 58px;
    font-size: 24px;
    color: steelblue;
}


.stap-9 .checkbox,
.stap-10 .checkbox{
    padding-top: 0px;
}


/* Stap 11 */
.stap-11 h2{
    margin: 0px auto 30px;
}
.prijs-holder{
    margin-bottom: 20px;
}
.prijs-holder img{
    transform: scale(0.95);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    transition: all 250ms ease;
}
.prijs-holder .top{
    padding: 10px;
    cursor: pointer;
    
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    transition: all 250ms ease;
}
.prijs-holder p{
    padding-left: 10px;
    font-size: 16px;
}
.prijs-holder:hover{
    -webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.20);
}
.prijs-holder:hover .top{
    background-color: aliceblue;
}
.prijs-holder:hover img{
    transform: scale(1);
}
.prijs-holder:hover .prijs-btn{
    background-color: #a7d678 !important;
}
.prijs-holder:hover .prijs-btn:after{
    right: 35px;
}


/* Stap 12 */
.stap-12 .vraag{
    margin: 0px auto 10px;
}
.stap-12 .checkbox,
#popup .checkbox{
    margin: 0px auto 20px;
    padding: 10px;
    background-color: #43b02a;
}
.stap-12 .checkbox .focus-border,
#popup .checkbox .focus-border{
    left: 10px;
}
#popup p.tekst{
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 140%;
}
#popup .checkbox label p {
    font-size: 16px;
}
#nee-btn9, #nee-btn9p{
    cursor: pointer;
}


/* Stap 13 */
.stap-13 .vraag-nr, .stap-14 .vraag-nr{
    margin: 0px auto 10px;
    font-size: 20px;
}
.form-holder{
/*
    padding: 15px;
    border-radius: 5px;
    background-color: #efefef;
*/
}
.form-holder .gegevens{
    margin-bottom: 15px;
    font-size: 24px;
}


/* Stap 14 */
.stap-14 .checkbox{
    padding-top: 0px;
}
.stap-14 .checkbox label p{
    font-size: 11px;
    color: #7f7f7f;
    color: #464648;
    color: #aaa;
}
.stap-14 .checkbox i.form-control-feedback.glyphicon.glyphicon-refresh,
.stap-14 .checkbox i.form-control-feedback.glyphicon.glyphicon-remove,
.stap-14 .checkbox i.form-control-feedback.glyphicon.glyphicon-ok {
    right: auto;
    left: -9px !important;
    top: 12px !important;
}
.stap-14 .vraag {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 140%;
}
#pub-info{
    cursor: pointer;
}


/* Stap 15 */
.stap-15 h1{
    margin: 25px auto;
    font-size: 40px;
}
.stap-15 h3{
    margin-bottom: 50px;
}
.stap-15 h3:last-child{
    margin-bottom: 25px;
}
.stap-15 .jssocials-shares {
    text-align: center;
}



/*==================================================
 Pagina-2
==================================================*/





/*==================================================
 Footer
==================================================*/

.footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 0px;
    padding: 20px 0px;
/*
    border-top: 1px solid rgba(255,255,255,.6);
    background-color: rgba(255,255,255,.3);
*/
}
.voorwaarden-row{
    margin-top: 0px;
}
.voorwaarden-row a,
.voorwaarden-row a:link,
.voorwaarden-row a:visited,
.voorwaarden-row a:hover,
.voorwaarden-row a:active,
.voorwaarden-row a:focus{
    color: #464648;
    text-decoration: underline;
}



/*==================================================
 Media Queries
==================================================*/


@media only screen and (max-width: 1199px){    
    
    .ja-btn, .nee-btn{
        padding: 15px 20px;
    }
    
    .prijs-btn:after {
        right: 25px;
    }
    .prijs-holder:hover .prijs-btn:after{
        right: 15px;
    }
    .stap-11 h2 {
        margin-bottom: 20px;
        font-size: 24px;
    }
    .stap-11 h3 {
        font-size: 20px;
    }
    .stap-11 .question-holder {
        padding: 60px 60px 34px;
    }
    .stap-11 .checkbox {
        margin: 7px auto 10px;
    }
    
}

@media only screen and (max-width: 991px) {
    
    .logo{
        width: 220px;
    }
    .logo-holder div:last-child {
        padding-top: 0px; 
        margin-top: -4px;
    }
    .logo-tekst{
        font-size: 16px;
        line-height: 100%;
    }
    .social-col {
        padding-top: 5px;
    }
    
    h2.subtitel {
        font-size: 38px;
    }
    span.naar-keuze {
        font-size: 20px;
        width: 85px;
        height: 85px;
        right: -90px;
    }
    .prijzen-img-holder {
        margin: 40px auto;
    }
    
    .vraag-nr{
        margin: 20px auto 25px;
    }
    .question-holder {
        padding: 30px;
    }
    .question-holder .vraag {
        margin: 20px auto 20px;
        font-size: 18px;
        min-height: 44px;
    }
    .ja-btn, .nee-btn {
        padding: 15px;
        font-size: 18px;
    }
    
    .prijs-holder p {
        min-height: 34px;
        padding-left: 5px;
        font-size: 14px;
    }
    .prijs-btn{
        padding: 15px;
        font-size: 18px;
    }
    .prijs-btn:after {
        right: 20px;
        font-size: 12px;
    }
    .prijs-holder:hover .prijs-btn:after{
        right: 10px;
    }
    
    .stap-11 .question-holder {
        padding: 30px;
    }
    .stap-11 .vraag {
        margin: 0px auto 10px;
    }
    .stap-11 .checkbox {
        margin: 3px auto 10px;
    }
    .checkbox label p,
    #popup .checkbox label p{
        font-size: 14px;
    }
    
    .stap-13 h2{
        font-size: 24px;
    }
    .stap-13 h3{
        font-size: 20px;
    }
    .form-holder .gegevens {
        font-size: 20px;
    }

}

@media only screen and (max-width: 767px) {
	
    body {
        background-attachment: fixed;
        padding-bottom: 180px;
    }
    
    .header {
        margin-bottom: 25px;
    }
    .logo{
        margin-bottom: 5px;
        width: 250px;
    }
    .logo-holder {
        flex-direction: column;
    }
    .logo{
/*        width: 345px;*/
    }
    
    .stap-1 h1 {
        font-size: 18px;
    }
    h2.subtitel {
        font-size: 28px;
    }
    span.naar-keuze {
        font-size: 16px;
        font-weight: 500;
        width: 70px;
        height: 70px;
        right: -10px;
        top: 80px;
        padding: 10px 5px;
    }
    .prijzen-img-holder{
        margin-top: 20px;
    }
    .start-btn {
        font-size: 22px;
    }
    
    .vraag-nr {
        font-size: 17px;
    }
    .question-holder{
        margin: 50px auto 0;
        width: 400px;
        max-width: 100%;
    }
    .ja-btn{
        margin-bottom: 10px;
    }
    
    .stap-11 .vraag {
        margin: 10px auto;
    }
    .stap-11 h2 {
        margin-bottom: 15px;
    }
    .stap-11 h3 {
        font-size: 20px;
    }
    
    .stap-12 .vraag-nr, .stap-13 .vraag-nr {
        font-size: 18px;
    }
    
    .stap-14 h1 {
        font-size: 26px;
    }
    .stap-14 h3 {
        margin-bottom: 40px;
        font-size: 20px;
    }
    
    .stap-15 h1 {
        margin: 0 auto 25px;
        font-size: 28px;
    }
    .stap-15 h3 {
        margin-bottom: 40px;
        font-size: 20px;
    }
    
}

@media only screen and (max-width: 479px) {
    
    .header {
        margin-bottom: 15px;
        padding: 10px 0px;
    }
    .logo, .logo-holder {
        font-size: 16px;
    }
    .logo{
/*        width: 300px;*/
    }
    p.adv{
        position: relative;
        top: -2px;
        right: 0px;
        margin-top: -5px;
        font-size: 11px;
    }
    
    .content-holder,
    .question-holder{
        padding: 20px;
    }
    .question-holder{
        margin-top: 0px;
    }
    h2.subtitel {
        font-size: 22px;
    }
    span.naar-keuze {
        padding-top: 8px;
        font-size: 14px;
        width: 60px;
        height: 60px;
        top: 105px;
    }
    .start-btn {
        font-size: 20px;
    }
    .start-btn:after {
        right: 30px;
    }
    .start-btn:hover:after {
        right: 15px;
    }
    
    .vraag-nr {
        margin: 15px auto;
    }
    
    .stap-11 h2 {
        font-size: 20px;
    }
    .stap-11 h3 {
        font-size: 18px;
    }
    .stap-11 h4 {
        font-size: 16px;
    }
    .prijs-holder p {
        min-height: 32px;
    }
    .prijs-btn {
        padding: 15px 10px;
        font-size: 16px;
        text-align: center;
    }
    .prijs-btn:after {
        display: none;
    }
    
    .stap-13 h2{
        font-size: 20px;
    }
    .stap-13 h3{
        font-size: 18px;
    }
    .form-holder .gegevens {
        font-size: 18px;
    }
    
    .form-btn {
        font-size: 18px;
    }
    .form-btn:after {
        right: 30px;
    }
    .form-btn:hover:after {
        right: 15px;
    }
    
    .stap-15 h1 {
        margin: 0 auto 20px;
        font-size: 22px;
    }
    .stap-15 h3 {
        margin-bottom: 30px;
        font-size: 16px;
    }
    
}