/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');


html, body{
	height: 100%;
}

/* FONTS ADDENDUM */

 /* @import url(https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic); */
 @import url('https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400i');

html, body { 
    font-family: 'Oxygen';
    font-size: 14px;
    line-height: 1.5em;
    color: #2E2E2D;
    background-color: #444;
}

h1, h2, h3 {
    text-align: center;
    font-size: 30px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Sorts Mill Goudy', serif;
}


.submenu{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
}

.submenu > h1 {
    border-top: 7px solid #fff;
}

h1 {	
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-weight: 300;
}


/*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A
            /*  PRIMARY COLOR OVERWRITES { overwrites bootstrap 3 primary color settings } 
            /*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A*/

            .bs-primary-border { border-color: #fdb921; }
            .bs-primary-background { background-color: #fdb921; }
            .bs-primary-color { color: #fdb921; }

            .text-primary { color: #fdb921; }

            .bg-primary, .bg-brand  {
                color: #000;
                background-color: #fdb921;
            }

            .progress-bar-primary {
                color: #000;
                background-color: #fdb921;
            }

            a.bg-primary:hover,
            a.bg-primary:focus {
                background-color: #bd7900;
            }

            .btn-primary, .btn-primary:link, .btn-primary:visited {
                color: #000;
                background-color: #fdb921;
                border-color: #f0ac14;
            }

            .btn-primary:focus,
            .btn-primary.focus,
            .btn-primary:hover,
            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                color: #FFF;
                background-color: #e39f07;
                border-color: #d79300;
            }

            .btn-primary:active:hover,
            .btn-primary.active:hover,
            .open > .dropdown-toggle.btn-primary:hover,
            .btn-primary:active:focus,
            .btn-primary.active:focus,
            .open > .dropdown-toggle.btn-primary:focus,
            .btn-primary:active.focus,
            .btn-primary.active.focus,
            .open > .dropdown-toggle.btn-primary.focus {
                color: #FFF;
                background-color: #d79300;
                border-color: #ca8600;
            }

            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                background-image: none;
            }

            .btn-primary.disabled:hover,
            .btn-primary[disabled]:hover,
            fieldset[disabled] .btn-primary:hover,
            .btn-primary.disabled:focus,
            .btn-primary[disabled]:focus,
            fieldset[disabled] .btn-primary:focus,
            .btn-primary.disabled.focus,
            .btn-primary[disabled].focus,
            fieldset[disabled] .btn-primary.focus {
                background-color: #fdb921;
                border-color: #f0ac14;
            }

            .btn-primary:not(:disabled):not(.disabled):active {
                color: #FFF;
                background-color: #dd9901;
                border-color: #d79300;
            }
            
            .btn-primary .badge {
                color: #fdb921;
                background-color: #000;
            }

            .label-primary {
                background-color: #fdb921;
            }

            .label-primary[href]:hover,
            .label-primary[href]:focus {
                background-color: #b06c00;
            }

            .panel-primary {
                border-color: #fdb921;
            }

            .panel-primary > .panel-heading {
                color: #000;
                background-color: #fdb921;
                border-color: #fdb921;
            }

            .panel-primary > .panel-heading + .panel-collapse > .panel-body {
                border-top-color: #fdb921;
            }

            .panel-primary > .panel-heading .badge {
                color: #fdb921;
                background-color: #000;
            }

            .panel-primary > .panel-footer + .panel-collapse > .panel-body {
                border-bottom-color: #fdb921;
            }

            .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
                background-color: #fdb921;
                border-color: #fdb921;
            }

            .pagination>li>a, .pagination>li>span {
                color: #fdb921;
            }
            
            .page-link:hover {
                color: #e39f07;
            }
            

@media only screen and (min-width : 768px){
    html, body{
            font-size: 16px;
    }
}


/* ================================================================================================================== */
/* BOOTSTRAP OVERWRITES */
/* ================================================================================================================== */
/* NAVBAR OVERWRITES */
/* ================================================================================================================== */

.navbar {
    font-family: 'Montserrat', sans-serif;
    border-radius: 0px;  
}

.navbar-default {
    background-color: transparent;
    height: auto;
    overflow: hidden;
    margin: 0;
    border: none;	
}

.brand-logo img {
	margin: 20px;
	max-width: 200px;
	display: inline-block;
}

.navbar-default .navbar-nav > li > a 
{
	color: #2E2E2D;
	font-weight: 300; 
	letter-spacing: 1px;
	border-bottom: 5px solid #fff;
}

.navbar-default .navbar-nav > li.active > a 
{
	border-bottom: 5px solid #fdb921;	
	background: none;
	color: #fdb921;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus 
{
	border-bottom: 5px solid #fdb921;
	background: none;	
}

.navbar-default .navbar-toggle .icon-bar{
	background-color: #fdb921;
}

.navbar-toggle {
	margin-top: 50px;
	margin-right: 25px;
}

.container {
    padding-left: 7px;
    padding-right: 7px;
}

.row {
    margin-right: -7px;
    margin-left: -7px;
}

p {
    margin: 0 0 20px;
}

#heroimage.base { height: 500px; background-position: center top; background-size: cover; }
#heroimage.base-1317 { background-position: 80% top;  }

#heroimage .item { height: 300px; background-position: center top; background-size: cover; }
#heroimage .inner-cell { position: absolute; bottom: 0; width: 100%; font-size: 2em; color: #fff; }

#heroimagecar .item {
    background-position: top right;
}

.page-title {
    padding: 0.5em 0;
}

.page-title-home {
    font-size: 2.5em;
}

.page-title-0 {
    background-color: #fdb921 !important;
    color: #FFFFFF !important;
    margin: 0;
}

.page-title-1 {
    background-color: #444;
    color: #FFFFFF;
    margin: 0;
}

.contentframe {
    margin: 7px 0;
}

.contentframe-first {
    margin: 0 0 7px 0;
}

.contentframe-first .content, .contentframe .content{
    padding: 7px 30px;
}

#content-container {
    // padding-bottom: 30px;
    background-color: #ffffff;
}


