/* 
Theme Name: Accountability.nu
Theme URI: http://www.accountability.nu/
Author: internetbureau Monsterbrands 
Author URI: http://www.monsterbrands.nl/ 
Version: 1.0 
*/ 

/* 
-------- colors ---------
red: 			rgb(171, 6, 52)
bordeauxRed:	rgb(94, 13, 36)
lightGrey: 		rgb(240, 240, 240)
darkGrey: 		rgb(48, 48, 48)
*/

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

body { font-size: 14px; font-family: 'Lato'; font-weight: 400; overflow-x: hidden; }
div.wrapper { width: 960px; margin: 0 auto; }
.menu-active  { position: fixed; }

h1 { font-family: 'Source Sans Pro'; font-weight: 300; font-size: 36px; }
h2 { font-family: 'Source Sans Pro'; font-weight: 300; font-size: 28px; font-style: italic; }
h3 { font-family: 'Source Sans Pro'; font-weight: 700; font-size: 48px; }
h4 { font-family: 'Lato'; font-weight: 400; font-size: 20px; }
h5 { font-family: 'Source Sans Pro'; font-weight: 900; font-size: 16px; text-transform: uppercase;  }
h6 { font-family: 'Lato'; font-weight: 400; font-size: 16px; font-style: italic; }
p  { font-size: 14px; line-height: 1.5em; margin: 10px 0; }

