/*----animation----*/
.kontakt-contact #mond {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 30vw;
  	animation-name: mondanim;
  	animation-duration: 4s;
  	animation-iteration-count: infinite; 
}
@keyframes mondanim {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/*----ende animation-----*/




/*----------------------MENU-landingpage---------------------------*/


container { 
  margin: 0;
  padding: 0;
}

ul.nav.menu.mod-list,
ul.mod-menu.nav.mod-list {
   background-color: transparent;
   display: contents;
   font-size: 1.2em;
  z-index:50;
 
}

ul.mod-menu.nav.mod-list > li.nav-item {
  float: left;
  position: relative;
}

ul.mod-menu.nav.mod-list > li.nav-item > a {
  display: block;
  white-space: nowrap;
}

.artist-s-statement .com-content-article__body {
  color: #000000;
}


.item-103 { /*arbeiten-works*/
  
  position: absolute;
  top: 15vh;
  left: 10vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 60s;
	animation-iteration-count: infinite;
}

.item-104 { /*schau-suprise*/
  
  position: absolute;
  top: 93vh;
  left: 14vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 20s;
	animation-iteration-count: infinite;
  
}

.item-106 { /*ueber-about*/
  
  position: absolute;
  top: 49vh;
  left: -8vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 15s;
	animation-iteration-count: infinite;
  
}

.item-107 { /*kontakt-contact*/
  
  position: absolute;
  top: 48vh;
  left: 32vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 80s;
	animation-iteration-count: infinite;

}

/*-------------subMENU-----pfeile-und-gold-----------*/

#gold_home {
  position: fixed;
  top: 9vh;
  left: 66vw;
  height: 11vh;
	width: auto;
  z-index: 55;
}

.pfeil_links {
   position: fixed;
  top: 50vh;
  left: 1vw;
  height: 3vh;
	width: auto;
  z-index: 55;
}

.pfeil_rechts {
   position: fixed;
  top: 50vh;
  left: 95vw;
  height: 3vh;
	width: auto;
  z-index: 55;
}


/*---------------------------SCHAU-SUPRISE---------------------------------*/

#hochstapler {
  position: absolute;
  top: 2vh;
  left: 20vw;
  height: 100vh;
	width: auto;
   z-index: 1;
  animation: move;
  animation-duration: 44s;
	animation-iteration-count: 0;
  
}


/*------------------------------ARBEITEN-WORKS-----------------------------*/

#bergwelt {
  position: absolute;
  top: 55vh;
  left: 45vw;
  height: 67%;
	width: auto;
   z-index: 2;
}

#faust {
  position: absolute;
  top: 120vh;
  left: 45vw;
  height: 33%;
	width: auto;
  z-index: 0;
}

#regentag {
  position: absolute;
  top: 7vh;
  left: 57vw;
  height: 44%;
	width: auto;
   z-index: 5;
 
}

#borkenkaefer {
  position: absolute;
  top: 71vh;
  left: 10vw;
  height: 27%;
	width: auto;
   z-index: 5; }

#fontaene {
  position: absolute;
  top: 90vh;
  left: 35vw;
  height: 40%;
	width: auto;
   z-index: 3;
}

#carlos {
  position: absolute;
  top: 56vh;
  left: 17vw;
  height: 50%;
	width: auto;
    z-index: 4;
}

#gorilla {
  position: absolute;
  top: 0;
  left: 22vw;
  height: 70%;
	width: auto;
   z-index: 0;
  
}



.pic:active {
 transform: scale(1.7, 1.7);
  z-index:555555 !important
}

/*............................KONTAKT......................................*/

#melone {
  position: absolute;
  top: 31vh;
  left: 38vw;
  height: 44vh;
	width: auto;
   z-index: 2;
  transform: rotate(180deg);
     animation: ani;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#melone2 {
  position: absolute;
  top: 31vh;
  left: 48vw;
  height: 44vh;
	width: auto;
   z-index: 2;
   animation: anirechts;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#email {
  position: absolute;
  top: 40vh;
  left: 37vw;
  z-index: 1;
}

#telefon {
  position: absolute;
  top: 45vh;
  left: 37vw;
  z-index: 1;
}

#impressum {
  position: absolute;
  top: 51vh;
  left: 37vw;
  z-index: 1;
}

#impressum2 {
  position: absolute;
  top: 54vh;
  left: 37vw;
  z-index: 1;
}

#flieger1 {
  position: absolute;
  top: 10vh;
  left: 5vw;
  height: 20vh;
	width: auto;
   z-index: 0;
  transform: rotate(180deg);
   animation: fly-right-two;
	animation-duration: 4s;
	animation-iteration-count: infinite;
  
}

