/*!
Theme Name: MMBS, version MES
Authors: Sanne Terpstra, Henriette Santing
Authors URI: https://www.sanneterpstra.com and https://henriettesanting.nl
Description: A WordPress Theme designed for MMBS Group (2019) and MES Agency (2020).
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: MES
Tags: Sanne Terpstra, Henriette Santing
*/



 @import url("https://use.typekit.net/hci8eti.css");
 
 * {
 	font-family: acumin-pro-wide, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1em;
	line-height: 1.38;
	font-weight: 300;
	font-style: normal;
	color:#100;
} /* Acumin-pro-wide, light */


p {
	font-family: acumin-pro, sans-serif;
	/* -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; */
	font-size: 1.16em;
	line-height: 1.38;
	font-weight: 200;
	font-style: normal;
	color:#100;
	margin: 0 0 25px 0;
} /* Acumin-pro, extra light */

@media only screen and (max-width: 360px) {
	p { font-size: 1.13em; line-height: 1.34; } 
}


@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url("./css/webfonts/fa-solid-900.eot");
	src: url("./css/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("./css/webfonts/fa-solid-900.woff2") format("woff2"), url("./css/webfonts/fa-solid-900.woff") format("woff"), url("./css/webfonts/fa-solid-900.ttf") format("truetype"), url("./css/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }


@font-face {
	font-family: 'Font Awesome 5 Free brands';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url("./css/webfonts/fa-brands-400.eot");
	src: url("./css/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("./css/webfonts/fa-brands-400.woff2") format("woff2"), url("./css/webfonts/fa-brands-400.woff") format("woff"), url("./css/webfonts/fa-brands-400.ttf") format("truetype"), url("./css/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }


.fas {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.fab {
	font-family: 'Font Awesome 5 Free brands';
	font-weight: 400;
}


html {
	overflow: hidden;
}

body {
	transform-style: preserve-3d;
	overflow: hidden;
}

#site-container {
	height: 100vh;
	background-color: #999;
	-webkit-perspective: 1px;
	-moz-perspective: 1px;
	-o-perspective: 1px;
	-ms-perspective: 1px;
	perspective: 1px;
	-webkit-perspective-origin: 0 0;
	-moz-perspective-origin: 0 0;
	-o-perspective-origin: 0 0;
	-ms-perspective-origin: 0 0;
	perspective-origin: 0 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	overflow-x:hidden;
	overflow-y:scroll;
}


#hero .container { padding-left: 45px; padding-right: 40px; }


#content {
	position: relative;
	z-index: 10;
	background-image: linear-gradient(125deg,#ddd,#ccc,#ddd);
	margin: 0 40px;
	border-radius: 6px;
}

.container {
	width: 100%;
}


#footer .container-fluid {
	position: relative;
	padding-right: 35px;
	padding-left: 35px;
	max-width: 900px;
}


@media only screen and ( max-width: 399px ) {
	#hero .container {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#content { margin: 0 14px; }
	
	#footer .container-fluid {
		padding-right: 10px;
		padding-left: 10px;
	}	
}



@media only screen and (min-width: 400px) and ( max-width: 849px) {
	#content { margin: 0 20px; }
	
	#hero .container {
		padding-left: 24px;
		padding-right: 24px;
	}
	
	#footer .container-fluid {
		padding-right: 25px;
		padding-left: 25px;
	}
}


@media only screen and (min-width: 850px) and ( max-width: 1199px) {
	#content { margin: 0 34px; }
}

@media only screen and (min-width: 1200px) {
	#content { margin: 0 50px; }
}

@media only screen and (min-width: 1400px) {
	#content { margin-right: auto; margin-left: auto; }
}


a:not(.a-image-zoom), a .fa, a .fas,  a .fab { color: #f10; text-decoration:none; }
a:not(.a-image-zoom):hover, 
a:hover .fa, a:hover .fas, a:hover .fab, 
#menu a:hover .fa, #menu a:hover .fas { color: #fff; text-decoration:none; }



p a { font-family: acumin-pro, sans-serif; }

a.a-image-zoom { transition: .3s ease; }

.container-plaatje {
	position: relative;
	width: 100%;
	padding-top: 66.66%; /* 3:2 Aspect Ratio */
	overflow:hidden;
	background-color: #777; 
}


.a-image-zoom img {
	width:100%;
	height:auto;
	vertical-align: middle;
	transition: 1s ease-out;
}

a.a-image-zoom:hover img {
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}


.shadow-rondom {
	-webkit-box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.5), 0 4px 22px 0 rgba(0, 0, 0, 0.12), 0 5px 16px -20px rgba(255, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.5), 0 4px 22px 0 rgba(0, 0, 0, 0.12), 0 5px 16px -20px rgba(255, 0, 0, 0.3);
	box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.5), 0 4px 22px 0 rgba(0, 0, 0, 0.12), 0 5px 16px -20px rgba(255, 0, 0, 0.3);
}