/* 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-mobilenav-container>ul { padding: 20px 20px 20vh 20px; margin-top: 50px;  }
div#mobilemenu>ul { padding: 20px 20px 20vh 20px; margin-top: 50px;  }
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-family: 'Source Sans Pro'; font-weight: 900; font-size: 16px; text-transform: uppercase; color: rgb(255, 255, 255); transition: 0.2s color; }
div#mobilemenu a:hover { color: #CBEEED; }
div#mobilemenu li ul li { padding: 5px 0; border: none; }
div#mobilemenu li ul a { padding-left: 10px; font-family: 'Lato'; font-weight: 400; font-size: 16px; font-style: italic; text-transform: none; }
div#mobilemenu li ul li ul a { padding-left: 30px; font-family: 'Lato'; font-weight: 400; font-style: normal; text-transform: none; }  


section#topnav { padding: 5px 0 10px 0; background-color: rgb(171, 6, 52); }
section#topnav div.topnav_holder { overflow: auto; padding: 15px 0; position: relative; }
section#topnav div#call_us { position: relative; top: -2px; float: left; width: 180px; }
section#topnav div#call_us a#call_us_link { padding: 10px 12px; color: rgb(255, 255, 255); text-decoration: none; border: 2px solid rgb(255, 255, 255); border-radius: 8px; background-color: rgb(171, 6, 52); transition: 0.3s background-color; }
section#topnav div#call_us a#call_us_link:hover { background-color: rgb(94, 13, 36); }
section#topnav div#call_us img { position: relative; display: inline-block; width: 30px; top: 7px; padding-right: 6px; }
section#topnav div#topnav { float: right; } 
section#topnav div#topnav ul { list-style-type: none; }
section#topnav div#topnav li { display: inline-block; margin: 0 12px; }
section#topnav div#topnav a { font-family: 'Source Sans Pro'; font-weight: 900; font-size: 14px; text-transform: uppercase; text-decoration: none; color: rgb(255, 255, 255); padding: 5px 0 0 0; display: inline-block; border-top: 3px solid transparent; transition: 0.3s border; }
section#topnav div#topnav a:hover { border-top: 3px solid rgb(255, 255, 255); }

section#topnav div.hamburger { display: none; z-index: 300; position: relative; float: right; width: 25px; height: 25px; cursor: pointer; padding: 6px; border: 2px solid rgb(255, 255, 255); border-radius: 8px; background-color: transparent; transition: 0.3s all; }
section#topnav div.hamburger:hover { background-color: rgb(94, 13, 36);}	
section#topnav div.hamburger svg { display: block; position: relative; top: 50%; transform: translateY(-50%); }


section#top { padding: 20px 0; }
section#top div.top_holder { overflow: auto; } 
section#top div.logo { float: left; width: 300px; }
section#top div.rb { float: right; width: 120px; padding-top: 15px; }


section#slider { height: 300px; position: relative; }
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#visual { height: 200px; position: relative; }
section#visual div.wrapper { height: 100%; position: relative;  }
section#visual div.visual_holder     { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#visual div.visual_holder>div { width: 100%; height: 100%; position: absolute;
    background-position: center center; background-size: cover; background-repeat: no-repeat; } 


section#subnav { padding: 20px 0; color: rgb(255, 255, 255); }
section#subnav div.wrapper { padding: 10px; background-color: rgb(171, 6, 52); box-sizing: border-box; }
section#subnav h6 { display: inline-block; width: 50%; padding: 4px 0px; border-bottom: 2px solid rgb(255, 255, 255); }
section#subnav ul { list-style-type: none; text-align: center; padding: 12px 0 6px 0; }
section#subnav li { display: inline-block; margin: 10px 10px; }
section#subnav li:after { position: relative; content: '\25cf'; padding-left: 20px; }
section#subnav li:last-child:after { content: ''; }
section#subnav a { color: rgb(255, 255, 255); text-decoration: none; }
section#subnav a:hover { text-decoration: underline; }

section.separator { background-image: url('/images/separator_pattern.png'); background-repeat: repeat; 
	height: 18px; width: 100%; }

section#content { padding: 40px 0; } 
section#content div.content_holder { overflow: auto; } 
section#content div.left { float: left; width: calc(70% - 20px); padding-right: 20px; box-sizing: border-box; border-right: 2px solid rgb(240, 240, 240); }
section#content div.left a { text-decoration: none; color: rgb(171, 6, 52); font-style: italic; }
section#content div.left a:hover { text-decoration: underline; }
section#content div.left p { color: rgb(94, 13, 36); line-height: 2.0em; }
section#content div.left h5 { line-height: 2.5em; }
section#content div.right { float: right; width: 30%; padding-left: 20px; box-sizing: border-box; }
section#content div.special_services {  }
section#content div.service_item { padding: 15px 0; border-bottom: 2px solid rgb(240, 240, 240); }
section#content div.service_item:last-child { border: 0; }
section#content div.service_type { font-family: 'Source Sans Pro'; font-weight: 900; text-transform: uppercase;font-size: 13px; color: rgb(94, 13, 36); }
section#content div.service_info { font-size: 13px; line-height: 1.5em; }
section#content div.service_info { color: rgb(94, 13, 36); font-style: italic; }
section#content div.readmore { margin-top: 6px;  }
section#content div.readmore a { display: inline-block; font-size: 13px; font-weight: 700; text-decoration: none; padding: 3px 6px; color: rgb(94, 13, 36); border: 1px solid rgb(94, 13, 36); border-radius: 4px; transition: 0.3s color, 0.3s background-color; }
section#content div.readmore a:hover { color: rgb(255, 255, 255); background-color: rgb(94, 13, 36); }
section#content h1 { color: rgb(171, 6, 52); padding: 20px 0; }
section#content h5 { color: rgb(171, 6, 52); }
section#content h6 { color: rgb(171, 6, 52); padding: 4px 0px; border-bottom: 2px solid rgb(171, 6, 52); }
section#content ul { margin-left: 25px; padding: 5px 0 20px 0; }
section#content li { padding-left: 5px; line-height: 2em; color: rgb(94, 13, 36); font-size: 13px; font-style: italic; }
section#content div.call { margin: 20px 0; width: 100%; height: 300px; background-image: url('/images/accounting2_cropped.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; }
section#content div.contact_data { padding: 10px 0; }
section#content div.contact_data p { margin: 0; color: rgb(94, 13, 36); }
section#content div.contact_data a { color: rgb(94, 13, 36); text-decoration: none; }
section#content div.contact_data a:hover { text-decoration: underline; }
section#content div.contact_data div.maps {  }
section#content div.contact_data div.maps iframe { width: 100%; height: 300px; }

section#content table {  }
section#content tbody {  }
section#content tr:first-child { background-color: rgb(94, 13, 36); color: rgb(255, 255, 255); }
section#content tr:nth-child(even) { background-color: rgb(240, 240, 240) }
section#content td { padding: 4px 6px;  }
section#content td:first-child { width: 400px; }
section#content div.spacer { height: 10px; }

section#content div.contact_holder {  }
section#content div.form_row { overflow: auto; padding: 6px 0; }
section#content div.form_label { float: left; width: 150px; padding-right: 20px; color: rgb(94, 13, 36); line-height: 2em; } 
section#content div.form_field { float: left; width: calc( 100% - 170px); }
section#content input[type=text],
section#content input[type=email] { box-sizing: border-box; width: 300px; border: 1px solid rgb(94, 13, 36); line-height: 2em; padding: 0px 8px; font-family: 'Lato'; font-size: 14px; font-weight: 400; color: rgb(94, 13, 36); -webkit-appearance: none; }
section#content input:-webkit-autofill,
section#content input:-webkit-autofill:hover,
section#content input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px white inset; -webkit-text-fill-color: rgb(94, 13, 36); }
section#content textarea { resize: none; box-sizing: border-box; width: 300px; height: 150px; border: 1px solid rgb(94, 13, 36); padding: 4px 8px; font-family: 'Lato'; font-size: 14px; font-weight: 400; color: rgb(94, 13, 36); -webkit-appearance: none; }
section#content input[type=submit] { cursor: pointer; border: 0; font-family: 'Lato'; font-size: 13px; font-weight: 700; border-radius: 4px; background-color: rgb(94, 13, 36); color: rgb(255, 255, 255); padding: 5px 10px; -webkit-appearance: none; transition: 0.3s background-color; }
section#content input[type=submit]:hover { background-color: rgb(171, 6, 52); }

/* --- form validation styles --- */
.hp-field { position: absolute; left: -9999px; }
input.error, textarea.error { border: 2px solid rgb(171, 6, 52) !important; background-color: rgba(171, 6, 52, 0.1); }
.field-error { color: rgb(171, 6, 52); font-size: 14px; margin-top: 4px; min-height: 18px; }
.antispam-hint { min-height: auto; }
.antispam-hint .form_label { font-weight: 500; }
.antispam-code { display: inline-block; background-color: rgb(94, 13, 36); color: rgb(255, 255, 255);
	padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 15px; letter-spacing: 1px; }

