/* 
Theme Name: GoedBerekend 
Author: Monsterbrands 
Author URI: http://www.monsterbrands.nl
Version: 1.0
*/ 


/*
-------- colors ---------
green:			rgb(122, 193, 67)
orange: 		rgb(251, 176, 64)
white:			rgb(255, 255, 255)
black:			rgb(23, 23, 23)
greyMid:		rgb(148, 156, 161)
greyLight:		rgb(242, 242, 242)
*/

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

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

h1 { font-size: 40px; font-weight: 700; line-height: 1.3em; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.3em; }
h3 { font-size: 32px; font-weight: 700; line-height: 1.8em; }
h4 {  }
h5 {  }
h6 { font-size: 16px; font-weight: 300; }
p { padding: 10px 0; font-size: 15px; line-height: 2em; }

/* 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: 20px 20px 20vh 20px; margin-top: 80px; 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: 16px; color: rgb(255, 255, 255); transition: 0.3s color; }
div#mobilemenu a:hover { color: rgb(251, 176, 64); }
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#top { padding: 30px 0; background-color: rgb(255, 255, 255); border-top: 8px solid rgb(251, 176, 64); }
section#top div.top_holder { overflow: auto; }
section#top div.logo { float: left; width: 300px; }
section#top div.hamburger { display: none; }


section#topnav { padding:  20px 0; background-color: rgb(122, 193, 67); }
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: 0 15px; }
section#topnav div.topnav a { color: rgb(255, 255, 255); text-decoration: none; text-transform: uppercase; font-size: 15px; font-weight: 500; }
section#topnav div.topnav a:hover { text-decoration: underline; }

/* page visual styling */
section#visual { height: 400px; position: relative; border-bottom: 8px solid rgb(122, 193, 67); }
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; } 

/* flat visual styling */
section#visual_flat { height: 250px; position: relative; border-bottom: 8px solid rgb(122, 193, 67); }
section#visual_flat div.visual_flat     { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#visual_flat div.visual_flat>div { width: 100%; height: 100%; position: absolute; 
    background-position: center center; background-size: cover; background-repeat: no-repeat; } 


section#cta { position: relative; }
section#cta div.cta { position: absolute; bottom: -80px; right: 10%; background-color: rgb(251, 176, 64); width: 300px; height: 300px; border-radius: 50%; text-align: center; }
section#cta div.cta span { display: inline-block; font-size: 70px; color: rgb(255, 255, 255); padding: 50px 0 15px 0; }
section#cta div.cta div.cta_text { font-size: 24px; color: rgb(255, 255, 255); text-transform: uppercase; }
section#cta div.cta a.readmore { display: inline-block; text-decoration: none; padding: 13px; background-color: rgb(255, 255, 255); color: rgb(122, 193, 67); text-transform: uppercase; font-size: 16px; font-weight: 500; margin-top: 20px; border: 2px solid rgb(255, 255, 255); transition: 0.3s background-color, 0.3s color; }
section#cta div.cta a.readmore:hover { color: rgb(255, 255, 255); background-color: rgb(122, 193, 67); }



section#content { padding: 90px 0; }
section#content div.content_holder { text-align: left; margin: 0 auto; }
section#content div.content_holder h1 { color: rgb(122, 193, 67); }
section#content div.content_holder h2 { color: rgb(251, 176, 64); }
section#content div.content_holder ul { padding: 10px 0 10px 30px;  }
section#content div.content_holder li { padding-left: 15px; font-size: 15px; line-height: 1.9em; font-style: italic; }
section#content div.contact_holder { padding: 30px 0; overflow: auto; text-align: left; }
section#content div.contact_holder form {  }
section#content div.contact_holder div.form_row { overflow: auto; padding: 6px 0; }
section#content div.contact_holder div.form_label { float: left; width: 150px; line-height: 2em; }
section#content div.contact_holder div.form_field { float: left; } 
section#content div.contact_holder input[type=text],
section#content div.contact_holder input[type=email]{ width: 300px; box-sizing: border-box; font-family: 'Montserrat'; font-size: 16px; font-weight: 400; line-height: 2em; border: 1px solid rgb(122, 193, 67); padding: 0px 8px; color: rgb(102, 102, 102); -webkit-appearance: none; }
section#content div.contact_holder textarea { resize: none; width: 300px; height: 200px; box-sizing: border-box; font-family: 'Montserrat'; font-size: 16px; font-weight: 400; border: 1px solid rgb(122, 193, 67); line-height: 1.5em; padding: 4px 8px; color: rgb(102, 102, 102); -webkit-appearance: none; }
section#content div.contact_holder input[type=submit] { font-family: 'Montserrat'; font-size: 16px; font-weight: 400; background-color: rgb(122, 193, 67); color: rgb(255, 255, 255); border: 0; padding: 6px 12px; cursor: pointer; -webkit-appearance: none; }	
section#content div.contact_holder input[type=submit]:hover { background-color: rgb(251, 176, 64); }


