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

/*
-------- colors ---------
white:			rgb(255, 255, 255)
black:			rgb(23, 23, 23)
greyMid:		rgb(52, 49, 42)
greyLight:		rgb(226, 226, 226)

blue:			rgb(23, 74, 124)
orange_hard:	rgb(243, 144, 29)
orange_mid:		rgb(249, 184, 116)
orange_light:	rgb(253, 217, 179)
*/

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

body { font-family: 'Source Sans Pro'; font-size: 16px; font-weight: 400; color: rgb(52, 49, 42); background-color: rgba(23, 74, 124, 0.2); overflow-x: hidden; }
div.wrapper { position: relative; width: 1120px; margin: 0 auto; }
.menu-active  { position: fixed; }

h1 { font-size: 36px; font-weight: 600; line-height: 1.5em; }
h2 { font-size: 36px; font-weight: 600; line-height: 1.5em; }
h3 {  }
h4 {  }
h5 {  }
h6 { }
p { padding: 10px 0; font-size: 15px; line-height: 1.7em; }


/* 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: 150; top: 0; right: -280px; -webkit-overflow-scrolling: touch; transition: 0.3s right; }
div#mobilemenu ul { list-style-type: none; }
div#mobilemenu>div>ul { padding: 20px 20px 20vh 20px; margin-top: 40px; text-align: left; }
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: 400; font-size: 14px; color: rgb(255, 255, 255); transition: 0.3s color; }
div#mobilemenu a:hover { color: rgb(243, 144, 29); }
div#mobilemenu li ul li { padding: 5px 0; border: none; }
div#mobilemenu li ul a { padding-left: 10px; font-weight: 400; font-size: 13px; 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#top { box-sizing: border-box; padding: 20px 0; background-color: rgb(255, 255, 255); border-top: 15px solid rgb(23, 74, 124); }
section#top div.top_holder { overflow: auto; }
section#top div.cta { float: left; width: 34%; padding-top: 8px; }
section#top div.cta a { text-decoration: none; color: rgb(23, 74, 124); font-size: 17px; font-weight: 600; transition: 0.2s color; }
section#top div.cta a:hover { color: rgb(249, 184, 116); }
section#top div.cta a span { color: rgb(240, 138, 0); margin-right: 10px; }
section#top div.logo { float: left; width: 33%; }
section#top div.quick_nav { float: left; width: 33%; padding-top: 8px; }
section#top div.quick_nav ul { list-style-type: none; text-align: right; }
section#top div.quick_nav li { display: inline-block; margin: 0 10px; }
section#top div.quick_nav a { font-size: 17px; font-weight: 600; text-decoration: none; color: rgb(23, 74, 124); transition: 0.2s color; }
section#top div.quick_nav a:hover { color: rgb(249, 184, 116); }
section#top div.hamburger { display: none; z-index: 300; position: relative; /*bottom: 110px;*/ float: right; width: 24px; height: 24px; cursor: pointer; padding: 6px; border: 2px solid rgb(255, 255, 255); border-radius: 5px; background-color: rgb(23, 74, 124); transition: 0.3s all; }
section#top div.hamburger:hover { background-color: rgb(243, 144, 29); }
section#top div.hamburger svg { display: block; position: relative; top: 50%; transform: translateY(-50%); }


section#topnav { padding: 30px 0 10px 0; }
section#topnav div.topnav_holder {  }
section#topnav div.topnav {  }
section#topnav div.topnav ul { list-style-type: none; }
section#topnav div.topnav li {  display: inline-block; margin-right: 20px; }
section#topnav div.topnav a { font-size: 15px; font-weight: 600;  text-decoration: none; color: rgb(23, 74, 124); transition: 0.2s color; }
section#topnav div.topnav a:hover { color: rgb(243, 144, 29); }


/* slider styling */
section#slider { position: relative; padding: 20px 0; }
section#slider div.slider     { width: 100%; height: 400px; position: relative; overflow: hidden; border-radius: 4px; }
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_headline { position: relative; bottom: 120px; margin-bottom: -70px; z-index: 100; }
section#slider div.slide_headline h1 { position: relative; margin-left: 50px; color: rgb(255, 255, 255); text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.53); }
section#slider div.slide_headline h1:before { position: absolute; content: ""; background-color: rgb(243, 144, 29);  height: 4px; width: 60px; bottom: 0; display: block;  }


