/*
 Theme Name:   Jan Christiaens
 Description:  A child theme of backloop theme specifiek voor Jan Christiaens
 Author:       Backloopproductions
 Template:     _tk-master
 Version:      1.0.0
*/


/* --------------------------------------------------------	*/
/* BASIS-CSS */
/* --------------------------------------------------------	*/
body {
	font-family: "open-sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.4px;
	font-size: 16px;
	color: #231f20;
}
h1 {
	display: inline-block;
	font-family: "open-sans", sans-serif;
	font-weight: 600;
	letter-spacing: 0.1px;
	margin-top: 0px;
	font-size: 25px;
	text-transform: uppercase;
	color: #1162A9;
}

h2 {
	font-family: "open-sans", sans-serif;
	letter-spacing: 0.1px;
	font-size: 18px;
	text-transform: uppercase;
	color: #1162A9;
	margin-top: 60px;
	margin-bottom: 20px;
}

h1 .h1-lichter {
	font-weight: 300;
}


@media (max-width: 767px) {
h1 {
	font-size: 20px;
}
}

ul {
	list-style-type: square;
}

.img-center {
	margin: 0 auto;
}
.whitespace-boven-100px {
	margin-top: 100px;
}

.whitespace-boven-120px {
	margin-top: 120px;
}

.whitespace-boven-80px {
	margin-top: 80px;
}
.whitespace-boven-40px {
	margin-top: 40px;
}
.whitespace-onder-80px {
	margin-bottom: 80px;
}
.whitespace-onder-40px {
	margin-bottom: 40px !important;
}

.whitespace-onder-30px {
	margin-bottom: 30px !important;
}
.whitespace-onder-20px {
	margin-bottom: 20px !important;
}
.whitespace-boven-20px {
	margin-top: 20px !important;
}

.whitespace-links-70px {
	margin-left: 70px;
}

.whitespace-rechts-20px {
	margin-right: 20px;
}
.btn-responsive {
	white-space: normal !important;
	word-wrap: break-word;
}
.btn {
	border: none;
	border-radius: 2px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
}

.btn-header {
	margin-left: 30px;
	
}
.btn-blauw {
	color: #ffffff !important;
	background-color: #1162a9;
	border: 2px solid #1162a9;
}
.btn-blauw:hover {
	color: #ffffff !important;
	text-decoration: none;
	background-color: #fbbb21;
	border: 2px solid #fbbb21;
}
.btn-wit {
	color: #ffffff;
	background-color: none;
	border: 2px solid #ffffff;
}
.btn-wit:hover {
	color: #1162a9 !important;
	background-color: #ffffff;
	border: 2px solid #ffffff;
}
/*blauwe rand bij focus in chrome weghalen */
:focus {
	outline: -webkit-focus-ring-color auto 0px;
	outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 0px;
}
/* --------------------------------------------------------	*/
/* TOPMENU */
/* --------------------------------------------------------	*/
.topmenu {
	color: #2F404F;
	font-size: 12px;
	margin-top: 20px;
}
.topmenu a {
	color: #2F404F !important;
	text-transform: uppercase;
}
.topmenu a:hover, .topmenu a:focus {
	color: #005682 !important;
}
.topmenu .current-menu-item > a {
	color: #005682 !important;
	font-weight: 700;
}
.topmenu-navigation ul {
	list-style: none;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
}
.topmenu-navigation ul li {
	display: inline;
	margin-right: 20px;
	border-right: solid 1px #005682;
	padding-right: 25px;
}

@media (max-width: 767px) {
.topmenu-navigation ul li {
	margin-right: 10px;
	padding-right: 15px;
}
}

	@media (max-width: 991px) {
		.topmenu {
			margin-bottom: 20px;
			font-size: 10px;
		}

	
}
	

.topmenu-navigation ul li:last-child {
	display: inline;
	margin-right: 0px !important;
	padding-right: 0px !important;
	border-right: solid 0px;
}
/* --------------------------------------------------------	*/
/* HEADER */
/* --------------------------------------------------------	*/

