﻿#header{
        padding-top: 0px;
}

#headertext-finder{
	position:absolute;
	top:80px;
	left:10px;
	background: url('../images/quote-home.png');
	padding:20px;
	padding-top: 10px;
	font-size:16px;
	line-height:25px;
        width:94%;
	max-width:400px;
	min-height:200px;
	font-family: 'Istok Web', sans-serif;
	border-radius: 10px;
	box-shadow: 2px 5px 9px #000;
        z-index: 9999 !important;
}
#headertext-finder h4{
	padding-top: 10px;
	font-size:20px;
	line-height:25px;
        color: #dd0a24;
}
#headertext-home {
    position: relative;
    top: 80px;
    left: 420px;
    color: #fff;
    padding: 20px;
        padding-top: 20px;
    padding-top: 2px;
    font-size: 30px;
    line-height: 45px;

    height: 200px;
    font-family: 'Istok Web', sans-serif;
    font-weight: bold;
    text-align: left;
    text-shadow: 1px 1px #585858;
    border-left: 2px solid #fff;
}
@media (max-width:992px){
	.photoCarousel{
		height:350px;
	}
	#photoCarouselContainer{
		height:350px;
	}
	#headertext{
                    display: none;
        }
	#headertext-finder{
	        top:40px;
        }
}
@media (max-width:768px){
	.photoCarousel{
		height:350px;
	}
	#photoCarouselContainer{
		height:350px;
	}
	#headertext-finder{
	        top:20px;
	        z-index:999;
        }
        #photoCarouselDots {
        display: none;
        }
	#headertext-finder{
	        top:30px;
        }

}
@media (max-width:442px){
	.photoCarousel{
		height:390px;
	}
	#photoCarouselContainer{
		height:390px;
	}
	#headertext-finder{
	        top:20px;
        }

}
ul.no_bullet {
list-style-type: none;
padding: 0;
margin: 0;
}

li.check {
background: url('../images/check.png') no-repeat left top;
padding-left: 25px;
padding-top: 3px;
}

li.cross {
background: url('../images/cross.png') no-repeat left top;
padding-left: 25px;
padding-top: 3px;
}


.btn, .button, button {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    background-color: #dd0a24;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    padding: 0 25px;
    line-height: 20px;
    -webkit-appearance: none;
    transition: all .5s;
    padding-top:2px;
        text-decoration: none;

}
.btn, .button:hover, button:hover {
        background-color: #b70e23;
        color: #fff;
        text-decoration: none;
}
.btn, .button:hover, button:active {
        background-color: #b70e23;
        color: #fff;
        text-decoration: none;
}
.btn, .button:hover, button:focus {
        background-color: #b70e23;
        color: #fff;
        text-decoration: none;
}
a:active {
        text-decoration: none;
}
a:focus {
        text-decoration: none;
            color: #fff;
}
label {
margin-bottom: 15px;
}
.banner-block .banner-block-header {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    padding-left: 19px;
    border-left: 1px solid #fff;
    width: 420px;
    margin-top: 40px;
    margin-left: 30px;
}