#flieger2 {
  position: absolute;
  top: 10vh;
  left: 20vw;
  height: 30vh;
	width: auto;
   z-index: 0;
  transform: rotate(-90deg);
   animation: fly-right-two;
	animation-duration: 2s;
	animation-iteration-count: infinite;
  
}

#flieger3 {
  position: absolute;
  top: 20vh;
  left: 5vw;
  height: 40vh;
	width: auto;
   z-index: 0;
  transform: rotate(-180deg);
   animation: fly-right-two;
	animation-duration: 3s;
	animation-iteration-count: infinite;
  
}


/*----------------------------ÜBER ABOUT-----------------------------------*/
.ueber {
  background-color: #000000;
}

#hintergrundstaub {
  position: absolute;
  height: 190vh;
  width: 190vw;
  top: 0%;
  left: 0%;
  z-index: 0; 
}

.buch {
  position: absolute;
  top: 10vh;
  left: 10vw;
  z-index: 1;
}

#seeigel_g {
  position: absolute;
  height: 24.5vh;
  width: auto;
  top: 30vh;
  left: 43.5vw;
  z-index: 3; 
}

#seeigel_r {
  position: absolute;
  height: 24.5vh;
  width: auto;
  top: 38vh;
  left: 64vw;
  z-index: 3; 
}

#vienna {
  position: absolute;
  height: 33vh;
  width: auto;
  top: 83vh;
  left: 23vw;
  z-index: 3; 
}

#portrait {
  position: absolute;
  height: 23vh;
  width: auto;
  top: 65vh;
  left: 41vw;
  z-index: 3; 
}

#dadabio {
  position: absolute;
  height: 21vh;
  width: auto;
  top: 32vh;
  left: 20vw;
  z-index: 3; 
}

#mailme {
  position: absolute;
  height: 10vh;
  width: auto;
  top: 67vh;
  left: 76vw;
  z-index: 3; 
}

.aboutmini {
  z-index: -10;
  height: 1vh;
  width: auto;
  top: 1vh;
  left: 1vh;
}

.seeigel:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

/*------------------------------Hauptseite---------------------------------*/

body {
	background-color: #ffffff;
	color: #ffffff;
	text-align: center;
}

h1 {
	position: absolute;
	font-size: 5vh;
	top: 5vh;
	left: 50vw;
	transform: translate(-50%, -50%);
}

.animation-container {
	height: 100vh;
}

.fix {
	position: absolute;
	top: 25vh;
	left: 27vw;
	height: 58vh;
	width: auto;
	z-index: 0;
	object-fit: contain;
}

/*^^^^^^^^^^^^^^^^^^^^^Hands^^^^^^^^^^^^^^^^^^^^^*/

#hand1 {
	position: absolute;
	top: 27.5vh;
	left: 19vw; 
	height: 17vh;
	width: auto;
  transform: rotate(38deg);

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand1;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}

#hand2 {
	position: absolute;
	top: 23vh;
	left: 29vw; 
	height: 17vh;
	width: auto;
  transform: scaleX(-1) rotate(100deg);

  

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand2;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#hand3 {
	position: absolute;
	top: 45vh;
	left: 25vw; 
	height: 17vh;
	width: auto;
  transform: rotate(-15deg);

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand3;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}

#hand4 {
	position: absolute;
	 top: 76vh;
  left: 62vw;
	height: 14vh;
	width: auto;
  transform: scaleY(-1) rotate(40deg);

  

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand4;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#hand5 {
	position: absolute;
	 top: 80vh;
  left: 69vw; 
	height: 13vh;
	width: auto;
  transform: scaleX(1) rotate(203deg);

  

	/* transform: translate(-50%, -50%); */
	z-index: -2;
	animation: hand5;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^hands aus^^^^^^^^^^^^^^^^^^^^^^^^^^*/