/* --- toast notification --- */
.form-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
	background-color: rgb(255, 255, 255); border: 2px solid rgb(171, 6, 52); border-radius: 8px;
	padding: 16px 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 90%; box-sizing: border-box;
	opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.form-toast.show { opacity: 1; visibility: visible; }
.toast-content { display: flex; align-items: flex-start; gap: 12px; }
.toast-icon { font-size: 24px; color: rgb(171, 6, 52); flex-shrink: 0; line-height: 1; }
.toast-message { color: rgb(171, 6, 52); font-size: 16px; font-weight: 500; line-height: 1.4; word-wrap: break-word; } 

section#content div.news_overview {  }
section#content div.news_overview a.overview { font-style: normal; line-height: 2em; }
section#content div.news_overview a.overview:hover {  }
section#content div.news_overview span.date { margin-left: 4px; color: rgb(94, 13, 36); font-style: italic; font-size: 13px; }

section#news { padding: 30px 0 20px 0; background-color: rgb(48, 48, 48); }
section#news div.news_holder {  }
section#news h6 { display: inline-block; color: rgb(255, 255, 255); padding: 4px 0px; border-bottom: 2px solid rgb(255, 255, 255); }
section#news div.row { overflow: auto; padding: 20px 0; }
section#news div.news_item { float: left; width: calc((100% / 3) - 20px); padding: 0 10px 0 9px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
section#news div.news_date { font-size: 12px; color: rgba(255, 255, 255, 0.5); font-style: italic;  }
section#news div.news_headline { padding: 10px 0; }
section#news div.news_headline { color: rgb(255, 255, 255); }
section#news div.readmore {  }
section#news div.readmore a { display: inline-block; font-size: 13px; font-weight: 700; text-decoration: none; padding: 5px 10px;  color: rgb(255, 255, 255); background-color: rgb(94, 13, 36); border-radius: 4px; transition: 0.3s color, 0.3s background-color; } 
section#news div.readmore a:hover { background-color: rgb(171, 6, 52); } 


section#cta { padding: 40px 0; background-color: rgb(240, 240, 240); } 
section#cta div.cta_holder { text-align: center; } 
section#cta h4 { color: rgb(48, 48, 48); }
section#cta a.cta { font-weight: 700; margin-top: 20px; display: inline-block; padding: 15px; border-radius: 4px; text-decoration: none; background-color: rgb(94, 13, 36); color: rgb(255, 255, 255); transition: 0.3s background-color; }
section#cta a.cta:hover { background-color: rgb(171, 6, 52); }


