.form-range{
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #dee2e6;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #dab452;
    cursor: pointer;
    margin-top:-5px;
}
.form-range::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #dab452;
    margin-top: -5px;
    cursor: pointer;
}
.vragenlijst-header span{
    display:inline-block;
    width:37px;
    height:37px;
    text-align: center;
    border-radius:50%;
    margin-right:10px;
    line-height:36px;
    background:#fff;
    border:1px solid #dab452;
    color:#dab452;
}
.vragenlijst-header span.active{
    background:#dab452;
    border-color:#262225!important;
    color:#262225 !important;
}
.card{
    max-width:inherit !important;
}
#wpfooter{
    display:none !important;
}
#site-navigation ul li a{
    font-family: "Poppins",sans-serif;
    font-size: 18px;
    color: #262225;
    line-height: 27px;
}
.btn-primary{
    background:#dab452;
    background-color:#dab452 !important;
    border: 2px solid #262225 !important;
    color:#262225 !important;
    border-radius:2em;
    padding:17px 60px;
    font-size:18px;
    font-weight:600;
    text-transform: uppercase;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover{
    background:#fff;
    background-color:#fff !important;
    border-color:#dab452 !important;
    color:#dab452 !important;
}

.btn-simple{
    font-size:18px;
    font-weight:600;
    color:#5c5c5c;
}

body{
    font-family:"Poppins",sans-serif;
    font-size:18px;
    color:#262225;
    line-height:27px
}
textarea,
select{
    display: inline-block;
    color: #616161;
    padding: 6px 10px;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1em !important;
    line-height: 1.65 !important;
    max-width: 100%;
    border: 1px solid #e1e1e1;
    background: #fff;
    border-radius: 3px;
    text-align: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
label{
    margin-top:20px;
}
label.form-check-label{
    margin:0;
}
.pb-8{
    padding-bottom: 3rem!important;
}
@media screen and (min-width:769px){
    .hidden-on-desktop{
        display:none !important;
    }
}
@media screen and (max-width:768px){
    .waardenkompas-container .text-right{
        text-align:left !important;
    }
    .waardenkompas-container .a-b{
        margin:40px 0;
        font-weight:bold;
        line-height:15px;
    }
    .waardenkompas-container .a-b-stelling{
        font-weight:bold;
        padding-right:5px;
    }
    .waardenkompas-container .color-primary{
        color:#bf962a;
    }
    .waardenkompas-container .color-secondary{
        color:#d5b462;
    }
    .btn-primary{
        padding:13px 17px !important;
    }
    .vragenlijst-header{
        font-size: 14px;
    }
    .waardenkompas-container ul {
        margin-left:0 !important;
    }
    .mobile-w-100{
        width:100%;
    }
    .mobile-first{
        order: 1;
        -ms-flex-order: 1;
    }
    .mobile-second{
        order:2;
        -ms-flex-order: 2;
    }
    .stelling-1{
        order:1;
        -ms-flex-order: 1;
    }
    .stelling-2{
        order:2;
        -ms-flex-order: 2;
    }
    .answers-inputs{
        order:3;
        -ms-flex-order: 3;
    }
}
.vragenlijst-header a{
    text-decoration: none !important;
    color:#2a2a2a;
}
.vragenlijst-header a:hover{
    text-decoration: underline !important;
}

/* Compass styling */
.compass-wrapper {
    position: relative;
    padding: 0;
    margin-bottom: 15px;
}

.compass {
    max-width: 100%;
    min-width: 100%;
}

.compass-icon {
    position: absolute;
    transform: translate(50%, 50%);
}

#dottedline {
    position: absolute;
    left: 0;
    top: 0;
}

#allresults-svg, #allresults-estimate-svg {
    position: absolute;
    margin-bottom: 85px;
    margin-top: 19px;
}

#allresults-svg {
    left:0px;
    margin-left: 11px;
    margin-right: 0;
}

#allresults-estimate-svg {
    left: 25%;
    margin-left: 25px;
}

#allresults-compass-estimate, #allresults-compass-estimate h4 {
    margin-left: 25px;
}

.explanation {
    background-color: #f8f8f8;
    margin-bottom: 95px;
}

.horizontal-axis {
    display:flex;
    padding-bottom:15px;
}

.horizontal-axis > p {
    margin-top: 4%;
}

.horizontal-axis > img, .vertical-axis > img {
    padding-left: 5px;
    padding-right: 5px;
}

.vertical-axis {
    padding: 0;
}

.vertical-axis-text {
    padding-top: 115px;
}

.further-explanation {
    background-color: #f8f8f8;
    margin-bottom: 85px;
    margin-top: 55px;
    padding-top: 15px;
    padding-bottom: 15px;
}
/* End compass styling */


/* Landing page styling */

.logo-middle {
    height: 95px;
    margin-left: 50%;
    transform: translate(-50%);
}
.logo-left {
    height: 50px;
}
.relative {
    position: relative;
}

.absolute {
    position: absolute;
    top: 200px;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 20px;
}


/* Responsiveness bij 763px */
@media screen and (max-width: 763px) {
    .number-border {
        display: none;
    }

    .question {
        display: block;
    }

    .questionvalue {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .questiontext, .questionvalue {
        padding-left: 0;
        padding-right: 0;
    }

    .question > div.questionvalue > div.abtext {
        display: block !important;
    }

    .questiontext > p#een, .questiontext > p#zes {
        display: inline !important;
    }

    .question > div.questionvalue > div > p#een {
        margin-top: 5px;
        margin-left: 5px;
    }

    .question > div.questionvalue > div > p#zes {
        margin-top: 5px;
    }

    #lastname, #firstname {
        margin-left: 0;
        width: 49%;
    }

    nav.navbar {
        padding-top: 0;
        padding-bottom: 0;
        min-height: 0;
    }

    .logo-middle {
        height: 65px;
    }

    .bodycontainer {
        padding-top: 76px;
        padding-bottom: 30px;
    }

    .vertical-axis > img {
        width: 100%;
    }

    .vertical-axis-text {
        padding: 0;
        padding-left: 10%;
    }
}

@media screen and (max-width: 700px) {
    .logo-left {
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    ul.timeline {
        display: none;
    }
}
/*@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }
  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }
  .timestamp {
    width: 100px;
  }
  .status:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}*/

.bg-grey{
    background:#f1f1f1;
    padding:40px;
}
.fs-1{
    font-size:34px;
}
.fs-2{
    font-size:28px;
}
.fs-3{
    font-size:24px;
}

.btn-sm{
    padding:2px 10px !important;
}
#compass-overlay{
    position: absolute;
    bottom: 68px;
    display: block;
    width: 322px;
    height: 322px;
    left: 66px;
}

.form-check-label {
    padding-left:10px;
}
.form-check-input {
    margin-top:5px;
}