body { font-family: 'Lato', sans-serif; font-weight: 300;}

a.button { display: inline-block; background: #8dc34a; padding: 8px 15px; color: #fff!important; font-weight: 400; border-radius: 5px; transition: .5s; margin-bottom: 25px;}
a.button:hover { background: #5c4a41; transition: .2s; text-decoration: none; }



#form{ position:absolute; top: -150px;}
.clear{ float:none; clear:both;}
.extraSpace{ height: 50px; width: 100%; }
.formContainer{}
.formContainer label{ clear:both; display:block; float:left; width:30%; font-weight:400; margin: 0 0 20px 0;}
.formContainer .fieldHolder{float:left; width:70%; margin: 0 0 20px 0;}
.formContainer .fieldHolder input[type="text"], .formContainer .fieldHolder input[type="email"], .formContainer .fieldHolder select{width: 100%; padding: 5px; -webkit-appearance: none; border-radius: 5px; border:1px solid #8dc34a;}
.formContainer .fieldHolder textarea{width: 100%; height: 100px; padding: 5px; -webkit-appearance: none; border-radius: 5px; border:1px solid #8dc34a;}
.formContainer .fieldHolder input[type="submit"]{width: 100%; border:none; background: #5c4a41; padding: 8px 15px; color: #fff!important; font-weight: 400; border-radius: 5px; transition: .5s; margin-bottom: 10px; -webkit-appearance: none;}
.formContainer .fieldHolder input[type="submit"]:hover{background: #8dc34a;}
.formContainer .g-recaptcha{display:block; border-radius: 5px; border:1px solid #8dc34a; width:304px; height:78px;}
.error{ color:red; font-weight:400; }
.succes{color:#8dc34a; font-weight:400; border:1px solid #8dc34a; padding: 25px; margin: 25px 0; border-radius: 5px; width: 100%; }
.notice{color:#5c4a41; font-weight:400; border:1px solid #5c4a41; padding: 25px; margin: 25px 0; border-radius: 5px; width: 100%;}
.contactInfo{border-radius: 5px; background: #eee; width:100%; padding: 20px; text-align:left;}
.contactInfo .btn{width:100%; margin-top: 20px; display:block; text-align:center;}
.hideAway{ display:none;}
@media only screen and (max-width: 425px) {
	.formContainer label{ clear:both; float:none; width:100%; margin: 0 0 10px 0;}
	.formContainer .fieldHolder{float:none; width:100%; margin: 0 0 30px 0;}
	.formContainer label.empty{ display:none;}
 }


#menu { position: fixed; top:0; left:0; width: 100%; background: #fff; z-index:9999; height: 120px; box-shadow: 0 0 5px rgba(0,0,0,.3); }
#menu .container-fluid { position: relative; }
#menu .brand { margin: 30px auto; display: inline-block; }
#menu ul { display: inline-block; margin: 0; padding: 0; list-style: none; margin-top: 47px; }
#menu ul.categories { float: right; }
#menu ul.pages { list-style: none; }
#menu ul li { float: left; padding: 0 12px;}
#menu ul li a { display: inline-block; color: #333; text-transform: uppercase; padding: 0; font-weight: 400; transition: .5s; }
#menu ul li a:hover { color: #8dc34a; text-decoration:none; transition: .5s;}
#menu .lang { display: block; position: absolute; right: 20px; top: 40px; border: 1px solid #ddd; padding: 3px 15px 7px 15px; color: #333; background: #fff; border-radius: 4px; text-transform:uppercase; }
#menu .lang img { width: 18px; }
#menu .lang .popup a { display: block; padding: 3px 0; color: #333; }
#menu .lang .popup a:hover { color: #8dc34a; text-decoration: none;}
#menu .lang .popup { display: none;  }
#menu .lang:hover .popup { display: block;  }

#menubutton { display: none; }

#push { display: block; height: 120px; }

#header { height: 375px; width: 100%; background: #5c4a41; }
#header .item { height: 375px; padding: 0px; margin: 0px; position: relative; }
#header .item .headeroverlay { opacity: 0; position: absolute; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,.4); transition: .5s; }
#header .item:hover .headeroverlay { opacity: 1; transition: .5s; }
#header a.foto { display: block; width: 100%; height: 100%; text-align: center; }
#header h2 { position: relative; color: #fff; font-weight: 300; text-transform: uppercase; font-size: 40px; text-shadow: 1px 1px 5px #333; z-index: 20;}
#header a:hover { text-decoration: none; }

#subheader { height: 300px; width: 100%; }
#subheader .headerphoto { height: 300px; width: 100%;  }
#subheader h1 { position: relative; color: #fff; font-weight: 300; text-transform: uppercase; font-size: 60px; text-shadow: 1px 1px 5px #333; z-index: 20;}
/*
#intro { padding: 70px; line-height: 28px; background: #fefefe;  }
#intro img { padding: 50px; }
#intro h1 { text-transform: uppercase; color: #8dc34a; font-weight: 400; font-size: 25px; margin-bottom: 20px; }
*/
#content { padding: 70px; line-height: 28px; background: #fefefe;  }
#content picture * { padding: 50px; }
#content .contactphoto *{padding: 25px 0; max-width: 100%; height: auto;}
#content h1 { text-transform: uppercase; color: #8dc34a; font-weight: 400; font-size: 25px; margin-bottom: 20px; }
#content h2 { text-transform: uppercase; color: #8dc34a; font-weight: 400; font-size: 20px; margin-bottom: 10px; }
#content h3 { text-transform: uppercase; color: #5c4a41; font-weight: 400; font-size: 18px; margin-bottom: 10px; }
#content a { color: #8dc34a;}

#detail { padding: 70px; line-height: 28px; background: #fefefe;  }
#detail h1 { text-transform: uppercase; color: #8dc34a; font-weight: 400; font-size: 35px; }
#detail a { color: #333; }
#detail hr { margin: 30px 0; }
#detail .big_image { margin-bottom: 30px; }
#detail .big_image *{width: 100%; height:auto;}
#detail .tekst { padding-left: 40px; }
#detail a.button { display: inline-block; background: #8dc34a; padding: 8px 15px; color: #fff; font-weight: 400; border-radius: 5px; transition: .5s; }
#detail a.button:hover { background: #5c4a41; transition: .2s; text-decoration: none; }
#detail a.greybutton { cursor:pointer; display: inline-block; background: #5c4a41; padding: 8px 15px; color: #fff; font-weight: 400; border-radius: 5px; transition: .5s;}
#detail a.greybutton:hover { background: #5c4a41; transition: .2s; text-decoration: none; }


#usp { padding: 70px 100px; background: #8dc34a url("../img/usp-bg.jpg") center center no-repeat; background-size: cover; text-align: center; color: #fff;}
#usp .item { padding: 20px 50px; }
#usp h2 { text-transform: uppercase; color: #fff; font-weight: 400; font-size: 30px; margin-bottom: 20px; }
#usp h4 { font-weight: 300; }

#featured { padding: 70px 0; background: #fefefe; }
#featured a.item { display: block; border: 1px solid #ddd; padding: 20px; text-align: center; color: #333; background: #fff; text-transform: uppercase; font-weight: 300; transition: .5s; }
#featured a.item:hover { border: 1px solid #aaa; text-decoration: none; transition: .3s; }
#featured a.item h5 { font-size: 14px; color: #111;}

#catalog { padding: 70px 0; background: #fefefe; }
#catalog a.item { display: block; border: 1px solid #ddd; padding: 20px; text-align: center; color: #333; background: #fff; text-transform: uppercase; font-weight: 300; transition: .5s; margin-bottom: 30px;}
#catalog a.item:hover { border: 1px solid #aaa; text-decoration: none; transition: .3s; }
#catalog a.item h5 { font-size: 14px; color: #111; margin-top: 5px;}


#footer { background: #5c4a41; color: #fff; padding: 60px 0; }
#footer address { margin: 0; padding: 0; display: block; }
#footer .right { text-align: right; }
#footer .right ul { display: inline-block; list-style: none; padding: 0; margin: 0; }
#footer .right ul li { float: left; padding: 0 10px; }
#footer a { color: #fff; }
#footer .right p.copy { display: block; margin-top: 40px; }

/* Mobile menu */
.overlay { display: none; height: 100%; width: 100%; position: fixed; z-index: 999999; left: 0; top: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; }
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }
.overlay a { padding: 8px 0; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
.overlay a:hover, .overlay a:focus { color: #f1f1f1; }
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; }
.overlay ul, .overlay li { margin: 0px; padding: 0px; list-style: none; }


@media only screen and (max-width: 1199px) {

#menu { height: 90px;  }
#menu .brand { margin-top: 30px; }
#menu ul { margin-top: 35px; }
#menu ul li a { display: inline-block; color: #333; text-transform: uppercase; padding: 0; font-size: 14px; font-weight: 400; transition: .5s; }
#menu .lang { top: 30px; }
#push { height: 90px; }
#header { height: 325px; width: 100%; background: #5c4a41; }
#header .item { height: 325px;}

#content .contactphoto *{max-width: 400px; }

}    	



@media only screen and (max-width: 991px) { 

#menu ul { display: none; }
#menu .left { display: none; }
#menu .right { display: none; }
#menu .lang { right: 90px; }
#menu .brand { position: absolute; left: 20px; top: -11px; }
#menubutton { display: block; position: absolute; right: 20px; top: 29px; background: #8dc34a; padding: 0px 10px; border-radius: 5px; color: #fff; font-size: 25px;}

.intro .foto { display: none; }
#usp { padding: 70px 30px;}
#usp img { width: 70%;}
#usp h2 { font-size: 25px; }
#usp h4 { font-size: 20px; }

#footer .right { text-align: left; }

#detail { padding: 40px 20px; }
#detail .tekst { padding: 0px 10px 40px 10px;}
#detail .thumb { margin-bottom: 25px; }

#content { padding: 40px 20px; line-height: 28px; background: #fefefe;  }
#content picture * { padding: 0 0 30px 0; width: 100%; max-width: 100%;}
#content h1 { text-transform: uppercase; color: #8dc34a; font-weight: 400; font-size: 25px; margin-bottom: 20px; }


}



@media (max-width: 767px) { 

#usp { padding: 70px 0px;}
#usp .item { padding: 20px 10px; }
#usp img { width:50%;}
#featured .item { margin-bottom: 20px; }
.overlay-content { top: 0; }
.overlay a { font-size: 25px; }
}



@media (max-width: 575px) {

#menu .brand { width: 160px; top: -5px; }
#menu .lang { right: 80px; top: 27px;}
#menubutton { top: 26px; }
#header { height: 450px; width: 100%; background: #5c4a41; }
#header .item { height: 225px; padding: 0px; margin: 0px; position: relative; }
#content { padding: 50px 10px; }
#usp { padding: 50px 0px 30px 0;}
#usp img { width: 25%;}
#footer img { width: 50%; }
.overlay-content { top: 20%; }
.overlay a { font-size: 25px; }
}

@media screen and (max-height: 450px) { 
 .overlay a {font-size: 20px}
 .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }
}
