/*
Theme Name: K&R Services 2019
Author: Renier Vermaak
Author URI: http://reniervermaak.nl
Version: 1.1
Text Domain: krservices
*/

@import url("style-starter.css");
@import url("https://use.typekit.net/oaz4tsw.css");

html, body {
	min-height: 100%;
	font-family: program, arial, sans-serif;
}

html #wpadminbar {
	max-width: 100%;
	overflow-x: hidden;
}

#header-banner {
	position: relative;
}

#nav-header {
	position: relative;
	padding: 1.0em 0;
}

#nav-header .row .column.column-logo {
	width: 60%;
}
	#nav-header .row .column.column-logo a img {
		display: block;
		height: 40px;
		width: auto;
		margin-left: 20px;
	}

#nav-header .row .column.column-nav { 
	width: 40%;
}

.toggleMenu {
	display: block;
	line-height: 40px;
	text-align: right;
	margin-right: 20px;
	font-size: 1.5em;
	text-decoration: none;
	color: #000;
}
	.toggleMenu span,
	.toggleMenu i {
		display: block;
		float: right;
		line-height: 40px;
		margin-left: 10px;
		height: 40px;
	}

	.toggleMenu span {
		padding-top: 2px;
		text-transform: uppercase;
	}

#nav-header .row .column.column-nav {
	font-family: 'program-narrow', arial, sans-serif;
	font-weight: 500;
}	

#nav-menu {
	display: block;
	width: 0;
	position: fixed;
	right: 0;
	min-height: 100vh;
	background-color: rgb(64,112,183);
	background-color: rgba(64,112,183,0.9);
	top: 0;
	z-index: 1000;
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
	#nav-menu.open {
		width: 100%;
		height: 100vh;
	}
	
	#nav-menu .toggleMenu {
		display: none;
	}
		#nav-menu.open .toggleMenu {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			margin-top: 20px;
			margin-right: 20px;
			color: #fff;
		}
		body.admin-bar #nav-menu .toggleMenu {
			top: 46px;
		}

		#nav-menu > div {
			position: absolute;
			width: 100%;
			top: 25%;
		}

		#nav-menu ul li a {
			display: block;
			color: #fff;
			text-decoration: none;
			font-size: 2.5em;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-weight: 300;
			line-height: 1.5em;
		}

#header-banner {
	position: relative;
	padding-bottom: 46%;
	overflow: hidden;
}
body.home #header-banner {
	padding-bottom: 60%;
}
	#header-banner .header-image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
		#header-banner .header-image .image-container {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
		}
	
	#header-banner .header-image .header-table {
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    z-index: 500;
	    width: 100%;
	    height: 100%;
	    margin-top: -8%;
	}

.header-table {
	display: table;
}
#header-banner.notitle .header-table {
	display: none;
}

.header-table .header-cell {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	height: 100%;
}
	.header-table .header-cell.bottom-left,
	.header-table .header-cell.bottom-right,
	.header-table .header-cell.bottom-center {
		vertical-align: bottom;
	}
	.header-table .header-cell.top-left,
	.header-table .header-cell.top-right,
	.header-table .header-cell.top-center {
		vertical-align: top;
	}

	.header-table .header-cell h1 {
		font-family: program-narrow, arial, sans-serif;
		font-size: 3em;
		font-weight: 500;
		color: #fff;
		margin: 1.0em auto;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		line-height: initial;
		max-width: 1800px;
		padding: 0 1.0em;
	}
		body.home .header-table .header-cell h1 {
			font-size: 1.5em;
			background: transparent url(images/logo.svg) 50% no-repeat;
			text-indent: -9999px;
			width: 90%;
			height: 90px;
			background-size: contain;
		}

	.header-table .header-cell h2 {
		font-family: program-narrow, arial, sans-serif;
		font-size: 1.0em;
		font-weight: 300;
		margin: 1.0em 0;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		max-width: 1800px;
		padding: 0 2.0em;
	}

	.header-table > div[class*=left] > * {
	    text-align: left;
	}
	.header-table .header-cell.middle-right h1 {
	    text-align: right;
	}	

	.header-image .home-buttons {
		font-family: program-narrow, arial, sans-serif;
		display: none;
	}

.entry-content {
	font-size: 1.2em;
}
.entry-content p.has-medium-font-size {
	font-size: 1.2em;
}	

