@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
	margin: 0;
	padding: 0;
}
html{  
	overflow-y: scroll; 
	height:100%;
}
body{
	height:100%; 
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #706f6f;
}
@font-face {
    font-family: 'freestyle_scriptregular';
    src: url('../fonts/freescpt-webfont.eot');
    src: url('../fonts/freescpt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/freescpt-webfont.woff') format('woff'),
         url('../fonts/freescpt-webfont.ttf') format('truetype'),
         url('../fonts/freescpt-webfont.svg#freestyle_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* General */
h1, h2, h3, h4, h5, h6{
	font-size: 1.875em;
	font-weight: 200;
	text-transform: uppercase;
	color: #706f6f;
	margin: 0 0 10px 0;
}
h2{ font-size: 1.500em; }
h3{ font-size: 1.375em; }
h4{ font-size: 1.125em; }
h5{ font-size: 1.063em; }
h6{ font-size: 1em; }

p{
	line-height: 22px;
	margin-bottom: 25px;
	font-size: 14px;
}
p.first {
    font-size: 16px;
}
p.handwriting{ font-family: 'freestyle_scriptregular'; }
p span{
	color: #634a9e;
}
.p2 p span{
	color: #f68b24;
}
.p3 p span{
	color: #51abdf;
}
.p4 p span{
	color: #a4bf5a;
}
ul, ol{ list-style: none; }

a, a:active, a:visited{
	text-decoration: underline;
	color: #634a9e;
}
a:hover{
	text-decoration: none;
	color: #000;
}
input, textarea, select, button{
	background-color: #fff;
	height: 20px;
	font-size: 0.750em;
	font-weight: normal;
	color: #6b6b6b;
	margin: 0 0 6px 0;
	padding: 10px 8px;
	border: 1px solid #c3c3c3;
	position: relative;
	display: block;
	float: left;
	
    -webkit-box-shadow: inset 10px 10px 6px -8px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 10px 10px 6px -8px rgba(0,0,0,0.5);
    box-shadow: inset 10px 10px 6px -8px rgba(0,0,0,0.1);	
}
input.req, textarea.req{
    background: url(../images/bg_input_req.png) no-repeat right top;
}
input.error{
    border: 1px solid #ff0000;
    color: #ff0000;
}
textarea{
	overflow: auto;
	resize: none;
}
a:focus, input:focus, textarea:focus, select:focus, button:focus{
	outline: 0 none;
}

.clr{ clear: both; }
img, a{ border: 0; outline: 0 none; }
.off{ display: none !important; }
.pie{ behavior: url(scripts/PIE.php); /* CSS3 Fix for IE */}
.green{color: #007b12; font-weight: bold;}

.wrap{
	width: 960px;
	position: relative;
	margin: 0 auto;
}

/* Cols */
.col{
	float: left;
	margin: 40px 0 65px 0;
}
.col.col1{
	width: 610px;
}
.col.col2{
	width: 300px;
	margin-left: 50px;
}
.col.col3{
	width: 400px;
}
.col.col4{
	width: 520px;
	margin-left: 40px;
}
.col.col5{
	width: 210px;
	margin-right: 40px;
	margin-top: 0;
}
.col.col5.last{
	margin-right: 0;
}
.col.col6{
	width: 960px;
	margin-top: -60px;
}

/* Buttons */
a.btn, .btn{
    background: #a4bf5a;
    border: 3px solid #586630;
    color: #fff;
    padding: 15px;
    display: block;
    float: left;
    font-size: 1.250em !important;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000;
}
a.btn span{
    width: 100%;
    display: block;
    font-size: 0.62em;
}

/* Header */
.header{
	background-image: url(../images/bg_1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;	
	height: 480px;
	position: relative;
}
.p1 .header{
	background-image: url(../images/bg_2.jpg);
}
.p2 .header{
	background-image: url(../images/bg_3.jpg);
}
.p2 .header{
	background-image: url(../images/bg_3.jpg);
}
.p4 .header{
	background-image: url(../images/bg_3.jpg);
}
.header .nav {
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: all 0.3s ease;
}
.header .nav.scroll-menu {
    background: rgba(255, 255, 255, 1);
    height: 90px;
}
.header h1{
    padding-top: 250px;
    font-size: 45px;
    font-weight: 200;
    color: #fff;
    line-height: 1;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.logo{
    width: 221px;
	position: absolute;
	top: 18px;
	left: 0;
	z-index: 2;
    transition: all 0.3s ease;
}

.header .nav.scroll-menu .logo {
    width: 150px;
}

/* Menu */
.menu{
	position: absolute;
    top: 60px;
	right: 0;
	z-index: 2;
	transition: all 0.3s ease;
}

.header .nav.scroll-menu .menu{
    top: 31px;
}
.menu li{
	float: left;
	position: relative;
}
.menu li a{
	display: block;
	padding: 20px;
	color: #706f6f;
	font-size: 0.875em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}
.menu li:hover a{
    color: #008282;
}
.menu li.sel{
	color: #fff;
	border: none;
	bottom: 0;
	display: block;
}
.menu li.sel a {
    color: #008282;
}
.menu li .submenu{
    background: rgba(255, 255, 255, 0.9);
	width: 250px;
	position: absolute;
	top: 100%;
	left: -1px;
	display: none;
	padding: 10px 0;
	
}
.header .nav.scroll-menu .menu li .submenu{
    background: rgba(255, 255, 255, 1);
}
.menu li.sel .submenu{
    top: 100%;
    left: 0px;
}
.menu li:hover .submenu{ display: block;}

.menu li .submenu li{
	border: none;
	padding: 0;
	height: auto;
	float: none;
}
.menu li .submenu li a{
    width: 100%;
    display: block;
    padding: 8px 20px;
    margin: 0;
    font-weight: normal;
    text-transform: none;
    text-align: left;
    font-size: 0.750em;
    color: #706f6f;
}
.menu li .submenu a:hover, .menu li .submenu li a.sel{
    color: #008282;
}

/* Work */
.work{
	width: 960px;
	margin-top: -40px;
	margin-bottom: 70px;
	position: relative;
	z-index: 2;
}
.work div{
	width: 222px;
	float: left;
	margin: 0 24px 0 0;
}
.work.projecten div{
	width: 300px;
	margin: 0;
	float: none;
	position: relative;
}
.work div.last{
	margin-right: 0;
}
.work div h2{
    background: #008282;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 10px;
    margin: 0;
	text-transform: uppercase;
	color: #fff;
    font-size: 0.875em;
	font-weight: 400;
}
.work div.wandafwerking h2, .work div.kitwerk h2{ background: #e84e0e; }

.work div img{
    width: 100%;
	margin: 0;
}

.work div ul{
	margin: 0 1px;
}
.work div ul li{
	background: #e5e5e5;
	margin: 0;
	padding: 0 0 0 15px;
	line-height: 35px;
	font-size: 0.813em;
	color: #303030;
}
.work div ul li.last{
	margin: 0;
	padding: 10px 10px 10px 10px;
	line-height: auto;
}
.work div ul li a{ 
    background: #008282;
    padding: 0px 35px 0 15px;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.125em;
	position: relative;
}
.work div.wandafwerking ul li a, .work div.kitwerk ul li a { background: #e84e0e; }
.work div ul li a:after {
    background: url(../images/arrow-right.png) no-repeat 0 0;
    content: "";
    width: 9px;
    height: 17px;
    position: absolute;
    top: 8px;
    right: 10px;
}
.work div ul li a:hover:after{
    right: 8px;
}

/* Home content */
.home-content {
     background: #ededed;
     padding:  70px;
     text-align: center;
}

.home-content h2 {
    margin-bottom: 40px;
}

.home-content p {
    margin-bottom: 40px;
}

/* Home content */
.home-content-white {
     background: fff;
     padding:  70px;
     text-align: center;
}

.home-content-white  h2 {
    margin-bottom: 40px;
}

.home-content-white  p {
    margin-bottom: 40px;
}

/* Home content */
.home-contact {
     background: #008282;
     padding:  70px;
     text-align: center;
}
.home-contact h2 {
    margin-bottom: 40px;
    color: #fff;
}

.home-contact p {
    margin-bottom: 40px;
    color: #fff;
}
.home-contact .col-c{
    width: 50%;
    float: left;

}
.home-contact .contact {
    width: 500px;
    margin: 0 auto;
}
.home-contact .contact input {
    width: 100%;
    display: block;
    float: none;
    background: #fff;
    margin: 0 0 10px 
}
.home-contact .contact select {
    width: 100%;   
}
.home-contact .contact textarea {
    width: 100%;
}

.home-contact .contact .btn-contact{ 
    background: #fff;
    height: auto;
    padding: 10px 35px 10px 15px;
	display: block;
	color: #008282;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.875em;
	position: relative;
	border: none;
	float: none;
	cursor: pointer;
}

.home-contact .contact .btn-contact:after {
    background: url(../images/arrow-right-green.png) no-repeat 0 0;
    content: "";
    width: 9px;
    height: 17px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.home-contact .contact .btn-contact:hover:after{
    right: 8px;
}

.content-col-50{
  
    width: 50%;
    float: left;
    text-align: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}
.content-col-50.left {
    padding-right: 20px;
}
.content-col-50.right {
    padding-left: 20px;
}

.project-slider {
    position: relative;
  
}
.project-content {
      background: #fff;
      padding: 20px;
}

.project-content p{
    margin-bottom: 0;
}

.project-slider img{
    
    max-width: 100%;
    width: 100%;
    height: auto;
}

.slick-arrow {
    width: 36px;
    height: 36px;
    display: block;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

.slick-arrow.slick-prev {
    background: url(../images/slider-arrow-left.png) no-repeat 0 0;
    left: 10px;
}

.slick-arrow.slick-next {
    background: url(../images/slider-arrow-right.png) no-repeat 0 0;
	right: 10px;
}


.partner-slider {
    background: #fff;
    width: 100%;
    height: 100px;
}

.partner-slider div {
    line-height: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 !important;
}

.partner-slider img{
    margin: 10px auto 0 auto;
    max-width: 120px;
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}


/* Content */
.slogan{
	background: #cacaca;
	width: 100%;
	float: left;
	height: 65px;
	margin: 325px 0 0 0;
	line-height: 65px;
	color: #fff;
	font-size: 1.375em;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 0px #000;
}
.content_titel{
	background: #e3e3e3;
	height: 70px;
	line-height: 70px;
	font-weight: bold;
	color: #000;
	font-size: 1.375em;
	text-transform: uppercase;
}
.content_titel span{
	background: url(../images/bg_content_titel.png) no-repeat 0 0;
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 0 15px 0 0;	
}
.content_titel span.schwerk{
	background-color: #634a9e;
	border: 5px solid #554087;	
}
.content_titel span.wndafw{
	background-position: 0 -60px;
	background-color: #f68b24;
	border: 5px solid #db7b21;	
}
.content_titel span.glaswerk{
	background-position: 0 -120px;
	background-color: #51abdf;
	border: 5px solid #4796c4;	
}
.content_titel span.kitwerk{
	background-position: 0 -180px;
	background-color: #bad866;
	border: 5px solid #a4bf5a;	
}
.content{
	min-height: 157px;
}
.p1 .content, .p2 .content, .p3 .content, .p4 .content{
	background: none;
}
.content h1 {
	font-size: 1em;
}
.content h2 {
	font-size: 0.875em;
}
.content p{
	font-size: 0.813em;
}
.content ul, .content ol{
	font-size: 0.813em;
}

.col5 ul li{
    margin-bottom: 35px;
}
.content p.handwriting{
	font-size: 2em;
}
.sections{
	margin: 0 0 20px 0;
}
.sections img{
	float: left;
	margin: 0 15px 0 0;
}
.sections div{
	width: 322px;
	float: left;
}
.sections div h1{
	color: #634a9e;
}
.sections div ul{
    list-style: outside square;
    margin: -15px 0 25px 0;
}
.sections div ul li{
    margin: 0 0 6px 20px;
}
.wand .sections div h1{
	color: #db7b21;
}
.glas .sections div h1{
	color: #51abdf
}
.kit .sections div h1{
	color: #a4bf5a;
}

/* Partners */
.partner-text{
    margin-bottom: 25px;
}

/* Projecten */
.fotos{
    display: none;
}
.projecten_cont{
    border: 1px dotted #1f1f1f;
    padding-bottom: 10px;
}
.projecten_cont .work{
    width: auto;
}
.projecten_cont .work.projecten div{
    width: 306px;
    float: left;
    margin: 10px 0 0 10px;
}
.projecten_cont .work.projecten div:hover .text_hover{
    margin: 0;
    width: 291px;
}
.projecten_cont .work.projecten div h1{
    background-position: 0 -250px;
    background-color: #a6a6a6;
}
.projecten_cont .work.projecten div h1 span{
    background-color: #e1e1e1;
    width: 238px;
}
.projecten_cont .work.projecten div:hover h1{
    background-position: 0 -200px;
    background-color: #554087;
}
.projecten_cont .work.projecten div:hover h1 span{
    background-color: #8874c1;
}
.projecten_cont .work.projecten div ul li a{
    background-position: right -116px;
    background-color: #a6a6a6;
    border-color: #868686; 
}
.projecten_cont .work.projecten div:hover ul li a{
    background-position: right 0;
    background-color: #907bcd;
    border-color: #554087;   
}

/* Contact */
.contact input{
    width: 172px;
    float: left;
    margin: 0 10px 10px 0;
}
.contact select{
    width: 390px;
    height: 22px;
    margin-bottom: 10px;
}
.contact textarea{
    width: 372px;
    height: 172px;
    margin-bottom: 10px;
}
.contact input.btn{
    width: auto;
    height: auto;
    padding: 10px;
    cursor: pointer;
    font-size: 0.813em !important;
}
.contact .req_txt{
    font-size: 0.750em;
    margin-top: 10px;
    margin-bottom: 0;
    float: left;
}
.gegevens{
    width: 400px;
    margin-bottom: 20px;
}
.gegevens li{
    width: 200px;
    float: left;
    margin-bottom: 5px;
}
.gegevens li.full{
    width: 300px;
}


a.btn-new {
    background: #fff;
    height: auto;
    padding: 15px 20px;
	display: inline-block;
	color: #008282;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.875em;
	position: relative;    
}

/* Footer */
.footer{
    background: #706f6f;
	position: relative;
	padding: 40px 0;
}
.footer .wrap{
	position: relative;
}

.footer .wrap .item{
	float: left;
	width: 217px;
	margin: 0 30px 0 0;
	position: relative;
	z-index: 2;
}
.footer .wrap .item h2{
	color: #bdbcbc;
	font-size: 0.813em;
	margin-bottom: 25px;
}
.footer .wrap .item ul li{
	float: left;
	width: 100%;
	margin: 0 0 5px 0;
	font-size: 0.750em;
	color: #bdbcbc;
}
.footer .wrap .item.three ul li span{
	font-weight: bold;
}
.footer .wrap .item ul li a{
	color: #bdbcbc;
	text-decoration: none;
}


.footer .wrap .item.four {
    margin-right: 0;
}


/* Homepage scroller */

.homepage-slider .item{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 480px;
}

/* Custom dropdown */
.jquery-selectbox{
    background: url(../images/bg_dropdown.png) no-repeat top right;
    height: 42px;
    width: 388px;
    float: left;
    margin: 0 0 10px 0;
    position: relative;
    color: #6b6b6b;
    z-index: 100;
    border: 1px solid #c3c3c3;
    font-size: 0.750em;
    
    -webkit-box-shadow: inset 10px 10px 6px -8px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 10px 10px 6px -8px rgba(0,0,0,0.5);
    box-shadow: inset 10px 10px 6px -8px rgba(0,0,0,0.1);	   
}

.jquery-selectbox.selecthover{
    z-index: 101;
}	
.jquery-selectbox .jquery-selectbox-currentItem{
    width: 380px;
    padding: 0 0 0 8px;
    height: 42px;
    line-height: 42px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
}
.jquery-selectbox .jquery-selectbox-list{
    background: #fff;
    border: 1px solid #c3c3ce;
    display: none;
    position: absolute;
    top: 44px;
    left: -1px;
    margin: 0;
    width: 100%;
    list-style: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
    padding: 6px 0 0 0;
}

.jquery-selectbox .jquery-selectbox-moreButton{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 42px;
    cursor: pointer;
}
.jquery-selectbox .listelementhover{
    background: #554087;
    color: #fff !important;
}
.jquery-selectbox .jquery-selectbox-item {
    width: 380px;
    padding: 8px 0 8px 8px;
    color: #6b6b6b;
    height: auto;
    display: block;
    cursor: pointer;
}
.jquery-selectbox .item-0{
    display: none;
}

/* Container DIV - automatically generated */
.simply-scroll-container { 
	position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
.simply-scroll-list li {
	padding: 0;
	margin: 0;
	list-style: none;
}
	
.simply-scroll-list li img {
	border: none;
	display: block;
}

/* Custom class modifications - adds to / overrides above

.simply-scroll is default base class */

/* Container DIV */
.simply-scroll { 
	width: 576px;
	height: 200px;
	margin-bottom: 1em;
}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
	width: 576px;
	height: 200px;
}
	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {
	float: left; /* Horizontal scroll only */
	width: 290px;
	height: 200px;
}