.baum {
  position: absolute;
  top: 44vh;
  left: 60vw;
  height:15vh;
  width: auto;
  animation: baum;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

.fisch {
  position: absolute;
  top: 39vh;
  left: 24vw;
  height: 15vh;
    width: auto;
   transform: rotate(-15deg);
  z-index: -3;
  animation: fisch;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}

.eisterrasse
{
  position: absolute;
  top: 93vh;
  left: 84vw;
  height: 27vh;
    width: auto;
}

.ingwer
{
  position: absolute;
  top: 71vh;
  left: 65vw;
  height: 19vh;
    width: auto;
  transform: rotate(190deg);
    z-index: -1;
}


.holz
{
  position: absolute;
  top: 64vh;
  left: 57vw;
  height: 19vh;
    width: auto;
  transform: rotate(-5deg);
    z-index: -3;
  animation: holz;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

#moosgross
{
  position: absolute;
  top: 51vh;
  left: 32vw;
  height: 15vh;
    width: auto;
    z-index: -1;
  
}

#moosklein
{
  position: absolute;
  top: 54vh;
  left: 35vw;
  height: 20vh;
    width: auto;
    z-index: -2;
  animation: wobble;
	animation-duration: 40s;
	animation-iteration-count: infinite;
}

.linksunten
{
  position: absolute;
  top: 75vh;
  left: 0vw;
  height: 44vh;
    width: auto;
}

.kran
{
  position: absolute;
  top: 66vh;
  left: 4vw;
  height: 44vh;
    width: auto;
  transform: rotate(15deg);
  animation: kran;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

.planeten
{
  position: absolute;
  top: 5vh;
  left: 74vw;
  height: 22vh;
    width: auto;
  z-index: -2;
  transform: rotate(-160deg);
}

.stephanie
{
  position: absolute;
  top: 12vh;
  left: 58vw;
  height: 23vh;
    width: auto;
  z-index: 1;
}



/*------------------------Animationen-----------------------------------*/



@keyframes hand1 
{ 
    0% { transform: rotate(38deg); }
   25% { transform: rotate(43deg); } 
   50% { transform: rotate(38deg); } 
   75% { transform: rotate(33deg); } 
   100% { transform: rotate(38deg); } 
  
} 

@keyframes hand3 
{ 
  0% { transform: rotate(-15deg);}
   25% { transform: rotate(-30deg); } 
   50% { transform: rotate(-15deg); } 
   75% { transform: rotate(-30deg); } 
  100% { transform: rotate(-15deg); } 

} 
	
@keyframes hand2 
{   0% { transform: scaleX(-1) rotate(100deg)}
   20% { transform: scaleX(-1) rotate(110deg); } 
   40% { transform: scaleX(-1) rotate(100deg); } 
   60% { transform: scaleX(-1) rotate(90deg); } 
   80% { transform: scaleX(-1) rotate(100deg); } 
   100% { transform: scaleX(-1) rotate(100deg); } 

}
@keyframes hand4 
{   0% { transform: scaleY(-1) rotate(40deg)}
   20% { transform: scaleY(-1) rotate(80deg); } 
   40% { transform: scaleY(-1) rotate(100deg); } 
   60% { transform: scaleY(-1) rotate(80deg); } 
   80% { transform: scaleY(-1) rotate(80deg); } 
   100% { transform: scaleY(-1) rotate(40deg); } 

}

@keyframes hand5 
{ 
    0% { transform: rotate(203deg);}
   25% { transform: rotate(213deg); } 
   50% { transform: rotate(203deg); } 
   75% { transform: rotate(193deg); } 
  100% { transform: rotate(203deg); } 

} 

@keyframes fisch
{ 
    0% { transform: rotate(-15deg);}   
   50% { transform: rotate(-25deg); }  
  100% { transform: rotate(-15deg); } 

} 

@keyframes baum
{ 
    0% { transform: rotate(0deg);}   
   50% { transform: rotate(12deg); }  
  100% { transform: rotate(0deg); } 

}

@keyframes kran
{ 
    0% { transform: rotate(7deg);}   
   50% { transform: rotate(30deg); }  
  100% { transform: rotate(7deg); } 

}

@keyframes holz
{ 
    0% { transform: rotate(-5deg);}   
   50% { transform: rotate(177deg); }  
  100% { transform: rotate(-5deg); } 

}

@-webkit-keyframes drift {
  0% {
    -webkit-transform: translateX(-750px);
    opacity: 0;
  }
  25% {
    -webkit-transform: translateX(-750px);
    opacity: 0;
    -webkit-animation-timing-function: ease-out;
  }
  40%{
    -webkit-transform: translateX(100px);
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
  91% {
    -webkit-transform: translateX(200px);
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(750px);
    opacity: 0;
  }
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
  }
  100% {
    -webkit-transform: none;
    transform: none
  }
}


   


 @keyframes hinundher
{ 
    0% { transform: translate(0%);}
   25% { transform: translate(25%); } 
   50% { transform: translate(50%); } 
   75% { transform: translate(25%); } 
  100% { transform: translate(0%); }

}   

@keyframes ani {
  0% {
    left: 15vw;
  }
  50% {
    left: 34vw;
  }
  100% {
    left: 15vw;
  }
}

@keyframes anirechts {
  0% {
    left: 65vw;
  }
  50% {
    left: 48vw;
  }
  100% {
    left: 65vw;
  }
}

@keyframes fly-right-two {
	
	0% {
		transform: translateY(-2vh) translateX(-10vw) scale(0.5);
	}
	
	10% {
		transform: translateY(0vh) translateX(10vw) scale(0.4);
	}
	
	20% {
		transform: translateY(-4vh) translateX(30vw) scale(0.6);
	}
	
	30% {
		transform: translateY(1vh) translateX(50vw) scale(0.45);
	}
	
	40% {
		transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
	}
	
	50% {
		transform: translateY(0vh) translateX(90vw) scale(0.45);
	}
	
	51% {
		transform: translateY(0vh) translateX(110vw) scale(0.45);
	}
	
	100% {
		transform: translateY(0vh) translateX(110vw) scale(0.45);
	}
	
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes move {
  from {
    left: -15%;
  }
  to {
    left: 100%;
  }
}


  

/*##########################################################################################*/
/*-----------------------------SMARTPHONE---------------------------------------------------*/

@media only screen and
(max-width:460px) {
	html {
		font-size: 4.5vw;
	}
	
	#spalte {
		width: 100%;
	}
	
	#page_content {
		width: 100%;
		padding: 0;
	}
	
	.nav {
		width: 100%;
		position: absolute;
		top: 0;
		left: -100%;
		z-index: 2;
    }
	
	label[for="nav-trigger"] {
		position: fixed;
		right: 3vw;
		top: 3vw;
		z-index: 999;
		height: 30px;
		width: 30px;
		cursor: pointer;
		background-image: url("../images/menu.svg");
		background-size: cover;
	}
	
	.nav-trigger ~ label, .nav {
		transition: left 0.2s;
	}
	
	.nav-trigger:checked ~ label[for="nav-trigger"] {
		background-position: 100% 0;
	}
	
	.nav-trigger:checked ~ .nav {
		left: 0;
	}
  
  
.fix {
	position: absolute;
	top: 33vh;
	left: 26vw;
	height: 36vh;
	width: auto;
  object-fit: scale-down;
	z-index: 0;
	
     }

/*^^^^^^^^^^^^^^^^^^^^^Hands^^^^^^^^^^^^^^^^^^^^^*/

#hand1 {
	position: absolute;
	top: 35vh;
	left: 5vw; 
	height: 14vh;
	width: auto;
  transform: rotate(38deg);

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand1;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}

#hand2 {
	position: absolute;
	top: 30vh;
	left: 32vw; 
	height: 14vh;
	width: auto;
  transform: scaleX(-1) rotate(100deg);

  

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand2;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#hand3 {
	position: absolute;
	top: 46vh;
	left: 21vw; 
	height: 14vh;
	width: auto;
  transform: rotate(-15deg);

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand3;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}

#hand4 {
	position: absolute;
	 top: 69vh;
  left: 88vw;
	height: 11vh;
	width: auto;
  transform: scaleY(-1) rotate(40deg);

  

	/* transform: translate(-50%, -50%); */
	z-index: -2;
	animation: hand4;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#hand5 {
	position: absolute;
	 top: 70vh;
  left: 111vw; 
	height: 10vh;
	width: auto;
  transform: scaleX(1) rotate(203deg);

  

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand5;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^hands aus^^^^^^^^^^^^^^^^^^^^^^^^^^*/

.baum {
  position: absolute;
  top: 37vh;
  left: 80vw;
  height:15vh;
  width: auto;
  animation: baum;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

.fisch {
  position: absolute;
  top: 44vh;
  left: 24vw;
  height: 10vh;
    width: auto;
   transform: rotate(-15deg);
  z-index: -3;
  animation: fisch;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}

.eisterrasse
{
  position: absolute;
  top: 93vh;
  left: 93vw;
  height: 27vh;
    width: auto;
  
}

.ingwer
{
  position: absolute;
  top: 60vh;
  left: 94vw;
  height: 19vh;
    width: auto;
  transform: rotate(190deg);
    z-index: -1;
}


.holz
{
  position: absolute;
  top: 58vh;
  left: 79vw;
  height: 15vh;
    width: auto;
  transform: rotate(-5deg);
    z-index: -3;
  animation: holz;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

#moosgross
{
  position: absolute;
  top: 51vh;
  left: 42vw;
  height: 10vh;
    width: auto;
    z-index: -1;
  
}

#moosklein
{
  position: absolute;
  top: 54vh;
  left: 46vw;
  height: 14vh;
    width: auto;
    z-index: -2;
  animation: wobble;
	animation-duration: 40s;
	animation-iteration-count: infinite;
}

.linksunten
{
  position: absolute;
  top: 88vh;
  left: 0vw;
  height: 35vh;
    width: auto;
}

.kran
{
  position: absolute;
  top: 83vh;
  left: 4vw;
  height: 35vh;
    width: auto;
  transform: rotate(15deg);
  animation: kran;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

.planeten
{
  position: absolute;
  top: 5vh;
  left: 74vw;
  height: 22vh;
    width: auto;
  z-index: -2;
  transform: rotate(-160deg);
  display: none;
}

.stephanie
{
  position: absolute;
  top: 2vh;
  left: 3vw;
  height: 16vh;
    width: auto;
  z-index: 1;
}

  
.item-103 { /*arbeiten-works*/
  
  position: absolute;
  top: 20vh;
  left: 60vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 60s;
	animation-iteration-count: infinite;
}

.item-104 { /*schau-suprise*/
  
  position: absolute;
  top: 83vh;
  left: 37vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 20s;
	animation-iteration-count: infinite;
  
}

.item-106 { /*ueber-about*/
  
  position: absolute;
  top: 68vh;
  left: -30vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 15s;
	animation-iteration-count: infinite;
  
}

.item-107 { /*kontakt-contact*/
  
  position: absolute;
  top: 71vh;
  left: 47vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 80s;
	animation-iteration-count: infinite;

}
 /*------------------------------ARBEITEN-WORKS-----------------------------*/

#bergwelt {
  position: absolute;
  top: 55vh;
  left: 22vw;
  height: 50%;
	width: auto;
   z-index: 2;
}

#faust {
  position: absolute;
  top: 122vh;
  left: 34vw;
  height: 33%;
	width: auto;
  z-index: 0;
}

#regentag {
  position: absolute;
  top: 100vh;
  left: 65vw;
  height: 44%;
	width: auto;
   z-index: 5;
 
}

#borkenkaefer {
  position: absolute;
  top: 71vh;
  left: 1vw;
  height: 15%;
	width: auto;
   z-index: 5; }