@media only screen and (min-width : 768px)
{
    .paddme .content {
        padding-left: 10em; 
        padding-right: 10em; 
    }
}

@media only screen and (min-width : 992px)
{
    .paddme .content {
        padding-left: 20%; 
        padding-right: 20%; 
    }
}

.skippadding { padding-left: 30px !important; padding-right: 30px !important; }

@media only screen and (min-width : 768px)
{
	.navbar-default .navbar-nav { margin-top: 50px; }
	
	.navbar-default .navbar-nav > li,
	.navbar-default .navbar-nav > li.active { padding: 0; margin: 0; }
	.navbar-default .navbar-nav > li > a,
	.navbar-default .navbar-nav > li.active > a { padding: 4px 0px 40px; margin-left: 25px; }

	#heroimage .item { height: 500px; }
}

/* BOOTSTRAP OVERWRITES */

a:hover, a:focus { color: #fdb921; }

.btn-primary {
	background-color: #fff;
    border-color: #fdb921;
    color: #fdb921;
    font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-weight: 300;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #fdb921;
    border-color: #fdb921;
}

.nav-pills > li > a { background-color: #eee; color: #000; }
.nav-pills > li.active > a { background-color: #fdb921; color: white; }

.nav-pills > li > a:hover, 
.nav-pills > li.active > a:hover { background-color: #138345; color: white; }



/* SLIDER */

.slider{
	height: 500px;
	background-image: url('../img/interior4.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 70%;
	border-top: 10px solid #2E2E2E;
}

.carousel-wrapper{
	border-top: 10px solid #2E2E2E;
}


/* TAGLINE */

.tagline, .contactline{
	text-align: center;
}

.tagline p, .contactline p{
	color: #fff;
	padding: 25px;
	margin-bottom: 0;		
}

.tagline p, .contactline p span{
	font-size: 1.2em;
}

.contactline span{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
}

.contactline a{
	color: #fff;
}

.contactline a:hover{
	text-decoration: none;
	color: #fdb921;
}

.contactinfo{
	text-align: center;
}

.contactinfo p{
	color: #fff;
	padding: 20px;
	margin-bottom: 0;
}

.contactinfo a{
	color: #fff;
	text-decoration: none;
}

.contactinfo a:hover{
	color: #fdb921;
	text-decoration: none;
}

.submenu ul{
	text-align: center;
	padding: 10px 25px 25px;	
}

.submenu ul li{
	list-style-type: none;
	display: block;		
}

.submenu ul li{
	margin: 30px 30px 0;
}

.submenu ul li a{
	width: 100%;
	color: #fff;
	padding-bottom: 10px;
}

.submenu ul li.active a{
	border-bottom: 5px solid #fdb921;
	color: #fdb921;
}

.submenu ul li a:hover{
	text-decoration: none;
	border-bottom: 5px solid #fdb921;
}

.submenu ul li.active a:hover{
	color: #fff;
}

@media only screen and (min-width : 768px){
	.submenu ul{
		padding: 25px;
	}

	.submenu ul li{
		list-style-type: none;
		display: inline;	
	}

	.submenu ul li a{
		padding-bottom: 22px;
	}
}

/* ================================================================================================================== */
/* HEADER */
/* ================================================================================================================== */

#header {
    background-color: #ffffff;
}

/* ================================================================================================================== */
/* FOOTER */
/* ================================================================================================================== */

#footer {
    background-color: #444;
    padding: 0 0 20px 0;
    text-align: center;
}

#footer h2 {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #fdb921;
}

@media only screen and (min-width : 767px){
    #footer { text-align: left; }
    #footer h2 { text-align: left; }
}


/* ================================================================================================================== */
/* HOME */
/* ================================================================================================================== */

.row-home {
    display: flex;
    flex-direction: row; 
    margin-top: 7px;
    color: #fff;
}

.row-onepager {
    display: flex;
    flex-direction: row; 
    color: #fff;
}

.partner.item-0
{
    padding: 1em 2em;
    background-color: #fdb921;
}

.partner.item-1
{
    padding: 1em 2em;
    background-color: #444;
}

.home-link, .buttonSubmit {
    border: 2px solid !important;
    padding: 0.25em 1em !important;
    margin-top: 1em !important;
    color: #fff !important;
    background-color: transparent !important;
    border-radius: 3px !important;
}

.home-link:hover, .buttonSubmit:hover {
    background-color: #fff !important;
    color: #fdb921 !important;
}

.home-link:hover {
    border-color: #fdb921;    
    color: #777;
}

.home-img-1 {
    border-right: 15px solid #fff;
    background-size: cover; background-position: center center;
}

.home-img-2 {
    border-left: 15px solid #fff;
    background-size: cover; background-position: center center;
}

/* CONTENT */

.content-home .col-sm-7, .content .col-sm-5{
	padding-left: 0;
	padding-right: 0;
}

.home-image-1, .home-image-2, .home-image-3, .home-image-4{
	height: 450px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.home-image-1{
	background-image: url('../img/gepensioneerde1.jpg');
}
.home-image-2{
	background-image: url('../img/interior2.jpg');
}
.home-image-3{
	background-image: url('../img/gepensioneerde2.jpg');
}
.home-image-4{
	background-image: url('../img/interior7.jpg');
}

.quote{
	height: 400px;
	line-height: 2em;	
}

.quote-position{
	height: 100%;
	width: 100%;
	position: relative;	
}

.odd .quote-position{
	border-bottom: 1px solid #797977;
}

.quote.odd{
	color: #fdb921;
}

.quote.even{
	color: #2e2e2d;
}

.quote p{
	left: 50%;
    margin-right: -50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 40px;
    text-align: center;
    font-size: 1.5em;
}

.gallerij{
	margin-top: 20px;
}

.gallerij img{
	margin-bottom: 20px;
}

.gallerij br{
	display: none;
}

.prices {
    width: 50%;
}

@media only screen and (max-width : 767px){
    .row-home {
        display: block;
    }

    .row-onepager {
        display: block;
    }
    
    .row-home > div {
        min-height: 200px;
        overflow: hidden;
        display: block;
    }

    .row-onepager > div {
        min-height: 200px;
        overflow: hidden;
        display: block;
    }
    
    .flex-img-left {
        border-right: 15px solid #fff;
    }
    
    #heroimage.base {
        height: 250px; 
    }

    .prices {
        width: 100%;
    }
    
}


@media only screen and (max-width : 991px){   
    
    #footer h2 {
        font-size: 1.6em;
    }
    
    #footer {
        background-color: #444;
        font-size: 1em;
    }
}

