/*
Theme Name: hansversteeg.nl
Author: Monsterbrands
Author URI: https://www.monsterbrands.nl
Version: 1.0
*/

/*
-------- colors ---------
black:			rgb(0, 0, 0)
white:			rgb(255, 255, 255)
blueDark:		rgb(0, 58, 121)
blueLight:		rgb(215, 218, 233)
greyMid:		rgb(41, 50, 55)
*/

* { margin: 0; padding: 0; outline: 0; }
img { display: block; max-width: 100%; height: auto; }

body { font-family: 'Nobile'; font-size: 14px; font-weight: 400; color: rgb(52, 52, 52); /* overflow-x: hidden; */ }
div.wrapper { position: relative; width: 1120px; margin: 0 auto; }
.menu-active  { position: fixed; }

h1 { font-size: 42px; font-weight: 400; line-height: 1.3em; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 400; font-style: italic; line-height: 1.5em; padding: 15px 0; }
h4 {  }
h5 { font-size: 15px; font-weight: 700; }
h6 { font-size: 13px; font-weight: 700; }
p  { padding: 10px 0; line-height: 1.8em; }


/* top section styling */
section#top { padding: 20px 0; background-color: rgb(255, 255, 255); border-top: 20px solid rgb(41, 50, 55); }
section#top div.top_holder { overflow: auto; }
section#top div.logo { float: left; width: 220px; }
section#top div.topnav { float: right; }
section#top div.topnav ul { list-style-type: none; background-color: rgb(0, 58, 121); padding: 20px 0; }
section#top div.topnav li { display: inline-block; margin: 0 20px; }
section#top div.topnav a { text-decoration: none; color: rgb(255, 255, 255); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
section#top div.topnav a:hover { text-decoration: underline; }

/* mobile menu styling */
div#mobilemenu { width: 280px; height: 100%; overflow-y: auto !important; background-color: rgba(48, 48, 48, 0.97); position: fixed; z-index: 50; top: 0; right: -280px; -webkit-overflow-scrolling: touch; transition: 0.3s right; }
div#mobilemenu ul { list-style-type: none; }
div#mobilemenu div.menu-topnav-container>ul { padding: 40px 20px 20vh 20px; margin-top: 35px; text-align: right; }
div#mobilemenu li { padding: 10px 0; border-top: solid 1px #444; }
div#mobilemenu li:first-child { border-top: none; }
div#mobilemenu a  { text-decoration: none; font-weight: 700; font-size: 13px; color: rgb(255, 255, 255); transition: 0.3s color; }
div#mobilemenu a:hover { color: rgb(215, 218, 233); }
div#mobilemenu li ul li { padding: 5px 0; border: none; }
div#mobilemenu li ul a { padding-left: 10px; font-weight: 400; font-size: 16px; font-style: italic; text-transform: none; }
div#mobilemenu li ul li ul a { padding-left: 30px; font-weight: 400; font-style: normal; text-transform: none; }


section#hamburger { padding: 6px 0; background-color: rgb(0, 58, 121); display: none; }
section#hamburger div.wrapper { overflow: auto; }
section#hamburger div.hamburger { z-index: 300; position: relative; float: right; width: 16px; height: 16px; cursor: pointer; padding: 6px; border: 2px solid rgb(255, 255, 255); border-radius: 5px; background-color: transparent; transition: 0.3s all; }
section#hamburger div.hamburger:hover { background-color: rgb(41, 50, 55); }
section#hamburger div.hamburger svg { display: block; position: relative; top: 50%; transform: translateY(-50%); }

/* slider section styling */
section#slider { height: 500px; position: relative; border-top: 20px solid rgb(0, 58, 121); border-bottom: 8px solid rgb(215, 218, 233); }
section#slider div.slider     { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#slider div.slider>div { width: 100%; height: 100%; position: absolute;
    background-position: center center; background-size: cover; background-repeat: no-repeat; }
section#slider div.slide_cta { width: 100%; height: 80%; top: 10%; position: absolute; z-index: 10; text-align: center; }
section#slider div.slide_cta_headline { width: 100%; line-height: 1.15em; font-size: 72px; font-weight: 700; color: rgb(255, 255, 255); text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); margin-top: 100px; }

/* page visual styling */
section#visual { height: 240px; position: relative; border-top: 20px solid rgb(0, 58, 121); border-bottom: 8px solid rgb(215, 218, 233); }
section#visual div.visual     { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#visual div.visual>div { width: 100%; height: 100%; position: absolute;
    background-position: center center; background-size: cover; background-repeat: no-repeat; }

/* content section styling */
section#content { padding: 40px 0; background-color: rgb(255, 255, 255); }
section#content div.content_holder { overflow: auto; }
section#content div.main { float: left; width: 65%; }
section#content div.main h1 { color: rgb(0, 58, 121); }
section#content div.main h3 { color: rgb(41, 50, 55); }
section#content div.main ul { padding: 10px 0 10px 25px; }
section#content div.main li { line-height: 1.8em; }
section#content div.main a { color:rgb(0, 58, 121); text-decoration: underline; }
section#content div.main a:hover { text-decoration: none; }


