/* #Site Styles */
html{
    height: 100%;
}
body{
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    color: #000;    
    width: 100%;
}

.mar-10{
    margin-bottom: 10px;
}
.mar-15 {
    margin-bottom: 15px;
}
img {
    margin: 0px auto;
}

.mob-show, .mob-sml-show{
    display: none;
}

.well {
    background-color: #fff !important;
}

.alert{
    margin-bottom: 10px !important;
}

.test{
	border: solid 1px;
}

#spinner-big{
    font-size: 100px;
    margin: 20px;
    color: #fff;
}

#spinner-small-1, #spinner-small-2, #spinner-small-3{
    font-size: 50px;
    margin: 20px;
    color: #475965;
}

.ruler {
    width: 100%;
    height: 15px;
    border-bottom: 1px solid #000;
    text-align: center;
    margin-bottom: 25px;
    margin-top: 15px;
}
.rulerInner {
    font-size: 18px;
    background-color: #fff;
    padding: 0 10px;
    font-weight: bold;
    color: #000;
}
.modal-body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
}

/* #Form */
#success_message, .help-block{ display: none !important;}

.form-horizontal .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.form-group{
    margin-bottom: 10px;
}
.form-control{
    height: 42px;
    border-radius: 0px;
}
select.form-control{
    padding-left: 8px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.radio label, .checkbox label {
    text-align: left;
    font-size: 14px;
    color: #fff;
}
.has-success .radio-inline, .has-error .radio-inline{
    color: #fff;
}
.form-horizontal .has-feedback .form-control-feedback {
    margin-top: 5px;
    right: 10px;
}
.has-feedback label~.form-control-feedback {
    top: 4px !important;
    right: 0px !important;
}
div.checkbox label {
    line-height: normal;
    width: 100%;
    float: left;
    color: #fff;
}
#akkoordtxt a:link {
    text-decoration: underline;
}
.checkbox .glyphicon-remove, .checkbox .glyphicon-ok {
    margin-top: -28px;
}

/* #Button */
button {
    white-space: inherit !important;
}
.btn.btn-default {
    text-align: center;
    line-height: 35px;
    font-size: 18px !important;
    font-weight: 700;
    font-family: 'Source Sans Pro', sans-serif !important;
    display: inline-block;
    background-color: #f0044e !important;
    width: 100% !important;
    border-bottom: 4px solid #657F4E !important;
    outline: none !important;
    color: #fff;
    border-radius: 5px !important;
    padding: 10px !important;
    height: 35px !important;
    float: left;
}
.btn-primary {
    height: 70px;    
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    color: #fff;
    
    border: 0;
    border-radius: 0px;
    background-color: #fe380e !important;
    
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-primary:hover{    
    background-color: #f96e50 !important;
}
.btn-check-pc {
    background-color: #fa6d28 !important;
    color: #fff;
    border: 0;
    font-size: 25px;
    font-weight: 600;
    cursor: none;
}
.btn-check-pc:hover  {
    background-color: #fa6d28 !important;
}
.form-btn{
    padding: 15px;
    border-radius: 0px;
    color: #fff;
    background-color: #56b053;
    background-color: #ff7700;
}
.form-btn:hover, .form-btn:focus{
    color: #fff;
    background-color: #79ae77;
    background-color: #ff881f;
}
.btn-text{
    font-size: 24px;
    font-weight: 700;
}
.btn-text:after{
	position: absolute;
	top: 20px;
	right: 20px;	
	
	content: "\f054";
	font-family: 'Font Awesome 5 Free';
	font-size: 18px;
	font-weight: 900;
	color: #fff;	
}
.form-btn-glyph{
    top: -4px;
    font-size: 14px;
}
input[type="radio"].gender {
    display: none;
}
#facebook {
    background-color: #3b5998;
    text-align: center;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    padding: 10px;
    margin: -10px 0;
}
#facebook a:link, #facebook a:hover, #facebook a:active {
     color: #fff !important;
    text-decoration: none;
 }
.fb-image {
    margin: 0;
}

input#postcode1, input#huisnr1 {
    font-size: 20px;
    height: 50px;
    border-radius: 5px;
}

/*
.has-error {
    background-color: red;
}
*/


/* #Glyphicon */
span.glyphicon.glyphicon-chevron-right {
    float: right;
}

span.glyphicon.glyphicon-chevron-down {
    font-size:40px;
	color:#005b98;
}
span.glyphicon.glyphicon-chevron-down.coreg {
    margin-bottom: 10px;
    font-size: 20px;
    color: #3987ad;
}