.shadow-rondom-light {
	-webkit-box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.3), 0 4px 22px 0 rgba(0, 0, 0, 0.06), 0 5px 16px -20px rgba(255, 0, 0, 0.2);
	-moz-box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.3), 0 4px 22px 0 rgba(0, 0, 0, 0.06), 0 5px 16px -20px rgba(255, 0, 0, 0.2);
	box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.3), 0 4px 22px 0 rgba(0, 0, 0, 0.06), 0 5px 16px -20px rgba(255, 0, 0, 0.2);
}


/*--------------------------------------------------------------
## Site Header
--------------------------------------------------------------*/

body.admin-bar #site-header {
	margin-top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar #site-header {
		margin-top: 46px;
	}
}

#site-header {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	background:rgba(0,0,0,0.35);
}


#site-header.bgDekkend {
	background:rgba(0,0,0,0.35);
	animation-name: hetwordtdekkend;
	animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@keyframes hetwordtdekkend { 
	from { background: rgba(0,0,0,0.35);} 
	to { background: rgba(51,51,51,1);}
}


#site-header .row { height: 110px; }


.logo {
	position: absolute;
	top: 18px;
	left: 16px;
	z-index: 30;
}

table { display: table; border-spacing: 0px; }
tr { display: table-row; }
td { display: table-cell; }
td.tekst { max-width: 160px; vertical-align: bottom; }
td.plaatje { padding-right: 16px; }

.tekst h1 { 
	color: #f10;
	margin-block-start: 0em; margin-block-end: 0em; margin: 0;
	line-height: 1.1;
	font-size:2.1em; 
}

.tekst h2 { 
	font-size: .95em;
	color: #fff; 
	line-height: 1.25; 
	margin-block-start: 0em; margin-block-end: 0em; margin:1px 0 -2px 1px; 
}

@media only screen and (max-width: 449px) {
	td.tekst { max-width: 138px; }
	td.tekst h2 { font-family: acumin-pro, sans-serif; font-size: .9em; margin-top: 0;}
	td.plaatje { padding-right: 12px; }
}

@media only screen and (min-width: 400px) and (max-width: 849px) {
	.logo { left: 26px; }
}

@media only screen and (min-width: 850px) {
	.logo { left: 44px; }
	td.plaatje { padding-right: 20px; }
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

#menu ul {
	margin: 0;
	padding: 0;
	text-align: left;
}

#menu .main-menu {
	display: none;
}

#tm:checked + .main-menu {
	display: block;
	background: #000;
	position: absolute;
	width: 100%;
	padding-top: 34px;
	-webkit-box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.3), 0 4px 22px 0 rgba(0, 0, 0, 0.06), 0 5px 16px -20px rgba(255, 0, 0, 0.2);
	-moz-box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.3), 0 4px 22px 0 rgba(0, 0, 0, 0.06), 0 5px 16px -20px rgba(255, 0, 0, 0.2);
	box-shadow: 0 8px 34px -12px rgba(0, 0, 0, 0.3), 0 4px 22px 0 rgba(0, 0, 0, 0.06), 0 5px 16px -20px rgba(255, 0, 0, 0.2);
}

@media only screen and (max-width: 849px) {
	.main-menu { overflow-y: scroll; }
}
} 
	
	
.main-menu {
	position: fixed;
	width: 180px;
	max-height: calc(100vh - 100px);
	background-color: #000;
	z-index: 1;
}

#menu input[type="checkbox"],
#menu li label.drop-icon { display: none; } 

#menu .sub-menu {
	background-color: #000;
	border-radius: 3px;
}

#menu li,
#toggle-menu, 
#menu a {
	position: relative;
	display: block;
	color: #fc0;
	text-decoration: none;
	font-size: 15px;
	text-transform: uppercase;
}

#menu .sub-menu li,
#menu .sub-menu a {
	font-size: 14px;
	text-transform: none;
}

#menu {
	text-align: right;
}

#toggle-menu {
	height: 110px;
}

#menu a {
	padding: 15px 20px;
}

#menu .sub-menu .sub-menu a {
	padding: 10px 20px 10px 35px;
}

#menu .sub-menu.searchform-menu {
	padding: 15px;
}

#menu .sub-menu.searchform-menu form {
	display: flex;
	align-items: center;
}