label input[type="radio"] + span {
    padding-left: 40px;
}
input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + span::before {
    background-color: #b70e23;
    border: 1px solid #b70e23;
    background-image: url(../images/vink.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 4px 5px;
}
input[type="radio"] + span::before {
    content: "";
    display: inline-block;
    background:white;
    position: absolute;
    left: 0;
    top: 0px;
    width: 25px;
    height: 25px;
    margin-right: 15px;
    border: 1px solid #b70e23;
    border-radius: 5px;
    vertical-align: text-top;
}



label input[type="checkbox"] + span {
    padding-left: 40px;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + span::before {
    background-color: #b70e23;
    border: 1px solid #b70e23;
    background-image: url(../images/vink.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 4px 5px;
}
input[type="checkbox"] + span::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 25px;
    height: 25px;
    margin-right: 15px;
    border: 1px solid #b70e23;
    border-radius: 5px;
    vertical-align: text-top;
}
input[type="radio"]:checked + span::after {
    content: "";
    display: block;
    background-color: $blue;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 13px;
    height: 13px;
}

.asterisk:after{ 
    content:'*'; 
    color: $blue; 
    padding-left: 5px;
}
label input[type="checkbox"] + span, label input[type="radio"] + span {
    display: inline-block;
    font-weight: 400;
    position: relative;
    vertical-align: top;
}

.questionary .button, .questionary .topbar-simple .menu-item-button a, .questionary button, .topbar-simple .menu-item-button .questionary a {
    display: block;
    margin: 35px 0 55px;
    width: auto;
    height: auto;
    display: initial;
}
button {
    opacity: 1;
    cursor: default;
}
.button-prev {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    background-color: #dd0a24;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    padding: 0 20px;
    line-height: 20px;
    -webkit-appearance: none;
    transition: all .5s;
    padding-top:2px;

    opacity: 0.2;
    cursor: default;
}
.button-prev:hover {
    opacity: 1;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}
.progress-wrapper {
    position: relative !important;
    background-color: #fff;
    padding: 13px 15px 12px;
    border-top: 1px solid #ccc;
    margin: 0px -15px;
    padding-bottom: 15px;
    position: absolute;
    bottom: 30px;
    width: 98%;
    margin-left: 5px;
    margin-top: 150px;
}
.progress {
    width: 100%;
    height: 10px;
    background-color: #dd0a24;
    clear: both;
    border-radius: 7.5px;
    max-width: 730px;
    margin: 0 auto;
}
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #dd0a24;
    border-radius: .25rem;
    border-radius: 5px;
}
.progress-bar {
    background-color: #dd0a24;
}
.progress-bar-striped {
    background-image: none;
    border-radius: 5px;
}

label {
    font-weight: normal;
}
.categories-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    background-image: url(https://www.jezelfhelpen.nl/source/news/compliment-th.jpg);
    background-position: center top;
    background-size: 100% auto;
    opacity: 0.4;
}
.categories-wrapper:hover {
    opacity: 1;
}
.categories-wrapper input[type="checkbox"]:checked + span::before {
    background-color: #b70e23;
    border: 1px solid #b70e23;
    background-image: url(../images/vink.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 4px 5px;
    opacity: 1;
}
.categories-wrapper input[type="checkbox"] + span::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 25px;
    height: 25px;
    margin-left: 15px;
    border: 1px solid #b70e23;
    border-radius: 5px;
    vertical-align: text-top;
    background-color: #fff;
    margin-top: 100px;
}
.categories-wrapper input[type="radio"]:checked + span::after {
    content: "";
    display: block;
    background-color: $blue;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 13px;
    height: 13px;
}


.categories-wrapper2 {
    position: relative;
    width: 150px;
    height: 150px;
    background-image: url(https://www.jezelfhelpen.nl/finder/zoom.jpg);
    background-position: center top;
    background-size: 100% auto;
    opacity: 0.4;
}
.categories-wrapper2:hover {
    opacity: 1;
}
.categories-wrapper2 input[type="checkbox"]:checked + span::before {
    background-color: #b70e23;
    border: 1px solid #b70e23;
    background-image: url(../images/vink.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 4px 5px;
    opacity: 1;
}
.categories-wrapper2 input[type="checkbox"] + span::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 25px;
    height: 25px;
    margin-left: 15px;
    border: 1px solid #b70e23;
    border-radius: 5px;
    vertical-align: text-top;
    background-color: #fff;
    margin-top: 100px;
}
.categories-wrapper2 input[type="radio"]:checked + span::after {
    content: "";
    display: block;
    background-color: $blue;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 13px;
    height: 13px;
}


.categories-wrapper3 {
    position: relative;
    width: 150px;
    height: 150px;
    background-image: url(https://www.jezelfhelpen.nl/finder/forest.jpg);
    background-position: center top;
    background-size: 100% auto;
    opacity: 0.4;
}
.categories-wrapper3:hover {
    opacity: 1;
}
.categories-wrapper3 input[type="checkbox"]:checked + span::before {
    background-color: #b70e23;
    border: 1px solid #b70e23;
    background-image: url(../images/vink.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 4px 5px;
    opacity: 1;
}
.categories-wrapper3 input[type="checkbox"] + span::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 25px;
    height: 25px;
    margin-left: 15px;
    border: 1px solid #b70e23;
    border-radius: 5px;
    vertical-align: text-top;
    background-color: #fff;
    margin-top: 100px;
}
.categories-wrapper3 input[type="radio"]:checked + span::after {
    content: "";
    display: block;
    background-color: $blue;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 13px;
    height: 13px;
}