#fontaene {
  position: absolute;
  top: 99vh;
  left: 1vw;
  height: 40%;
	width: auto;
   z-index: 3;
}

#carlos {
  position: absolute;
  top: 56vh;
  left: 5vw;
  height: 40%;
	width: auto;
    z-index: 4;
}

#gorilla {
  position: absolute;
  top: 0;
  left: 1vw;
  height: 60%;
	width: auto;
   z-index: 0;
  
}



.pic:active {
 transform: scale(1.7, 1.7);
  z-index:555555 !important
}

  /*----------------------------ÜBER ABOUT-----------------------------------*/
.ueber {
  background-color: #000000;
}

#hintergrundstaub {
  position: absolute;
  height: 150vh;
  width: 120vw;
  top: 0vh;
  left: 0vw;
  z-index: 0; 
}

.buch {
  position: absolute;
  top: 20vh;
  left: 1vw;
  height: 88vh;
    width: auto;
  z-index: 1;
  display: none;
}

#seeigel_g {
  position: absolute;
  height: 16vh;
  width: auto;
  top: 40vh;
  left: 50vw;
  z-index: 3; 
}

#seeigel_r {
  position: absolute;
  height: 16vh;
  width: auto;
  top: 25vh;
  left: 69vw;
  z-index: 3; 
}