section#content div.contact_holder {  }
section#content div.contact_holder form {  }
section#content div.contact_holder div.form_row {  }
section#content div.contact_holder div.form_label { line-height: 2em; }
section#content div.contact_holder div.form_field {  }
section#content div.contact_holder input[type=text] { width: 280px; box-sizing: border-box; border: solid 1px rgb(166, 168, 171); font-family: 'Nobile'; font-size: 14px; line-height: 2em; padding: 0px 8px; -webkit-appearance: none;}
section#content div.contact_holder textarea { width: 280px; height: 150px; box-sizing: border-box; resize: none; border: solid 1px rgb(166, 168, 171); font-family: 'Nobile'; font-size: 14px; padding: 4px 8px; -webkit-appearance: none;}
section#content div.contact_holder input[type=submit] { cursor: pointer; border: 2px solid rgb(0, 58, 121); font-family: 'Nobile'; text-decoration: none; color: rgb(255, 255, 255); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 2px; background-color: rgb(0, 58, 121); padding: 12px 16px; transition: 0.3s background-color, 0.3s color; -webkit-appearance: none;}
section#content div.contact_holder input[type=submit]:hover { color: rgb(0, 58, 121); background-color: rgb(255, 255, 255); }



section#content div.side { float: right; width: 30%; }
section#content div.box { width: calc(100% - 6px); box-sizing: border-box; padding: 20px; margin-bottom: 20px; }
section#content div.box ul { list-style-type: none; padding: 10px 0; }
section#content div.box li { line-height: 2.5em; }
section#content div.box li:before { content: '\f00c'; font-family: 'FontAwesome'; font-size: 20px; display: inline-block; margin-right: 10px; color: rgb(0, 58, 121); }
section#content div.box.regular { background-color: rgb(255, 255, 255); border: 2px solid rgb(0, 58, 121); }
section#content div.box.regular h2 { color: rgb(0, 58, 121); }
section#content div.box.inverse { background-color: rgb(0, 58, 121); }
section#content div.box.inverse h2 { color: rgb(255, 255, 255); }
section#content div.box.inverse span { display: inline-block; font-size: 20px; }
section#content div.box.inverse h3 { display: inline-block; }
section#content div.box.inverse a { display: block;  background-color: transparent; color: rgb(255, 255, 255);  text-align: center; padding: 10px; margin: 10px 0 5px 0;  text-decoration: none; border: solid 2px rgb(255, 255, 255);  transition: 0.3s background-color, 0.3s color; }
section#content div.box.inverse a:hover {background-color: rgb(255, 255, 255); color: rgb(0, 58, 121);}


/* cta section styling */
section#cta { padding: 80px 0; background-color: rgb(0, 58, 121); border-top: 8px solid rgb(215, 218, 233);}
section#cta div.cta_holder { overflow: auto; }
section#cta div.col { float: left; width: calc(100% / 3); text-align: center; }
section#cta div.col h5 { color: rgb(255, 255, 255); margin-top: 20px; }
section#cta div.col img { width: 20%; display: inline-block; }


/* footer section styling */
section#footer { padding: 40px 0; background-color: rgb(41, 50, 55); color: rgb(255, 255, 255); }
section#footer div.footer_holder {  }
section#footer div.footer_holder div.row { overflow: auto; }
section#footer div.col { float: left; width: calc((100% / 4 ) - 20px); padding-right: 20px; }
section#footer div.col h6 { color: rgb(215, 218, 233); margin-bottom: 10px; }
section#footer div.col p { padding: 0; font-size: 13px; font-style: italic; }
section#footer div.col a { color: rgb(255, 255, 255); text-decoration: none; }
section#footer div.col a:hover { text-decoration: underline; }
section#footer div.col img { max-width: 100px; }


/* credits section styling */
section#credits { padding: 20px 0; background-color: rgb(0, 0, 0); }
section#credits div.credits_holder { text-align: center; }
section#credits a { font-size: 11px; font-weight: 700; font-style: italic; color: rgb(255, 255, 255); text-decoration: none; }
section#credits a:hover { text-decoration: underline; }


/* @media queries */
@media screen and (max-width: 1140px) {
	div.wrapper { width: 90%; }
	section#slider { height: 320px; }
	section#slider div.slide_cta_headline { font-size: 48px; margin-top: 60px; }
	section#visual { height: 220px; }
	section#content div.main { float: left; width: calc(100% - 340px); }
	section#content div.side { float: right; width: 320px; }
}

@media screen and (max-width: 850px) {
	section#top div.logo { float: none; margin: 30px auto 0 auto; }
	section#top div.topnav { float: none; text-align: center; }
}

@media screen and (max-width: 800px) {
	section#content div.main { float: none; width: 100%; }
	section#content div.side { float: none; width: 320px; margin: 10px auto; }
	section#content div.contact_holder { padding-bottom: 30px; }
	section#footer div.col { float: none; width: 100%; padding-right: 0; }
}

@media screen and (max-width: 600px) {
	h1 { font-size: 28px; }
	h3 { font-size: 16px; }
	h5 { font-size: 14px; }
	h6 { font-size: 13px; }
	section#hamburger { display: block; border-top: 10px solid rgb(41, 50, 55); }
	section#top { padding: 0; border-top: none; }
	section#top div.logo { width: 170px; margin: 10px auto; }
	section#top div.topnav { display: none; }
	section#slider { height: 240px; }
	section#slider div.slide_cta_headline { font-size: 32px; margin-top: 60px; }
	section#visual { height: 200px; }
}

@media screen and (max-width: 500px) {
	section#cta { padding: 0; }
	section#cta div.col { float: none; width: 180px; margin: 50px auto; }
}

@media screen and (max-width: 400px) {
	section#slider { height: 200px; }
	section#slider div.slide_cta_headline { font-size: 24px; margin-top: 40px; }
	section#visual { height: 160px; }
	section#content div.side { width: 90%; margin: 10px auto; }
	section#content div.side h2 { text-align: center; }
	section#content div.box li { line-height: 1.7em; font-size: 13px; }
	section#content div.contact_holder input[type=text] { width: 95%; font-size: 14px; }
	section#content div.contact_holder textarea { width: 95%; height: 150px; font-size: 14px; }
}