@media only screen and (min-width : 768px){
	

	.odd .quote-position{
		border-bottom: none;
	}

	.gallerij{
		margin-top: 40px;
	}

	.gallerij img{
		margin-bottom: 30px;
	}
        
    .prices {
        width: 75%;
    }

	
}

@media only screen and (min-width : 1200px){
	.quote p{
		padding: 0 70px;
	}
        
    .prices {
        width: 50%;
    }
}

.contact-detail{
	color: #fff;
}

.contact-detail p{
	font-size: 1.3em;
}

a.contact-link{
	color: #fff;
}

a.contact-link:hover{
	color: #fff;
	text-decoration: none;
}

.contact-detail{
	min-height: 250px;
	padding: 20px;
	margin: 30px 0 40px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 30% 50%;
	position: relative;
}

.contact-detail h3, .contact-detail p{
	text-align: left;
}

.contact-detail h3, .contact-detail p.link{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}

.contact-detail h3{
	color: #fff;	
}

.contact-detail.active h3{
	color: #fdb921;
}

.contact-detail.active{
	color: #fdb921;
}

.contact-detail .link{
	text-transform: uppercase;
	border: 2px solid #fff;
	padding: 5px 10px;
	position: absolute;
	bottom: 20px;
}

.contact-detail.active .link{
	border: 2px solid #fdb921;
}