/* Bootstrap adjustments */

.container{
    padding-left: 20px !important;
    padding-right: 20px !important;
}
h1,h2,h3,h4,h5,h6,p{
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 120%;
}
.col-pad-0{ padding-left: 0px; padding-right: 0px;}
.col-pad-5{ padding-left: 5px; padding-right: 5px;}
.col-pad-10{ padding-left: 10px; padding-right: 10px;}
.col-pad-15{ padding-left: 15px; padding-right: 15px;}
/* negative row margins */
.row-mar-0{ margin-left: 0px; margin-right: 0px;}
.row-mar-5{ margin-left: -5px; margin-right: -5px;}
.row-mar-10{ margin-left: -10px; margin-right: -10px;}
.row-mar-15{ margin-left: -15px; margin-right: -15px;}


/* #Text */
.text-light{
    font-weight: 300 !important;
}
.text-bold{
    font-weight: 700 !important;
}
.text-semi-bold{
    font-weight: 600 !important;
}
.text-extra-bold{
    font-weight: 900 !important;
}
.text-italic{
    font-style: italic !important;
}
.text-underline{
    text-decoration: underline !important;
}
.text-right{
    text-align: right !important;
}
.text-uppercase{
    text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6{
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Kleuren */
.zwart{
    color: #000;
}
.wit{
    color: #fff;
}
.blauw{
    color: #005b98;
}
.oranje{
    color: #fc6703;
}
.licht-grijs{
    color: #cecaca;
}

/* margins & paddings*/
.no-pad{
    padding-left: 0px;
    padding-right: 0px;
}


/* Header */
.header{
    padding: 20px 0px;
/*	height:128px;*/
	margin-bottom: 45px;
    background-color: #f8f8f8;
}
.bol-geel{
	margin-top:-10px;
	z-index:200;
}
.maak-kans{
    margin-left: 40px;
    line-height: 110%;
    text-transform: uppercase;
}
.header-beoordeling-holder{
    text-align-last: center;
}
.header-beoordeling-score{
    padding-left:18px;
	padding-top:24px;	
	display: inline-block;
}
.experts{
	padding-left:18px;
	padding-top:30px;	
}
.header-score{
    font-size: 23px;
    line-height: 100%;
}
.beoordeling-sterren{
    margin: 5px 0px 5px;
}
.beoordeling-sterren img{
    margin: 0 1px;
}

.header-bol{
    position: absolute;
    width: 160px;
    height: 160px;
    top: -160px;
    right: 70px;
    padding-top: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    text-align: center;
    white-space: pre-line;
    border-radius: 50%;
    background-color: #ffc000;
    background-color: #ffae00;
/*    z-index: 100;*/
    transform: rotate(3deg);
}
.header-bol .regel-1{
    font-size: 12px;
}
.header-bol .regel-2{
    font-size: 24px;
}
.header-bol .regel-3{
    font-size: 16px;
}
.header-bol .regel-4{
    font-size: 14px;
}

.overlay{
	position:absolute;
	z-index:2000;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.2);
}


.helaas{
	position:relative;
	z-index:2001;
	top: 50%;
	transform: translate(0, -50%);
}
#helaas-tekst{
	padding:30px;
	background-color:#fff;
	font-size: 16px;
}
/* Pagina 1 */
.pagina-1{
    font-family: 'Titillium Web', sans-serif;
}
.renovatie{
	font-size:51px;
	font-weight:700;
	padding-bottom:20px;
}
.team{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:17px;
	font-weight:400;
	padding-bottom:20px;
	padding-right:10px;
}
.experts-klein{
	padding-top:5px;
}
.logo-mobiel-klein{
	display:none;
}
.content-links h3{
    margin-bottom: 25px;
}
.content-links h4{
    margin-top: 10px;
    display: inline-block;
}
.oranje-vink{
    margin-top: -5px;
    margin-right: 15px;
}
.opties{
	padding-top:10px;
	padding-left:5px;
	padding-bottom:10px;
}
.embed-responsive{
	margin-top:20px;
}
.foto-slider{
/*    padding: 10px;*/
}
.foto-slider img{
/*    border: 3px solid #666;*/
/*
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
*/
}
.slide-show-holder{
    /*
	height:260px;
	margin-left:57px;
	*/
}
.slide-show-inner{
    background-color:#fff;
	/*border: 1px solid #ccc;*/
}
.slide-show-holder p{
    
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 17px;
}
.slick-dots{
	display:none !important;
}
/*
.slick-dots li button:before{    
	content:url(../img/dot-active.png) !important;
}
*/
.form-oranje{
    position: relative;
    padding: 20px;    
    background-color: #fc6703;
    background-color: #ff7700;
}
.form-oranje p{
    line-height: 150%;
    font-size: 20px;
}
.form-oranje:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(252, 103, 3, 0);
    border-top-color: #fc6703;
    border-top-color: #ff7700;
    border-width: 15px;
    margin-left: -15px;
    border-top-width: 10px;
}
.form-geel{
    position: relative;
	z-index:100;
    padding: 20px;    
    background-color: #ffd02b;
}
.form-geel p{
    line-height: 150%;
    font-size: 17px;
}
.form-geel:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(252, 103, 3, 0);
    border-top-color: #ffd02b;
    border-width: 15px;
    margin-left: -15px;
    border-top-width: 10px;
}

