@charset "utf-8";

* { border:0; margin:0; padding:0; background:transparent; vertical-align:baseline; font-size:100%; }
html { height:100%;  min-width:320px; background:#fff; overflow-y:scroll; font-size:62.5%; line-height:2em; }
body { position:relative; min-height:100%; margin: 0 auto; color:#232323; text-align:left; font:1.4em/1.5em Oswald, Helvetica, Arial, sans-serif; overflow:hidden; font-weight: 100; background-size: cover; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: 'Oswald', sans-serif; }
h1 { font-size: 2em; margin-top: 0px; padding-top: 40px; margin-bottom: 20px; font-weight: 500; text-transform: uppercase }
h2 { font-size: 1.6em; margin-top: 0px; padding-top: 40px; margin-bottom: 10px; font-weight: 500 text-transform: uppercase }
h3 { font-size: 1em; padding-top: 20px }
h4 { font-size: 17px; color: #ffffff; text-align: center; margin: 10px 0 20px;}
	
label { color: white; display: block; margin: -15px 0 20px }
p { font-size: 1.1em; line-height: 2em; text-align: left; }
span.initial { font-size: 1.8em }

a { text-decoration:underline; color:#000000; transition: color 0.3s; -moz-transition: color 0.3s; -webkit-transition: color 0.3s; }
a:hover { color:#232323}

img { width: 100%; height: auto; vertical-align: bottom; }

ul.list { padding: 10px 0 0 30px; font-size: 1.1em }
ul.list li { margin-bottom: 10px }

/* 
 * header 
 */

header { height: 150px; background-color:#ffffff; position: relative; z-index: 3 }
header img { display: block; width: 101px; height: 117px; margin-left: auto; margin-right: auto; margin-top: 15px; }
.headlink { display: block; max-width: 200px; margin: 0 auto }
.logo { margin-top: 0; padding-top: 15px }
.logowrapper { width: 101px; margin: 0 auto; }
.logowrapper img {float: left; height: auto; }
.logowrapper img:first-child {width: 40px; }
.logowrapper img:nth-child(2) {width: 60.6px; }
.logowrapper img:nth-child(3) {width: 100px; margin-top: 0 }

/* 
 * content 
 */

/*#pagewrapper { max-width: 1200px; margin: 0 auto;}*/

table { table-layout: fixed; margin: 30px auto }
td p { margin: 0; }

/* mini two column layout  */
.row { margin: 0 auto }  
.row-400 { min-height: 400px; }
.row-640 { max-width: 640px; }
.row-over { padding: 25px 3000em; margin: 0px 3000em; }
.row:after, form:after, .layer-container:after, .slider-outer:after, .menu:after {content:''; line-height:0; clear:both; display:table;}
.col, .col-8 .col-6, col-4 {float:left; padding: 30px; position:relative; list-style:none; margin:0; width:100%; min-height:1px;
	-webkit-box-sizing:border-box; 
	   -moz-box-sizing:border-box; 
	 		box-sizing:border-box;}
.col-8 {width:66.666666%;}
.col-6 {width:50%;}
.col-4 {width:33.333333%;}

#page-1 .col-6, #page-2 .col-6 { padding: 85px 10% 85px 10px }
#page-1 p, #page-2 p { font-size: 1.5em }
#page-impressum .col, #page-impressum p { text-align: center; }
#page-impressum h1 { padding-top: 0; padding-bottom: 10px }
#page-impressum h2 { padding-top: 20px }
.img-container .col-4 { padding: 0 }
.img-container a { color: white }

/* the hidearrow for the white overlay */
.hidearrow { background: url(../images/pfeil_overlay.png) no-repeat; background-size: contain; width: 40px; height: 30px; position: absolute; right: 30px; cursor: pointer; transition: 1.5s;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
 }
 .closed { margin-left: -43% !important; transition: 1s; }
.closed .hidearrow { 
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

/* backgrounds */
.bg-gray { background: #232323; color: white;}
.bg-profil { background: url(../images/LD_projekte_768x1024_profil.jpg) right top no-repeat; background-size: cover; position: relative; min-height: 400px; }
.bg-kontakt { background: gray }
.bg-kontakt2 { background: url(../images/kontaktld.jpg); background-size: cover; display: none; }
.bg-blacktrans { background-color: rgba(0,0,0,0.8); }
.bg-whitetrans { background-color: rgba(255,255,255,0.7); }
.bg-whitetrans h1 { color: #232323; }
.kontakt-blacktrans { position: absolute; z-index: 1; top: 0px; }

/* forms */
input[type="text"], textarea { font-family: 'Oswald', serif; font-size: 1.6em; background-color: rgba(0,0,0,0); color: white; text-align: left; height: 50px; margin-bottom: 20px; width: 100%; border: 0px; border-radius: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input[type="text"] { border-bottom: 2px solid white }
textarea { padding-top: 5px; height: 150px; border-bottom: 2px solid white; vertical-align: bottom; }
input[type="submit"]  { font-family: 'Oswald', sans-serif; font-size: 1.6em; color: #232323; text-align: center; vertical-align: middle; background: white; margin: 0 auto; width: 100%; text-align: middle; display: block; cursor: pointer; border: 2px solid white; padding: 5px; }
input[type="submit"]:hover { background-color: rgba(0,0,0,0); color: white; border: 2px solid white; }
input[type="submit"]:active { margin-top: 10px }
#form-success { display: none; border: 1px solid white; margin-bottom: 10px; padding: 7px; color: white; font-family: 'Oswald', sans-serif; font-size: 1.1em; }
 .form-error { display: none; color: red}
 input.error, textarea.error { border-bottom: 2px solid red }

.transoverlay { background: rgba(255,255,255,0.6); position: absolute; width: 100%; height: 65px; display: block; bottom: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Custom */

#map-canvas { min-height: 529px }

/* Image Overlay */

.img-overlay .overlay { position: absolute; z-index: 1; background: rgba(35, 35, 35, 0.8); transition: all 0.5s; top: 0; width: 100%; height: 100%; opacity: 1; text-decoration: none; font-size: 1.6em}
.img-overlay:hover .hideOverlay { opacity: 1 !important; visibility: visible !important }
.img-overlay span { position: absolute; text-align: center; top: 50%; width: 100%; }
.img-overlay a:hover { color: white }
.img-overlay a { height: 100%; display: block; }
.hideOverlay { opacity: 0 !important; visibility: hidden !important }

/* 
 * footer 
 */

footer { background-color:#ffffff; width: 100%; }
footer a:hover { text-decoration:none; color: #7c7c7a}
footer a { text-decoration:none; color:#232323 }
footer .kontakt { margin: 0 auto; padding: 11px;}
.menu { font-family: 'Oswald'; font-size: 1.5em; max-width: 800px; margin: 10px auto; font-weight: 500 }
.menu > div {width: 33.3333%; float: left; text-align: center; padding: 11px 0px; color:#4f5152 }
.menu li { float:left; margin:20px 0; padding:0; list-style:none; width: 33%; text-align: center }
.kontakt a { color: white; text-decoration: underline }
.kontakt > div { max-width: 640px; margin: 0 auto }
.kontaktinfo { color: white; width: 170px; margin: 40px auto 0;}
.kontaktinfo > p { line-height: 1.2em; text-align: center; }

.right { float: right; }

/* Index Animation */

/*.logowrapper > img:first-child, .logowrapper > img:nth-child(2), .logowrapper > img:nth-child(3), #page-1 #main, #page-1 footer, #page-1 .cd-nav, #page-1 .cd-header-buttons { display: none; }*/
	
@media screen and (max-width: 850px) {

	.col-8, .col-6, .col-4 { width: 100%; padding-top: 0; padding-bottom: 0 }
	.kontakt-blacktrans { position: relative; top: 0; padding-top: 30px }
	#map-canvas { min-height: 400px }

}
	
@media screen and (max-width: 500px) {

	.products { max-width: 170px; }
	.products > img { width: 100%; }
	h1 { font-size: 1.5em; }
	.hidearrow { width: 30px }

}