@charset "UTF-8";

/*__________________________________________________________________________________________________________________________ */
/*------------------------------------------------------------------------------------------------------------------- CONFIG */
html {
	width: 100%;
	height: 100%;
}

body {
	/*font-family:Verdana, Arial, Helvetica, sans-serif;*/
	/*font-family: 'Ubuntu Condensed', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	width: 100%;
	height:100%;
	margin:0;
	padding:0;
	color:#333;
}

button { cursor:pointer; }

a:link{
	text-decoration:none;
	color:#666;
	transition:0.3s;
	font-weight:bold;
}
a:visited{
	text-decoration:none;
	color:#666;
}
a:active{
	text-decoration:none;
	color:#ff6600;
}
a:hover{
	text-decoration:none;
	color:#000;
	
}

.hide {
	transition: 0.3s;
	opacity:0.0;
}
.show {
	transition: 0.3s;
	opacity:1.0;
	display:block;
}
div{
	transition:0.3s;
}


/*__________________________________________________________________________________________________________________________ */
/*------------------------------------------------------------------------------------------------------------------- Header */
#header{
	position:absolute;
	width:100%;
	height:90px;
	transition:0.3s;
	z-index:10;
	transition:0.3s;
	border:0px solid grey;
}
#header.fixed{
	position:fixed;
	width:100%;
	top:-90px;
}
#logo{
	position:absolute;
	left:25%;
	width:50%;
	height:90px;
	transition:0.3s;
	border:0px solid red;
}
#logo.fixed{
	position:fixed;
	left:70%;
	width:200px;
	height:40px;
	margin-top:90px;
	transition:0.3s;
	border:0px solid red;
	z-index:12;
}


#logo:hover{
	/*-webkit-transform: scale3d(1.05, 1.05, 1);*/
}


#logo img{
	float:right;
	height:100%;
	transition:0.3s;
}

@media (max-width: 1650px) { /*falls kleiner als */

	#logo{
		left:15%;
		width:70%; /*### 80808080*/
		height:90px;
	}

}

@media (max-width: 1280px) { /*falls kleiner als */
	#header{
		position:fixed;
		height:75px;
		border-bottom:5px solid #ccc;
		background:#fff;
	}
	
	#header.fixed{
		position:fixed;
		width:100%;
		top:0px;
		
	}
	
	#logo{
		top:0%;
		left:30%;
		width:calc(70% - 0px); /*### 80808080*/
	}
	
	#logo.fixed{
		position:fixed;
		left:25%;
		width:75%; /*### 80808080*/
		height:40px;
		margin-top:0px;
		transition:0.3s;
		border:0px solid red;
		z-index:12;
	}
	
	#logo img{
		width:auto;
		height:75px;
	}
}


@media (max-width: 547px) { 

	#logo img{
		width:100%;
		height:auto;
		margin-top:5px;
	}

}
@media (max-width: 400px) { 

	#logo img{
		margin-top:17px;
	}

}

/*__________________________________________________________________________________________________________________________ */
/*--------------------------------------------------------------------------------------------------------------- Nav Button */
#navbutton{
	position:fixed;
	right:3%;
	top:5%;
	display:none;
}
@media (max-width: 1280px) { /*falls kleiner als */
	#navbutton{
		position:absolute;
		left:0%;
		top:0%;
		z-index:1000;
		cursor:pointer;	
		border:0px solid red;
		margin:0;
		display:block;
		width:75px;
	}
	#navbutton button {
		display: inline-block;
		border: none;
		background: none;

		-webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
		-webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
		outline: none!important;
	}
	#navbutton button span {
	  display: block;
	}
	.lines-button {
	  padding: 15px;
	  transition: .3s;
	  cursor: pointer;
	  user-select: none;
	  width:70px;
	  height:75px;
	  /*border-radius: 0.57143rem;
	   */
	}
	.lines-button:hover {
	  opacity: 1;
	}
	.lines-button:active {
	  transition: 0;
	}

	.lines {
	  display: inline-block;
	  width: 40px;
	  height: 7px;
	  background: #666;
	  /*border-radius: 0.28571rem;*/
	  transition: 0.3s;
	  position: relative;
	}
	.lines:before, .lines:after {
	  display: inline-block;
	  width: 40px;
	  height: 7px;
	  background: #666;
	  /*border-radius: 0.28571rem;*/
	  transition: 0.3s;
	  position: absolute;
	  left: 0;
	  content: '';
	  -webkit-transform-origin: 0.28571rem center;
	  transform-origin: 0.28571rem center;
	}
	.lines:before {
	  top: 10px;
	}
	.lines:after {
	  top: -10px;
	}

	.lines-button:hover .lines:before {
	  top: 15px;
	}
	.lines-button:hover .lines:after {
	  top: -15px;
	}


	.lines-button.x.open .lines {
	  background: transparent;
	}
	.lines-button.x.open .lines:before, .lines-button.x.open .lines:after {
	  -webkit-transform-origin: 50% 50%;
	  transform-origin: 50% 50%;
	  top: 0;
	  width: 40px;
	}
	.lines-button.x.open .lines:before {
	  -webkit-transform: rotate3d(0, 0, 1, 45deg);
	  transform: rotate3d(0, 0, 1, 45deg);
	}
	.lines-button.x.open .lines:after {
	  -webkit-transform: rotate3d(0, 0, 1, -45deg);
	  transform: rotate3d(0, 0, 1, -45deg);
	}
}
/*__________________________________________________________________________________________________________________________ */
/*----------------------------------------------------------------------------------------------------------------- Nav Menu */
#nav{
	position:absolute;
	width:100%;
	height:40px;
	top:90px;
	background:#fff;
	transition:0.3s;
	border:0px solid grey;
	border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
}