.contact-us{	
	background-image: url('../img/contact.jpg');
}

.contact-preload, .contact-us:hover, .contact-detail.active.contact-us{
	background-image: url('../img/contact_hover.jpg');
}

.brochure{
	background-image: url('../img/brochure.jpg');
}

.brochure-preload, .brochure:hover, .contact-detail.active.brochure{
	background-image: url('../img/brochure_hover.jpg');
}

.faq{
	background-image: url('../img/faq.jpg');
}

.faq-preload, .faq:hover, .contact-detail.active.faq{
	background-image: url('../img/faq_hover.jpg');
}

form h2{
	margin-bottom: 30px;
	margin-top: 0;
}

form .form-control{
	border-radius: 0;
}

form .btn-group-lg > .btn, form .btn-lg, form .btn {
	border-radius: 0;
	padding: 4px 16px;
	margin-top: 30px;
	margin-bottom: 30px;
}

form textarea.form-control{
	height: 110px;
}

.lead{
	margin-bottom: 30px;
}

input { color: #2E2E2D !important; }

@media only screen and (min-width : 768px){
	form .btn-group-lg > .btn, form .btn-lg, form .btn{
		margin-bottom: 50px;
	}

	.lead{
		margin-bottom: 50px;
	}
}


a.bereken {
    display: inline-block;
    color: #fff;
    padding: 2px 10px;
    border: 2px solid;
    margin-left: 5px;
    margin-top: -1px;
    width: 100%;
}

a.bereken:hover {
    text-decoration: none;
}

#contact-buttons .btn { color: white !important; }
#contact-buttons .btn:hover { background-color: #f0ac14; !important; }

/* COLORS */

.back-dark-grey{
	background-color: #2E2E2E;	
}

.back-light-grey{
	background-color: #F2F2F2;
}

.back-grey{
	background-color: #797979;
}


/* FOOTER */

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -170px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

.footer{
	color: #fff;
	padding: 20px 0;	
}

.footer h2 {
    display: inline-block;
}

.footer a{
	color: #fff;
	text-decoration: none;
}

.footer a:hover{
	color: #fdb921;
	text-decoration: 
}


.fb img{
	width: 40px;
	float: none;
	margin-top: 7px;
}

.base-bottom {
    height: 300px;
    background-position: center center;
    background-size: cover;
    border-bottom: 7px solid #fff;
}

@media only screen and (max-width : 767px){
    .base-bottom {
        height: 200px;
    }
    
    a.bereken {
        margin-top: -8px;
        margin-left: 0px;
    }
}


@media only screen and (min-width : 768px){
	.fb img{
		float: right;
	}
	
}


/* ----------------------------------------------------- */
/* COPY */
/* ----------------------------------------------------- */

.copy {
	margin: 0 15px 0 15px;
	color: #aaaaaa;	
	display: inline-block;	
	font-weight: 300;
	font-size: 80%;
}

.copy a {
	color: #666666; 
}


/* ----------------------------------------------------- */
/* onepager */
/* ----------------------------------------------------- */

.flex-img-right {
    display: flex; 
    flex-flow: row wrap; 
    background-size: cover; 
    border-right: 7px solid #fff;
}

.flex-img-left {
    display: flex; 
    flex-flow: row wrap; 
    background-size: cover; 
    border-left: 7px solid #fff;
}

.g-recaptcha > div {
    margin: 0 auto;
}

.subtitle {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

table, th, td {
   border: 2px solid #fff;
}

@media only screen and (min-width : 992px){
    .b-right {
        border-right: 1px solid;
    }
}