#vienna {
  position: absolute;
  height: 25vh;
  width: auto;
  top: 115vh;
  left: 40vw;
  z-index: 3; 
}

#portrait {
  position: absolute;
  height: 15vh;
  width: auto;
  top: 70vh;
  left: 10vw;
  z-index: 3; 
}

#dadabio {
  position: absolute;
  height: 18vh;
  width: auto;
  top: 5vh;
  left: 1vw;
  z-index: 3; 
}

#mailme {
  position: absolute;
  height: 10vh;
  width: auto;
  top: 70vh;
  left: 70vw;
  z-index: 3; 
}
  
 #photolive {
  position: absolute;
  height: 20vh;
  width: auto;
  top: 81vh;
  left: 40vw;
  z-index: 3; 
} 
  
  #illustration {
  position: absolute;
  height: 22vh;
  width: auto;
  top: 25vh;
  left: 15vw;
  z-index: 3; 
} 
 
   #malerei {
  position: absolute;
  height: 18vh;
  width: auto;
  top: 50vh;
  left: 20vw;
  z-index: 3; 
} 
  
   #painting {
  position: absolute;
  height: 18vh;
  width: auto;
  top: 55vh;
  left: 46vw;
  z-index: 3; 
} 
  
   #objekte {
  position: absolute;
  height: 20vh;
  width: auto;
  top: 100vh;
  left: 10vw;
  z-index: 3; 
} 
  

.seeigel:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.aboutmini:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}  
  
 /*---------------------------SCHAU-SUPRISE---------------------------------*/

#hochstapler {
  position: absolute;
  top: 20vh;
  left: 10vw;
  height: 80vh;
	width: auto;
   z-index: 1;
  animation: move;
  animation-duration: 44s;
	animation-iteration-count: 0;
  
} 

  /*............................KONTAKT......................................*/

#melone {
  position: absolute;
  top: 40vh;
  left: 0vw;
  height: 40vh;
	width: auto;
   z-index: 2;
 /* transform: rotate(180deg);*/
     animation: ani-mini;
	animation-duration: 13s;
	animation-iteration-count: infinite;
}