section#cp { padding: 20px 0; background-color: rgb(94, 13, 36); color: rgb(255, 255, 255); text-align: center; }
section#cp div.cp_holder {  }
section#cp div.row { overflow: auto; width: 300px; margin: 0 auto; }
section#cp div.col { float: left; width: 50%; text-align: center; }
section#cp div.col:first-child { padding-top: 30px; }
section#cp img { display: inline-block; width: 80px; height: 80px; border-radius: 50%; border: 6px solid rgb(240, 240, 240); }

section#intro { padding: 20px 0; }
section#intro div.intro_holder { overflow: auto; }
section#intro div.col { float: left; width: calc((100% / 3) - 20px); padding-right: 20px; }
section#intro h5 { color: rgb(171, 6, 52); padding: 4px 0; }
section#intro ul { list-style-type: none; }
section#intro li { line-height: 1.5em; }
section#intro li:before {  }
section#intro a { text-decoration: none; color: rgb(94, 13, 36);}
section#intro a:hover { text-decoration: underline; color: rgb(171, 6, 52); }


section#footer { padding: 40px 0; background-color: rgb(171, 6, 52); color: rgb(255, 255, 255); } 
section#footer div.footer_holder {  } 
section#footer div.row { overflow: auto; }
section#footer div.row:first-child { padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
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 { padding: 20px 0; text-align: right; }
section#footer div.row:last-child a { font-size: 13px; font-style: italic; display: inline-block; padding: 12px 24px; background-color: rgba(255, 255, 255, 0.15); color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; transition: 0.3s background-color; }
section#footer div.row:last-child a:hover { background-color: rgb(94, 13, 36); }
section#footer div.col:first-child { float: left; width: 300px; }
section#footer div.col:last-child { float: right; width: 240px; }
section#footer p { margin: 0; }
section#footer h5 { margin-top: 10px; }



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

@media screen and (max-width: 960px) {
	section#topnav div#topnav { display: none; }
	section#topnav div.hamburger { display: block; }
	section#subnav { display: none; }
	section#topnav div#call_us { top: 2px; }
}

@media screen and (max-width: 850px) {
	section#slider { height: 220px; }
	section#visual { height: 180px; }
	section#content input[type=text],
	section#content input[type=email] { width: 100%; }
	section#content textarea { width: 100%; }
	section#content div.contact_data div.maps iframe { height: 200px; }
	.form-toast { width: auto; max-width: 90%; left: 50%; right: auto; transform: translateX(-50%); padding: 12px 16px; }
	.toast-message { font-size: 14px; }
	.field-error { font-size: 14px; }
}

@media screen and (max-width: 700px) {
	section#content div.left { float: none; width: 100%; padding-right: 0; border-right: 0; }
	section#content div.right { float: none; width: 100%; padding-left: 0; }
	section#content div.call { width: 300px; height: 200px; }
}

@media screen and (max-width: 650px) {	
	section#footer { padding: 20px 0; } 
	section#footer div.col { float: none !important; width: 240px !important; padding: 10px 0 ; margin: 0 auto; text-align: center; }
	section#footer div.row:last-child { text-align: center; }
	section#footer div.row:last-child a { }
}

@media screen and (max-width: 600px) {
	section#news div.news_item { float: none; width: 100%; padding: 10px 0; border-left: 0; }
}

@media screen and (max-width: 500px) {
	h1 { font-size: 24px; }
	section#top div.logo { float: left; width: 55%; }
	section#top div.rb { float: right; width: 25%; padding-top: 10px; }
	section#slider { height: 180px; }
	section#visual { height: 160px; }
	section#content { padding: 20px 0; } 
	section#content div.form_row { padding: 0; }
	section#content div.form_label { float: none; width: 100%; padding-right: 0; } 
	section#content div.form_field { float: none; width: 100%; }
	section#intro div.col { float: none; width: 100%; padding: 10px 0; }
	.field-error { font-size: 12px; }
	.toast-message { font-size: 12px; }
}

@media screen and (max-width: 400px) {
	section#top div.rb { padding-top: 8px; }
	section#slider { height: 160px; }
	section#visual { height: 140px; }
	section#content div.call { width: 100%;  }
}

@media screen and (max-width: 350px) {
	section#footer div.col { width: 100% !important; }
}