/* visual styling */
section#visual { position: relative; padding: 20px 0; }
section#visual div.visual     { width: 100%; height: 250px; position: relative; overflow: hidden; border-radius: 4px; }
section#visual div.visual>div { width: 100%; height: 100%; position: absolute;
    background-position: center center; background-size: cover; background-repeat: no-repeat; }
section#visual div.visual_headline { position: relative; bottom: 120px; margin-bottom: -70px; z-index: 100; }
section#visual div.visual_headline h1 { position: relative; margin-left: 50px; color: rgb(255, 255, 255); text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.53); }
section#visual div.visual_headline h1:before { position: absolute; content: ""; background-color: rgb(243, 144, 29); height: 4px; width: 60px; bottom: 0; display: block; }


section#intro { padding: 30px 0; }
section#intro div.intro_holder { overflow: auto; }
section#intro div.main { float: left; width: 65%; padding-left: 50px; box-sizing: border-box; }
section#intro div.main p { font-size: 24px; font-weight: 300; }
section#intro a { color: rgb(23, 74, 124); text-decoration: none; }
section#intro a:hover { text-decoration: underline; }
section#intro a:visited { }
section#intro div.side { float: right; width: 30%; box-sizing: border-box; padding-right: 70px; }
section#intro div.side a.readmore { position: relative; display: block; box-sizing: border-box; padding: 13px 8px; width: 250px; font-size: 18px; font-weight: 600; border-radius: 4px; text-decoration: none; margin: 15px 0 15px auto; transition: 0.2s background-color, 0.2s color; }
section#intro div.side a.readmore:after { position: absolute; left: 90%; top: calc(37% + 0px); content: '\f101'; font-family: 'FontAwesome'; font-size: 18px; color: rgb(255, 255, 255); transition: 0.2s color }
section#intro div.side a.readmore:first-child { background-color: rgb(23, 74, 124); color: rgb(255, 255, 255); border: 2px solid rgb(23, 74, 124); }
section#intro div.side a.readmore:first-child:hover { background-color: transparent; color: rgb(23, 74, 124); }
section#intro div.side a.readmore:first-child:hover:after { color: rgb(23, 74, 124); }

section#intro div.intro_next { width: 100%; padding: 0 70px 0 50px; box-sizing: border-box; }
section#intro div.intro_next p { font-size: 24px; font-weight: 300; }
section#intro div.intro_next ul { padding-left: 40px; }
section#intro div.intro_next li { font-size: 20px; font-weight: 300; line-height: 1.8em; }


section#services { padding: 40px 0 60px 0; background-color: rgb(255, 255, 255); }
section#services div.services_holder {  }
section#services div.row { padding: 20px 50px; overflow: auto; }
section#services div.col { box-sizing: border-box; }
section#services div.row:first-child div.col:first-child { float: left; width: calc(100% / 3); }
section#services div.row:first-child div.col:last-child { float: right; width: calc(200% / 3); }
section#services div.row:first-child div.col:last-child p { font-size: 20px; font-weight: 300; }
section#services div.row div.service_item { float: left; width: calc((100% / 2) - 20px); padding-right: 20px;  }
section#services div.row div.service_visual { width: 100%; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 4px solid rgb(240, 138, 0); }
section#services div.row div.service_content { padding: 0 15px; border-left: 1px solid rgb(226, 226, 226); border-right: 1px solid rgb(226, 226, 226); }
section#services div.row div.readmore { padding: 25px 15px 0 15px; border-bottom: 1px solid rgb(226, 226, 226); border-left: 1px solid rgb(226, 226, 226); border-right: 1px solid rgb(226, 226, 226); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; text-align: right; }
section#services div.row div.readmore a.readmore { display: inline-block; text-decoration: none; font-size: 16px; font-weight: 400; color: rgb(23, 74, 124); line-height: 32px; }
section#services div.row div.readmore a.readmore:hover { text-decoration: underline; }


