/********************************
general
*********************************/
#content{
padding:  0px 0px 45px 0px;
}


H1, h2, h3, h4, h5, h6{
}
H1{
}
H2{
}
H3{
}
H4{
}
H5{
	font-size: 16px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}
H6{
	font-size: 16px;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
}

p{
	margin: 0px 0px 0px 0px;
	line-height: 1.8em;
}

b, strong{font-weight: bold}
i{font-style: italic}

/********************************
form basics
*********************************/
select{

-webkit-appearance: menulist;
box-sizing: border-box;
-webkit-box-align: center;
}

/********************************
general
*********************************/
/******* Home ********/
.home_info{
	display: block;
	width: 775px;
	height: 250px;
	overflow:hidden;
	position: absolute;
	left: 50%;
	left:    -moz-calc(50% - 387.5px);
	left: -webkit-calc(50% - 387.5px);
	left:      -o-calc(50% - 387.5px);
	left:         calc(50% - 387.5px);
	top: 50%;
	top:    -moz-calc(50% - 115px);
	top: -webkit-calc(50% - 115px);
	top:      -o-calc(50% - 115px);
	top:         calc(50% - 115px);
	color: white;
	font-size: 18px;
		letter-spacing: 0.05em;
}
.home_generaties{
	background-color: rgba(35, 35, 35, 0.8);
	padding: 20px 10px 40px 10px;
	width: 640px;
}
.home_generaties h3{
	font-weight: 300;
	font-style: italic;
	font-size: 36px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0px 0px 10px 0px;
}
.home_generaties h1{
	font-size: 36px;
	text-align: center;
		font-weight: 300;
		text-transform: uppercase;
}
.home_occ{
	background-color: #c54545;
	margin: -30px 0px 0px 0px;
	width: 418px;
	text-align: center;
	font-weight: 300;
	padding:  25px 0px 20px 0px;
	margin-left: 355px;
}
.home_occ h2{
	font-size: 32px;
	margin-bottom: 15px;
}

.home_occ h3{
	font-weight: 300;
	font-style: italic;
	font-size: 16px;
}

/******* ons-verhaal *********/
.verhaal_left{
	float:left;
	display: block;
	width: 52%;
	overflow:hidden;
	margin: 20px 0% 0px 4%;
	padding:  0px 0px 0px 0px;
}
.verhaal_right{
	width: 39%;
	margin: 10px 5% 0px 0px;
}

.verhaal_left h1{
	background-color: rgba(35, 35, 35, 0.8);
	padding: 20px;
	width:80%;
	font-size: 18px;
	text-align: center;
	font-weight: 300;
	color: white;
}
.verhaal_left.realisatie h1{
	width: 100%;
	text-align: left;
	background-color: rgba(197, 69, 69, 0.8);
	margin-bottom: 20px;

}