.logo {
	width: 100%;
	margin-top: -30px;
}
.vertical-align-baseline {
	display: flex;
	display: -webkit-flex; /* Safari */
	align-items: flex-end;
}

.contactgegevens {
	text-align: right;
}
.telefoon-header {
	
	letter-spacing: 0.2px;
	line-height: 25px;
	display: inline-block;
	margin-right: 20px;

}

.tekst-usp-footer .telefoon-header, .tekst-header-contact .telefoon-header {
	font-size: 25px;
	font-weight: 600;
	margin-right: 80px;
}



.telefoon-header:before {
	font-family: FontAwesome;
	padding-right: 10px;
	content: "\f095";
	
}

.tekst-usp-footer .telefoon-header:before, .tekst-header-contact .telefoon-header:before  {
	color: #FBBB21;
	
}


@media (max-width: 767px) {
.logo {
	width: 80%;
	margin: 30px auto;
}
	.contactgegevens {
		text-align: center;
	}
.telefoon-header {
	font-size: 20px;
	line-height: 40px;
	display: block;
}
	
	
.telefoon-header:before {
	font-size: 20px;
}
.email-header {
	font-size: 20px;
	display: block;
}
	.vertical-align-baseline {
	display:block;
	}
	
	.contactgegevens .btn-header {
		margin-top: 20px;
		margin-left: 0px;
		display: block;
	}
	.navbar-nav>li{
		text-align: center;
	}
	.test-usp-footer .telefoon-header, .tekst-header-contact .telefoon-header {
		margin-right: 0px;
	}
}

@media (max-width: 991px) {
	.contactgegevens .btn-header {
		margin-top: 20px;
	}
}


.email-header {
	display: inline-block;
}
.email-header a {
	color: #2f404f;
	text-decoration: underline;
}

.tekst-usp-footer .email-header a, .tekst-header-contact .email-header a {
	color: white;
	font-size: 20px;
}

.tekst-usp-footer .email-header:before,.tekst-header-contact .email-header:before {
	color: #FBBB21;
	font-size: 25px;
}

.email-header:before {
	font-family: FontAwesome;
	padding-right: 10px;
	content: "\f0e0";
	
}
.email-header a:hover, .email-header a:focus {
	text-decoration: underline;
	color: #005682;
}

.tekst-usp-footer .email-header a:hover, .tekst-usp-footer .email-header a:focus, .tekst-header-contact .email-header a:hover, .tekst-header-contact .email-header a:focus {
	text-decoration: underline;
	color: #fbbb21;
}
.site-navigation {
	margin-top: 30px;
	background-color: #F5F9FA;
}

.site-navigation .container{
	padding-bottom: 0px !important;
}
.navbar-default {
	border-style: none;
	background: none;
}
.navbar {
	min-height: 5px;
	margin-bottom: 0px;
}

.navbar-collapse {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar-default .navbar-nav>li>a {
	color: #1162A9;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	color: #ffffff;
	background-color: #1162A9;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	color: #ffffff;
	background-color: #1162A9;
}
.navbar-default .navbar-toggle {
	border: none;
}
.navbar-default .woordmenu {
	color: #1162A9;
	text-transform: uppercase;
	font-size: 16px;
	padding-bottom: 8px;
	padding-top: 8px;
	font-weight: 700;
	text-decoration: none !important;
	text-align: center;
	display: inline-block;
}

@media (max-width: 767px) {
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	border-bottom: none;
	background-color: #f2f2f2;
}
	.navbar-default .navbar-nav>li>a
	{
		font-size: 14px;
	}
}

@media (max-width: 1199px){
.navbar-default .navbar-nav>li>a
	{
		font-size: 14px;
	}
}

@media only screen and (min-device-width : 1200px) {
.nav>li>a {
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
}
	
}