section#news { padding: 40px 0; }
section#news div.news_holder { }
section#news div.row { padding: 20px 50px; overflow: auto;  }
section#news div.col:first-child { float: left; width: calc((100% / 3) - 20px); }
section#news div.col:first-child p { font-size: 20px; font-weight: 300; }
section#news div.col:last-child { float: right; width: calc(200% / 3); }
section#news div.col:last-child ul { display: table; list-style-type: none; padding-top: 10px; }
section#news div.col:last-child li { display: table-row; line-height: 2.4em; }
section#news div.col:last-child li:before { display: table-cell; content: '\f101'; font-family: 'FontAwesome'; font-size: 18px; font-weight: 300; color: rgb(52, 49, 42); padding-right: 15px; }
section#news div.col:last-child a { position: relative; display: inline-block; font-size: 18px; font-weight: 600; text-decoration: none; color: rgb(52, 49, 42); transition: 0.2s color; }
section#news div.col:last-child a:hover { color: rgb(243, 144, 29); }

section#contact_form { padding: 0 0 70px 0; }
section#contact_form div.contact_form_holder {  }
section#contact_form form {  }
section#contact_form div.row { overflow: auto; background-color: rgb(255, 255, 255); padding: 30px 0;
	border-radius: 4px; border-top: 2px solid rgb(226, 226, 226);  }
section#contact_form div.row h2 { padding-left: 50px; color: rgb(23, 74, 124); }
section#contact_form div.col { float: left; width: calc(50% - 20px); padding-right: 20px; }
section#contact_form div.form_row { overflow : auto; padding: 6px 0; }
section#contact_form div.form_label { float: left; text-align: right; width: 150px; font-size: 17px; font-weight: 400; line-height: 34px; }
section#contact_form div.form_field { float: right; width: calc(100% - 175px); }
section#contact_form input[type=text] { font-family: 'Source Sans Pro'; font-size: 17px; font-weight: 300; line-height: 34px; border-radius: 4px; border: 1px solid rgb(226, 226, 226); width: 90%; color: rgb(52, 49, 42); box-sizing: border-box; padding: 0 10px; -webkit-appearance: none; }
section#contact_form textarea { font-family: 'Source Sans Pro'; font-size: 17px; font-weight: 300; line-height: 24px; border-radius: 4px; border: 1px solid rgb(226, 226, 226); resize: none; width: 90%; height: 323px; box-sizing: border-box; padding: 5px 10px; -webkit-appearance: none; }
section#contact_form input[type=submit] { font-family: 'Source Sans Pro'; background-color: rgb(243, 144, 29); color: rgb(255, 255, 255); border: 2px solid rgb(243, 144, 29); font-size: 18px; font-weight: 400; border-radius: 4px; padding: 13px 26px; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; transition: 0.2s background-color, 0.2s color; }
section#contact_form input[type=submit]:hover { background-color: transparent; color: rgb(243, 144, 29); }


section#footer { padding: 40px 0; background-color: rgb(23, 74, 124); color: rgb(255, 255, 255); border-top: 1px solid rgb(240, 138, 0); }
section#footer div.footer_holder {  }
section#footer div.row { padding: 20px 50px; overflow: auto; }
section#footer div.row:first-child {  }
section#footer div.row:first-child div.col { float: left; width: calc(100% / 3); }
section#footer div.row:first-child p { padding: 0; font-size: 15px font-weight: 300; }
section#footer div.row:first-child a { color: rgb(255, 255, 255); text-decoration: none; }
section#footer div.row:first-child a:hover { text-decoration: underline; }

section#footer div.row:last-child { text-align: right; }
section#footer div.row:last-child a { font-size: 13px; font-weight: 300; text-decoration: none; color: rgb(255, 255, 255) }
section#footer div.row:last-child a:hover { text-decoration: underline; }


