/* 
Theme Name: Van Deuren | Homepage Template
Theme URI: http://www.vandeurenab.nl/
Author: MonsterBrands
Author URI: http://www.monsterbrands.nl/ 
Version: 1.0
*/ 

* { margin: 0; padding: 0; -webkit-appearance: none; outline: 0; }
img { max-width: 100%; height: auto; }
body { font-family: 'Roboto'; color: #1D191D; overflow-x: hidden; }
div.wrapper { width: 960px; margin: 0 auto; }
.menu-active  { position: fixed; }

h1 { font-family: 'Raleway'; font-weight: 900; font-size: 40px; line-height: 1.5em; }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 32px; line-height: 1.5em; }
h3 { font-family: 'Raleway'; font-weight: 800; font-size: 19px; line-height: 1.5em;}
h4 { font-family: 'Raleway'; font-weight: 800; font-size: 17px; line-height: 1.5em;}
h5 { }
h6 { }
p  { font-weight: 400; font-size: 14px; line-height: 1.6em; margin: 16px 0; }
a  { }
a:hover { }

/* 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: 65px; 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: 14px; color: rgb(255, 255, 255); transition: 0.3s color; }
div#mobilemenu a:hover { color: #B5014B; }
div#mobilemenu li ul li { padding: 5px 0; border: none; }
div#mobilemenu li ul a { padding-left: 10px; font-weight: 400; font-size: 14px; 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: 40px 0 10px 0; border-top: 8px solid #B5014B;  }
section#top div.top_holder { overflow: auto; }
section#top div.logo { float: left; width: 35%; }
section#top div.topnav { margin-top: 8px; float: right; width: auto; border-top: 1px solid #B5014B; border-bottom: 1px solid #B5014B; }
section#top div.topnav ul { list-style-type: none; }
section#top div.topnav li { text-align:left; display: inline-block; margin: 6px; padding: 6px 6px;}
section#top div.topnav a { text-decoration: none; color: #000; font-size: 15px; padding: 8px 6px;  transition: all 0.3s; }
section#top div.topnav a:hover { background-color: #B5014B; color:#fff; border-radius: 5px; }

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

section#slides { padding: 20px 0; }
section#slides div.slider { width: 100%; height: 300px; position: relative; }
section#slides div.slider div { width: 100%; height: 250px; position: absolute; background-position: center; 
	background-size: cover; background-repeat: no-repeat; }
section#slides div.box {  text-align: center; bottom:-20%; max-height: 20%; background-color: #666; color: #fff; }

section#content { padding: 20px 0;}
section#content div.content_holder { overflow: auto; }
section#content div.row { padding: 20px 0; }
section#content h1 { text-align: center; color: #B5014B; }
section#content h2 { text-align: center; }
section#content h3 { color: #B5014B; }
section#content div.col { float: left; width: calc( 50% - 60px ); margin: 0px 30px; }
section#content div.col a { color: #B5014B; text-decoration: underline dotted; }
section#content div.col a:hover { text-decoration: underline solid; }
section#content iframe#maps { width: 100%; height: 350px; }

/* contact form */
section#content div.formbox { width: 100%; overflow: auto; text-align: left; }
div.formbox form { width: 100%; overflow: auto; }
div.formbox div.form_row  { overflow: auto; line-height: 24px; margin: 10px 0; }
div.formbox div.form_label { font-size: 14px; font-weight: 600; margin-left: 4px; }
div.formbox div.form_field  {  }
div.formbox input, textarea, select { font-size: 14px; font-family: 'Roboto'; line-height: 24px; border-radius: 6px; }
div.formbox input { border: 1px solid #ccc; color: #444; }
div.formbox input[type=text] { padding: 4px 8px; width: 90%; margin: 0 auto;  }
div.formbox input[type=submit] { border: none; cursor: pointer;
    text-decoration: none; padding: 6px 8px; border-radius: 8px; color: #fff; background-color: #B5014B;
    font-size: 14px; margin: 10px auto; display: block; transition: all 0.3s;  }
div.formbox input[type=submit]:hover{ background-color: #666;  }
div.formbox textarea { padding: 4px 8px; width: 90%; margin: 0 auto; height: 200px; color: #444;
    resize: none; border: 1px solid #ccc; }


section#news_details { padding: 20px 0;}
section#news_details div.news_details_holder { overflow: auto; }
section#news_details div.row { padding: 20px 0; }
section#news_details h1 { text-align: center; color: #B5014B; }
section#news_details h2 { text-align: center; }
section#news_details h3 { color: #B5014B; }
section#news_details a { color: #B5014B; text-decoration: underline dotted; }
section#news_details a:hover { text-decoration: underline solid; }
section#news_details p { text-align: center; width: 70%; margin: 10px auto; }
section#news_details div.col { width: calc(100% - 20px); margin: 0px; padding: 10px; text-align: left; }
section#news_details div.col p { text-align: left; margin: 10px 0; width: 100%; }
section#news_details div.news_content { margin: 20px 0; padding-top: 10px; border-top: solid 1px #B5014B; }
section#news_details div.news_content:last-child { border-bottom: solid 1px #B5014B;}
section#news_details div.news_content p { white-space: pre-wrap; }

section#extra { padding: 20px 0 60px 0; }
section#extra div.extra_holder { overflow: auto; }
section#extra div.col { float: left; width: calc( 50% - 20px ); margin: 0 10px; }
section#extra div.newsblock { background-image: url('/images/cta_background_grey.svg'); 
	background-size: cover; background-repeat: no-repeat;
	padding: 20px 10px; min-height: 510px; }
section#extra div.newsblock h3 { color: #fff; margin-left: 10px; }
section#extra div.news {  border-left: 2px solid #ccc;  margin: 10px 0; padding: 0 10px; }
section#extra div.news h4 { color: #ccc; margin-top: 25px; }
section#extra div.news p  { color: #fff; margin: 6px 0; }
section#extra div.news a { color: #fff; text-decoration: underline dotted; }
section#extra div.news a:hover { text-decoration: underline solid; }
section#extra div.news a.readmore { color: #ccc; font-size: 14px; text-decoration: none; padding: 0; }
section#extra div.news a.readmore:hover { text-decoration: underline; }  
section#extra div.contact { height: 510px; padding: 20px; text-align: center;
	background-image: url('/images/cta_background.svg'); background-size: cover; background-repeat: no-repeat; }
section#extra div.contact h2:first-child { margin-top: 40px;  }	
section#extra div.contact h2 { color: #fff;  }
section#extra div.contact h2 a { color: #fff; background: transparent; text-decoration: none; transition: 0.3s all; padding: 0 10px;  }
section#extra div.contact h2 a:hover { background-color: #fff; color: #B5014B; }
section#extra div.contact img { width: 60%; border-radius: 50%; margin-top: 40px; border: 8px solid #fff; }

section#footer { padding: 40px 0; background-color: #B5014B; color: #fff; border-top: 4px solid #fff; }
section#footer div.footer_holder { overflow: auto; }
section#footer div.col { float: left; width: calc( 50% - 60px ); margin: 0 30px; }
section#footer p { line-height: 1.5em; margin: 0; }
section#footer a { color: #fff; text-decoration: none; }
section#footer a:hover { text-decoration: underline; }
section#footer img { margin:0 auto; right; width: 40px; margin-right: 10px; }
section#footer div.social { text-align: right; }
section#footer div.social a:hover { text-decoration: none !important; }


section#credits { padding: 20px 0; color: #B5014B; background-color: #fff; }
section#credits div.credits_holder { overflow: auto; }
section#credits a { display: block; width: 180px; margin: 0 auto; font-size: 14px; text-align: center;  color: #B5014B; text-decoration: none; padding: 16px; border-radius: 8px; border: 1px solid #B5014B; transition: all 0.5s; }
section#credits a:hover { background-color: #B5014B; color:#fff; border-radius: 15px; }

/* @media queries */

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

@media screen and (max-width: 800px) {
	section#top div.logo { /* float: none;*/ width: 240px; margin: 0 auto 10px auto; }
	/*section#top div.topnav { float: none; width: 100%; margin-top: 10px; text-align: center; }*/

	section#top div.topnav { display: none; }
	section#top div.hamburger { display: block; }

	section#extra div.col { float: none; width: 100%; margin: 10px 0; }
	section#extra div.newsblock { min-height: initial; }
	section#extra div.contact { height: auto; }
	section#extra div.contact img { width: 200px; }
}

@media screen and (max-width: 750px) {
	section#content iframe#maps { height: 250px; }
}

@media screen and (max-width: 650px) {
	section#top { padding: 30px 0 10px 0; }
	section#content { padding: 20px 0; }	
	section#extra { padding: 20px 0; }
	section#footer { padding: 40px 0; }
	section#credits { padding: 20px 0; }
}

@media screen and (max-width: 550px) {
	h1 { font-size: 32px; }
	h2 { font-size: 24px; }
	section#content div.col { float: none; width: 100%; margin: 10px 0; }	
	section#slides div.slider { height: 200px;  }
	section#slides div.slider div { height: 160px; }
}

@media screen and (max-width: 500px) {
	section#footer div.col { float: none; width: 80%; margin: 20px auto; text-align: center; }
	section#footer div.social { text-align: center; }
}

@media screen and (max-width: 400px) {
	h1 { font-size: 28px; }
	h2 { font-size: 18px; }
	section#slides div.slider { height: 150px;  }
	section#slides div.slider div { height: 120px; }
	section#content iframe#maps { height: 180px; }
	section#extra div.contact { padding: 10px 0; }
	section#extra div.contact img { width: 140px;  margin-top: 10px; }	
	section#extra div.contact h2:first-child { margin-top: 10px; }	
}