#menu .sub-menu.searchform-menu form input {
	vertical-align: middle;
	margin-right: 5px;
	padding: 10px;
	color: #fc0;
	background-color: #000;
	border: 1px solid #fc0;
	width: 100%;
}

#menu .sub-menu.searchform-menu form input[type="submit"] { max-width: 200px; }
#menu .sub-menu.searchform-menu form input[type="submit"]:hover { color: #fff; }
#menu .sub-menu.searchform-menu form input[type="submit"]:focus { color: #fff; }

#menu a {
	transition: all .125s ease-in-out;
	-webkit-transition: all .125s ease-in-out;
}

@media only screen and ( min-width: 768px ) {
	#menu a:hover, #menu .sub-menu a:hover  {
		color: rgb(255, 255, 255);
	}
}

#menu .current-menu-ancestor > a,
#menu .current_page_item > a,
#menu .current-menu-item > a,
#menu .current-menu-parent > a {
	color: rgb(255, 255, 255);
}

#menu .sub-menu {
	display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
	display: block;
}


#menu li span {
	position: absolute;
	height: 30px;
	top: 10px;
	line-height: 30px;
	vertical-align: middle;
	width: 30px;
	right: 15px;
	border: 1px solid #fc0;
	border-radius: 4px;
}


#toggle-menu div {
	width: 30px;
	height: 15px;
	position: absolute;
	top: 44px;
	right: 16px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

@media only screen and ( min-width: 768px ) and ( max-width: 1199px ) {
	#toggle-menu div { right: 34px; }
}

@media only screen and ( min-width: 1200px ) {
	#toggle-menu div { right: 50px; }
}

#toggle-menu div span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #fc0;
	border-radius: 3px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

#toggle-menu div span:nth-child(1) {
	top: 0px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#toggle-menu div span:nth-child(2) {
	top: 8px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#toggle-menu div span:nth-child(3) {
	top: 16px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#toggle-menu div span:hover, #toggle-menu div.open span { background: #fff; }

#toggle-menu div.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -4px;
	left: 8px;
}

#toggle-menu div.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

#toggle-menu div.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 17px;
	left: 8px;
}

#menu label.drop-icon {
	text-align: center;
	text-shadow: 0 0 0 transparent;

}

#menu .drop-icon {
	line-height: 1;
}


/*--------------------------------------------------------------
## Hero
--------------------------------------------------------------*/
#hero {
	position: relative;
	z-index: 1;
	margin-bottom: -70px;
	display: table;
	width: 100%;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	will-change: transform;
	-webkit-transform: translateX(50%) translateY(50%) translateZ(-1px) scale(2);
	-moz-transform: translateX(50%) translateY(50%) translateZ(-1px) scale(2);
	-o-transform: translateX(50%) translateY(50%) translateZ(-1px) scale(2);
	transform: translateX(50%) translateY(50%) translateZ(-1px) scale(2);
	border-style: none;
}

@media only screen and ( min-width: 1200px ) {
	.page-template-default #hero, .error404 #hero, .archive #hero, .search #hero, .page-id-18 #hero {
		height: 84vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-hout-w2000px.jpg);
	}

	.home #hero {
		height: 90vh;	
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/shake-hands-hero-w1710px.jpg);
	}

	.page-id-14 #hero {
		height: 68vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/metselen-hero-w2000px.jpg);
	}

	.page-id-10 #hero {
		height: 68vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/elektriciteit-hero-w2000px.jpg);
	}

	.page-id-16 #hero {
		height: 68vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-op-dak-w2000px.jpg);
	}
}


@media only screen and ( min-width: 850px ) and ( max-width: 1199px ) {
	.page-template-default #hero, .error404 #hero, .archive #hero, .search #hero, .page-id-18 #hero {
		height: 84vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-hout-w1200px.jpg);
	}

	.home #hero {
		height: 90vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/shake-hands-hero-w1231px.jpg);
	}

	.page-id-14 #hero {
		height: 68vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/metselen-hero-w1200px.jpg);
	}

	.page-id-10 #hero {
		height: 68vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/elektriciteit-hero-w1200px.jpg);
	}

	.page-id-16 #hero {
		height: 68vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-op-dak-w1200px.jpg);
	}
}


