@font-face {
    font-family: 'gotham_htfbook';
    src: url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-book.woff2') format('woff2'),
    url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_htfbold_italic';
    src: url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-bolditalic.woff2') format('woff2'),
    url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-bolditalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_htfultra_italic';
    src: url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-ultraitalic.woff2') format('woff2'),
    url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-ultraitalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_htfblack_italic';
    src: url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-blackitalic.woff2') format('woff2'),
    url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-blackitalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_htfmedium';
    src: url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-medium.woff2') format('woff2'),
    url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_htfbold';
    src: url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-bold.woff2') format('woff2'),
    url('//s3.eu-central-1.amazonaws.com/p12-quiz/font/gothamhtf-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{box-sizing:border-box;margin:0;padding:0;-moz-box-sizing:border-box;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;-webkit-font-smoothing:antialiased}
a{color:#285dab;font-family:'gotham_htfbold';font-style:normal;text-decoration:none}
a:hover{text-decoration:underline}
body{color:#363636;font-family:'gotham_htfbook';font-size:16px;line-height:1.54}
h1,h2,h3,h4,h5,h6{font-family:'gotham_htfultra_italic';font-style:normal;font-weight:normal}
h1,.h1{font-size:44px;letter-spacing:2px}
h2,.h2{font-size:32px;letter-spacing:2px}
h3,.h3{font-size:24px}
h4,.h4{font-size:20px}
h5,.h5{font-size:16px}
h6,.h6{font-size:14px}
img{border:0;display:inline-block;height:auto;max-width:100%}
p{margin-bottom:15px}
section{position:relative}
ul{margin:0 0 15px 20px}
.bg{background:#f4f5f5}
.bg h5,.bg li,.bg .material-icons{color:#fff}
.bg-gray{background:#f4f5f5}
.button{background:#285dab;border:0;border-radius:3px;color:#fff!important;cursor:pointer;display:inline-block;font-family:'gotham_htfblack_italic';font-size:18px;font-style:normal;font-weight:normal;height:50px;line-height:50px;overflow:hidden;padding:0 30px;text-align:center;text-shadow:none;transition:background .1s linear;-webkit-transition:background .1s linear}
.button:hover{text-decoration:none}
.material-icons{color:#006596;vertical-align:text-bottom}
.text-center{text-align:center}
.text-shadow{text-shadow:0 0 .5rem #000}
.text-upper{text-transform:uppercase}

/* Form */
.form{float:left;padding:0 2.5px;width:100%}
.form button{width:100%}
.form fieldset{border:0;float:left;width:100%}
.form input{color:#000;float:left;font-size:16px}
.form input[type="checkbox"]{display:none}
.form input[type="checkbox"] + label{background:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/input-checkbox.png) no-repeat left top 3px;background-size:24px;display:block;line-height:24px;margin:0 0 5px;padding-left:30px;transition:background-image 80ms linear;vertical-align:middle}
.form input[type="checkbox"]:checked + label{background-image:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/input-checkbox-checked.png) !important}
.form input[type="checkbox"].invalid + label{background-image:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/input-checkbox-invalid.png)}
.form input[type="email"],.form input[type="number"],.form input[type="tel"],.form input[type="text"]{background:#fff;border:1px solid #999;border-radius:3px;height:37px;margin:0 2.5px 10px;outline:none;padding:0 5px;position:relative;transition-duration:.15s;transition-property:border;transition-timing-function:ease-in-out;width:calc(100% - 5px)}
.form input[type="radio"]{display:none}
.form input[type="radio"] + label{background:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/input-radio.png) no-repeat left top 3px;background-size:24px;display:block;line-height:24px;margin:5px 15px 5px 0;padding-left:30px;transition:background-image 80ms linear;vertical-align:middle}
.form input[type="radio"]:checked + label{background-image:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/input-radio-checked.png) !important}
.form input[type="radio"].invalid + label{background-image:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/input-radio-invalid.png)}
.form input:focus{border-color:#1a73e8!important}
.form input:hover{border-color:#000}
.form input.input-25{width:calc(25% - 5px)}
.form input.input-50{width:calc(50% - 5px)}
.form input.invalid{background:#fff url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/ic-invalid.png) no-repeat center right;background-size:24px 24px;border-bottom-color:#ff3b30}
.form input.text-center{text-align:center}
.form input.valid{background:#fff url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/ic-valid.png) no-repeat center right;background-size:24px 24px;border-bottom-color:#4cd964}
.form label{float:left}
.form label.radio{background-clip:padding-box;border-radius:3px;padding:3px}
.form label.radio:hover{cursor:pointer}
.form label.text-center{text-align:center;width:100%}
.form .negative{margin:0 -2.5px}
#form-member ::-webkit-input-placeholder{font-size:15px}
#form-member :-ms-input-placeholder{font-size:15px}
#form-member ::placeholder{font-size:15px}
#form-proces{background:rgba(0,0,0,.6) url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/proces.svg) no-repeat center;background-size:200px 200px;bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:999;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}

/* Layout */
.c2{float:left;position:relative;width:50%}
.c23{float:left;position:relative;width:66.666666%}
.c3{float:left;position:relative;width:33.333333%}
.c4{float:left;position:relative;width:25%}
.card{background:#fff}
[class*="flex-"]{margin:0 15px 30px;position:relative}
.flex{display:flex;flex-flow:row wrap;width:100%}
.flex hr{border-color:#eee}
.flex-1{width:100%}
.flex-2{width:calc(50% - 30px)}
.flex-2-3{width:calc(66.666666% - 30px)}
.flex-3{width:calc(33.333333% - 30px)}
.flex-4{width:calc(25% - 30px)}
.flex-5{width:calc(20% - 30px)}
.flex-6{width:calc(16.666666% - 30px)}
.full{display:table;padding:30px 0;width:100%}
.max-width-1920{max-width:1920px}
.max-width-1300{max-width:1300px}
.max-width-1000{max-width:1000px}
.max-width-767{max-width:767px}
.max-width-667{max-width:667px}
.max-width-500{max-width:500px}
.wrapper{margin:0 auto;padding:0 15px;position:relative}
.wrapper-img,.wrapper-img-bg{margin:0 auto;position:relative}
@media(max-width:1224px){
    .flex-4.photo{width:calc(50% - 30px)}
    .flex-5{width:calc(33.333333% - 30px)}
}
@media(max-width:1024px){
    .flex-3.photo,.flex-4,.flex-5{width:calc(50% - 30px)}
    .flex-6{width:calc(33.333333% - 30px)}
}
@media(max-width:667px){
    .flex-2,.flex-2-3,.flex-3,.flex-3.photo,.flex-4,.flex-4.photo,.flex-5{margin:15px 0;width:100%}
    .flex-6{width:calc(50% - 30px)}
}
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){/* IE10+ */
    .flex{display:inline-block}
    [class*="flex-"]{float:left}
}

/* List */
li{line-height:24px;margin-bottom:5px}
ol{margin-left:17px}
ul{margin-left:17px}
ul.icon{list-style:none;margin-left:30px}
ul .material-icons{font-size:24px;margin-left:-30px;position:absolute}

/* Additional */
.button-cta{margin:0 7.5px 15px}
#footer{font-size:14px;padding:60px 0}
#footer a{display:inline-block;margin:0 15px}
#footer a img{display:block;height:20px}
#footer span{line-height:24px;vertical-align:top}
#footer .links{margin-bottom:30px}
#form-member{padding-top:30px}
#form-member h4 span{font-size:1.5em}
#form-quiz{padding:15px 0}
#form-quiz .button{max-width:300px}
#form-quiz .flex-2 img{display:block}
#form-quiz .flex-2:hover{background:#d0d2d3;border-radius:3px}
#form-quiz label{font-family:'gotham_htfmedium';font-style:normal;font-weight:normal;width:100%}
#form-quiz label.text-center{display:inline-block;font-size:18px}
.header{height:400px;width:100%}
.header #logo-carwash-quiz{display:block;height:180px;margin:0 auto 30px}
.header-img{background:#e5e5e5 no-repeat 50% 50%;background-size:cover;height:100%}
.header-img:after{background-color:rgba(0,0,0,.15);bottom:0;content:'';left:0;position:absolute;right:0;top:0}
.header-img.bottom{background-position:50% 100%}
.header-img.top{background-position:50% 0}
.header-txt{left:0;padding:0 15px;position:absolute;right:0;text-align:center;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%)}
.header-txt .max-width-667{margin:0 auto}
#header{display:block;height:60px;width:100%}
#header img{height:60px}
#header #logo-carwash-quiz{float:right;height:55px;margin:2.5px 0}
.icon-l{font-size:90px;margin-bottom:10px}
img.border{border:5px solid #285dab;border-radius:100%;margin-top:15px;max-width:180px}
.korting{background:#285dab url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/bg-korting-drops.png) no-repeat center;background-size:180px 180px;border-radius:100%;color:#fff;display:block;font-family:'gotham_htfmedium';font-size:20px;font-style:normal;font-weight:normal;height:180px;margin:15px auto;padding-top:50px;position:relative;text-align:center;width:180px}
.korting b{display:block;font-family:'gotham_htfultra_italic';font-size:34px;font-style:normal;font-weight:normal;letter-spacing:1px}
/*
img.border{border:5px solid #285dab;border-radius:100%;box-shadow:0 0 15px 0 #285dab;margin-top:15px;max-width:180px}
.korting{background:rgba(40,93,171,.75);border-radius:100%;box-shadow:0 0 15px 0 #285dab;color:#fff;display:block;font-family:'gotham_htfmedium';font-size:20px;font-style:normal;font-weight:normal;height:180px;margin:15px auto;padding-top:50px;position:relative;text-align:center;width:180px}
.korting:before{background:url(//s3.eu-central-1.amazonaws.com/p12-quiz/layout/bg-korting-car.jpg) no-repeat center;background-size:180px 180px;border-radius:100%;bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}
.korting b{display:block;font-family:'gotham_htfultra_italic';font-size:34px;font-style:normal;font-weight:normal;letter-spacing:1px}
 */
.logo{display:block;margin:0 auto 30px;max-width:120px}
.padding-bottom-0{padding-bottom:0!important}
.score{background:#fe0000;box-shadow:0 2px 2px rgba(0,0,0,.2);height:30px;line-height:30px;margin-top:120px;width:100%}
.score h5{line-height:30px;padding:0 10px;text-align:right}
.score .correct-0{text-align:left}
.score .correct-1{background:#afff5d;width:10%}
.score .correct-2{background:#afff5d;width:20%}
.score .correct-3{background:#afff5d;width:30%}
.score .correct-4{background:#afff5d;width:40%}
.score .correct-5{background:#afff5d;width:50%}
.score .correct-6{background:#afff5d;width:60%}
.score .correct-7{background:#afff5d;width:70%}
.score .correct-8{background:#afff5d;width:80%}
.score .correct-9{background:#afff5d;width:90%}
.score .correct-10{background:#afff5d;width:100%}
.score .korting{background-size:90px 90px;font-size:16px;height:90px;line-height:24px;margin-top:-135px;padding-top:20px;width:90px}
.score .korting:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid #285dab;bottom:-15px;content:"";height:0;left:calc(50% - 10px);position:absolute}
/*
.score .korting:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid rgba(40,93,171,.75);bottom:-15px;content:"";height:0;left:calc(50% - 10px);position:absolute}
.score .korting:before{background-size:90px 90px}
 */
.score .korting-0{margin-left:0}
.score .korting-1{margin-left:calc(10% - 45px)}
.score .korting-2{margin-left:calc(20% - 45px)}
.score .korting-3{margin-left:calc(30% - 45px)}
.score .korting-4{margin-left:calc(40% - 45px)}
.score .korting-5{margin-left:calc(50% - 45px)}
.score .korting-6{margin-left:calc(60% - 45px)}
.score .korting-7{margin-left:calc(70% - 45px)}
.score .korting-8{margin-left:calc(80% - 45px)}
.score .korting-9{margin-left:calc(90% - 45px)}
.score .korting-10{margin-left:calc(100% - 90px)}
.score .korting b{font-size:18px}
.score .number{position:absolute;right:0}
#section-korting .flex-3{margin:30px 15px}
#section-quiz{padding:0}
#section-quiz .question{background:#fff;left:calc(50% - 150px);color:#363636;height:30px;line-height:30px;position:absolute;text-align:center;top:0;width:300px}
#section-quiz .question:after{border-right:30px solid transparent;border-top:30px solid #fff;content:"";height:0;position:absolute;right:-30px;width:0}
#section-quiz .question:before{border-left:30px solid transparent;border-top:30px solid #fff;content:"";height:0;left:-30px;position:absolute;width:0}
#section-quiz .score{bottom:0;position:absolute}
/*
#section-quiz .score .korting{background:rgba(40,93,171,1)}
#section-quiz .score .korting:after{border-top:20px solid rgba(40,93,171,1)}
 */
#section-quiz .wrapper-img{height:180px}
#section-quiz .wrapper-img-bg{height:180px}
#section-quiz .wrapper-img-bg .bg-img{background:no-repeat 50% 50%;background-size:cover;height:100%}
#section-score a.button{margin-top:15px}
#section-score img{margin-bottom:15px}
.wrapper h2{margin-bottom:15px}
@media(min-width:668px){
    .button-cta{margin:0 15px}
    #form-quiz{padding:30px 0}
    .header{height:600px}
    .header #logo-carwash-quiz{height:270px;margin-bottom:60px}
    .mobile{display:none}
    .score h5{padding:0 15px}
    #section-quiz .wrapper-img-bg{height:285px}
}
@media(min-width:1025px){
    #form-quiz{padding:60px 0}
    #form-quiz label.text-center{margin-bottom:30px}
    .form label.text-center{margin-bottom:5px}
    .full{padding:60px 0}
    #section-quiz .wrapper-img-bg{height:390px}
    .wrapper h2{margin-bottom:30px}
}