/*   
Theme Name: HOVU Thema
Theme URI: https://www.hovu.nl
Description: Thema ontwikkeld voor HOVU
Author: Erwin Kampinga
Author URI: https://nl.linkedin.com/in/erwinkampinga
Version: 1.0
*/

/*   
Groen: #004B2C
Geel: #FFAB00

font-family: 'Encode Sans Semi Expanded', sans-serif;
weight: 300 + 700
font-family: 'Oswald', sans-serif;
weight: 700
*/

@media screen {

	html {height:100%; box-sizing: border-box;}
* { margin: 0; padding: 0;  }
body { background: white; font-size: 14px; line-height:1.4; font-family: 'Encode Sans Semi Expanded', sans-serif; font-weight:300; position:relative; min-height: 100%; margin:0;}
.screen-reader-text { position: absolute; left: -9999px; top: -9999px; }
.clear { clear: both; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .group, *:first-child+html .group { zoom: 1; } /* First selector = IE6, Second Selector = IE 7 */

.fullwidth {width: 100%; height: auto;}

h1, h2, h3, h4 { font-weight: 700; margin: 0 0 10px 0; font-family: 'Oswald', sans-serif; text-transform: capitalize; text-transform: uppercase; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

	#content h1 {color:#004B2C; font-size: 37px;}
	#content h1 strong {color:#FFAB00;}
	
	#content h2 {color:#004B2C; font-size: 30px;}
	#content h2 strong {color:#FFAB00;}
	
	#quote h2 {color:#FFF; font-size: 25px; text-shadow: 2px 2px 7px rgba(0, 75, 44, 1);}
	#quote h2 strong { color:#FFAB00;}

		
	#content h3 {color:#FFAB00; font-size: 18px; margin-bottom: 5px}
	
	#pre-footer h4 {color:#004B2C; font-size: 20px; margin-bottom: 0px; }
	#pre-footer h5 {color:#004B2C; font-size: 14px;}
	
span, p, ul.opsomming { margin: 0 0 10px 0; font-family: 'Encode Sans Semi Expanded', sans-serif; font-weight:300; line-height: 27px; font-size: 14px; }
p.inleiding {font-size:16px;}
a {text-decoration: none; color:#FFAB00; }
a:hover { color:#004B2C; cursor: pointer;}
	
#left {text-align: left}
#center {text-align: center}
#right {text-align: right}
	
/*------------------------------------------------  */
/* HOOFDNAVIGATIE
/*------------------------------------------------  */

#logo img {width: 180px; height:auto; }
#logo {padding:12px 0px 0px 0px; text-align: left;}
#hoofdmenu {text-align: right; margin-top:10px;}
#hoofdmenu ul{list-style-type: none;}
#hoofdmenu ul li{display: inline-block; padding:26px 15px 0px 15px;}
#hoofdmenu ul li:last-child{padding-right: 0px;}
#hoofdmenu ul li a{font-family: 'Encode Sans Semi Expanded', sans-serif; font-weight: 300; color:#004B2C; font-size: 14px; text-decoration: none;}
#hoofdmenu ul li a:hover, #hoofdmenu ul li.current-menu-item a, #hoofdmenu ul li.current-menu-ancestor a{color:#FFAB00; font-weight: 300}
	
	#hoofdmenu li:hover ul {display:block;}
	#hoofdmenu li ul {display:none; position:absolute; z-index:10; margin-left:0px; margin-top:0px; padding-top:0px}
	#hoofdmenu li ul li {display:block; float:none !important;  background:#fff; text-align:left; border-bottom:#ECF0F1 1px solid; padding:10px }
	.sub-menu { font-family: 'Encode Sans Semi Expanded', sans-serif; font-weight: 300; padding-top:35px !important;}
	.sub-menu li {margin-bottom:0px;} 
	.sub-menu li:first-child{border-top:#FFAB00 5px solid;}
	#hoofdmenu li ul li a { color:#000 !important; display:block ; background:#FFF; padding:0px 10px 0px 0px ; font-size: 14px; }
	#hoofdmenu li ul li a:hover, #hoofdmenu li ul li.current-menu-item a { color:#FFAB00 !important;  background:#FFF; border-bottom:none;}

.menu ul { position:absolute; display:none; margin-top:6px }
.menu li ul ul li { margin:-10px; padding:0px; top:-10px} 

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{ display:block; position:absolute; z-index:5;}	
	
#mobielmenu-container, #mobielmenu {display:none;} 	
	
	
/*------------------------------------------------  */
/* HEADER
/*------------------------------------------------  */
#green-banner {
	background: #004B2C url(images/bg-green.jpg) center top no-repeat;
	height:22px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;}
	
#header-image-home {background: #FFF center center no-repeat;
	height:415px;
	margin-top:0px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin-bottom: 50px;
	overflow: hidden;
	text-align: center;
	display:flex;
  justify-content: center;
  align-items:center;}
	
#header-image {background: #004B2C url(images/hovu-header-subpag1.jpg) center center no-repeat;
	height:200px;
	margin-top:0px;
	margin-bottom:50px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: hidden}
	
	#header-image img, #header-image-home img {width:100%; min-width: 2500px;  display: table-cell; text-align: center; vertical-align: middle; object-position: center !important; object-fit: contain }	
	
	
/* CTA  */
	
	
.cta {background:#FFAB00; position: absolute; text-align: center; right:0; top:117px;}	
	.cta i {display: block; color: #FFF; padding: 8px; border-bottom: #FFF 1px solid; font-size: 16px}
	.cta i:last-child {border-bottom:none}	
.cta a .fa {background:#FFAB00; padding:10px;}
.cta a:hover .fa {background:#004B2C; }

.quote-container-big {
	background: url(images/quote-big.png) center top no-repeat;
	width: 432px;
	height: 318px;
	margin-top: -318px;
	position: relative;
	text-align:center;
	margin-bottom: 40px;
	}	
	.quote-container-big h2 {padding: 95px 79px 0px 79px;}	
	
.quote-container-medium {
	background: url(images/quote-medium.png) center top no-repeat;
	width: 432px;
	height: 281px;
	margin-top: -281px;
	position: relative;
	text-align:center;
	margin-bottom: 20px;
	}	
	
.quote-container-medium h2 {padding: 100px 75px 0px 75px;}	
	
.quote-container-small {
	background: url(images/groenvlak-small.png) center top no-repeat;
	width: 404px;
	height: 184px;
	margin-top: -184px;
	position: relative;
	text-align:center;
	margin-bottom:0px;
	float:right
	}	
	.quote-container-small  h2 {padding: 60px 80px 0px 80px;}		
	
/*------------------------------------------------  */
/* CONTENT
/*------------------------------------------------  */

h2.subimage {font-size:20px !important;}
#cijfersvlak img{width:100%;}
#cijfersvlak .four img:hover {opacity: 0.7;}
.content-producten img {width:100%;}
.content-producten img:hover {opacity: 0.7;}
	
	ul.opsomming li {margin-bottom:0px; padding-left:15px;}
	ul.opsomming li:before {content:"•"; position:absolute; color:#FFAB00; left:0; font-size: 16px;}
	ul.opsomming {list-style:none; position: relative; margin-bottom: 30px;}
	
	#googlemaps{margin-top:60px; height:400px; top:-40px;}
	
	.afb-rechts {float: right; margin-right:-83px; margin-left:20px;}
	.afb-links {float: left; margin-left:-83px; margin-right:20px;}
	.worstjes {margin-top:-30px;}
	
	.afb-certificaten{width:150px; margin-right:30px; height:100%; float: left}
	.afb-certificaten img{width: 100%}
	
	.content-certificaten {float: left; width: 600px;}
	
/*------------------------------------------------  */
/* CONTACT
/*------------------------------------------------  */		
	
	#contactformulier{margin-top:30px;}
	input[type="text"], input[type="email"], textarea {background:#f5f5f5; border:none; width:92%; padding:10px 4%; border-radius:4px;}
	input[type="submit"] {border:none; background:#FFAB00; color:#FFF; padding:8px 12px; border-radius:4px;}
	input[type="submit"]:hover {background:#004B2C;}
	.wpcf7-not-valid-tip {margin-bottom:0px;}
	div.wpcf7-response-output { margin:0px !important; padding:10px 15px !important;}
	div.wpcf7-mail-sent-ok {border:none !important; background:#004B2C; color:#FFF; border-radius: 4px;}
	div.wpcf7-validation-errors {border:none !important; background:#FFAB00; color:#FFF; border-radius: 4px;}
	
	.grecaptcha-badge {z-index:100;}

	
/*------------------------------------------------  */
/* COUNTER
/*------------------------------------------------  */	
#cijfersvlak {margin-bottom: 30px;}

#counters {margin-top: 40px;}
	#counters .icons {min-height: 70px; }
	#counters img {display: block; margin: 0 auto; color:#004B2C}
	#counters .three {padding-left:30px; padding-right: 30px;}
	#counters span {color:#004B2C; line-height: 0.5}
	#counters span strong { font-weight: 700; font-family: 'Oswald', sans-serif; text-transform: capitalize; text-transform: uppercase; font-size: 37px; display: block; color:#004B2C; line-height: 1}
	
	
/*------------------------------------------------  */
/* FOOTER
/*------------------------------------------------  */	
#pre-footer {
	background: #fff url(images/smear-footer.png) center top no-repeat;
	min-height:97px;
	margin-top: 60px;
	padding: 20px 130px 20px 100px}
	
	#pre-footer h4, h5 {}
	#pre-footer #beter-leven {float: right; margin-top: -5px }	
	
	
#footer {
	background: #004B2C url(images/bg-green.jpg) center top no-repeat;
	min-height:40px;
	font-size: 10px;
	padding-top:15px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Encode Sans Semi Expanded', sans-serif;
	font-weight:300;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	}

	#footer, #footer a {color:#FFF;}
	#footer a:hover{color:#FFAB00;}
	
	
} /* END screen media */


/*------------------------------------------------  */
/* RESPONSIVE
/*------------------------------------------------  */	



@media (max-width: 1200px) {
	
	.afb-certificaten {margin-bottom:15px;}
	.content-certificaten {margin-bottom:25px; width:100%;}
	
	#pre-footer {padding: 20px 50px 20px 50px; background-size: cover;}
	#pre-footer h4 { font-size:16px; text-align: left;}
	#pre-footer h5 { text-align: left;}
	#pre-footer #beter-leven {margin-left:20px;}
	
}


@media (max-width: 850px) {

#logo img {width: 120px; }
.cta { top: 87px; }

#hoofdmenu {display: none;}

#mobielmenu-container {display:block; width:100%; background:#ffffff; height:0px; line-height:60px;border-bottom:none; position:fixed; z-index:999; top:4px;}
.mobielmenu {display: block;}

.hamburger{ background:none; position:absolute; top:0; right:0; line-height:25px; padding:18px 15px 0px 15px; color:#004B2C; border:0; font-size:1.8em; font-weight:bold; cursor:pointer; outline:none; z-index:999;}
.hamburger:hover, .cross:hover{color:#FFAB00;}
.cross{background:none;position:absolute;top:0px;right:0;padding:11px 20px 0px 15px; color:#004B2C;border:0;font-size:3em; line-height:48px; font-weight:bold;cursor:pointer; outline:none;z-index:9999999999999999999;}

#mobielmenu{z-index:1000000; font-family: 'Encode Sans Semi Expanded', sans-serif; font-size: 15px; font-weight:300; width:100%; background:#F5F5F5; border-top:#FFAB00 5px solid; position:fixed; text-align:center; top:65px; }
#mobielmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
#mobielmenu ul li:hover a{color: #FFAB00;} /* hoofdmenu kleur van A on hover over alleen balk */
#mobielmenu li {display: block; border-bottom:#ECF0F1 1px solid; margin-bottom:0px;}
#mobielmenu li:hover{}
#mobielmenu ul li a { text-decoration:none; margin: 0px; color:#000;}
#mobielmenu ul li a:hover {color: #FFAB00;} /* hoofdmenu kleur van A on hover over tekst */

#mobielmenu li:hover ul {display:block;}
#mobielmenu li ul {display:none; position:relative; z-index:10; margin-left:0px; margin-top:0px; padding-top:0px; background: #FFF; } /* submenu background */
#mobielmenu li ul li{display: block !important; border-top:1px solid #FFF; border-bottom: none;}
#mobielmenu .sub-menu {padding-top:0px !important;}
#mobielmenu .sub-menu li {border-bottom:#ECF0F1 1px solid;}
#mobielmenu ul.sub-menu li:hover a {color:#FFAB00 !important;} /* submenu A met hover over balk */
#mobielmenu .menu-item-has-children a:hover{color:#FFAB00;} /* hover hoofdmenu met kinderen op A */
#mobielmenu .sub-menu li a { color:#000 !important;} /* submenu */
#mobielmenu .sub-menu li a:hover { color:#FFAB00 !important;} /* hover submenu */

#mobielmenu .wpml-ls-item, #mobielmenu .wpml-ls-item:hover {display: inline-block;}

.menu-item-has-children:before{content:'\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color:#000; right:0px; padding-right:20px; position:absolute;}

}


/* springt naar 1 kolom */
@media (max-width: 550px) {

.quote-container-medium {float:none !important; background-size: 350px; width:100%; margin-top:-250px;}
.quote-container-medium h2 {padding:70px 20px 0px 20px;}

.quote-container-small{float:none !important; background-size: 350px; width:100%; margin-top:-130px;}
.quote-container-small h2 { padding-left:20px; padding-right:20px;}

.afb-rechts, .afb-links {float: none; margin:0px auto 10px auto; display: inherit;}

.content-producten {margin-bottom:30px;}
.content-producten:last-child {margin-bottom:0px;}

#pre-footer {margin-top:20px; margin-bottom:20px;}
#pre-footer #beter-leven {margin-left:0px; margin-bottom:10px; margin-top:10px; float:none;}
#pre-footer h4, #pre-footer h5 {text-align: center;} 

#footer #left, #footer #right {text-align: center; width:100%; margin-bottom:10px;}

}


@media (max-width: 420px) {

.quote-container-small{background-size: 280px; width:100%; margin-top:-130px;}
.quote-container-small h2 {padding-top:40px;}
#content {top:-40px;}	

}


@media print {

.do-not-print { display: none; }
#comments { page-break-before: always; }

body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 19pt; }
h2 { font-size:17pt; }
h3 { font-size:15pt; }
h4,h5,h6 { font-size:12pt; }
code { font: 10pt Courier, monospace; } 
blockquote { margin: 1.3em; padding: 1em; }
img { display: block; margin: 1em 0; }
a img { border: none; }
table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th, td { padding: 4px 10px 4px 0; }
caption { background: #fff; margin-bottom: 2em; text-align: left; }
thead { display: table-header-group; }
tr { page-break-inside: avoid; } 
a { text-decoration: none; color: black; }
	
} /* END print media */