section#benefits { padding: 60px 0; background-color: rgb(122, 193, 67); }
section#benefits div.benefits_holder { overflow: auto; }
section#benefits div.benefits_holder h3 { text-align: center; color: rgb(255, 255, 255); }
section#benefits div.col { float: left; width: 50%; }
section#benefits div.box { width: 70%; margin: 0 auto; }
section#benefits div.box ul { display: table; list-style-type: none; border-spacing: 0 25px; }
section#benefits div.box li { display: table-row;  line-height: 1.6em; color: rgb(255, 255, 255); }
section#benefits div.box li:before { display: table-cell; content: '\f00c'; font-family: 'FontAwesome'; font-size: 24px; color: rgb(255, 255, 255); padding-right: 15px; }


section#footer { padding: 30px 0; background-color: rgb(242, 242, 242); }
section#footer div.footer_holder { overflow: auto; }
section#footer div.col {   }
section#footer div.col:first-child { float: left; width: 50%; }
section#footer div.col:last-child { float: right; width: 25%; }
section#footer div.box { width: 100%; margin: 0 auto; }
section#footer div.box p { padding: 0; color: rgb(102, 102, 102); font-size: 13px; line-height: 2.5em; }
section#footer div.col:first-child a { color: rgb(34, 34, 34); text-decoration: none; }
section#footer div.col:first-child a:hover { text-decoration: underline; }
section#footer div.col:last-child div.box ul { list-style-type: none; }
section#footer div.col:last-childdiv.box li { border-bottom: 1px solid rgba(102, 102, 102, 0.2);  }
section#footer div.col:last-child div.box li:last-child { border-bottom: none; }
section#footer div.col:last-child div.box:last-child a { color: rgb(102, 102, 102); font-size: 13px; text-decoration: none; line-height: 2.5em; text-transform: uppercase; transition: 0.3s color; }
section#footer div.col:last-child div.box:last-child a:hover { color: rgb(23, 23, 23); }


section#credits { padding: 15px 0; background-color: rgb(251, 176, 64); }
section#credits div.credits_holder { text-align: right; }
section#credits a { color: rgb(255, 255, 255); text-decoration: none; font-size: 11px; font-weight: 700; }
section#credits a:hover {  }



/* @media queries */
@media screen and (max-width: 1160px) {	
	div.wrapper { width: 90%; }
}

@media screen and (max-width: 850px) {	
	section#visual { height: 300px; }
	section#visual_flat { height: 220px; }
	section#cta div.cta { bottom: -20px; right: 10%; width: 220px; height: 220px; }
	section#cta div.cta span { font-size: 48px; padding: 20px 0 15px 0; }
	section#cta div.cta div.cta_text { font-size: 18px; }
	section#cta div.cta a.readmore { padding: 6px; font-size: 14px; margin-top: 20px; }	
}

@media screen and (max-width: 800px) {	
	body { font-size: 14px; }
	h1 { font-size: 28px; }
	h2 { font-size: 28px; }
	h3 { font-size: 20px; }
	section#content { padding: 40px 0; }	
	section#content div.contact_holder input[type=text] { font-size: 14px; }
	section#content div.contact_holder textarea { font-size: 14px; }
	section#content div.contact_holder input[type=submit] { font-size: 14px; }	
}

@media screen and (max-width: 700px) {
	section#content div.contact_holder div.form_row { padding: 0; }	
	section#content div.contact_holder div.form_label { float: none; width: 100%; }
	section#content div.contact_holder div.form_field { float: none; } 
}

@media screen and (max-width: 650px) {
	section#top div.logo { float: left; width: 320px; margin: 0; }
	section#top div.hamburger { float: right; z-index: 300; position: relative; top: 0px; display: block; width: 16px; height: 16px; cursor: pointer; padding: 6px; border: 2px solid rgb(255, 255, 255); border-radius: 5px; background-color: rgb(122, 193, 67); transition: 0.3s all; }
	section#top div.hamburger:hover { background-color: rgb(251, 176, 64); }
	section#topnav div.topnav_holder { display: none; }	
	section#visual { height: 280px; }
	section#visual_flat { height: 200px; }
	section#cta div.cta { bottom: 50px; transform: translateX(50%); right: 50%; width: 180px; height: 180px; }
	section#cta div.cta span { font-size: 32px; padding: 20px 0 15px 0; }
	section#cta div.cta div.cta_text { font-size: 14px; }
	section#cta div.cta a.readmore { padding: 4px; font-size: 13px; margin-top: 10px; }
	section#footer div.col:first-child,
	section#footer div.col:last-child { float: none !important; width: 100% !important; padding: 10px 0; }
	section#footer div.box { width: 100%; margin: 0 auto; }
}

@media screen and (max-width: 550px) {
	section#benefits div.col { float: none; width: 100%; }
}

@media screen and (max-width: 475px) {
	section#top div.logo { width: 240px; }	
	section#content div.content_holder { width: 100%; }
	section#content div.contact_holder input[type=text] { width: 100%; }
	section#content div.contact_holder textarea { width: 100%; }
}


@media screen and (max-width: 400px) {
	h1 { font-size: 22px; }
	h2 { font-size: 19px; }
	h3 { font-size: 17px; }
	p { padding: 10px 0; font-size: 14px; }	
	section#visual { height: 220px; }
	section#visual_flat { height: 180px; }
	section#cta div.cta { bottom: 15px; }
}

@media screen and (max-width: 375px) {
	div#mobilemenu div.menu-topnav-container>ul { margin-top: 70px; }
	section#top { padding: 15px 0; }
	section#top div.logo { width: 220px; }	
}