/* @media queries */
@media screen and (max-width: 1170px) {
	div.wrapper { width: 90%; }
	section#top div.quick_nav { display : none; }
	section#top div.logo { margin: 0 auto; }
	section#top div.hamburger { display: block; }
	section#topnav { display: none; }
	section#slider { padding: 60px 0 20px 0; }
	section#slider div.slide_headline { bottom: 200px; height: 0; }
	section#visual div.visual_headline { bottom: 160px; height: 0; }
	section#intro { margin-top: 70px; }
	section#intro div.main { width: calc(100% - 300px); padding-left: 0;  }
	section#intro div.side { width: 250px; padding-right: 0; }
	section#intro div.side a.readmore { width: 100%; margin: 15px 0 15px auto; }
	section#intro div.intro_next { width: 100%; padding: 0 70px 0 0; }
	section#content_detail div.content_detail_holder { padding: 0; }
	section#contact_form div.col:last-child div.form_label { width: 80px; }
	section#contact_form div.col:last-child div.form_field { width: calc(100% - 100px); }
	section#services div.row { padding: 10px 0; }
	section#news div.row { padding: 20px 0; }
	section#footer div.row { padding: 20px 0; }
}


@media screen and (max-width: 1080px) {
	section#services div.row:last-child div.service_item { width: calc((100% / 2) - 20px); min-height: 480px;}
}


@media screen and (max-width: 850px) {
	h1 { font-size: 36px; }
	h2 { font-size: 28px; }
	section#slider div.slider { height: 280px; }
	section#slider div.slide_headline { bottom: 160px; }
	section#visual div.visual { height: 220px; }
	section#visual div.visual_headline { bottom: 130px; }
	section#intro div.main p { font-size: 20px; }
	section#intro div.intro_next p { font-size: 20px; }
	section#intro div.intro_next li { font-size: 18px; }

	section#content_detail div.content_detail_holder p { font-size: 16px; }

	section#contact_form div.form_label { font-size: 15px; line-height: 30px; }
	section#contact_form input[type=text] { font-size: 15px; line-height: 30px; width: 100%; padding: 0 10px; }
	section#contact_form textarea { font-size: 15px; line-height: 20px; width: 100%; height: 323px; padding: 5px 10px; }
	section#contact_form input[type=submit] { font-size: 15px; padding: 8px 16px; }

	section#services div.row:first-child div.col:first-child { float: none; width: 100%; }
	section#services div.row:first-child div.col:last-child { float: none; width: 100%; }
	section#services div.row:first-child div.col:last-child p { font-size: 16px; }
	section#news div.col:first-child { float: none; width: 100%; }
	section#news div.col:last-child { float: none; width: 100%; }
	section#news div.col:first-child p { font-size: 16px; }
	section#news div.col:last-child ul { border-spacing: 0 8px; }
	section#news div.col:last-child li { line-height: 1.5em;  }
	section#news div.col:last-child a { font-size: 15px; font-weight: 300; }
	section#news div.col:last-child li:before { font-size: 15px; padding-right: 10px; }
	section#footer div.row:first-child div.col { width: calc((100% / 2) - 20px); padding-right: 20px; }
}

@media screen and (max-width: 800px) {
	section#top div.cta { display: none; }
	section#top div.logo { width: 240px; }
}

@media screen and (max-width: 780px) {
	section#intro div.main { float: none; width: 100% ; }
	section#intro div.side { float: none; width: 100%; }
	section#intro div.side a.readmore { width: 250px; margin: 15px 0; }
	section#intro div.side.contact_page	{ text-align: center; }
}

@media screen and (max-width: 750px) {
	section#contact_form div.col { float: none; width: 100%; padding-right: 0; }
	section#contact_form div.form_row { width: 100%; box-sizing: border-box; padding: 6px 50px; }
	section#contact_form div.form_label { width: 120px; text-align: left; }
	section#contact_form div.form_field { width: calc(100% - 150px); }
	section#contact_form div.col:last-child div.form_label { width: 120px; }
	section#contact_form div.col:last-child div.form_field { width: calc(100% - 150px); }
	section#contact_form textarea { height: 180px; }
}

@media screen and (max-width: 700px) {
	section#intro div.main { float: none; width: 100%; padding-left: 0; }
	section#intro div.side { display: none; }
}