.verhaal_generaties{
	background-image: url(https://www.parketeycken.be/images/interface/bg_tijdslijn.png);
	background-position: top left;
	background-repeat: repeat-y;
	padding:  30px 0px 30px 0px;

}
.generatie{
	margin: 0px 0px 30px 0px;
	width: 100%;
	display: block;
	padding:  0px 0px 0px 33px;

}
.generatie_tijd, .generatie h2{
	float:left;
	display: block;
	width: 75px;
	overflow:hidden;
	margin: 0px 0px 0px 0px;
	padding:  0px 0px 0px 0px;

}
.generatie_tijd{
	border-radius: 50%;
	background-color: #c54545;
	display: block;
	width: 75px;
	height: 60px;
	text-align: center;
	font-size: 15px;
	font-style: italic;
	padding:  15px 0px 0px 0px;
	color: white;
	letter-spacing: 0.05em;
}
.generatie h2{
	padding:  0px 0px 0px 0px;
	margin: 15px 0px 0px 0px;
	width:    -moz-calc(100% - 75px);
	width: -webkit-calc(100% - 75px);
	width:      -o-calc(100% - 75px);
	width:         calc(100% - 75px);
	text-align: center;
	color: white;
	font-size: 40px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.05em;
}

.oo_verhaal_container{
margin: 93px 0px 0px 0px;
position: relative;
display: block;
}

.oo_verhaal_container img{
	width: 100%;
}
.oo_verhaal{
margin: 93px 0px 0px 0px;

	/*position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	*/
	 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

}

.oo_verhaal_tekst{
	font-size: 14px;
	padding:  20px 20px 20px 25%;
	text-align: right;
	color: white;background-color: rgba(197, 69, 69, 0.7);
}


.oo_verhaal_tekst p{
	margin: 0px 0px 20px 0px;
	line-height: 1.9em;
	letter-spacing: 0.05em;
}

.oo_verhaal_pic_info{
	text-align: right;
	font-style: italic;
	font-size: 13px;
	margin: 15px 0px 15px 0px;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    margin: 0px 0px 20px 0px;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.vakmanschap_item{
	display: block;
	width: 50%;
	width:    -moz-calc(50% - 45px);
	width: -webkit-calc(50% - 45px);
	width:      -o-calc(50% - 45px);
	width:         calc(50% - 45px);
	margin: 45px 22.5px 0px 22.5px;
	overflow: hidden;
}


div.vakmanschap_content{
	padding:  25px;
	background-color: rgba(35, 35, 35, 0.80);
	color:white;
	letter-spacing: 0.05em;
}
div.vakmanschap_item.realisaties div.vakmanschap_content{
	padding:  0;
	position: relative;
	background-color: transparent;
}
div.vakmanschap_content.twee,
div.vakmanschap_content.drie{
	background-color: rgba(197, 69, 69, 0.8);
}


@media screen and (min-width: 1500px) {
	div.vakmanschap_item{
		display: block;
		width: 33.33333%;
		width:    -moz-calc(33.33333% - 45px);
		width: -webkit-calc(33.33333% - 45px);
		width:      -o-calc(33.33333% - 45px);
		width:         calc(33.33333% - 45px);
		margin: 45px 22.5px 0px 22.5px;
	}
	div.vakmanschap_content.twee,
	div.vakmanschap_content.vier{
		background-color: rgba(197, 69, 69, 0.8);
	}
	div.vakmanschap_content.drie{
	background-color: rgba(35, 35, 35, 0.80);
	}

	div.vakmanschap_item.realisaties  div.vakmanschap_content.twee h1,
	div.vakmanschap_item.realisaties  div.vakmanschap_content.vier h1{
		background-color: rgba(197, 69, 69, 0.8);
	}
	div.vakmanschap_item.realisaties  div.vakmanschap_content.drie h1{
	background-color: rgba(35, 35, 35, 0.80);
	}

}
div.vakmanschap_content h1{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
	text-transform: uppercase;
	margin: 0px 0px 20px 0px;
}

div.vakmanschap_item.realisaties div.vakmanschap_content a h1{
	position: absolute;
	bottom: 0;
	margin: 0px 0px 0px 0px;
	padding:  15px 20px;
	text-transform: none;
	background-color: rgba(35, 35, 35, 0.80);
		width:    -moz-calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		width:      -o-calc(100% - 40px);
		width:         calc(100% - 40px);
		font-size: 14px;
		color: white;
}

div.vakmanschap_item.realisaties div.vakmanschap_content.twee h1,
div.vakmanschap_item.realisaties div.vakmanschap_content.drie h1{
	background-color: rgba(197, 69, 69, 0.8);
}
div.vakmanschap_content p{
	line-height: 1.8em;
	margin: 0px 0px 15px 0px;
	max-width: 500px;
}

.vakmanschap_beeld img{
	margin-bottom: 20px;
	width: 100%;
	height: auto;
}

.realisaties_pic img{
	width: 100%;
	height: auto;
	margin-bottom: 0px;
}

/********** realisatie detail **********/
.verhaal_right.realisatie{
	margin: 20px 0px 0px 0px;
	width: 44%;
		width:    -moz-calc(44% - 30px);
		width: -webkit-calc(44% - 30px);
		width:      -o-calc(44% - 30px);
		width:         calc(44% - 30px);
}
.realisatie_info{
	background-color: rgba(197, 69, 69, 0.8);
	font-size: 14px;
	padding:  40px 10% 40px 10%;
	margin: 0px 0px 0px 30px;
	color: white;
	display: block;
}


.realisatie_info p{
	margin: 0px 0px 20px 0px;
	line-height: 1.9em;
	letter-spacing: 0.05em;
}

.realisatie_pic img{
	display: block;
	margin: 0px 0px 20px 0px;
	width: 100%;
}

.realisatie_nxt_prev{

}
.realisatie_nxt{
	margin: 0px 0px 20px 0px;
}
.realisatie_nxt a{
	display: block;
	padding:  20px;
	background-color: rgba(35, 35, 35, 0.8);
	color: white;
	text-decoration: none;
	text-align: center;
	background-image: url(https://www.parketeycken.be/images/interface/arrow-right.png);
	background-position: 95% center;
	background-repeat: no-repeat;
}

.realisatie_nxt.realisatie_prev a{
	background-image: url(https://www.parketeycken.be/images/interface/arrow-left.png);
	background-position: 5% center;
}

.realisatie_nxt.realisatie_top a{
	background-image: url(https://www.parketeycken.be/images/interface/arrow-up.png);
	background-position: 5% center;
}
.realisatie_nxt a:hover{

	background-color: rgba(35, 35, 35, 1);
}


/*********** contact **********/

select, input:not([type=submit]), textarea{
	border:1px solid #ccc;
	border-radius:2px;
	padding-right:30px;
	-moz-transition: padding .25s;
	-webkit-transition: padding .25s;
	-o-transition: padding .25s;
	transition: padding .25s;
	height:15px;
	width:100%;
	width:    -moz-calc(100% - 20px);
	width: -webkit-calc(100% - 20px);
	width:      -o-calc(100% - 20px);
	width:         calc(100% - 20px);
	padding:5px 8px;
	margin: 0px 0px 30px 0px;
	background-color: rgba(255, 255, 255, 0.9);
}
select{height: 25px}
textarea{
 	display: block;
 	height: auto;
 }

.dataField.double {
	float:left;
	display: block;
	width:50%;
	width:    -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width:      -o-calc(50% - 10px);
	width:         calc(50% - 10px);

	overflow:hidden;
	margin: 0px 20px 0px 0px;
	padding:  0px 0px 0px 0px;
}
.dataField.double.last{margin-right: 0;}
.dataLabel{
	text-transform: lowercase;
	padding-bottom: 5px;
	display: block;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.83);
}

.dataField.error .dataLabel{
	color: rgba(197, 69, 69, 0.9);
}
.dataField.error{color: #bc4415}
.dataField.error input:not([type=submit]),
.dataField.error textarea,
.dataField.error select
.terms.error input{
 	border-color: rgba(197, 69, 69, 0.9);color: rgba(197, 69, 69, 0.9);
}

.btncheckout{
	display: block;
	padding:  20px;
	width:100%;
	background-color: rgba(197, 69, 69, 0.8);
	color: white;
	text-decoration: none;
	text-align: center;
	background-image: url(https://www.parketeycken.be/images/interface/arrow-right.png);
	background-position: 95% center;
	background-repeat: no-repeat;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
}

.btncheckout:hover{
	background-color: rgba(197, 69, 69, 1);
}

.errorBlock, .infoBlock{
	display: block;
	padding: 20px;
	color: white;
    background-color: rgba(197, 69, 69, 0.8);
    margin: 0px 0px 20px 0px;
	letter-spacing: 0.05em;
}
.infoBlock{
	background-color: rgba(150, 197, 69, 0.77);
}
.contact_container .errorBlock h1, .contact_container .infoBlock h1{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
	text-transform: uppercase;
	margin: 0px 0px 5px 0px;
	letter-spacing: 0.05em;
}

.form_required{
	margin: 20px 0px 0px 0px;
	font-size: 10px;
	color: #aaa;
	text-align: center;
}
.contact_container{
	padding: 30px;
}

.contact_left{
	float:left;
	display: block;
	width: 40%;
	width:    -moz-calc(40% - 20px);
	width: -webkit-calc(40% - 20px);
	width:      -o-calc(40% - 20px);
	width:         calc(40% - 20px);
	overflow:hidden;
	margin: 0px 40px 0px 0px;
	padding:  0px 0px 0px 0px;
}

.contact_left.contact_right{
	width: 60%;
	width:    -moz-calc(60% - 20px);
	width: -webkit-calc(60% - 20px);
	width:      -o-calc(60% - 20px);
	width:         calc(60% - 20px);
}
.contact_left.contact_right, .contact_info.contact_toonzaal{
	margin-right: 0;
}

.contact_info .contact_container{
	background-color: rgba(197, 69, 69, 0.8);
	font-size: 13px;
	padding:  20px 5% 20px 5%;
	margin: 0px 0px 0px 5%;
	color: white;
	display: block;
}
.contact_toonzaal.contact_info .contact_container{
	background-color: rgba(35, 35, 35, 0.8);
}

.contact_form_container{
	background-color: rgba(35, 35, 35, 0.8);
	font-size: 13px;
	padding:  20px 5% 20px 5%;
	margin: 0px 0px 0px 0;
	color: white;
	display: block;
	max-width: 950px;
}

.contact_container h1{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
	text-transform: uppercase;
	margin: 0px 0px 20px 0px;
	letter-spacing: 0.05em;

}
.contact_container h2{
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6em;
	text-transform: uppercase;
	margin: 0px 0px 0px 0px;
	letter-spacing: 0.05em;

}

.contact_info h3,
.contact_info p{
	font-size: 13px;
	margin: 0px 0px 20px 0px;
	letter-spacing: 0.05em;
	line-height: 1.8em;
}
.contact_info a{
	color: white; text-decoration: none;
}
.contact_info a:hover{text-decoration: underline;}