* { margin:0; padding:0; }
body { background:#dedede; height:100%; font-family: Arial, sans-serif; overflow-x: hidden; }
img { border:none; }
a { outline: 0; text-decoration: none; }
a.txtlink, a.txtlink:hover { color: #000; text-decoration: underline; }
h1 { font-size: 16px; line-height: 20px; margin-bottom: 16px; }
h2 { font-size: 14px; line-height: 18px; margin-bottom: 16px; }
p { font-size: 12px; line-height: 17px; margin: 0 0 10px 0; }
p.lijst { line-height: 21px; }


body.voorwie { background: url('../img/voorwie_back_1.jpg') no-repeat center center fixed; background-size: cover; }
body.hoe3 { background: url('../img/hoe_3_back_1.jpg') no-repeat center center fixed; background-size: cover; }
body.hoe4 { background: url('../img/hoe_4_back_1.jpg') no-repeat center center fixed; background-size: cover; }
body.hoe5 { background: url('../img2015/hoe_5_back_1.jpg') no-repeat center center fixed; background-size: cover; }
body.verder { background:#fff; }
body.lijn { background: url('../img/lijn_back_1.jpg') no-repeat center center fixed; background-size: cover; }



#topmenu { position:fixed; top:0; left:0; width:100%; height: 40px; background-color: #fff; z-index:999; }
#submenu { position:fixed; top:40px; left:0; width:100%; height: 40px; background-color: #666; z-index:999; }
#phonesubmenu { position:fixed; top:40px; left:0; width:100%; height: 40px; background-color: #666; z-index:999; display: none; }

#topmenu ul, #submenu ul, #phonesubmenu ul { float: left; list-style: none; margin:0; padding:10px 0 0 20px; }
#topmenu ul li, #submenu ul li, #phonesubmenu ul li { display: inline; margin-right: 20px; }
#topmenu a, #submenu a, #phonesubmenu a { font-size: 13px; font-weight: bold; }
#topmenu a { color: #000; }
#topmenu a.active { color: #666; }
#submenu a, #phonesubmenu a { color: #ccc; }
#submenu a.active, #phonesubmenu a.active { color: #fff; }
#langlogosocmeds { float: right; padding: 0; color: #f00; }
#langlogosocmeds #logo {  float: left; padding-right: 20px; }
#langlogosocmeds #lang {  float: left; padding:17px 20px 0 0; font-size: 11px; font-weight: normal; color: #000; }
#langlogosocmeds #lang a, #phonemenu #lang a {  font-size: 11px; font-weight: normal; color: #f00;  }
#langlogosocmeds #socmeds {  float: left; }
#phonemenu { position:fixed; top:0; left:0; width:100%; height: 40px; background-color: #fff; z-index:999; display: none; }

#phonemenu #lang {  float: left; font-size: 11px; font-weight: normal; color: #000; }
#phonemenu.nl ul { position: absolute; top: -80px; width: 100%; height: 30px; background-color: #666; padding: 15px 0 3px 20px; z-index:999; }
#phonemenu.nl ul li { display: inline; margin-right: 26px; }
#phonemenu.en ul { position: absolute; top: -80px; width: 100%; height: 30px; background-color: #666; padding: 15px 0 3px 15px; z-index:999; }
#phonemenu.en ul li { display: inline; margin-right: 21px; }
#phonemenu ul li a { color: #ccc; }

#phonemenu #phonelogo {  position:absolute; top: 0px; left:0px; width:100%; text-align: center; }
#phonemenu #phoneburger {  position:absolute; top: 10px; left:20px; width:40px; height: 40px; }
#phonemenu #phonelang {  position:absolute; top: 15px; right:140px; width:40px; height: 40px; }
#phonemenu #phonesocmed {  position:absolute; top: 0px; right:10px; width:110px; height: 40px; }

#topmenu ul li.phoneonly { display: none; }


#logo_home { position:absolute; top:50%; left:0; width:100%; overflow: hidden; }
#logo_home img { width: 104%;height: auto;  margin-left: -2%; }


.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb22 { margin-bottom: 22px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }


#panel1 { position:absolute; top:80px; left:10px; min-height: 100px;  background-color: #fff; padding: 10px 10px 0 10px; }
#panel2 { position:absolute; top:80px; left:420px; min-height: 100px;  background-color: #fff; padding: 10px 10px 0 10px; }
#panel1:after { position: absolute; content: ""; bottom: -40px; height: 40px; width: 1px; }

.panel { width:180px; }
.panelxxl { width:380px; }
.panel768 { width:570px; }
.panelcol { float: left; width:180px; margin-right: 10px; }
.spacer { height: 40px; margin: 0 0 -40px 0; background: transparent; }

#credits { position:fixed; bottom:10px; right:10px; background-color: #fff; padding: 2px 5px; font-size: 11px; min-width: 10px; }

#medewerkers { position:absolute; top:80px; left:230px;  }
.medewerkerpanel, .medewerkerpanel2 { float:left; display: block; width:185px; height: 270px;  background: transparent; margin: 0 30px 30px 0; cursor: pointer; }
.mwpnf { font-size: 12px; font-weight: bold; }
.recto { position: absolute; background: #fff url('../img/pijl-r.png') no-repeat; background-position: 175px 255px;  padding: 5px; width: inherit; height: inherit; }
.verso { position: absolute; background: #fff url('../img/pijl-l.png') no-repeat; background-position: 175px 255px;  padding: 5px; width: inherit; height: inherit; }
.verso p { padding: 5px; }


	.medewerkerpanel {
		-webkit-perspective: 600px;
		-moz-perspective: 600px;
						perspective: 600px;
	}
	/* -- make sure to declare a default for every property that you want animated -- */
	/* -- general styles, including Y axis rotation -- */
	.medewerkerpanel .front {
		float: none;
		z-index: 700;
		
		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}
	.medewerkerpanel.flip .front {
		z-index: 700;

		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
						transform: rotateY(180deg);
	}

	.medewerkerpanel .back {
		float: none;
		z-index: 600;

		-webkit-transform: rotateY(-180deg);
			 -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
						transform: rotateY(-179deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.medewerkerpanel.flip .back {
		z-index: 800;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);
	}

	/* -- cosmetics -- */
	.medewerkerpanel .pad {padding: 0 15px; }
	.medewerkerpanel.flip .action {display: none; }

.medewerkerpanel2 .mwps {
	position: absolute;
	width: 190px;
	height: 280px;
	padding-right: 10px;
	overflow: hidden; 
}
.medewerkerpanel2 .recto {
	margin-left: 0px;
}
.medewerkerpanel2 .verso {
	margin-left: 200px;
}
.medewerkerpanel2.popleft .recto {
	margin-left: -200px;
}
.medewerkerpanel2.popleft .verso {
	margin-left: 0px;
}




#eigenlijn { position:absolute; top:80px; left:230px; max-width: 800px;  }
.eigenlijnpanel { float:left; display: block; width:235px; height: 240px;  background: transparent; margin: 0 30px 30px 0; cursor: pointer; color: #000; }
.elrecto { position: absolute; background: #fff url('../img/pijl-r.png') no-repeat; background-position: 225px 225px;  padding: 5px; width: inherit; height: inherit; }

#eigenlijn_product { position:absolute; top:80px; left:230px; width: calc(100% - 260px); max-width: 1500px; background-color: #fff; padding: 10px;   }
#elp_img { width: 100%; height: auto; }
#elp_details { float:left; display: block; width:30%; padding-top: 24px; margin-right:10%; }
#elp_details_text { width:30%; padding-top: 24px; }
#elp_form { float:left; display: block; width:60%; padding-top: 4px; }
#elp_form table td { padding-right: 10px; vertical-align: top; }
#elp_form table td p { padding-top: 2px; }
#elp_info_only { display: none; }
#elp_dank { float:left; display: none; width:60%; padding-top: 24px; }

#eigenlijn_gallery { display: block; position:relative; width: 100%; padding-top: 48px;  }




#verderveld, #contactveld { position: absolute; top: 80px; width: 100%; }
.verdertrigger a { display: block; color: #000; font-size: 15px; font-weight: bold; padding: 10px 0 0 40px;  background: url('../img/pijl-r.png') no-repeat; background-position: 20px 13px; }
#verderveld h2 { margin-bottom: 0px; }

.verderpanels { padding: 10px; display: none; visibility: visible; }
.verderpanel { float: left; width: 370px; background-color: #fff; padding: 10px; margin-right: 10px;  }
.verdernr { font-size: 14px; font-weight: bold; }

#verdertop { display: block; width: 100%; height: 40px; background: url('../img/verder_top_back.jpg') no-repeat center center; background-size: cover; }

#verder1, #verder2, #verder3, #verder4 { display: block; width: 100%; height: 40px; }
#verder1b, #verder2b, #verder3b, #verder4b { display: block; width: 100%; height: 40px; }
#verder1b { background: url('../img2015/verder_back_1.jpg') no-repeat center center fixed; background-size: cover; }
#verder2b { background: url('../img/verder_back_2.jpg') no-repeat center center fixed; background-size: cover; }
#verder3b { background: url('../img/verder_back_3.jpg') no-repeat center center fixed; background-size: cover; }
#verder4b { background: url('../img/verder_back_4.jpg') no-repeat center center fixed; background-size: cover; }
#verder1p, #verder2p, #verder3p, #verder4p { position:absolute; width: 97%; }
.verdercredits { position:absolute; bottom:10px; right:10px; background-color: #fff; padding: 2px 5px; font-size: 11px; min-width: 10px; display: none; }

#contactveld { width: 100%; }
#contactveld2 { position: absolute; top: 40px; width: 400px; }
#contactpanels { display: block;  padding: 10px; overflow: auto; }
.contactpanel { float: left; margin-top: 20px; width: 370px; background-color: #fff; padding: 10px; margin-right: 10px;  }
.contactpanel2 { float: left; clear: both; margin-top: 30px; width: 370px; background-color: #fff; padding: 10px; margin-right: 10px;  }

form {margin-top: 20px; }
.label {
	float: left;
	clear: both;
	margin-bottom: 20px;
	font-size: 12px;
	width: 80px;
}
input[type=text], textarea { 
	float: left;
	border: 0;
	background: #ddd;
	padding: 4px;
	font-size: 11px;
	margin-bottom: 20px;
}
input[type=submit], input[type=button] { 
	float: left;
	border: 0;
	background: #999;
	color: #fff;
	padding: 7px 10px;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 20px;
	cursor: pointer;
}
.input-large { width: 260px; }
.input-medium { width: 130px; }
.input-small { width: 30px; text-align: center }
textarea.input-large { height: 160px; }
form.el_reset { display: none; }

#map-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}


#map {
	width: 100%;
	height: 100%;
}




.grid { width: 95%; overflow-x: hidden; }


.panels2018 { position:absolute; top:80px; left:40px;  }
.panel2018 { width:330px; height: 360px;  background-color: #fff; margin: 0 20px 20px 0; cursor: pointer; color: #000; }
.panel2018:hover { background-color: #f0f0f0; }
.panel2018img { position: relative; width:320px; height: 240px; margin: 5px; overflow: hidden;  }
.panel2018img img { position: absolute;
    margin: auto; width: 100%; height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.mwpnf2018 { display: block; margin: 10px; font-size: 12px; font-weight: bold; }



.lijn-item img { margin-top: 5px; }
.lijn-item-l img { width: 760px; }
.lijn-item-s img { height: 100%; max-height:570px; }



#galleryveld { position:relative; width: calc(100% - 100px); max-width: 1600px; background-color: #fff; padding: 10px; margin: 80px auto 0 auto;  }
#gallery_text { width:30%; padding-top: 24px; }
#gallery_text_columns { width:800px; padding-top: 24px; }
#gallery_text_columns div.columnar {
-webkit-columns: 300px 2; /* Chrome, Safari, Opera */
-moz-columns: 300px 2; /* Firefox */
columns: 300px 2;
}
#gallery { display: block; position:relative; width: 95%; padding-top: 48px;  }


.gall-item img { margin-top: 5px; }
.gall-item-l img { width: 100%; }
.gall-item-s img { max-width: 100%;  height: 100%; max-height:570px; }





@media (min-width: 980px) and (max-width: 1140px) {
	.panel2018 { width:290px;  }
	.panel2018img { width:280px; height: 210px; }
}



@media (min-width: 1024px) {

	.min1024 { display: block; }
	.max1023, .max500 { display: none; }

}


@media (max-width: 1023px) {
	
	.min1024, .max500 { display: none; }
	.max1023 { display: block; }
	
	.contactpanel2 { width: 270px; }
	.label { width: 60px; }
	#elp_form .label { width: 80px; }
	.input-large, .input-medium, textarea.input-large { width: 180px; }

}


@media (max-width: 900px) {

	#topmenu { height: 80px; }
	#submenu { height: 60px; top: 80px; }
	
	#panel1 { position: relative; top: 80px; padding: 10px; }
	#panel1.mobfw { width: 80%; }
	.contactpanel { width: 270px; }
	
	#medewerkers { position: relative; left: 10px; }
	
	#galleryveld > div > img { width: 100%; height: auto; }
	#gallery_text, #gallery_text_columns { width:100%; }
}



@media (max-width: 630px) {
	
	#topmenu ul li.disptablet { display: none; }
	#topmenu ul li.phoneonly { display: inline; }
	#langlogosocmeds #socmeds {  display: none; }
	
	#phonemenu { height: 80px; }
	#phonesubmenu { height: 60px; top: 80px; }
	#phonemenu #phonelang {  right:30px; }
#phonemenu #phonesocmed { top: 40px;  }
	.grid, #contactveld2 { padding-top: 20px; }
	#galleryveld { margin: 100px auto 0 auto; }
	.gall-item-s img { max-width: 100%; }
	#panel1.mt40 { margin-top: 80px; }
	

}

@media (max-width: 500px) {
	
	#topmenu ul li.hideoldphone { display: none; }

	.min1024, .max1023 { display: none; }
	.max500 { display: block; }
	
	.panel2018 { width:260px;  }
	.panel2018img { width:250px; height: 210px; }

	#phonemenu.nl ul, #phonemenu.en ul { width: 95%; height: 60px; text-align: center; }
	#phonemenu.nl ul li { display: inline-block; margin-bottom: 10px; }
	
}