@media (max-width: 767px) {
.navbar-header {
	margin-top: 6px;
}
}

/* dropdownmenu zonder te klikken */
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
	display: block;
}
/*driehoekje naar beneden niet tonen */
.navbar-nav .caret {
	display: none;
}
}
ul.dropdown-menu>li>a:hover, ul.dropdown-menu>li.active>a, ul.dropdown-menu>li.active>a:hover {
	color: #ffffff;
	background: #666666;
}
/*opmaak van de dropdownmenu*/
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	font-size: 14px;
	text-transform: uppercase;
	text-align: left;
	background-color: #e7e7e7;
	border: 0px solid #ccc;
	border: 0px solid rgba(0,0,0,0.15);
	border-radius: 0px;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-clip: padding-box;
}
/* --------------------------------------------------------	*/
/* FOTOHEADER-SECTIE */
/* --------------------------------------------------------	*/

#frontpage-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-frontpage-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#sanitair-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-frontpage-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#totaalprojecten-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-usp-footer.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#sauna-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-sauna-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}


#verwarming-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-verwarming-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#energie-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-energie-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#ventilatie-fotoheader {
	background: #f2f2f2;
	background-image: url(images/layout/background-ventilatie-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#over-fotoheader {background: #f2f2f2;
	background-image: url(images/layout/background-over-header.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	
}
.tekst-fotoheader {
	margin-top: 70px;
	margin-bottom: 55px;
	padding: 30px;
	color: white;
	margin-left: 10px;
}

.tekst-fotoheader h1:before {
	font-family: FontAwesome;
	padding-right: 40px;
	content: "\f00c";
	color: #fbbb21;
	
}

.tekst-fotoheader h1 {
	
	font-weight: 300;
	letter-spacing: 0.1px;
	margin-top: 0px;
	font-size: 25px;
	text-transform: none;
	display: block;
	

}

.tekst-fotoheader .btn {
	display: inline-block;
}


@media (max-width: 767px) {
.tekst-fotoheader {
	
	
	text-align: center;
	margin-left: 0px;
}
	.tekst-fotoheader h1 {
		font-size: 22px;
	}
	.tekst-fotoheader h1:before {
	
	padding-right: 0px;
		margin-bottom: 10px;
		display: block;
		text-align: center;
	
	
}
	.tekst-fotoheader .whitespace-links-70px{
		margin-left: 0px !important;
	}
	
	.tekst-fotoheader .whitespace-rechts-20px{
		margin-right: 0px!important;
	}
	
	.tekst-fotoheader .btn {
		margin-bottom: 20px;
	}
	
}
.tekst-fotoheader h1 {
	color: white;
}

.tekst-fotoheader h1 a {
	color: white;
	text-decoration: none;
	font-weight: 600;
}

.tekst-fotoheader h1 a:hover {
	text-decoration: underline;
}

@media (max-width: 991px) {
.tekst-fotoheader .whitespace-links-70px{
		margin-left: 0px !important;
	}
	
	
	
	.tekst-fotoheader .btn {
		margin-bottom: 20px;
	}
}
/* --------------------------------------------------------	*/
/* GATEWAY & advies sectie
/* --------------------------------------------------------	*/

#gateway, #advies{
	background-color: #F5F9FA;
	
}


#gateway-workflow {
	background-color: #1a1a1a;
	background-position: bottom left;
	background-repeat: no-repeat;
	background-image: url(images/layout/sparkles.png);
	margin-top: 70px;
}
/* hier alle css om de boxen te flex naar gelijke hoogte */
html, body {
	height: 100%;
}
.row-flex, .row-flex > div[class*='col-'] {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex: 1 1 auto;
}

