@charset "utf-8";
/* CSS Document */

@font-face {
font-family: "IKANSEEYOUALL";
  src: url(fonts/IKANSEEYOUALL_Trial.otf);
  src: url(fonts/IKANSEEYOUALL-WebTrial.eot);
  src: url(fonts/IKANSEEYOUALL-WebTrial.svg);
  src: url(fonts/IKANSEEYOUALL-WebTrial.ttf);
  src: url(fonts/IKANSEEYOUALL-WebTrial.woff);
  src: url(fonts/IKANSEEYOUALL-WebTrial.woff2);
}

/*----------------------
---     Preloader    ---
----------------------*/



/* -------------------------
----- Allgemein --------
----------------------------*/

html{scroll-behavior: smooth;}

body {margin: 0 auto;
	  margin-top: 0px;
	 padding: 0px;
	 font-family: 'Open Sans', sans-serif;
	 background-color: rgba(191,238,165,1.00);
	 }

#sketch {height: 0vh;
		z-index: -1;
		position: fixed;
		background-color:rgba(191,238,165,1.00);
		margin: 0px;
		padding: 0px;
		}

.startseite {margin: 0px; 
			padding: 0px;
			height: 100vh;
			}

.about, .work, .contact {background-color:#D6EACC;
				        background-image: linear-gradient(#D6EACC, #DCFBCB, #D6EACC); 
						box-shadow: 0px 0px 60px 15px rgba(3,50,0,0.41);
						width: 85vw; /* das wahre*/
						/*width: 1205px; /*für Screenshots*/
						border-radius: 30px;
						margin: 0 auto;
						}

/*Höhe anpassen*/
.work, .contact {margin-top: 15%;}

.work {min-height: 80vh;}

.contact {min-height: 0vh;
		  padding-bottom: 60px;
		  margin-bottom: 20vh;}

.about { min-height: 80vh; /* das wahre*/
		/*height: 618.233; /*für Screenshots*/ 
	   }

.worksection {background-color:#D6EACC;
				        background-image: -webkit-linear-gradient(#D6EACC, #DCFBCB, #D6EACC);
				        background-image: -o-linear-gradient(#D6EACC, #DCFBCB, #D6EACC);
				        background-image: linear-gradient(#D6EACC, #DCFBCB, #D6EACC); 
						box-shadow: 0px 0px 60px 15px rgba(3,50,0,0.41);
						width: 85vw;/*das wahre*/
						/*width: 1205px; /*für Screenshots*/
						border-radius: 30px;
						margin: 0 auto;
						margin-top: 10%;
						margin-bottom: 10%;
						}

.w_wunderwald{background-color:#D6EACC;
			background-image: -webkit-linear-gradient(#D6EACC, #DCFBCB, #D6EACC);
			background-image: -o-linear-gradient(#D6EACC, #DCFBCB, #D6EACC);
			background-image: linear-gradient(#D6EACC, #DCFBCB, #D6EACC); 
			box-shadow: 0px 0px 60px 15px rgba(3,50,0,0.41);
			}
.z_wunderwald, #z_impressum{color:#D6EACC;}

.w_beerlab {background-color:#D6EACC;
	        background-image: -webkit-linear-gradient(#EAE3CC, #FBF4CB, #EAE3CC);
	        background-image: -o-linear-gradient(#EAE3CC, #FBF4CB, #EAE3CC);
	        background-image: linear-gradient(#EAE3CC, #FBF4CB, #EAE3CC);
			box-shadow: 0px 0px 60px 15px rgba(50,47,0,0.41);
			}
#z_beerlab {color: #EAE3C1;
			background: #171A04;
			border: 3px solid #171A04;
			box-shadow: 0px 0px 20px 5px rgba(39,35,13,0.30);}

.w_wechange{background-color:#D6EACC;
			background-image: -webkit-linear-gradient(#101c2a, #16283D, #101c2a);
			background-image: -o-linear-gradient(#101c2a, #16283D, #101c2a);
			background-image: linear-gradient(#101c2a, #16283D, #101c2a); 
			box-shadow: 0px 0px 60px 15px rgba(133,227,255,0.28);
			}
#z_wechange{color:#85e3ff;
			background: #101c2a;
			border: 3px solid #101c2a;
			box-shadow: 0px 0px 20px 5px rgba(133,227,255,0.28);}

.w_packaging {background-color:#fae9bf;
	        background-image: -webkit-linear-gradient(#fae9bf, #FBF4CB, #fae9bf);
	        background-image: -o-linear-gradient(#fae9bf, #FBF4CB, #fae9bf);
	        background-image: linear-gradient(#fae9bf, #FBF4CB, #fae9bf);
			box-shadow: 0px 0px 60px 15px rgba(50,47,0,0.41);
			}
#z_packaging {color: #EAE3C1;
			  background: #1E170A;
			border: 3px solid #1E170A;
			box-shadow: 0px 0px 20px 5px rgba(39,35,13,0.30);}

.w_stepapp {background-color:#C1F0D3;
	        background-image: -webkit-linear-gradient(#C1F0D3, #B7F0CD, #C1F0D3);
	        background-image: -o-linear-gradient(#C1F0D3, #B7F0CD, #C1F0D3);
	        background-image: linear-gradient(#C1F0D3, #B7F0CD, #C1F0D3);
			box-shadow: 0px 0px 60px 15px rgba(0,50,0,0.41);}
#z_stepapp{color:#7cf0a8;
			background: #031E0D;
			border: 3px solid #031E0D;
			box-shadow: 0px 0px 20px 5px rgba(0,50,0,0.41);}

.w_filmplakat {background-color:#B7D3E8;
	        background-image: -webkit-linear-gradient(#B7D3E8, #b7cad9, #B7D3E8);
	        background-image: -o-linear-gradient(#B7D3E8, #b7cad9, #B7D3E8);
	        background-image: linear-gradient(#B7D3E8, #b7cad9, #B7D3E8);
			box-shadow: 0px 0px 60px 15px rgba(0,28,50,0.41);}
#z_filmplakat{color:#b7cad9;
			background: #0D1E2B;
			border: 3px solid #0D1E2B;
			box-shadow: 0px 0px 20px 5px rgba(0,28,50,0.41);}

#z_web {color: #D6EACC;}

.w_webpro {background-color:#D5E0D8;
	        background-image: -webkit-linear-gradient(#D5E0D8, #C0D0C5, #D5E0D8);
	        background-image: -o-linear-gradient(#D5E0D8, #C0D0C5, #D5E0D8);
	        background-image: linear-gradient(#D5E0D8, #C0D0C5, #D5E0D8);
			box-shadow: 0px 0px 60px 15px rgba(0,50,0,0.41);}
#z_webpro {color:#cddad1;
		   background: #19221B;
		   border: 3px solid #19221B;
		   box-shadow: 0px 0px 20px 5px rgba(25,34,27,0.51);
		   }


.ueberschrift {font-size: 40px;}
.ueberschrift2 {font-size: 30px;}

.ueberschrift, .ueberschrift2 {color: rgba(3,50,0);
							font-family:"IKANSEEYOUALL";
							text-shadow: 3px 4px 5px rgba(0,0,0,0.3);
							text-align: left;
							}

.contact .kontakt .ueberschrift {text-align: center;}

/* ----------------------------
------ Photography-Seite -------
-----------------------------*/

.zuruck-button {width: 70px;
			  height: 70px;
			  padding: 6px;
			  z-index: 999;
			  background: rgba(3,50,0);
			  border: 3px solid rgba(3,50,0);   /* menü button border*/
			  border-radius: 50%;
			  cursor: pointer;
			  overflow: hidden;
  			  text-transform: uppercase;
			  font-size: 11px;
			  font-family: 'Open Sans', sans-serif;
  			  font-weight: 700;
			  margin-left: 30px;
			  margin-top: 30px;
			  position: fixed;
		 	  }

.photography h1, .graphic h1, .web h1, .beerlab h1, .aviation h1, .filmplakat h1, .packaging h1, .wechange h1, .stepapp h1, .webpro h1 {font-family: "IKANSEEYOUALL";
							 color: rgba(3,50,0);
							 font-size: 50px;
							 text-shadow: 3px 4px 5px rgba(0,0,0,0.2);}


.photography, .graphic, .web, .beerlab, .aviation, .filmplakat, .packaging, .wechange, .stepapp, .webpro { 
							 margin: 0 auto;
							 text-align: center;
							 min-height: 100vh;
							 max-width: 100vw;
							 margin-top: 0px;
							 display: flex;
							 flex-wrap: wrap;
							}

.photography {background-color: rgba(191,238,165,1.00);
			background-image: url('img/wv_background.png'), -webkit-linear-gradient(#BFEEA5, #DAF5CA, #BFEEA5);
			background-image: url('img/wv_background.png'), -o-linear-gradient(#BFEEA5, #DAF5CA, #BFEEA5);
			background-image: url('img/wv_background.png'), linear-gradient(#BFEEA5, #DAF5CA, #BFEEA5);
			background-size:cover;
			background-position: center;
			background-repeat: repeat-x;
			background-attachment: fixed;
			}

.beerlab {background-color:#EAE9CC;
	      background-image: url('img/skizzen.png'), -webkit-linear-gradient(#FAE9B1, #F8EFBB, #FAE9B1);
	      background-image: url('img/skizzen.png'), -o-linear-gradient(#FAE9B1, #F8EFBB, #FAE9B1);
	      background-image: url('img/skizzen.png'), linear-gradient(#FAE9B1, #F8EFBB, #FAE9B1);
		  background-size:auto;
		  background-attachment: fixed;
		  }

.wechange h1, .wechange, .textlinks_wechange{color: #85e3ff;}
.wechange {background-color: #16283D;
			background-image: url('img/au_background.png'), -webkit-linear-gradient(#101c2a, #16283D, #101c2a);
			background-image: url('img/au_background.png'), -o-linear-gradient(#101c2a, #16283D, #101c2a);
			background-image: url('img/au_background.png'), linear-gradient(#101c2a, #16283D, #101c2a);
			background-size:cover;
			background-position: center;
			background-repeat: repeat-x;
			background-attachment: fixed;}

.packaging {background-color:#fae9bf;
	      background-image: url('img/vd_background.png'), -webkit-linear-gradient(#fae9bf, #F1DFB1, #fae9bf);
	      background-image: url('img/vd_background.png'), -o-linear-gradient(#fae9bf, #F1DFB1, #fae9bf);
	      background-image: url('img/vd_background.png'), linear-gradient(#fae9bf, #F1DFB1, #fae9bf);
		  background-size:cover;
		  background-repeat: repeat-x;
		  background-position: right;
		  background-attachment:fixed;}

.stepapp {background: #7cf0a8;
		  background-image: url('img/sta_background.png'), -webkit-linear-gradient(#7cf0a8, #AAFFCA, #7cf0a8);
		  background-image: url('img/sta_background.png'), -o-linear-gradient(#7cf0a8, #AAFFCA, #7cf0a8);
		  background-image: url('img/sta_background.png'), linear-gradient(#7cf0a8, #AAFFCA, #7cf0a8);
		  background-size: contain;
		  background-repeat: repeat-x;
		  background-attachment:fixed;}

.filmplakat h1 {color: #0D1E2B;}
.filmplakat {background: #AEC7D4;
		  background-image: url('img/fp_background.png'), -webkit-linear-gradient(#AEC7D4, #C3D2DF, #AEC7D4);
		  background-image: url('img/fp_background.png'), -o-linear-gradient(#AEC7D4, #C3D2DF, #AEC7D4);
		  background-image: url('img/fp_background.png'), linear-gradient(#AEC7D4, #C3D2DF, #AEC7D4);
		  background-size: cover;
		  background-position: center;
		  background-attachment:fixed;}

.web {background-color: rgba(191,238,165,1.00);
			background-image: url('img/p_background.png'), -webkit-linear-gradient(#BFEEA5, #DAF5CA, #BFEEA5);
			background-image: url('img/p_background.png'), -o-linear-gradient(#BFEEA5, #DAF5CA, #BFEEA5);
			background-image: url('img/p_background.png'), linear-gradient(#BFEEA5, #DAF5CA, #BFEEA5);
			background-size:cover;
			background-position: center;
			background-attachment: fixed;
			}

.webpro {background-color: #cddad1;
		background-image: url('img/pe_background.png'), -webkit-linear-gradient(#cddad1, #B7C9BC, #cddad1);
		background-image: url('img/pe_background.png'), -o-linear-gradient(#cddad1, #B7C9BC, #cddad1);
		background-image: url('img/pe_background.png'), linear-gradient(#cddad1, #B7C9BC, #cddad1);
		background-size:cover;
		background-attachment: fixed;}

.mitte {margin: 0 auto;
		margin-top: 5%;
		margin-bottom: 2%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 80%;
	}

.mitte>div {flex: 0 50%;}

.photography-text {width: 100%;
				  text-align: left;
				  margin-right: 10%;
				  }

.photography-text p {font-size: 12pt;
					line-height: 18pt;}

.textlinks {text-decoration: underline;
			font-family: 'Open Sans' , sans-serif;
			font-weight: 600;}

.textlinks:hover {text-decoration: none;}

.bloglink {
	box-shadow:inset 0px 1px 3px 0px #EAE8CC;
	background:linear-gradient(to bottom, #EAE8CC 5%, #F8F9DD 100%);
	background-color:#EAE8CC;
	border-radius:5px;
	border:1px solid rgba(3,50,0);
	display:inline-block;
	cursor:pointer;
	color:rgba(3,50,0);
	font-family:'Open Sans', sans-serif;
	font-weight: 600;
	font-size:15px;
	padding:9px 15px;
	text-decoration:none;
}
.bloglink:hover {
	background:linear-gradient(to bottom, #F8F9DD 5%, #EAE8CC 100%);
	background-color:#EAE8CC;
}
.bloglink:active {
	position:relative;
	top:1px;
}


.photography-teaser {
					 width: 100%;
					 align-self: center;
					 }

.photography-teaserbild {width: 90%;
						 position:relative;
						}

#mobile-bild {display: none;}

.photography-fotos {margin: 0 auto;
					width: 80%;
					margin-top: 2%;
				 	margin-bottom: 8%;}

.photography-foto {height: 200px;
				   width: auto;
				   margin: 15px;
				   -webkit-box-shadow: 7px 11px 32px -12px rgba(0,0,0,0.7);
				   -moz-box-shadow: 7px 11px 32px -12px rgba(0,0,0,0.7);
				   box-shadow: 7px 11px 32px -12px rgba(0,0,0,0.7);
				   -webkit-transition: -webkit-transform .15s ease;
 				   -moz-transition: -moz-transform .15s ease;
  				   -o-transition: -o-transform .15s ease;
  				   -ms-transition: -ms-transform .15s ease;
  				   transition: transform .15s ease;
				  }

.photography-foto:hover {
						-webkit-box-shadow: 7px 11px 32px -12px rgba(0,0,0,1);
						-moz-box-shadow: 7px 11px 32px -12px rgba(0,0,0,1);
						box-shadow: 7px 11px 32px -12px rgba(0,0,0,1);
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						-ms-transform: scale(1.05);
						transform: scale(1.05);
					    }

.stepapp-fotos {margin: 0 auto;
					width: 80%;
					margin-top: 2%;
				 	margin-bottom: 8%;}

.stepapp-foto {height: 400px;
				   width: auto;
				   margin: 15px;
				   -webkit-transition: -webkit-transform .15s ease;
 				   -moz-transition: -moz-transform .15s ease;
  				   -o-transition: -o-transform .15s ease;
  				   -ms-transition: -ms-transform .15s ease;
  				   transition: transform .15s ease;
				  }

.stepapp-foto:hover {
						-webkit-transform: scale(1.10);
						-moz-transform: scale(1.10);
						-o-transform: scale(1.10);
						-ms-transform: scale(1.10);
						transform: scale(1.10);
					    }

/*----------------------------
-------Grafik Design --------
-----------------------------*/

.graphic-fotos {width: 80vw;
				 }

.graphic-fotos p {padding-left: 150px;
				  padding-right: 150px;}

.graphic-foto {height: 200px;
				   width: auto;
				   margin: 15px;
				   -webkit-box-shadow: 7px 11px 32px -12px rgba(0,0,0,0.7);
				   -moz-box-shadow: 7px 11px 32px -12px rgba(0,0,0,0.7);
				   box-shadow: 7px 11px 32px -12px rgba(0,0,0,0.7);
				   -webkit-transition: -webkit-transform .15s ease;
 				   -moz-transition: -moz-transform .15s ease;
  				   -o-transition: -o-transform .15s ease;
  				   -ms-transition: -ms-transform .15s ease;
  				   transition: transform .15s ease;
				  }

.graphic-foto:hover {
						-webkit-box-shadow: 7px 11px 32px -12px rgba(0,0,0,1);
						-moz-box-shadow: 7px 11px 32px -12px rgba(0,0,0,1);
						box-shadow: 7px 11px 32px -12px rgba(0,0,0,1);
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						-ms-transform: scale(1.05);
						transform: scale(1.05);
					    }

/* ---------------------
---     NAV -----------
#9BFD65
rgba(3,50,0)
rgba(27,82,24,0.90)
----------------------*/

.ham-menu.on {z-index: 1000;}
.ham-menu {z-index: -1000;}

#hamburger-menu {z-index: 1001;}

.menu {padding-right: 30px;}

a {
  color: rgba(3,50,0);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}
.hamburger-menu-button {
  width: 40px;
  height: 40px;
  padding: 6px;
  display: block;
  position: fixed;
  z-index: 100;
  background: rgba(3,50,0);
  border: 5px solid rgba(191,238,165,1.00);   /* menü button border*/
  box-sizing: content-box;
  border-radius: 50%;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  margin-top: 30px;
  margin-left: 30px;
}
.hamburger-menu-button-open {
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -12px;
}
.hamburger-menu-button-open, 
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {
  position: absolute;
  width: 24px;
  height: 3px;
  background: rgba(191,238,165,1.00); /* Farbe vom Burger*/
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {
  left: 0;
  content: "";
}
.hamburger-menu-button-open::before {
  top: 6px;
}
.hamburger-menu-button-open::after {
  bottom: 6px;
}
.hamburger-menu-button-close {
  background: transparent;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.hamburger-menu-button-close::before {
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
}
.hamburger-menu-button-close::after {
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
}
.ham-menu {
  position: fixed;
  left: 48px;
  top: 8px;
  margin-top: 30px;
  margin-left: 30px;
  max-width: 570px;
  overflow: hidden;
}
.ham-menu ul {
  -webkit-transform: translateX(-110%);
          transform: translateX(-110%);
  background-color: rgba(3,50,0);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.ham-menu.on ul {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}
.ham-menu ul {
  font-size: 0;
}
.ham-menu ul li {
  display: inline-block;
}
.ham-menu ul li:first-child .ham-menu ul li a {
  padding-left: 30px;
}
.ham-menu ul li a {
  padding: 15px;
  padding-right: 25px;
  padding-left: 25px;
  display: block;
  background-color: transparent;
  color: rgba(191,238,165,1.00);
  text-transform: uppercase;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 13px;
}
.ham-menu ul li.active a, .ham-menu ul li a:hover {
  background-color: rgba(28,59,10,1.00);
  color: rgba(191,238,165,1.00);
} 

/*----------------------
---    Startseite   ---
----------------------*/

.titelseite {padding-top: 30vh;}

.titel {color: rgba(3,50,0,1);
		font-family:"IKANSEEYOUALL";
		text-shadow: 3px 4px 5px rgba(0,0,0,0.3);
		font-size: 50px;
		width: 40vw;
		text-align: left;
		padding: 5px;
		margin: 0 auto;
		border-radius: 10%;
		background-color: rgba(191,238,165,1.00);
		background: -moz-radial-gradient(left,rgba(191,238,165,1.00)0%,rgba(191,238,165,1.00)30%,rgba(191,238,165,0)100%);
		background: -webkit-radial-gradient(left,rgba(191,238,165,1.00)0%,rgba(191,238,165,1.00)30%,rgba(191,238,165,0)100%);
		background: radial-gradient(left,rgba(191,238,165,1.00)0%,rgba(191,238,165,1.00)30%,rgba(155,253,101,0)100%);
		}

.mobile_break {display: none;}

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
	text-indent: 0px;
}
.slidingVertical span{
	animation: topToBottom 6s linear infinite 0s;
	-ms-animation: topToBottom 6s linear infinite 0s;
	-webkit-animation: topToBottom 6s linear infinite 0s;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 2s;
	-ms-animation-delay: 2s;
	-webkit-animation-delay: 2s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}


/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-20px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(30px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-20px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(20px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-20px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(20px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

/*----------------------
---    Über Mich   ---
----------------------*/

.ueber_mich {padding-top: 5vh;
			 padding-left: 10%;
			 padding-right: 10%;
			 display: flex;
			 flex-direction: row;
			}

.colum {display: flex;
		flex-direction: column;
		width: 60%;}


.ue_text {padding-left:0%;
		  padding-right: 5%;
		  padding-top: 2%;
		  padding-bottom: 10%;
		  width: 70%;
		  font-size: 12pt;
		  line-height: 18pt;
		  }

.ue_bild {align-self: flex-end;
		  height: 600px;
		  width: auto;
		 }

/*----------------------
---       Work    ---
----------------------*/

#work .arbeiten .ueberschrift {padding-bottom: 1%;}

.arbeiten {padding-top: 5vh;
		   padding-left: 10%;
		   padding-right: 10%;
		  }

.arbeits_bilder {padding-bottom: 80px;
				overflow: hidden;	
				}

/* ---- die Bild-Links zu meinen Kategorien 
(Photography, Graphic Design und Web Design) ---*/

.container {
  position:relative;
  width: 90%;
  height: 90%;
  margin: 0 auto;
  /*background-image: url(img/dots.png);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  margin-bottom: 4%;
    -webkit-box-shadow: 10px 10px 25px -7px rgba(0,0,0,0.53);
  -moz-box-shadow: 10px 10px 25px -7px rgba(0,0,0,0.53);
  box-shadow: 10px 10px 25px -7px rgba(0,0,0,0.53);
}

.image {
  opacity: 0.3;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;  
}

.middle {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 40%;
  margin-left: 10%;
  font-weight: 100;
}

.container:hover .image {
  opacity: 1;
  backface-visibility: hidden;
  -webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);

  
}

.container:hover .middle {
  display: none;
}

.text {
  color: rgba(3,50,0);
  font-family: "IKANSEEYOUALL";
  text-shadow: 3px 4px 5px rgba(0,0,0,0.3);
  font-size: 60px;
  padding-top: 16px;
  padding-bottom: 5px;
}

.beschreibung {color: rgba(3,50,0);
			  font-family: 'Open Sans', sans-serif;
			  font-size: 20px;
			  font-weight: 500;
			  }


/*----------------------
---     Contact    ---
----------------------*/

.kontakt {padding-top: 5vh;
		  padding-left: 10%;
		  padding-right: 10%;
		  text-align: center;
		 }


footer {bottom: 0px;
		color: rgba(3,50,0);
		background-color: rgba(191,238,165,1.00);
		font-size: 9pt;
		display: flex;
		flex-direction: row;
		padding: 10px;
		border-top: thin solid rgba(0,0,0,0.27);
		}

footer, footer p, footer a {margin: 0 auto;}

.impressum {background-color: rgba(191,238,165,1.00);
			padding-left: 20vw;
			padding-top: 30vh;
			height: 100vh;}



/*------------------------------------------------------------------------------------------
---------------------------------    Mobile Optimierung    ----------------------------------
---------------------------------------------------------------------------------------------*/


/*---------------------------------------------FÜRS TABLET---------*/
@media screen and (max-width: 1320px)
{
	.mobile_break {display: inline;}
	
	.titel {font-size: 45px;
			margin: 0 auto;
			width: 70vw;}
	
	.ueberschrift {font-size: 40px;
				   margin-top: 1%;}
	
	.ueberschrift2 {width: 100%;
					font-size: 24px;
					margin: 0 auto;
					margin-bottom: 5%;}
	
	.breakfree {display: none;}
	
	.colum {width: 100%;
			margin: 0 auto;
			padding-bottom: 5%;}
	
	.about {min-height: 0px;}
	
	.ueber_mich {flex-direction: row;
				 }
	
	.ue_text {width: 100%;
			  font-size: 10pt;
			  margin: 0 auto;}
	
	.ue_bild {height: 350px;
			  margin: 0 auto;}
	
	.kontakt p {font-size: 10pt;}
	
	/* ---- die Bild-Links zu meinen Kategorien 
(Photography, Graphic Design und Web Design) ---*/

.container {
  width: 100%;
  height: 100%;
  margin: 0px 0px 10% 0px;}

.middle {top: 40%;
  		 margin-left: 5%;
		 font-weight: 100;}


.text {font-size: 35pt;
  	   padding-bottom: 1%;}

.beschreibung {font-size: 10pt;}
	
.arbeits_bilder {padding-bottom: 10%;}
	
.contact {padding-bottom: 5%;
		  min-height: 0vh;}
	
.photography h1, .graphic h1, .web h1, .beerlab h1, .aviation h1, .filmplakat h1, .packaging h1, .wechange h1, .stepapp h1, .webpro h1 {font-size: 30pt;
																				  margin-bottom: 5%;}
	
.photography-text p {font-size: 11pt;}
	
.mitte {display: flex;
		flex-direction: column;
		justify-content: center;
		width: 80%;
	}

.mitte>div {flex: 0 100%;}
	
.photography-fotos {margin: 0 auto;
					width: 80%;
					}
	
.stepapp-fotos {margin: 0 auto;
					width: 40%;
					}

.photography-foto {height: 200px;
				   width: auto;}
	
.worksection {padding-bottom: 5%;}

#desktop-bild {display: none;}
#mobile-bild {display: contents;
			  width: 100%;}
}

/*---------------------------------------------FÜRS Handy/tablet---------*/
@media screen and (max-width: 830px)
{
	.titelseite {padding-top: 20vh;}
				
	.startseite {margin-bottom: 30vh;}
	
	.text {font-size: 30pt;}
	
	.titel {font-size: 25pt;
			width: 60vw;}
	
	.ueberschrift {font-size: 25pt;}
	
	#sketch {display: none;}
}

/*---------------------------------------------FÜRS Handy---------*/
@media screen and (max-width: 550px)
{
	.titelseite {padding-top: 30vh;
				 }
	.startseite {padding-bottom: 0vh;}
	
	/* NAV */
	#hamburger-menu {z-index: 1001;}
	.ham-menu ul li {display: block;}
	.ham-menu {left: 25px;}
	nav {width: 70vw;
		 z-index: 1000;}
	.menu {padding-left: 0px;
		   padding-right: 0px;}
	.menu li {height: 50px;}
	.menu li a {text-align: center;}
	.hamburger-menu-button {border: 2px solid rgba(191,238,165,1.00);
											margin-left: 15px;
											margin-top: 15px;}
	
	.zuruck-button {border: 2px solid rgba(3,50,0);
					margin-left: 15px;
					margin-top: 15px;
					width: 65px;
					height: 65px;}
	
	.mobile_break {display: inline;}
	
	.titel {font-size: 35px;
			margin: 0 auto;
			width: 70vw;}
	
	.ueberschrift {font-size: 30px;
				   margin-top: 1%;}
	
	.ueberschrift2 {width: 100%;
					font-size: 24px;
					margin: 0 auto;
					margin-bottom: 5%;}
	
	.breakfree {display: none;}
	
	.colum {width: 100%;
			margin: 0 auto;
			 padding-bottom: 5%;}
	
	.ueber_mich {flex-direction: column;
				 }
	
	.ue_text {width: 100%;
			  font-size: 10pt;
			  margin: 0 auto;}
	
	.ue_bild {height: 250px;
			  margin: 0 auto;}
	
	.kontakt p {font-size: 10pt;}
	
	/* ---- die Bild-Links zu meinen Kategorien 
(Photography, Graphic Design und Web Design) ---*/

.container {
  width: 100%;
  height: 100%;
  margin: 0px 0px 15% 0px;}

.middle {top: 10%;
  		 margin-left: 5%;
		 font-weight: 100;}


.text {font-size: 20pt;
  	   padding-bottom: 1%;}

.beschreibung {font-size: 10pt;}
	
.arbeits_bilder {padding-bottom: 10%;}
	
.contact {padding-bottom: 10%;
		  min-height: 0vh;}
	
.photography h1, .graphic h1, .web h1, .beerlab h1, .aviation h1, .filmplakat h1, .packaging h1, .wechange h1, .stepapp h1, .webpro h1 {font-size: 30pt;
																				  margin-bottom: 5%;}
	
.photography-text p {font-size: 11pt;}
	
.mitte {display: flex;
		flex-direction: column;
		justify-content: center;
		width: 80%;
	}

.mitte>div {flex: 0 100%;}
	
.photography-fotos {
				  }
	
.photography-foto {margin: 15px 0px 15px 0px;
				   width: 100%;
					height: auto;}
	
.stepapp-fotos {width: 80%;
				  }
	
.stepapp-foto {margin: 15px 0px 15px 0px;
				   width: 100%;
					height: auto;}

#desktop-bild {display: none;}
#mobile-bild {display: contents;
			  width: 100%;}
	
#sketch {display: none;}
	
}