.entry-content a {
	color: #006fbb;
	text-decoration: underline;
}	

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: program-narrow, arial, sans-serif;
	font-weight: 500;
	font-size: 2.5em;
	text-transform: uppercase;
	line-height: initial;
	letter-spacing: 0.04em;
	color: #006fbb;
}	
	.entry-content h3 {
		font-size: 2.2em;
		font-weight: 100;
		color: initial;
		text-transform: none;
		margin-bottom: 0.6em;
	}
	.entry-content h4 {
		font-size: 2.0em;
		font-weight: 100;
		color: initial;
		text-transform: none;
		margin-bottom: 0.5em;
	}

.entry-content h1.white,
.entry-content h2.white,
.entry-content h3.white,
.entry-content h4.white {
	color: #fff;
}	

.entry-content .padding-bottom-30 {
	padding-bottom: 20% !important;
}	

.ab-block-container.no-margin,
.ab-block-container {
	margin-bottom: 0 !important;
}

.ab-block-container {
	position: relative;
}

.ab-block-container.block-contact .ab-block-container.kr-shape {
	display: none;	
}

.entry-content input[type=text],
.entry-content input[type=email],
.entry-content input[type=date],
.entry-content input[type=tel],
.entry-content input[type=number],
.entry-content select,
.entry-content textarea {
	font-family: program-narrow, arial, sans-serif;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #006fbb;
	font-size: 1.2em;
	padding: 0.5em 0.8em;
	margin: 3px 0 0 0;
	color: #232b3b;
	background: #fff;
	/*-moz-box-shadow: 2px 2px 6px #d1e4df;
    -webkit-box-shadow: 2px 2px 6px #d1e4df;
    box-shadow: 2px 2px 6px #d1e4df;*/
    border-radius: 4px;
    caret-color: #006fbb;
}

.entry-content textarea {
	height: 150px;
}

.entry-content input[type=submit] {
	font-family: program-narrow, arial, sans-serif;
	background: #006fbb;
	color: #fff;
	border-radius: 0;
	line-height: 1.6em;
	padding: 5px 1.0em;
	font-size: 1.3em;
	-webkit-appearance: none;
	border: none;
	cursor: pointer;
	font-weight: 100;
	letter-spacing: 0.05em;
	border-radius: 4px;
}


.block-wat-doen-wij .wp-block-columns.has-3-columns .wp-block-column {
    flex-basis: 50%;
}

.column-member {
	text-align: center;
}
	.column-member .column-inner {
		padding: 1.0em;
	}

	.column-member .column-inner h3 {
		font-size: 2em;
		color: #3f6fb7;
	}

.fancybox-slide > .member-more {
	margin: 2.0em;
	max-width: 1024px;
}

#footer {
	background: #006fbb;
	color: #fff;
}
#footer .row .column {}

#footer .row .column .inner-column {
	padding: 0.5em;
}

#footer .row .column .inner-column a {
	color: #fff;
	font-size: 1.5em;
	font-family: program-narrow, arial, sans-serif;
	font-weight: 100;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	text-decoration: none;
}

#footer .row .column .inner-column h2 {
	font-size: 2.5em;
	font-family: program-narrow, arial, sans-serif;
	font-weight: 100;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	text-decoration: none;
}

#footer .row .column.widget_nav_menu .inner-column ul.menu {
	text-align: center;
	margin: 2.0em auto;
}

#footer .row .column.widget_media_image .inner-column {
	display: block;
	max-width: 300px;
	margin: 0px auto;
}

#footer .row .column .inner-column .custom-html-widget p a {
	display: inline-block;
	margin: 1.0em 0.7em;
}
#footer .row .column .inner-column .custom-html-widget p a i {
	font-size: 1.2em;
}

@media only screen and (min-width: 600px) {
	body.home .header-table .header-cell h1 {
		height: 125px;
	}

	.entry-content h2 {
		font-size: 4.0em;
	}
	.entry-content h3 {
		font-size: 3.0em;
	}
	.entry-content h4 {
		font-size: 2.0em;
	}

	.wp-block-columns.has-2-columns,
	.wp-block-columns.has-3-columns {
	    flex-wrap: nowrap;
	}
}