#melone2 {
  position: absolute;
  top: 40vh;
  left: 30vw;
  height: 40vh;
	width: auto;
   z-index: 2;
   animation: anirechts-mini;
	animation-duration: 13s;
	animation-iteration-count: infinite;
}

#email {
  position: absolute;
  top: 50vh;
  left: 17vw;
  z-index: 1;
}

#telefon {
  position: absolute;
  top: 55vh;
  left: 17vw;
  z-index: 1;
}

#impressum {
  position: absolute;
  top: 61vh;
  left: 17vw;
  z-index: 1;
}

#impressum2 {
  position: absolute;
  top: 64vh;
  left: 17vw;
  z-index: 1;
}

#flieger1 {
  position: absolute;
  top: 10vh;
  left: 5vw;
  height: 20vh;
	width: auto;
   z-index: 0;
  transform: rotate(180deg);
   animation: fly-right-two;
	animation-duration: 4s;
	animation-iteration-count: infinite;
  
}

#flieger2 {
  position: absolute;
  top: 10vh;
  left: 20vw;
  height: 30vh;
	width: auto;
   z-index: 0;
  transform: rotate(-90deg);
   animation: fly-right-two;
	animation-duration: 2s;
	animation-iteration-count: infinite;
  
}

#flieger3 {
  position: absolute;
  top: 20vh;
  left: 5vw;
  height: 40vh;
	width: auto;
   z-index: 0;
  transform: rotate(-180deg);
   animation: fly-right-two;
	animation-duration: 3s;
	animation-iteration-count: infinite;
  
}
  
  @keyframes ani-mini {
  
   
   0% {
    left: -50vw;
  }
  50% {
    left: 2vw;
  }
  100% {
    left: -50vw;
  }
}

@keyframes anirechts-mini {
  
  
  0% {
    left: 110vw;
  }
  50% {
    left: 46vw;
  }
  100% {
    left: 110vw;
  }
}

/*-------------subMENU-----pfeile-und-gold-----------*/

#gold_home {
  position: fixed;
  top: 9vh;
  left: 66vw;
  height: 11vh;
	width: auto;
  z-index: 55;
}

.pfeil_links {
   position: fixed;
  top: 50vh;
  left: 1vw;
  height: 3vh;
	width: auto;
  z-index: 55;
  display: none;
}

.pfeil_rechts {
   position: fixed;
  top: 50vh;
  left: 95vw;
  height: 3vh;
	width: auto;
  z-index: 55;
  display: none;
}
}
 
/*...............Phone Landscape View............................*/

@media screen and (max-width: 840px) and (min-width: 480px) {

  #email {
  position: absolute;
  top: 50vh;
  left: 30vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#telefon {
  position: absolute;
  top: 55vh;
  left: 30vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#impressum {
  position: absolute;
  top: 61vh;
  left: 30vw;
  z-index: 1;
}

#impressum2 {
  position: absolute;
  top: 64vh;
  left: 30vw;
  z-index: 1;
}
 
.seeigel {
   display: none;
  }
  
} 


/*######################################################################################*/
/*--------------------------TABLETs--verschiedene Größen-----------------------------------*/
/*######################################################################################*/
 @media screen and (max-width: 890px) and (min-width: 840px) { 
   
      ul.nav.menu.mod-list {
   background-color: transparent;
   display: contents;
   font-size: 1.6em;
  z-index:50;
 
}

   
.item-103 { /*arbeiten-works*/
  
  position: absolute;
  top: 15vh;
  left: 10vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 60s;
	animation-iteration-count: infinite;
}

.item-104 { /*schau-suprise*/
  
  position: absolute;
  top: 93vh;
  left: 7vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 20s;
	animation-iteration-count: infinite;
  
}

.item-106 { /*ueber-about*/
  
  position: absolute;
  top: 49vh;
  left: -10vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 15s;
	animation-iteration-count: infinite;
  
}

.item-107 { /*kontakt-contact*/
  
  position: absolute;
  top: 48vh;
  left: 28vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 80s;
	animation-iteration-count: infinite;

}
 
  #email {
  position: absolute;
  top: 45vh;
  left: 36vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#telefon {
  position: absolute;
  top: 50vh;
  left: 36vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#impressum {
  position: absolute;
  top: 56vh;
  left: 36vw;
  z-index: 1;
}

#impressum2 {
  position: absolute;
  top: 59vh;
  left: 36vw;
  z-index: 1;
}
 

#melone {
  position: absolute;
  top: 32vh;
  left: 38vw;
  height: 40vh;
	width: auto;
   z-index: 2;
  transform: rotate(180deg);
     animation: ani;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#melone2 {
  position: absolute;
  top: 32vh;
  left: 48vw;
  height: 40vh;
	width: auto;
   z-index: 2;
   animation: anirechts;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}   
   
 .buch {
  position: absolute;
  top: 1vh;
  left: 1vw;
  z-index: 1;
}  

  #mailme {
  position: absolute;
  height: 12vh;
  width: auto;
  top: 60vh;
  left: 91vw;
  z-index: 3; 
}
   