#nav ul{
	position:absolute;
	left:25%;
	width:auto; /*### 80808080*/
	height:30px;

	
	margin:0;
	padding:0;
	margin-top:5px;
	
	list-style:none;
	transition:0.3s;
	border:0px solid red;
	border-right:1px solid #bbb;

}

#nav ul li{
	float:left;
	height:30px;
	line-height:40px;
	margin:0;
	padding:0;
}



#nav ul li a {
	float:left;
	height:30px;
	line-height:30px;
	width:auto;
	font-size:16px;
	font-weight:normal;
	color:#777;
	border-left:1px solid #bbb;
	padding-left:20px;
	padding-right:20px;
	transition:0.3s;
	text-transform:uppercase;
}

#nav ul li.home a{
	
}

#nav ul li a:hover {
	color:#000;
}

#nav ul li a.navactive {
	color:#ff6600;
	/*font-weight:bold;*/
}


@media (max-width: 1650px) { /*falls kleiner als */

	#nav ul{
		left:15%;
	}

}
@media (max-width: 1280px) { /*falls kleiner als */
	#nav{
		position:fixed;
		width:calc(100% - 0px);
		height:0px;
		top:80px;
		background:#FFF;
		transition:0.3s;
		padding:0px;
		border:none;
		border-bottom:1px solid #ccc;
		opacity:0;
		overflow:hidden;
		z-index:2;
	}
	#nav.open{
		width:calc(100% - 20px);
		height:auto;
		opacity:1;
		padding:10px;
		top:80px;
	}
	#nav ul{
		position:static;
		float:left;
		width:calc(100% - 0px);
		height:auto;
		
		margin:0;
		padding:0;

		
		list-style:none;
		transition:0.3s;
		border:0px solid red;
	}
	#nav ul li{
		float:left;
		height:60px;
		width:100%;
		line-height:60px;
		margin:0;
		padding:0;
		text-align:left;
	}

	#nav ul li a {
		
		margin:0;
		padding:0;
		float:left;
		height:60px;
		line-height:60px;
		width:100%;
		font-size:18px;
		color:#777;
		transition:0.3s;
		border:none;
		border-bottom:1px solid #ccc;
	}

	#nav ul li a:hover {
		color:#000;
		background:#eee;
	}

	
	#nav ul li.home {
		display:none;
	}
}





/*__________________________________________________________________________________________________________________________ */
/*------------------------------------------------------------------------------------------------------------------ Content */
#content{
	float:left;
	height:auto;
	width:100%;
	border:0px solid red;
	margin-top:160px;
	min-height:calc(100% - 160px);
}

@media (max-width: 1280px) { /*falls kleiner als */

	#content{
		float:left;
		height:auto;
		
		width:calc(100% - 20px); /*### 80808080*/
		margin-top:95px;
	}
}



#resize{
	position:absolute;
	left:25%;
	width: calc(50% - 20px);
	transition:0.3s;
	margin-top:0px;
	transition:0.3s;

	min-height:calc(100% - 200px);
	height:auto;
	padding-left:10px;
	padding-right:10px;;

	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 1s; /* Firefox < 16 */
	-ms-animation: fadein 1s; /* Internet Explorer */
	 -o-animation: fadein 1s; /* Opera < 12.1 */
		animation: fadein 1s;
}

#resize h1{
	float:left;
	width:100%;
	border:0px solid red;
	margin:0;
	text-transform:uppercase;
	font-size:32px;
	
}

#resize h2{
	float:left;
	width:100%;
	border:0px solid red;
	margin:0;
	font-size:18px;
	color:#ff6600;
	margin-bottom:0px;
	margin-top:-5px;
	padding-bottom:5px;
	text-transform:uppercase;
	font-weight:normal;	
	border-bottom:1px solid #ccc;	
}