@media only screen and (min-width: 782px) {
	#nav-header .row .column.column-logo a img {
		height: 60px;
	}

	.toggleMenu {
		line-height: 60px;
		font-size: 2em;
	}
		.toggleMenu span,
		.toggleMenu i {
			line-height: 60px;
		}	

	.column-group.columns-3 .column,
	.row .column.column-33 {
		width: 33.33%;
	}
	.row .column.column-40 {
		width: 40%;
	}
	.row .column.column-45 {
		width: 45%;
	}
	.column-group.columns-2 .column {
		width: 50%;
	}
	.row .column.column-50 {
		width: 50%;
	}
	.row .column.column-55 {
		width: 55%;
	}
	.row .column.column-60 {
		width: 60%;
	}
	.row .column.column-66 {
		width: 66.66%;
	}
	.row .column.column-70 {
		width: 70%;
	}
	.row .column.column-75 {
		width: 75%;
	}
	.row .column.column-80 {
		width: 80%;
	}

	#header-banner .header-image .header-table {
	    margin-top: -4%;
	}

	.header-image .home-buttons {
		display: block;
		text-align: center;
		max-width: 60%;
		margin: 0px auto 4.0em auto;
	}
		.header-image .home-buttons .row .column {
			position: relative;
			text-align: center;
		}

		.header-image .home-buttons .row .column .shape {
			width: 110px;	
			margin: 0px auto;
		}

		.header-image .home-buttons .row .column a {
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			color: #000;
			font-size: 2.0em;
			margin: 0px auto;
			text-decoration: none;
		}
			.header-image .home-buttons .row .column a span {
				display: block;
				position: absolute;
				width: 100%;
				height: auto;
				top: 50%;
				left: 0;
				transform: translate(0, -50%);
			}

	
	.ab-block-container.block-contact .ab-block-container.position-absolute {
		position: absolute;
		width: 100%;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		box-sizing: border-box;
	}	
	.ab-block-container.block-contact .ab-block-container.kr-shape {
		display: block;	
	}

	#footer .container {
		max-width: 900px;
		margin: 0px auto;
	}	

	#footer .row .column {
		width: 33%;
		display: inline-block;
	}
		#footer .row .column .inner-column {
			padding: 2em 1em;
		}	

	#footer .row .column.widget_nav_menu .inner-column ul.menu {
		text-align: initial;
		margin: initial;
	}		
}

@media only screen and (min-width: 1024px) {
	.header-table .header-cell h1 {
		font-size: 4em;
	}

	#nav-header {
		position: fixed;
		z-index: 1000;
		padding: 1em;
		width: 100%;
		box-sizing: border-box;
		background: rgb(255,255,255);
		background: rgba(255,255,255, 0.9);
	}

	#nav-header .row .column.column-logo {
		width: 30%;
	}
		#nav-header .row .column.column-logo a img {
			width: auto;
			height: 60px;
		}

	#nav-header .row .column.column-nav {
		width: 70%;
	}
		#nav-header .row .column.column-nav .menu > div > ul {
			text-align: right;
		}
			#nav-header .row .column.column-nav .menu > div > ul > li {
				display: inline-block;
				width: auto;
				height: 60px;
				line-height: 60px;
				margin: 0 1.0em;
			}
				#nav-header .row .column.column-nav .menu > div > ul > li a {
					display: inline-block;
					text-decoration: none;
					color: #000;
					font-size: 1.5em;
					line-height: inherit;
				}

	#header-banner .header-image .header-table {
	    margin-top: 20px;
	}			

	.toggleMenu {
		display: none;
	}
	#nav-menu {
		display: block;
		width: auto;
		position: relative;
		right: auto;
		min-height: 0;
		background-color: transparent;
		top: auto;
		z-index: initial;
	}

	.header-image .home-buttons .row .column .shape {
		width: 150px;	
		margin: 0px auto;
	}
	.header-image .home-buttons .row .column a {
		font-size: 2.2em;
	}
}	

@media only screen and (min-width: 1200px) {
	body.home .header-table .header-cell h1 {
	    height: 150px;
	}

	.header-image .home-buttons .row .column .shape {
		width: 170px;	
		margin: 0px auto;
	}
}

@media only screen and (min-width: 1400px) {
	body.home .header-table .header-cell h1 {
	    height: 180px;
	    margin-bottom: 40px;
	}

	.header-image .home-buttons .row .column .shape {
		width: 190px;	
		margin: 0px auto;
	}

	.header-image .home-buttons .row .column a {
	    font-size: 2.5em;
	}
}
/*.member-photo-back {display:none;
}*/