@charset "utf-8";
/* CSS Document */

/* Algemeen */
body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.5em;
	background-color: #F1F1F1;
	background-image: url(../images/Bodyachter.jpg);
	background-repeat: repeat;
	background-position: 0px 0px;
}
#page {
	width: 100%;
	max-width: 1280px;
	background: rgba(255, 255, 255, 0.5);
	margin: 50px auto 0px auto;
	position: relative;
}
h1 {
	font-size: 1.5em;
	font-weight: lighter;
	color: #AC7835;
	margin: 1.3em 0;
}
h2 {
	font-size: 1.5em;
	font-weight: lighter;
	color: #AC7835;
	text-align: center;
}
h3 {
	font-size: 1.3em;
	margin: 0 0 1em 0;
	color: #AC7835;
}
p { margin: 0 0 .5em 0;}
a { color: #535E68; outline: none;}
a:hover { color: #000; }
#logo { float: left; -webkit-transition: -webkit-transform 1.5s; transition: transform 1.5s;}
#logo:hover { cursor: pointer; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.bigpic, .bigpic img{ width: 100%; max-width: 1280px;}
#maintxt {
	margin: 0px auto 10px auto;
	height: auto;
	width: 75%;
	padding: 20px 50px;
	box-sizing: border-box;
	line-height: 2em;
}
#maintxt p { text-align: justify;}
#maintxt p a {
	font-size: 16px;
	font-weight: bold;
	color: #AC7835;
	text-decoration: none;
	list-style-type: none;
}
#maintxt p a:hover { color: #630;}
#maintxt p img { padding: 20px 0px; width: 100%; height: auto;}
#kleurtrap, #kleurtrap img { height: auto; width: 100%; max-width: 1280px; margin: 0px auto;}
.promo_container {
	background-color: #E3DBCC;
	padding: 30px 0px 30px 20px;
}
.promo_container .promo { width: 25%; float: left;}
.promo_container .promo .content {
	padding: 10px;
	box-sizing: border-box;
	font-size: 14px;
}
.promo h3 a {
	color: #996633;
	font-size: 19px;
	font-weight: normal;
	margin-bottom: 0.6em;
	text-decoration: none;
}
.promo h3 a:hover { color: #630; font-size: 20px;}
.promo p {
	color: #000;
	line-height: 2em;
	margin-bottom: 1.5em;
}
/*.promo.een { background-image: url(../images/promo1.jpg);}
.promo.twee { background-image: url(../images/promo2.jpg);}
.promo.drie { background-image: url(../images/promo3.jpg);}
.promo.vier { background-image: url(../images/promo4.jpg);}*/
#clearfix { clear: both; height: 1px;}
#footer {
	clear: both;
	text-align: center;
	padding: 20px 0px;
}
#footer a {
	font-size: 0.9em;
	font-weight: normal;
	color: # C30;
	text-decoration: none;
	list-style-type: none;
	font-family: Verdana, Geneva, sans-serif;
}
#footer a:hover { color: #000;}
#contact p { text-align: center;}

/* Navigatie */
#nav { float: left; margin-top: 35px;}
#nav ul { margin: 0px; padding: 0px; list-style-type: none; overflow: hidden;}
#nav li {
	display: inline-block;
	padding: 0px 20px;
	border-right: thin solid #AC7835;
}
#nav li a {
	color: #AC7835;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	font-size: 19px;
}
#nav li a:hover:not(.active) { color: #000;}
#nav li a.active { color: #000;}

/* Mobnavigatie */
#sections_btn_holder { display: none;}
#sections_btn_holder > button {
	width: 176px;
	cursor: pointer;
	height: 82px;
	border: none;
	background-color: rgba(255, 255, 255, 0);
	background-image: url(../images/LogoMenu.png);
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
}
#sections_panel{
	padding-right: 20px;
	position:absolute;
	height:0px;
	width: 210px;
	margin: 0px auto;
	background: #FFF;
	top: inherit;
	overflow: hidden;
	z-index: 10000;
	-webkit-transition: height 0.3s linear 0s;
	transition: height 0.3s linear 0s;
	display: none;
}
#sections_panel #mobnav{ padding: 0px 20px; height: 340px;}
#mobnav { width: 90%;} 
#mobnav ul { margin: 0px; padding: 0px;}
#mobnav li {
	display: block;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	text-align: left;
	line-height: 60px;
	border-bottom: thin dotted #000;
}
#mobnav li a {
	color: #AC7835;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
}
#mobnav li a:hover:not(.active) { color: #000; }
#mobnav li a.active { color: #000; } 
/*einde Mobnavigatie*/

@media only screen and (min-width:751px) and (max-width:1024px){
	#page { margin: 30px auto 0px auto;}
	h1 { font-size: 1.3em; font-weight: bold;}
	h2 { font-size: 1.3em;font-weight: bold;}
	#logo { display: none;}
	#nav { display: none;}
	#sections_btn_holder { display: inline-block;}
	#sections_panel { display: block;}
	#maintxt { width: 90%; padding: 20px; box-sizing: border-box;}
	.promo_container { padding: 0px 20px 15px 20px;}
	.promo_container .promo { width: 50%;}
	.promo_container .promo .content { padding: 30px 10px 0px 0px;}
}
@media only screen and (max-width:750px){
	#page { margin: 30px auto 0px auto;}
	h1 { font-size: 1.3em; font-weight: bold;}
	h2 { font-size: 1.3em; font-weight: bold;}
	#logo { display: none;}
	#nav { display: none;}
	#sections_btn_holder { display: inline-block;}
	#sections_panel { display: block;}
	#maintxt { width: 100%; padding: 20px; box-sizing: border-box;}
	.promo_container { display: none;}
	.promo_container .promo .content { padding: 90px 0px 0px 0px;}
}