@media (max-width: 1650px) { /*falls kleiner als */

	#resize{
		position:absolute;
		left:15%;
		width:calc(70% - 0px); /*### 80808080*/
	}

}
@media (max-width: 1280px) { /*falls kleiner als */
	#resize{
		position:absolute;
		left:0%;
		width:calc(100% - 20px); /*### 80808080*/
		border:0px solid red;
		padding-left:10px;
		padding-right:10px;
	}
}
/*__________________________________________________________________________________________________________________________ */
/*----------------------------------------------------------------------------------------------------------------- Hometext */
#hometext{
	float:left;
	width:70%;
	margin-top:15px;
	border:0px solid red;
}
#hometext p{
	float:left;
	width:50%;
	margin:0;
	padding:0;
}
@media (max-width: 500px) { /*falls kleiner als */
	#hometext{
		width:100%;
	}
}
/*__________________________________________________________________________________________________________________________ */
/*--------------------------------------------------------------------------------------------------------------- Referenzen */
#resize ul{
	float:left;
	width:100%;
	border:0px solid red;
	margin:0;
	padding:0;
	margin-bottom:5px;
}


#resize ul:nth-child(odd) {background-color: #eee}
#resize ul:nth-child(even) {background-color: #fff}

#resize ul li {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	font-size:14px;
}




#resize ul li.g_year{
	width:calc(20% - 5px);
	padding-right:5px;
}
#resize ul li.g_proj{
	width:calc(50% - 5px);
	padding-right:5px;
}
#resize ul li.g_aufg{
	width:30%;
}

@media (max-width: 500px) { /*falls kleiner als */
	#resize ul li {
		font-size:10px;
	}
}


#resize ul li.l_year{
	width:calc(20% - 5px);
	padding-right:5px;
}
#resize ul li.l_auft{
	width:calc(30% - 5px);	
	padding-right:5px;
}
#resize ul li.l_proj{
	width:calc(30% - 5px);
	padding-right:5px;
}
#resize ul li.l_aufg{
	width:calc(20% - 0px);
}



/*__________________________________________________________________________________________________________________________ */
/*---------------------------------------------------------------------------------------------------------------- Über mich */
#ppic{
	float:right;
	width:23%;
}

#pdata{
	float:left;
	width:77%;
}

@media (max-width: 500px) { /*falls kleiner als */
	#ppic{
		float:left;
		width:60%;
	}

	#pdata{
		float:left;
		width:100%;
	}
}


#resize ul li.u_left{
	width:calc(26% - 5px);
	padding-right:5px;
}
#resize ul li.u_right{
	width:calc(74% - 0px);
}


#resize ul li.u_year{
	width:calc(20% - 5px);
	padding-right:5px;
}
#resize ul li.u_info{
	width:calc(80% - 0px);
}
/*__________________________________________________________________________________________________________________________ */
/*--------------------------------------------------------------------------------------------------------------- Tätikeiten */


#l_one li{
	width:calc(100% - 5px);
	padding-right:5px;
}

#l_one li:nth-child(odd) {background-color: #eee}
#l_one li:nth-child(even) {background-color: #fff}

/*__________________________________________________________________________________________________________________________ */
/*--------------------------------------------------------------------------------------------------------------- Kontakt */
#adrblock{
	float:left;
	width:60%;
	margin-top:10px;
}
@media (max-width: 1280px) { /*falls kleiner als */
	#adrblock{
		width:100%;
	}
}
#qrvisit{
	float:left;
	width:40%;
	border:0px solid red;
	display:block;
	text-align:right;
}
@media (max-width: 1280px) { /*falls kleiner als */
	#qrvisit{
		float:left;
		width:100%;
		border:0px solid red;
		display:none;
	}
}
/*__________________________________________________________________________________________________________________________ */
/*-------------------------------------------------------------------------------------------------------- Fade-In page Load */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*__________________________________________________________________________________________________________________________ */
/*--------------------------------------------------------------------------------------------------------------------Gallery */


#gallerytext{
	position:absolute;
	z-index:100;
	width:270px;
	height:45px;
	margin:0;
	padding:0;
	left:calc(100% - 290px);
	top:calc(100% - 55px);
	border:1px solid #ccc;
	background:#fff;
	color:#333;

	overflow:hidden;
	
	font-size:14px;
	padding-left:5px;
	padding-right:5px;
	text-align:center;
}
#gallerytext button{
	background:none;
	border:none;
	padding:0;
	margin:0;
	font-size:18px;
	font-weight:bold;
	color:#333;
}
/*__________________________________________________________________________________________________________________________ */
/*------------------------------------------------------------------------------------------------------------------Diverses */

#totop{
	position:fixed;
	bottom:-55px;
	right:20%;
	height:55px;
	width:60px;
	background:#666;
	background:none;
	line-height:50px;
	text-align:center;
	font-size:60px;
	/*color:white;*/
	color:#ff6600;
	transform: rotate(270deg);
	cursor:pointer;
	opacity:0;
	transition:0.3s;
}

@media (max-width: 1650px) { /*falls kleiner als */

	#totop{
		right:8%;
	}

}

#totop.active{
	position:fixed;
	bottom:20px;
	opacity:1;
}