html,body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: 15px;
    font-family: "Times New Roman", Times, serif;
	position: relative;
	color: #2e2e2e;
	background: white;
	}

h1, h2, h3, h4, nav a, .closeBt{
	text-transform: uppercase;

	}
h2, h1, h3{
	font-size: 120%;
	margin: 15px 0 15px 0;
	padding: 0;
	width: 100%;
	text-align: left;

	}
a{text-decoration: none; border: none; color: inherit;}

nav, footer{float: left; width: 90%; padding: 9px 0; margin: 0; min-height: 30px;}
footer{text-align: right; font-size: 90%; padding: 15px 5%;}
nav a, footer p{text-decoration: none; text-transform: uppercase; color: #2e2e2e; font-size: 100%; line-height: 30px; margin: 0 0 0 8px;}

header{float: left; width: 90%; min-height: 60px; padding: 0 5%; margin: 25px 0; display: table;}
header #title{color: #595656; float: left;}
header #title span{display: table-row;}
header #title .main{font-size: 200%;}
header #title .sub{font-size: 100%;}
header nav{width: auto; float: right; text-align: right;}

section{float: left; width: 90%; padding: 25px 5%;}
article.project{position: relative; width: 100%; background: white; float: left; padding: 0; margin: 0 0 25px 0;    animation-name: moveup;
    animation-duration: 2s; height: 200px; overflow: hidden; text-align: center;}
article.project img{width: 100%; height: auto; position: relative;}
article.project img{width: auto; height: 100%; float: none; margin: 0 auto;}
article.project .kat{text-align: center; text-transform: uppercase; margin-top: 25px; width: 100%; float: left;}
article.project h2{width: 100%; min-width: 250px; text-indent: 25px; line-height: 35px; margin: 0; text-align: left; text-indent: 25px; color: #3d3d3d; position: absolute; top: 0; left: 0; background: rgba(250,250,250,0.7);}
article.project p{width: 90%; margin: 15px 5%; float: left; color: #603d3d; font-weight: 400;}
article.project-long{width: 100%; float: left;margin: 0; padding: 0;  margin-bottom: 25px; }
article.project-long h1{font-size: 100%; margin: 0 0 12px 5%; padding: 0; float: left;}
article.project-long:nth-child(-n+3){background: white; border-top: 2px solid #cdcdcd; padding-top: 15px;}
article.project-long:nth-child(n+4){width: 100%; text-align: center;}
article.project-long img{width: auto; height: 100%; max-height: 90vh; max-width: 100%; float: none; margin: 5vh auto; object-fit: cover;
overflow: hidden;}

article.project-long p{width: 90%; margin: 0 5% 15px 5%; font-size: 100%;}

article.text{width: 100%; background: white; padding: 25px 0 10px 0;}

.toolline{float: left; width: 100%; background: #cdcdcd; line-height: 30px; height: 30px; position: relative;}
.toolline a{float: left; margin-left: 7px; z-index: 12; position: relative;}
fieldset.kontakt{width: 90%; position: relative; padding: 0; border: 0; background: white; margin: 0 5%;}
fieldset.kontakt legend{color: black;  text-align: center; font-size: 145%; letter-spacing: 1; width: 100%; padding: 0; margin: 0 0 30px 0; font-weight: bold; text-indent: 15px; text-transform: uppercase;}
fieldset.kontakt label, fieldset.kontakt input, fieldset.kontakt textarea{float: left; clear: both; margin: 5px 0; font-size: 100%;}
fieldset.kontakt label{padding: 15px 0; text-transform: uppercase;}
fieldset.kontakt input, fieldset.kontakt textarea{border: 0; border-bottom: 1px solid #cdcdcd;}
fieldset.kontakt input, fieldset.kontakt textarea, fieldset.kontakt label{width: 90%; margin: 5px 5%;}
fieldset.kontakt input::placeholder, fieldset.kontakt textarea::placeholder{color: #cdcdcd; opacity: 1;}
fieldset.kontakt input[type=submit]{box-shadow: 2px 2px 4px rgba(0,0,0,0.2); margin: 25px 5%; font-weight: 300 !important; width: auto; border: 0; background: #cdcdcd; border-bottom: 0; text-transform: uppercase; padding: 7px 15px; cursor: pointer;}
fieldset.kontakt input[type=submit]:hover{box-shadow: none; color: white; background: #ff0303; animation-name: hover; animation-duration: 1s;}
@keyframes moveup {
    from {margin-top: 120px; opacity: 0;}
    to {margin-top: 0; opacity: 1;}
}
@keyframes hover{
	from{background: #cdcdcd; color: black;}
	to{background: #ff0303; color: white;}
	}
@media all and (min-width: 800px){
	article.project{width: 48%; float: left; margin-bottom: 3vw; height: 350px;}
	article.project:nth-child(odd){margin-right: 2%;}
	article.project:nth-child(even){margin-left: 2%;}
	fieldset.kontakt legend{font-size: 195%;}
	article.project-long{width: 50%;}
	article.project-long:nth-child(1){width: 30%; background: white; }
	article.project-long:nth-child(2){width: 30%; background: white; margin: 0 1%;}
	article.project-long:nth-child(3){width: 38%; background: white; }

}


.toolline a{margin-right: 25px; text-align: left; display: inline-block;}
.toolline a img{float: left;}

#win{width: 100%; height: 100%; position: absolute; background: rgba(0,0,0,0.6); z-index: 100; display: table; top: 0; left: 0; }
#winhold{width: 100%; min-height: 100%; display: table-cell; vertical-align: middle; position: relative;} 
#win fieldset{max-width: 1000px; float: none; margin: 15px auto;}
#win fieldset input, #win fieldset.login textarea, #win fieldset.login select{width: 90%; margin: 0 5% 7px 5%; float: left; font-size: 100%; line-height: 30px;box-sizing: border-box; padding: 3px;}