.seeigel {
   display: none;
  }
    
   
}


 @media screen and (max-width: 1250px) and (min-width: 890px) and (max-height: 700px) { 

   
   ul.nav.menu.mod-list {
   background-color: transparent;
   display: contents;
   font-size: 1.6em;
  z-index:50;
 
}
   
  .item-103 { /*arbeiten-works*/
  
  position: absolute;
  top: 15vh;
  left: 10vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 60s;
	animation-iteration-count: infinite;
}

.item-104 { /*schau-suprise*/
  
  position: absolute;
  top: 93vh;
  left: 7vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 20s;
	animation-iteration-count: infinite;
  
}

.item-106 { /*ueber-about*/
  
  position: absolute;
  top: 49vh;
  left: -10vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 15s;
	animation-iteration-count: infinite;
  
}

.item-107 { /*kontakt-contact*/
  
  position: absolute;
  top: 48vh;
  left: 28vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 80s;
	animation-iteration-count: infinite;

} 
   
  #email {
  position: absolute;
  top: 45vh;
  left: 36vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#telefon {
  position: absolute;
  top: 50vh;
  left: 36vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#impressum {
  position: absolute;
  top: 56vh;
  left: 36vw;
  z-index: 1;
}

#impressum2 {
  position: absolute;
  top: 59vh;
  left: 36vw;
  z-index: 1;
}
 

#melone {
  position: absolute;
  top: 32vh;
  left: 38vw;
  height: 40vh;
	width: auto;
   z-index: 2;
  transform: rotate(180deg);
     animation: ani;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#melone2 {
  position: absolute;
  top: 32vh;
  left: 48vw;
  height: 40vh;
	width: auto;
   z-index: 2;
   animation: anirechts;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}   
   
 .buch {
  position: absolute;
  top: 1vh;
  left: 1vw;
  z-index: 1;
}  

   #mailme {
  position: absolute;
  height: 12vh;
  width: auto;
  top: 63vh;
  left: 88.5vw;
  z-index: 3; 
}
   
.seeigel {
   display: none;
  }
   
   
}    

/*---------------TABLET 1024px mal 768px-------------------------------------------*/
@media screen and (max-width: 1250px) and (min-width: 900px) and (min-height: 700px) { 

  #email {
  position: absolute;
  top: 45vh;
  left: 36vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#telefon {
  position: absolute;
  top: 50vh;
  left: 36vw;
  height: 25vh;
  width: auto;
  z-index: 1;
}

#impressum {
  position: absolute;
  top: 56vh;
  left: 36vw;
  z-index: 1;
}

#impressum2 {
  position: absolute;
  top: 59vh;
  left: 36vw;
  z-index: 1;
}
 

#melone {
  position: absolute;
  top: 32vh;
  left: 38vw;
  height: 40vh;
	width: auto;
   z-index: 2;
  transform: rotate(180deg);
     animation: ani;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#melone2 {
  position: absolute;
  top: 32vh;
  left: 48vw;
  height: 40vh;
	width: auto;
   z-index: 2;
   animation: anirechts;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}   
   
 .buch {
  position: absolute;
  top: 1vh;
  left: 1vw;
  z-index: 1;
}  

   #mailme {
  position: absolute;
  height: 9vh;
  width: auto;
  top: 49vh;
  left: 89vw;
  z-index: 3; 
}
   
.seeigel {
   display: none;
  }
 /*------------------------------ARBEITEN-WORKS for TABLET 1024px x 768px-----------------------------*/

#bergwelt {
  position: absolute;
  top: 55vh;
  left: 35vw;
  height: 67%;
	width: auto;
   z-index: 2;
}

#faust {
  position: absolute;
  top: 120vh;
  left: 35vw;
  height: 33%;
	width: auto;
  z-index: 0;
}

#regentag {
  position: absolute;
  top: 14vh;
  left: 60vw;
  height: 44%;
	width: auto;
   z-index: 5;
 
}

#borkenkaefer {
  position: absolute;
  top: 71vh;
  left: 1vw;
  height: 27%;
	width: auto;
   z-index: 5; }

#fontaene {
  position: absolute;
  top: 90vh;
  left: 25vw;
  height: 40%;
	width: auto;
   z-index: 3;
}

#carlos {
  position: absolute;
  top: 56vh;
  left: 7vw;
  height: 50%;
	width: auto;
    z-index: 4;
}

#gorilla {
  position: absolute;
  top: 0;
  left: 12vw;
  height: 70%;
	width: auto;
   z-index: 0;
  
}



.pic:active {
 transform: scale(1.7, 1.7);
  z-index:555555 !important
}
  