/*flexbox uitzetten op de ipad of kleinere apparaten*/
@media (max-width: 1024px) {
.row-flex {
	display: block;
}
	
}
.row-flex-wrap {
	-webkit-flex-flow: row wrap;
	align-content: flex-start;
	flex: 0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	margin: -.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div, .row-flex > div[class*='col-'] div {
	width: 100%;
}
.flex-col {
	display: flex;
	display: -webkit-flex;
	flex: 1 100%;
	flex-flow: column nowrap;
}
.flex-grow {
	display: flex;
	-webkit-flex: 2;
	flex: 2;
}
/*end flex boxen*/


.tekst-gateway {
	background-color: #ffffff;
	color: #2F404F;
	margin: 70px 10px 55px 10px;
}

.btn-gateway
{ position: absolute;
bottom: 3px;
left: 0px;}

@media (max-width: 767px) {
.tekst-gateway {
	margin-top: 30px;
	margin-bottom: 25px;
}
}
.tekst-gateway h1 {
	font-size: 18px;
	color: #1162a9;
	padding: 30px 30px 20px;
	font-weight: 600;
	
		
}

.gateway-image {
	max-width: 100%;
	height: auto;
	width: 100%;
	min-height: 200px;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}
.tekst-gateway .btn {
	margin: 30px 0px;
}

.gateway-body {
	margin-bottom: 80px;
	padding-left: 20px;
	padding-right: 20px;
	
}

.gateway-body ul {
	list-style: none;
	margin-left: 30px;
    padding-left: 20px;
    text-indent: -40px;
}

.gateway-body li {
	margin-bottom: 15px;
}

.gateway-body li:before {
	display: block;
    float: left;
	font-family: FontAwesome;
	padding-right: 20px!important;
	content: "\f00c";
	color: #fbbb21;
	width: 40px;
}
.gateway-body li a {
	text-decoration: underline;
	color: #2F404F;
}

.gateway-body li a:hover {
	color: #1162a9;
	font-weight: 600;
}

/* --------------------------------------------------------	*/
/* MERKEN-SECTIE */
/* --------------------------------------------------------	*/
#merken {
	
}

#merken h1 {
	text-transform:none;
}
.logo-merk {
	display: inline-block;
	width: 150px;
	height: auto;
	margin: 10px 30px;
}


/* --------------------------------------------------------	*/
/* FOTOHEADER-SECTIE en USP */
/* --------------------------------------------------------	*/


.tekst-usp .btn {
	display: inline-block;
}


@media (max-width: 767px) {
.tekst-usp{
	margin-left: 5px;
}
	
	.tekst-usp-footer .whitespace-onder-30px{
	margin-bottom: 10px!important;
		margin-top: 20px;
}
}
.tekst-usp-footer h1 {
	color: white;
}

.tekst-usp-footer h1 a {
	color: white;
	text-decoration: none;
	font-weight: 600;
}

.tekst-usp-footer h1 .stronger
{font-weight: 600;}

.tekst-usp-footer h1 a:hover {
	text-decoration: underline;
}