.form-blauw{
    padding: 15px 10px 10px;
    background-color: #005b98;
    background-color: #003c7e;
}
.form-blauw p{
    line-height: 120%;
    font-size: 16px;
}
.vrijblijvend-advies{
    padding-right: 10px;
}
.vrijblijvend-advies, .gratis-vrijblijvend{
    font-size: 14px !important;
}
.voorwaarden-div{
    margin: 10px 0px;
}
.form-holder a, .form-holder a:hover{
    color: #000;
}
.oranje-kader{
    position: relative;
    margin-top: 8px;
    width: 95%;    	
	padding: 17px 15px;
    background-color: #fc6703;
    background-color: #ff7700;
    background-color: #ffae00;
    background-color: #50a942;
}
.oranje-kader:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 91, 152, 0);
    border-left-color: #fc6703;
    border-left-color: #ff7700;
    border-left-color: #ffae00;
    border-left-color: #50a942;
    border-width: 54px;
    margin-top: -54px;
    border-left-width: 35px;
}
.oranje-kader .regel-1,
.oranje-kader .regel-2{
    text-align: center;
	color: #fff;
    font-weight: 600;
}
.oranje-kader .regel-1{
    font-size: 20px;
/*    color: #000;*/
}
.oranje-kader .regel-1 span{
    color: #fff;
}
.oranje-kader .regel-2{
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.bol-geel-2{
	position:absolute;
	margin-top:-45px;
}
.pagina-1 .grijze-balk{
    margin-top: 20px;
    background-color: #f8f8f8;
}
.referenties{
	padding:20px 0;
}
.referenties-titel{
	font-size: 27px;
	font-weight:700;
	color:#006699;
}
.referentie-tekst{
    font-size: 15px;
    line-height: 200%;
}
.referentie-naam{
    margin-top: 10px;
    font-size: 15px;
}

video{
	height:100%;
	width:100%;
}
/* Pagina 2 */
.pag2-content{
    margin: 100px 0px 180px;    
}
.pag2-content h3, .pag2-content h4{
    line-height: 150%;
}
.pag2-content h4{
    max-width: 500px;
    margin: 0 auto;
}
.pagina-2 .grijze-balk{
   background-color: #fff;
}
/* footer */
.footer{
    padding: 30px 0px;
}
.voorwaarden{
    margin-top: 10px;
}
.voorwaarden a, .voorwaarden a:hover{
    color: #000;
}



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

@media only screen and (max-width: 1199px){
    .header-beoordeling-score {
		padding-left:35px;
	}
	.experts{
		padding-left:20px;
	}
	.renovatie{
		font-size:40px;
	}
    .header-bol{
        right: 40px;
    }
    .maak-kans{
        margin-top: 5px;
        font-size: 30px;
    }
    .content-links h3{
        font-size: 20px;
    }
    .content-links h4{
        font-size: 15px;
    }
    .slide-show-holder{
        padding: 15px 10px 0px;
    }
    .oranje-kader .regel-2 {
        font-size: 27px;
    }
    .oranje-kader:after {
        border-width: 45px;
        margin-top: -45px;
        border-left-width: 30px;
    }   
    .vrijblijvend-advies{
        padding-right: 0px;
    }
    
}

@media only screen and (max-width: 991px) {    
	
    .header-bol{
        right: 25px;
    }
    
    .aanvragen{
		padding:10px;
		font-size: 17px;
		font-weight:700;
		color:#fc6703;
	}
	.oranje-kader{		
		margin-top: 0px;
	}
	.oranje-kader:after {
		border-width: 35px;
		margin-top: -35px;
		border-left-width: 30px;
	}
    .oranje-kader .regel-1 {
        font-size: 14px;
    }
    .oranje-kader .regel-2 {
        font-size: 18px;
    }
	
	.header-beoordeling-score {
		padding-left:50px;
	}	
	.renovatie{
		font-size:28px;
	}
    .slide-show-holder {
        padding: 15px 0px;
    }
    .foto-slider .img-responsive{
        margin-left: 0px;
    }
    .maak-kans {
        margin-top: 0px;
        margin-left: 55px;
        font-size: 27px;
    }
    .certificaten{
        margin-bottom: 10px;
    }
    .form-oranje p {
        line-height: 150%;
        font-size: 18px;
    }
	/*
	.slide-show-holder{
        padding: 15px 10px 0px;
    } 
	.slide-show-inner {		
		margin-left: 70px;
		margin-right: 30px;
	}
	*/
}

@media only screen and (max-width: 767px) {
    
    .header {
        margin-bottom: 0px;
        padding: 15px 0px;
/*		height: 95px;*/
	}
    .logo{
        width: 80px;
        max-width: 100%;
    }
    .experts {
        padding-top: 20px;
        padding-left: 0px;
    }
	.renovatie{
/*		text-align:center;*/
		padding-bottom: 5px;
	}
    
    .bol-holder{
        margin-bottom: 20px;
        background-color: #ffae00;
        background-color: #50a942;
    }
    .header-bol{
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        height: auto;
        padding: 10px 0px;
        border-radius: 0;
        transform: rotate(0deg);
        white-space: normal;
        background-color: #50a942;
    }
    .header-bol .regel-1,
    .header-bol .regel-2,
    .header-bol .regel-3,
    .header-bol .regel-4{
        color: #fff;
    }
    .header-bol .regel-1,
    .header-bol .regel-3{
        font-size: 16px;
    }
    .header-bol .regel-2,
    .header-bol .regel-4{
        font-size: 16px;
    }
    .opties{
        padding: 0px;
    }
    
	.team{
        margin-bottom: 15px;
		font-size: 16px;
	}	
	.header-beoordeling-score{
		padding-left: 0px;
	}		
/*
    .header{
        margin-bottom: 20px;
    }
*/
    .header-beoordeling-holder{
        text-align-last: left;
    }
    .header-beoordeling{
        text-align-last: center;
    }
    .maak-kans-mob{
        margin-left: 0px;
        margin-bottom: 10px;
    }
    .content-links{
        margin-bottom: 20px;
    }
    .content-links h4 {
        font-size: 16px;
    }
	.slide-show-holder{
        padding: 0px;
    } 
	.slide-show-inner {		
		margin-left: 0px;
		margin-right: auto;
	}
    .foto-slider img{
        width: 423px;
        max-width: 100%;
    }
    
}


@media only screen and (max-width: 479px) {    
	.container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .col-pad-15{ 
        padding-left: 10px; padding-right: 10px;
    }
    .row-mar-15{ 
        margin-left: -10px; margin-right: -10px;
    }    
    .header-score{
        margin-top: 4px;
    }
    .experts{
        padding-top: 11px;
        padding-left: 0px;
        width: 215px;
        max-width: 100%;
    }
    .renovatie {
        margin-bottom: 0px;
        padding-bottom: 0px;
        font-size: 22px;
    }
    .oranje-vink{
        margin-right: 10px;
        width: 18px;
    }
    .content-links{
        margin-bottom: 10px;
    }
	.content-links h4 {
        margin-top: 8px;
/*		font-size: 13px;*/
	}	
    .maak-kans{
        font-size: 24px;
    }
    .form-oranje{
        padding: 10px;
    }
    .form-oranje p{
        font-size: 18px;
    }
    .form-blauw p{
        font-size: 14px;
    }
    
    .pag2-content{
        margin: 50px 0px 100px;    
    }
    .pag2-content h4{
        max-width: 500px;
        margin: 0 auto;
        font-size: 16px;
    }
    
}

@media only screen and (max-width: 360px) {    
	.experts-klein{
		padding-top:10px;
	}
	.logo-mobiel{
		display:none;
	}
	.logo-mobiel-klein{
		display:block;
	}
}