@media only screen and ( min-width: 641px ) and ( max-width: 849px ) {
	#site-container {
		-webkit-overflow-scrolling: touch;
	}

	#hero {
		-webkit-transform: none; 
		-moz-transform: none;
		-o-transform: none;
		transform: none; 
	} 
	
	.page-template-default #hero, .error404 #hero, .archive #hero, .search #hero, .page-id-18 #hero {  
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-hout-w1000px.jpg);
	}
	
	.home #hero { 
		height: 86vh; 
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/shake-hands-hero-w1231px.jpg); 
	}
	
	.page-id-14 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/metselen-hero-w1200px.jpg);
	}

	.page-id-10 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/elektriciteit-hero-w1200px.jpg);
	}

	.page-id-16 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-op-dak-w1000px.jpg);
	}
}


@media only screen and ( max-width: 640px ) {
#site-container {
		-webkit-overflow-scrolling: touch;
	}

	#hero {
		-webkit-transform: none; 
		-moz-transform: none;
		-o-transform: none;
		transform: none; 
	}
	
	.page-template-default #hero, .error404 #hero, .archive #hero, .search #hero, .page-id-18 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-hout-w640px.jpg);
	}
	
	.home #hero { 
		height: 86vh; 
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/shake-hands-hero-w640px.jpg); 
	}
	
	.page-id-14 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/metselen-hero-w640px.jpg);
	}

	.page-id-10 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/elektriciteit-hero-w640px.jpg);
	}

	.page-id-16 #hero {
		height: 78vh;
		background-image: url(https://www.mes-agency.com/wp-content/uploads/hero/man-op-dak-w640px.jpg);
	}
} 



#hero div.container { 
	margin: 0;
  	position: absolute;
  	top: 55%;
 	 -ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}


h1.site-title, h1.page-title {
	font-weight: 400;
	font-size: 2.5em;
	text-transform:uppercase;
	margin: 0;
	color: #f10;
	line-height: 1.2;
}

h1.page-title { font-size: 2.3em; }


h1.site-title span, 
h1.page-title span { font-family: acumin-pro, sans-serif; font-weight: 200; color: #fff; line-height: 1.2; }

@media only screen and (max-width: 369px) {
	h1.site-title { font-size: 2.1em; }
	h1.page-title { font-size: 1.9em; }
}

@media only screen and (min-width: 370px) and (max-width: 449px) {
	h1.site-title { font-size: 2.3em; }
	h1.page-title { font-size: 2.1em; }
}

@media only screen and (min-width: 1200px) {
	h1.site-title { font-size: 3em; }
	h1.page-title { font-size: 2.8em; }
}



#hero .page-title-container div:last-child {
	margin-left: 20px;
}


/*--------------------------------------------------------------
## Page content
--------------------------------------------------------------*/



#content main p {
	margin-block-start: 0;
	margin-block-end: 1.25em; 
}


/* Koppen page-post */

h2 { font-family: acumin-pro-wide, sans-serif; }

.groteKopUppercase {  
	font-size: 1.6em; 
	text-transform: uppercase;
	margin: 0 0 8px -0.05em; 
	color: #676;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.groteKopLowercase {  
	font-size: 2.1em; 
	margin: 0 0 10px -0.04em; 
	color: #676;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

@media only screen and (max-width: 359px) {
	.groteKopLowercase { font-size: 1.6em; } 
}

@media only screen and (min-width: 360px) and (max-width: 1240px) {
	.groteKopLowercase { font-size: 1.8em; } 
}

.groteKopLowercase a, .groteKopUppercase a { line-height: 1.1; }

.lowercase { text-transform: lowercase; }

.dikte-200 { font-weight: 200;}
.dikte-300 { font-weight: 300;}
.dikte-400 { font-weight: 400;}
.dikte-500 { font-weight: 500;}
.dikte-600 { font-weight: 600;}
/* Acumin Pro: 200, 300, 500, 600. Acumin Pro wide: 200, 300, 400, 500. */ 

.extraRuimte { margin-top: 25px; }

.kleineKopLowercase {  
	font-family: acumin-pro, sans-serif;
	font-size: 1.2em;
	margin: 0 0 2px 0; 
	color: #200;
	letter-spacing: -0.01em;
}



#content .page-block {
	padding: 55px 75px 50px 75px;
	overflow: hidden;
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
}

#content main.page-block.formatHome,
#content { max-width: 1300px; }


@media only screen and (min-width: 621px) and (max-width: 955px) {
	#content .page-block { padding: 45px 55px 40px 55px; }
}

@media only screen and (max-width: 620px) {
	#content .page-block { padding: 40px 31px 35px 29px; }
}



#content main.page-block.formatHome { padding: 55px 0 50px 0; }

@media only screen and (min-width: 621px) and (max-width: 955px) {
	#content main.page-block.formatHome { padding: 45px 0 40px 0; }
}

@media only screen and (max-width: 620px) {
	#content main.page-block.formatHome { padding: 40px 0 35px 0; }
}