#usp-footer {
	background: #f2f2f2;
	background-image: url(images/layout/background-usp-footer.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

#usp-sanitair
{background: #f2f2f2;
	background-image: url(images/layout/background-usp-sanitair.jpg);
	background-color: #f2f2f2;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

.tekst-usp-footer {
	margin-top: 100px;
	margin-bottom: 85px;
	color: white;
	font-size: 18
}
.tekst-usp-footer h1 {
	
	font-weight: 300;
	letter-spacing: 0.1px;
	margin-top: 0px;
	font-size: 22px;
	text-transform: none;
	display: block;
	line-height: 35px;
	

}

.tekst-usp-footer .fa-check {
	font-size: 25px;
	color: #fbbb21;
}


/* --------------------------------------------------------	*/
/* FOOTER */
/* --------------------------------------------------------	*/


.footer-top {
	background-color: #f5f9fa;
	color: #2f404f;
	line-height: 15px !important;
	
	
}

.footer-top p {
	margin-bottom: 16px;
	font-size: 16px;
}

.footer-top p:last-of-type {
	margin-bottom: 0px;
}
.footer-top a {
	color:#2f404f;
	text-decoration: none;
}


.footer-top a:hover {

	text-decoration: underline;
	
}
.footer-top .container {
	padding-top:100px;
}

.footer-top .cat-title a 
{color: #1162a9;
text-transform: uppercase;
font-weight: 600;}

.footer-top .btn-blauw:hover {
	text-decoration: none;
}

.vertical-align-center {
	display: flex;
	display: -webkit-flex; /* Safari */
	align-items: center;
}

.footer-bottom {
	background-color: #ffffff;
	color: #2f404f;
	font-size: 12px;
	line-height: 30px !important;
	padding-top: 10px;
	font-weight: 300;
	
}
.footer-bottom a {
	color: #2f404f;
	text-decoration: underline;
}
.footer-navigation ul {
	list-style: none;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
}
.footer-navigation ul li {
	display: inline;
	margin-right: 20px;
}

@media (max-width: 767px) {
.footer-navigation {
	text-align: center;
	margin-top: 20px;
}
.footer-sitemap {
	margin-top: 40px;
}
	.cat-title {
		margin-top: 40px;
	}
	
	.vertical-align-center, .vertical-align-baseline {
		display: block;
	}
	
	.contactgegevens-footer {
		text-align: center;
	}
	
	.contactgegevens-footer .whitespace-xs{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.backloop {
	text-align: center!important;
	margin-top: 20px;
}
	.footer-navigation ul li:last-child
	{ margin-right: 0px;}
	
}

@media(max-width: 991px) {
	.cat-title {margin-top: 40px;}
}


.backloop {
	text-align: right;
}


/* --------------------------------------------------------	*/
/* HOOFDINHOUD PAGE
/* --------------------------------------------------------	*/


.entry-content a, .entry-content a:hover {
	color: #231f20;
	text-decoration: underline;
	font-weight: 400;
}
.entry-content p {
	margin-bottom: 30px;
}

#inhoud a, #advies a{
	text-decoration: underline;
	font-weight: 600;
}

#inhoud a.btn-blauw {
	text-decoration: none !important;
}

.extra-links { display: block;}
#inhoud .hentry {
	margin-bottom: 0px !important;
}
.entry-content h2, .entry-content h3 {
	margin-bottom: 30px;
	margin-top: 60px;
}


@media (max-width: 767px) {
	#inhoud, #advies {
		text-align: center;
	}
	
	#inhoud .gateway-image {
		margin-top: 40px;
	}
	
	.kaart {margin-top: 40px;}
	
	#advies h1 {margin-top: 30px;}
	
	#advies .whitespace-onder-80px {
		margin-bottom: 0px;
	}
	
	#advies .whitespace-boven-120px, #advies .whitespace-boven-80px {
		margin-top: 0px;
	}
	
	}


@media (max-width: 991px){
	#inhoud .gateway-image {
		margin-top: 40px;
	}
	#advies h1 {margin-top: 30px;}
	
	#advies .whitespace-onder-80px {
		margin-bottom: 0px;
	}
	
	#advies .whitespace-boven-120px, #advies .whitespace-boven-80px {
		margin-top: 0px;
	}
	
}
/* --------------------------------------------------------	*/
/* over-ons pagina
/* --------------------------------------------------------	*/

.profielfoto h2 {
	margin-top: 40px;
	margin-bottom: 10px;
}

/* --------------------------------------------------------	*/
/* totaalprojecten pagina
/* --------------------------------------------------------	*/

.totaalprojecten-inleiding p {
	font-size: 18px;
	margin-bottom: 40px;
}


/* --------------------------------------------------------	*/
/* portfolio sectie
/* --------------------------------------------------------	*/

#portfolio 
{background-color: #F5F9FA !important;
padding-bottom: 120px;}

.img-thumb-portfolio 
{display: inline-block;
margin: 20px;}

#slb_viewer_wrap .slb_theme_slb_black .slb_container {
    background-color: #111111 !important;
}