* {margin:0; padding:0;}
html, body {height: 100%;}
body {font-family: 'Lato', sans-serif; font-weight:300; font-size:20px; line-height:30px; color:#5d5d5d; background:#ffffff;}
.clear {display:block; clear:both; height:0;}
a img {border:none;}
a {outline:none;}

header, nav, section, article, aside, footer {display:block;}

.loaded *, .loaded {-moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;}
img {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
input[type="submit"] {-webkit-appearance: none;}


/***** Sidebar *****/
#sidebar {position:fixed; left:0; top:0; width:400px; z-index:1500; padding:0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color:#ffffff; text-align:center; -webkit-box-shadow:4px 4px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow:4px 4px 5px 0px rgba(0, 0, 0, 0.25); box-shadow:4px 4px 5px 0px rgba(0, 0, 0, 0.25);}


/***** Container *****/
#container.normal_content {margin-left:460px; position:relative; z-index: 10; margin-right: 60px;}
#container.archive_content {margin-left:400px; position:relative; z-index: 10; margin-right: 0px;}


/***** Background Slider *****/
#background-slider-container {padding-left:400px; width:100%; height:100%; position:fixed; left:0; top:0; z-index:2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#background-slider img {max-width:none; width:100%; height:auto; display:none;}
#background-slider .slides li {background-size:cover !important; background-position: center center!important;}


/***** Logo *****/
#logo {display:block; max-width:/*122px*/ 105px; margin:40px auto 0 auto;}
#logo img {display:block; max-width:100%; height:auto;}


/***** Menu *****/
#nav {padding:80px 0 0 0; text-align:left; display:inline-block;}
#menu {list-style:none; display:inline-block;}
#menu li {display:block; padding:13px 0 14px 0; font-size:19px}
#menu li a {display:inline-block; text-decoration:none; text-transform:uppercase; color:#a2a2a2; padding:1px 0 3px 76px;}
#menu li:nth-child(1) a {background: transparent url(images/menu-icon-1.png) no-repeat left center;}
#menu li:nth-child(6) a {background: transparent url(images/menu-icon-2.png) no-repeat left center;}
#menu li:nth-child(2) a {background: transparent url(images/menu-icon-3.png) no-repeat left center;}
#menu li:nth-child(4) a {background: transparent url(images/menu-icon-5.png) no-repeat left center;}
#menu li:nth-child(5) a {background: transparent url(images/menu-icon-6.png) no-repeat left center;}
#menu li:nth-child(3) a {background: transparent url(images/menu-icon-4.png) no-repeat left center;}
#menu li:nth-child(8) a {background: transparent url(images/menu-icon-7.png) no-repeat left center;}
#menu li:nth-child(7) a {background: transparent url(images/houtbouw.png) no-repeat left center;}
#menu li:nth-child(9) a {background: transparent url(images/menu-icon-8.png) no-repeat left center;}

#menu li a {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
#menu li a:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%); color:#46b82f;}
#menu li.current-menu-item a {-webkit-filter: grayscale(0%); filter: grayscale(0%); color:#46b82f;}


/***** Mobile Menu *****/
#mobile-nav {display:none; background-color:#ffffff; position:absolute; left:0; top:0; width:100%; z-index:1000; text-align:left; overflow:hidden;}

#menu-button {display:none; float:right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer; z-index:150; font-size:16px; color:#a2a2a2; text-decoration:none; position:relative; padding-left:30px; font-weight:700; line-height:20px;}
#menu-button span {display: block; position:absolute; left:0; margin-top:2px; height: 3px; width: 24px; background: #46b82f; border-radius: 2px; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out;}
#menu-button.close {color:#565656;}
#menu-button span:nth-child(1) {top: 0px;}
#menu-button span:nth-child(2),#menu-button span:nth-child(3) {top: 6px;}
#menu-button span:nth-child(4) {top: 12px;}
#menu-button.close span:nth-child(1) {top: 6px; width: 0%; left: 50%;}
#menu-button.close span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#menu-button.close span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#menu-button.close span:nth-child(4) {top: 6px; width: 0%; left: 50%;}

#mobile-menu {display:none;}
#mobile-menu {list-style:none;}
#mobile-menu li {border-top:1px solid #cccccc; position:relative;}
#mobile-menu li ul {list-style:none; display:none;}
#mobile-menu li a {text-decoration:none; color:#a2a2a2; padding:4px 0 4px 50px; display:block; background-size:20px auto !important; font-size:16px; text-transform:uppercase;}

#mobile-menu li:nth-child(1) a {background: transparent url(images/menu-icon-1.png) no-repeat left center;}
#mobile-menu li:nth-child(6) a {background: transparent url(images/menu-icon-2.png) no-repeat left center;}
#mobile-menu li:nth-child(2) a {background: transparent url(images/menu-icon-3.png) no-repeat left center;}
#mobile-menu li:nth-child(4) a {background: transparent url(images/menu-icon-5.png) no-repeat left center;}
#mobile-menu li:nth-child(5) a {background: transparent url(images/menu-icon-6.png) no-repeat left center;}
#mobile-menu li:nth-child(3) a {background: transparent url(images/menu-icon-4.png) no-repeat left center;}
#mobile-menu li:nth-child(8) a {background: transparent url(images/menu-icon-7.png) no-repeat left center;}
#mobile-menu li:nth-child(7) a {background: transparent url(images/houtbouw.png) no-repeat left center;}
#mobile-menu li:nth-child(9) a {background: transparent url(images/menu-icon-8.png) no-repeat left center;}

#mobile-menu li ul li a:before {content:"- "; display:inline-block; margin:0 4px 0 15px;}
#mobile-menu li a:hover, #mobile-menu > li.current-menu-item > a, #mobile-menu > li.current-menu-parent > a, #mobile-menu > li > ul > li.current-menu-item a {color:#ffffff; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#mobile-menu > li.current-menu-item {background-color:#46b82f;}
#mobile-menu li:hover {background-color:#46b82f;}
#mobile-menu > li.dropdown > a i {float:right;}

#mobile-menu li i {color:#46b82f;}
#mobile-menu li.facebook {border-top:5px solid #46b82f;}
#mobile-menu li.facebook i {position:absolute; left:20px; top:10px;}
#mobile-menu li.email i {position:absolute; left:16px; top:8px;}
#mobile-menu li.phone i {position:absolute; left:18px; top:10px;}
#mobile-menu li.phone {border-bottom: 1px solid #cccccc;}


/***** Contact Box *****/
#contact-box {padding:116px 0 0 0;}
#contact-box p {display:block; text-align:center; padding:10px 0 15px 0; font-size: 18px; line-height: 1.5em;}
#contact-box a {text-decoration:none; color:#565656;}
#contact-box a:hover {color:#46b82f;}
#contact-box a.phone {color:#ffffff; background-color:#46b82f; display:inline-block; padding:6px 12px 8px 12px; margin-top:5px;}
#contact-box a.phone:hover {background-color:#565656;}


.home iframe {
	margin-top: 40px;
}

.home #background-slider-container {
	opacity: 0.5
}

/***** Home Content *****/
#home-content {position:absolute; left:0; top:50%; width:100%; z-index:1000; text-align:center;}
#home-content .inner {margin:0 auto;}
#home-content h1 {font-weight:700; color:#ffffff; font-size:51px; line-height:60px;}
#home-content h1 span {display:inline-block; vertical-align:middle; padding:0 38px; text-shadow: -3px 5px 8px rgba(0, 0, 0, 0.75);}
#home-content h1:before {content:" "; display:inline-block; vertical-align:middle; height:10px; background:transparent url(images/line-bg.png) repeat-x left center; max-width:320px; width:100%; position:relative; top:8px;}
#home-content h1:after {content:" "; display:inline-block; vertical-align:middle; height:10px; background:transparent url(images/line-bg.png) repeat-x left center; max-width:320px; width:100%; position:relative; top:8px;}
#home-content a {text-decoration:none; display:inline-block; color:#ffffff; border:2px solid #ffffff; text-transform:uppercase; font-size:16px; line-height:24px; margin-top:21px; padding:8px 34px 9px 34px;}
#home-content a:hover {background-color:#ffffff; color:#46b82f;}


/***** Content *****/
#content {position:absolute; left:37px; bottom:30px; z-index:1000; background:rgba(255,255,255,0.9); -webkit-box-shadow:4px 4px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow:4px 4px 5px 0px rgba(0, 0, 0, 0.25); box-shadow:4px 4px 5px 0px rgba(0, 0, 0, 0.25); max-width:555px; padding:29px 40px 0 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#content.relative {position:relative; top:30px; margin-bottom: 30px;}

#content.bedankt{left: 50%;
    bottom: 50%;
    transform: translate(-50%,-50%);}