/*--------------------------Landing Page TABLET 1024 mal 768px--------------------*/

.item-103 { /*arbeiten-works*/
  
  position: absolute;
  top: 15vh;
  left: 10vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 60s;
	animation-iteration-count: infinite;
}

.item-104 { /*schau-suprise*/
  
  position: absolute;
  top: 86vh;
  left: 14vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 20s;
	animation-iteration-count: infinite;
  
}

.item-106 { /*ueber-about*/
  
  position: absolute;
  top: 49vh;
  left: -8vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 15s;
	animation-iteration-count: infinite;
  
}

.item-107 { /*kontakt-contact*/
  
  position: absolute;
  top: 40vh;
  left: 35vw;
  border-right: unset;
  z-index:50;
  animation: wobble;
	animation-duration: 80s;
	animation-iteration-count: infinite;

}

  
  
#hand1 {
	position: absolute;
	top: 26vh;
	left: 15vw; 
	height: 17vh;
	width: auto;
  transform: rotate(38deg);

	/* transform: translate(-50%, -50%); */
	z-index: -1;
	animation: hand1;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}
  
 #moosgross
{
  position: absolute;
  top: 51vh;
  left: 35vw;
  height: 15vh;
    width: auto;
    z-index: -1;
  
}

#moosklein
{
  position: absolute;
  top: 54vh;
  left: 39vw;
  height: 20vh;
    width: auto;
    z-index: -2;
  animation: wobble;
	animation-duration: 40s;
	animation-iteration-count: infinite;
}
 
 .planeten
{
 display: none;
}

.stephanie
{
  position: absolute;
  top: 9vh;
  left: 58vw;
  height: 21vh;
    width: auto;
  z-index: 1;
}
 
  
} 

/*----------------------------------------------------------GROSSE RIESEN SCREENS------------------------------------------------------------*/

@media screen and  (min-width: 1250px) { 

  
 /*-------ÜBER ABOUT------------*/
  
  
#hintergrundstaub {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0%;
  left: 0%;
  z-index: 0; 
}

.buch {
  position: absolute;
  top: 7vh;
  left: 20vw;
  height: 85vh;
  width: auto;
  z-index: 1;
}

#seeigel_g {
  position: absolute;
  height: 23vh;
  width: auto;
  top: 30vh;
  left: 5vw;
  z-index: 3; 
}

#seeigel_r {
  position: absolute;
  height: 24vh;
  width: auto;
  top: 38vh;
  left: 80vw;
  z-index: 3; 
}

#vienna {
  position: absolute;
  height: 30vh;
  width: auto;
  top: 70vh;
  left: 3vw;
  z-index: 3; 
}

#portrait {
  position: absolute;
  height: 17vh;
  width: auto;
  top: 65vh;
  left: 70vw;
  z-index: 3; 
}

#dadabio {
  position: absolute;
  height: 19vh;
  width: auto;
  top: 2vh;
  left: 20vw;
  z-index: 3; 
}

#mailme {
  position: absolute;
  height: 8vh;
  width: auto;
  top: 80vh;
  left: 76vw;
  z-index: 3; 
}

.aboutmini {
  z-index: -10;
  height: 1vh;
  width: auto;
  top: 1vh;
  left: 1vh;
}

.seeigel:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
  
  
  
  
}

@media screen and  (min-width: 1910px) and (max-width: 1930px) and (min-height: 1190px) and (max-height: 1210px) { 

  
#hintergrundstaub {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0%;
  left: 0%;
  z-index: 0; 
}

.buch {
  position: absolute;
  top: 14vh;
  left: 14vw;
  height: 85vh;
  width: auto;
  z-index: 1;
}

#seeigel_g {
  position: absolute;
  height: 17vh;
  width: auto;
  top: 27vh;
  left: 44vw;
  z-index: 3; 
}

#seeigel_r {
  position: absolute;
  height: 17vh;
  width: auto;
  top: 33vh;
  left: 61.5vw;
  z-index: 3; 
}

#vienna {
  position: absolute;
  height: 23vh;
  width: auto;
  top: 64vh;
  left: 25vw;
  z-index: 3; 
}

#portrait {
  position: absolute;
  height: 15vh;
  width: auto;
  top: 51vh;
  left: 41.5vw;
  z-index: 3; 
}

#dadabio {
  position: absolute;
  height: 14vh;
  width: auto;
  top: 29vh;
  left: 23vw;
  z-index: 3; 
}

#mailme {
  position: absolute;
  height: 7vh;
  width: auto;
  top: 52vh;
  left: 72vw;
  z-index: 3; 
}

.aboutmini {
  z-index: -10;
  height: 1vh;
  width: auto;
  top: 1vh;
  left: 1vh;
}

.seeigel:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
  
} 
}