@media screen and (max-width: 650px) {
	section#services div.row:last-child div.service_item { min-height: 520px;}
	section#footer div.row:first-child p { font-weight: 300; }
	section#footer div.row:first-child ul a { font-weight: 300; line-height: 1.7em; }
}

@media screen and (max-width: 550px) {
	body { font-size: 15px; font-weight: 300; }
	h1 { font-size: 30px; line-height: 1.3em; }
	h2 { font-size: 24px; }
	section#slider { padding: 30px 0 20px 0; }
	section#slider div.slider { height: 220px; }
	section#slider div.slide_headline { bottom: 140px; }
	section#visual div.visual { height: 180px; }
	section#visual div.visual_headline { bottom: 110px; }
	section#intro { margin-top: 40px; padding: 20px 0; }
	section#intro div.main p { font-size: 15px; }
	section#intro div.side a.readmore { padding: 8px 8px; width: 200px; font-size: 15px; font-weight: 400; }
	section#intro div.side a.readmore:after { top: calc(32% + 0px); font-size: 15px; }

	section#intro div.intro_next p { font-size: 15px; }
	section#intro div.intro_next ul { padding-left: 20px; }
	section#intro div.intro_next li { font-size: 13px; }

	section#content_detail div.content_detail_holder p { font-size: 15px; }

	section#content_detail { padding: 0 0 20px 0; }

	section#contact_form div.row h2 { padding-left: 20px; }
	section#contact_form div.form_row { padding: 3px 20px; }
	section#contact_form div.form_label { float: none; width: 100%; padding-left: 10px; }
	section#contact_form div.form_field { float: none; width: 100%; }
	section#contact_form div.col:last-child div.form_label { width: 100%; }
	section#contact_form div.col:last-child div.form_field { width: 100%; }
	section#contact_form div.col:last-child div.form_row:last-child div.form_label { display: none; }
	section#contact_form input[type=submit] { margin-top: 10px; }

	section#services { padding: 20px 0; }
	section#services div.row { padding: 0; }
	section#services div.row:first-child div.col:last-child p { font-size: 15px; }

	section#services div.row:last-child div.service_item { width: 100%; padding: 0; margin: 10px 0; min-height: 0;}
	section#services div.row:last-child div.service_visual { height: 160px; }
	section#services div.row:last-child div.service_content p:first-child { margin-top: 10px; }
	section#services div.row:last-child div.service_content p { padding: 0; }
	section#services div.row:last-child div.readmore { padding: 10px 15px 10px 15px; text-align: left; }
	section#services div.row:last-child div.readmore a.readmore { font-size: 15px; line-height: 2em; }
	section#services div.row:last-child div.readmore a.readmore:after { font-size: 15px; padding: 6px 8px; line-height: 1em; }
	section#news { padding: 20px 0; }
	section#footer { padding: 20px 0; }
}

@media screen and (max-width: 450px) {
	h1 { font-size: 26px; line-height: 1.3em; }
	h2 { font-size: 22px; }

	section#top div.hamburger { width: 18px; height: 18px; padding: 6px; border: 2px solid rgb(255, 255, 255); }

	section#slider div.slide_headline { text-align: center; }
	section#slider div.slide_headline h1 { margin-left: 0; }
	section#slider div.slide_headline h1:before { transform: translateX(-50%); left: 50%; }

	section#visual div.visual { height: 160px; }
	section#visual div.visual_headline { bottom: 100px; text-align: center; }
	section#visual div.visual_headline h1 { margin-left: 0; }
	section#visual div.visual_headline h1:before { transform: translateX(-50%); left: 50%; }

	section#contact_form { padding: 0 0 30px 0; }

	section#footer div.row:first-child div.col { float: none; width: 100%; padding-right: 0; }
	section#footer div.row:first-child div.col:first-child { padding-bottom: 15px; }
	section#footer div.row:first-child span.spacer { height: 15px; }
	section#footer div.row:last-child { text-align: center; }
	section#footer div.row:last-child a { box-sizing: border-box; width: 100%; }
}