#content.disappear{left: -60px!important; bottom: 0!important; font-size: 0!important; width: 200px!important; height: 40px!important; padding: 0!important; overflow: hidden!important; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in;}
#content.disappear *{display: none!important;}
#content.disappear .close_btn{display: inline-block!important;}
.close_btn:after{position: absolute; content: "+"; font-family: fontawesome;  top: 10px; right: 10px; font-weight: bold; font-size: 34px; line-height: 20px; cursor: pointer; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.close_btn:hover{color: #46b82f}

.close_btn.open_btn:after{content: "+";  -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}

#content h1 {font-weight:900; font-size:24px; line-height:34px; color:#46b82f; text-transform:uppercase; padding:10px 0 23px 0;}
#content strong.project-subtitle {margin-top: -20px; font-size: 18px; display: block; margin-bottom: 20px;}
#content h2 {font-weight:900; font-size:22px; line-height:32px; color:#46b82f; text-transform:uppercase; padding:5px 0 15px 0;}
#content h3 {font-weight:700; font-size:20px; line-height:30px; color:#46b82f; text-transform:uppercase; padding:5px 0 15px 0;}

#content p {padding-bottom:34px;}

#content a {color:#46b82f; text-decoration:none;}
#content a:hover {color:#000000;}

#content ul {padding:0 0 32px 17px;}
#content ul li {padding:2px 0;}

#content ol {padding:0 0 32px 20px;}
#content ol li {padding:2px 0;}

#content img {max-width:100%; height:auto;}


#image_container{display: none;}

.contact{font-size:15px;}
.contact .red{color:red; font-weight:700;}
.contact .address{width:40%; float:left}
.contact .openingstijden{width:60%; float:left}
.contact .openingstijden .dag{width:50%; float:left;}
.contact .openingstijden .tijd{width:50%; float:left;}


/***** Projects *****/
#projects-list .project {float:left; width:24.25%; margin-right:1%; margin-top:1%;}
#projects-list .project:nth-child(1), #projects-list .project:nth-child(2), #projects-list .project:nth-child(3), #projects-list .project:nth-child(4) {margin-top:0;}
#projects-list .project:nth-child(4n) {margin-right:0;}
#projects-list .project:nth-child(4n+1) {clear:left;}

#projects-list .project a {position:relative; display:block; text-decoration:none; color:#ffffff;}
#projects-list .project a img {display:block; width:100%; height:auto; -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); -webkit-filter: grayscale(100%); filter: grayscale(100%);}
#projects-list .project a span {display:block;}
#projects-list .project a .overlay {display:block; opacity:0; position:absolute; left:0; top:50%; width:100%; text-align:center; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); padding-bottom:1px;}
#projects-list .project a .title {font-weight:900; color:#ffffff; text-transform:uppercase; font-size:23px; line-height:33px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);}
#projects-list .project a .description {font-size:16px; line-height:26px; color:#ffffff;}

#projects-list .project a:hover img {-webkit-filter: grayscale(0%); filter: grayscale(0%);}
#projects-list .project a:hover .overlay {opacity:1;}


/***** Forms *****/
#container .wpcf7-form {font-weight:300; padding-bottom:15px;}
#container .wpcf7-form label {font-weight:500;}
#container .wpcf7-form p {padding:0 0 7px 0; font-weight:300;}
#container .wpcf7-form input[type="text"] {height:28px; line-height:28px; padding-left:4px; width:100%; background-color:#ffffff; border:1px solid #cccccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; font-family: 'Lato', sans-serif; margin-bottom:10px; font-size:14px; margin-top:3px;}
#container .wpcf7-form input[type="email"] {height:28px; line-height:28px; padding-left:4px; width:100%; background-color:#ffffff; border:1px solid #cccccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; font-family: 'Lato', sans-serif; margin-bottom:10px; font-size:14px; margin-top:3px;}
#container .wpcf7-form input[type="number"] {height:28px; line-height:28px; padding-left:4px; width:60px; background-color:#ffffff; border:1px solid #cccccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; font-family: 'Lato', sans-serif; margin-bottom:10px; font-size:14px; margin-top:3px;}
#container .wpcf7-form input[type="tel"] {height:28px; line-height:28px; padding-left:4px; width:100%; background-color:#ffffff; border:1px solid #cccccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; font-family: 'Lato', sans-serif; margin-bottom:10px; font-size:14px; margin-top:3px;}
#container .wpcf7-form select {height:28px; line-height:28px; padding-left:4px; width:100%; background-color:#ffffff; border:1px solid #cccccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; font-family: 'Lato', sans-serif; margin-bottom:10px; font-size:14px; margin-top:3px;}
#container .wpcf7-form textarea {height:120px; line-height:20px; padding-left:4px; width:100%; max-width:100%; max-height:200px; background-color:#ffffff; border:1px solid #cccccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; font-family: 'Lato', sans-serif; padding-top:4px; margin-bottom:10px; font-size:14px; margin-top:3px;}
#container .wpcf7-form .wpcf7-submit {font-size:14px; line-height:23px; font-weight:700; background-color:#46b82f; border:1px solid #46b82f; padding:6px 20px 6px 20px; color:#ffffff; text-transform:uppercase;}
#container .wpcf7-form .wpcf7-submit:hover {cursor:pointer; background-color:#565656; color:#ffffff; border-color:#565656;}
#container .wpcf7-validation-errors {padding:0; margin:0; border:none; color:#f00; font-size:14px; font-weight:500; margin-top:0px;}




/***** Media Queries *****/
@media screen and (max-height: 1120px){
    #nav {padding:40px 0 0 0;}
    #contact-box {padding:76px 0 0 0;}
}

@media screen and (max-height: 1020px){
    #logo {margin:35px auto 0 auto; max-width:100px;}
    #nav {padding:35px 0 0 0;}
    #menu li {padding:0px 0 2px 0;}
    #contact-box {padding:35px 0 0 0;}
}


@media screen and (max-height: 930px){
    #logo {margin:25px auto 0 auto; max-width:80px;}
    #nav {padding:25px 0 0 0;}
    #menu li {padding:0;}
    #menu li a {padding:2px 0 2px 60px; font-size:17px; background-size:28px auto !important;}
    #contact-box {padding:25px 0 0 0;}
    
    #sidebar {width:300px;}
    #container.normal_content {margin-left: 360px; margin-right: 60px;}
	#container.archive_content{margin-left: 300px; margin-right: 0px;}
    #background-slider-container {padding-left:300px;}
}

@media screen and (max-width: 1640px){
    #home-content h1:before {max-width:150px;}
    #home-content h1:after {max-width:150px;}
}

@media screen and (max-width: 1300px){
    #sidebar {width:300px;}
    #container.normal_content {margin-left: 360px; margin-right: 60px;}
    #container.archive_content {margin-left: 300px; margin-right: 00px;}
	
    #background-slider-container {padding-left:300px;}
    
    #projects-list .project {width:32.8%; margin-right:0.8%; margin-top:0.8%;}
    #projects-list .project:nth-child(4) {margin-top:0.8%;}
    #projects-list .project:nth-child(4n) {margin-right:0.8%;}
    #projects-list .project:nth-child(4n+1) {clear:none;}
    #projects-list .project:nth-child(3n) {margin-right:0;}
    #projects-list .project:nth-child(3n+1) {clear:left;}
}

@media screen and (max-width: 1200px){
    #home-content h1:before {max-width:80px;}
    #home-content h1:after {max-width:80px;}
}

@media screen and (max-width: 1100px){
    #home-content h1:before {display:none;}
    #home-content h1:after {display:none;}
    #home-content h1 span {display:block; padding:0;}
}

@media screen and (max-height: 840px){
    #sidebar {width:100%; height:auto !important; z-index:1500; position:relative; padding:15px; -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.25); box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.25);}
    
    #logo {max-width:60px; float:left; margin:0;}
    #nav {display:none;}
    #mobile-nav {display:block;}
    #menu-button {display:block; margin:29px 0 0 0;}
    #contact-box {display:none;}
    
    #container.normal_content {margin-left:50px; margin-right: 50px; min-height:1px !important;}
    #container.archive_content {margin-left:0px; margin-right: 0px; min-height:1px !important;}
    #home-content h1 {font-size:40px; line-height:50px;}
    #home-content a {margin-top:14px; padding:6px 20px 7px 20px;}
    
    #content {position:relative; left:auto; bottom:auto; max-width:none; padding:25px 15px 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:15px;}
    
    #background-slider-container {padding-left:0;}
	
}

@media screen and (max-width: 960px){
    #sidebar {width:100%; height:auto !important; z-index:1500; position:relative; padding:15px;}
    #logo {max-width:60px; float:left; margin:0;}
    #nav {display:none;}
    #mobile-nav {display:block;}
    #menu-button {display:block; margin:29px 0 0 0;}
    #contact-box {display:none;}
    
    #container.normal_content {min-height:1px !important; margin-left: 60px; margin-right: 60px;}
    #container.archive_content {min-height:1px !important; margin-left: 0px; margin-right: 0px;}
	.flex-direction-nav a { margin: 13px 0 0!important;}
    #home-content {margin-top:0 !important; padding-top:35%; top:0}
    #home-content h1 {font-size:40px; line-height:50px;}
    #home-content a {margin-top:14px; padding:6px 20px 7px 20px;}
    
    #background-slider-container {padding-left:0;}
    
    #content {position:relative; left:-20px; width: calc(100% + 40px)!important; bottom:auto; max-width:none; padding:25px 15px 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:15px 0;}
	#content.disappear{top: 0px!important; width: 30px!important; padding: 4px 20px 0 !important; margin: 0!important; left: -60px!important;}
	
	#background-slider .flex-direction-nav{display: none!important;}
	
	#image_container{display: inline-block; height: 400px; padding-bottom: 30px; overflow: hidden;}
	#image_container .slides{padding: 0!important;}
	#image_container .slides li{background-repeat: no-repeat!important;  background-size: contain!important; background-position: center center!important; height: 400px; }
	#image_container .slides li img{opacity: 1!important;}
	#image_container .flex-direction-nav a{margin: 0!important; top: calc(50% - 20px)!important;}
	#image_container .flex-direction-nav a:before{color: #46b82f!important;}
	#image_container li{padding: 0!important;}
		
}

@media screen and (max-width: 730px){
	#content{width: calc(100% + 60px)!important; left: -30px!important; }
}

@media screen and (max-width: 640px){
	
	.home iframe {
		width: 100%
	}

	.flex-nav-next {display: none!important}
	.flex-nav-prev {display: none!important}
	
    #logo {max-width:40px; float:left; margin:0;}
    #home-content h1 {font-size:32px; line-height:44px;}
    #home-content a {margin-top:14px; padding:4px 15px 5px 15px;}
    
    #content h1 {padding:5px 0 15px 0;}
    #content p {padding-bottom:18px;}
    #content ul {padding:0 0 16px 17px;}
    #content ol {padding:0 0 16px 20px;}
    
    #projects-list .project {width:49.5%; margin-right:1%; margin-top:1%;}
    #projects-list .project:nth-child(3) {margin-top:1%;}
    #projects-list .project:nth-child(4) {margin-top:1%;}
    #projects-list .project:nth-child(4n) {margin-right:1%;}
    #projects-list .project:nth-child(4n+1) {clear:none;}
    #projects-list .project:nth-child(3n) {margin-right:1%;}
    #projects-list .project:nth-child(3n+1) {clear:none}
    #projects-list .project:nth-child(2n) {margin-right:0;}
    #projects-list .project:nth-child(2n+1) {clear:left}
	
	#image_container{height: 300px;}
	#image_container .slides li{height: 300px; }
	
	
}


@media screen and (max-width: 520px){
.contact .address{width:100%; }
.contact .openingstijden{width:100%; margin-top: 50px;}
}

@media screen and (max-width: 460px){
    #projects-list .project {width:100%; margin-right:0 !important; margin-top:10px !important; float:none !important; clear:both !important;}
    #projects-list .project:nth-child(1) {margin-top:0 !important;}
    #projects-list .project .overlay {opacity:1 !important;}
    #projects-list .project a img {-webkit-filter: grayscale(0%); filter: grayscale(0%);}
    #projects-list .project a .title {font-size:22px; line-height:32px;}
	
	#image_container{height: 200px;}
	#image_container .slides li{height: 200px; }
	 #container.normal_content {min-height:1px !important; margin-left: 30px; margin-right: 30px;}
}