@media only screen and (max-width: 768px) {
    #message {
      display: block;
body{
	background-color: black;
}

		
    }}  

@media only screen and (min-width: 768px) {
 #message {
    display: none;
    text-align: center;
    padding: 20px;
    background-color: #f2f2f2;
    font-size: 18px;
  }

 

.all{
    		background-color: #ffffff00;
	width: 100vw;
	height: 100vh;
transform: scale(.3) rotate(0deg);
			}

	





.pharao2 {
	top: 47vh;
	left: 50.4vw;
  width: 160vw;
  height: 60vw;
  border-radius: 0%;
  background-color: #120e0e00;
    position: fixed;
z-index: 55555;
	transform: translate(-50%, -50%);

	
}.pharao2:hoer {
	 left: 50vw;
   position: fixed;
    z-index: 444543;
    content: '';
    margin: 0;
  	background-color: black;
  top: 47vh;
  transition-duration: 1.75s;


   
	width: 15vw;
         border: 1.4vw solid black;
	  display: inline-block;}


.pharao2.hover {
			top: 47vh;
	left: 37.4vw;
  width: 0vw;
  height: 60vw;
  background-color: #2196f300;
    position: fixed;
z-index: 55555;

	transform: translate(-50%, -50%);
}
.tum1 {
	top: 50vh;
	left: -16vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 0vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 0; /* Zeilenhöhe */	
	text-align: right;
	
}

.tum1.hover {	 	top: 50vh;
	left: -102vw;
  width:30vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 6;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
	font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 0vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 0; /* Zeilenhöhe */	
	text-align: right;
}
.tum1.hover:hover {	 
	padding-top: 12vw;
	padding-right: 5vw;

	font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 10vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 01; /* Zeilenhöhe */	
	text-align: right;
	top: 50vh;
	left: -57vw;
  width:120vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 6;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
	

	
}



.tum2 {
	top: 50vh;
	left: -3vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);

	
}

.tum2.hover {		top: 50vh;
	left: -105vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
	
}




.tum3 {
	top: 50vh;
	left: 12vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);

	
}

.tum3.hover {		top: 50vh;
	left: -108vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
	
}





.tum4 {
	top: 50vh;
	left: 27vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 0vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1; /* Zeilenhöhe */
	
	
}

.tum4.hover {		top: 230vh;
	left: 27vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 0vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1; /* Zeilenhöhe */
	
	
}
.tum4.hover:hover {		top: 230vh;
	left: 10vw;
  width:40vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
padding-left: 0vw;
	font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 8vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1; /* Zeilenhöhe */
	
}



.tum4 a{
font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 0vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1; /* Zeilenhöhe */
	text-decoration:none;
	
}

.tum4.hover a{
font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 0vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1; /* Zeilenhöhe */
	text-decoration:none;
	
}

.tum4.hover:hover a{
font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 8vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1; /* Zeilenhöhe */
	text-decoration:none;
	
}



.tum5 {
	top: 50vh;
	left: 42vw;
  width:7vw;
  height: 36vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);

	
}

.tum5.hover {		top: 50vh;
	left: -102vw;
  width:7vw;
  height: 36vw;
  background-color: #000000;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
	
}




.tum6 {
	top: 50vh;
	left: -12.5vw;
  width:26vw;
  height: 7vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -270%);

	
}

.tum6.hover {		top: -120vh;
	left: -13vw;
  width:26vw;
  height: 7vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
	transform: translate(-50%, -0%);
}






.tum7 {
	top: 50vh;
	left: 27vw;
  width:37vw;
	padding-top: 0vw;
	font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 1vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff0; /* Textfarbe */
    line-height: 1.1; /* Zeilenhöhe */
  height: 7vw;
  background-color: black;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -270%);

	
}

.tum8.hover {		top: 49vh;
	left: -107.8vw;
 width:21.4vw;
  height: 7vw;
  background-color: #000000;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;

	transform: translate(-50%, 160%);
}







.tum8 {
top: 50vh;
	left: 4.5vw;
  width:21.4vw;
  height: 7vw;
  background-color: #000000;
    position: fixed;
z-index: 5;
	border: 0vw solid #000000;
transition-duration: .4s;

	transform: translate(-50%, 160%);

	
}

.tum7.hover {		top: -120vh;;
	left: 10vw;
  width:73vw;
  height: 7vw;
  background-color: #000000;
    position: fixed;
z-index: 7;	
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -0%);
	padding: 5vw;
	font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 5vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff0; /* Textfarbe */
    line-height: 1.1; /* Zeilenhöhe */	
}
.tum7.hover:hover {			
		padding-top: 7vw;
	font-family: "Roboto", sans-serif; /* Schriftart */
    font-size: 5vw; /* Schriftgröße */
    font-weight: 100;
    color: #fff; /* Textfarbe */
    line-height: 1.1; /* Zeilenhöhe */
	top: -119vh;;
	left: 10vw;
  width:73vw;
  height: 50vw;
  background-color: #000000;
    position: fixed;
z-index: 7;	transition-delay: 0.1s;
	border: 0vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -0%);
	

	
}
.pharao3 {
top: 47vh;
	left: 35vw;
  width: 0vw;
  height: 0vw;
  border-radius: 50%;
  background-color: #229bfb00;
    position: fixed;
z-index: 55559;
transition-duration: .4s;
	transform: translate(-50%, -50%);

		
	
}.pharao3.hover {
top: 47vh;
	left: 50vw;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background-color: #f5181800;
    position: fixed;
z-index: 55559;
	transform: translate(-50%, -50%);

		
	
}





.de3 {
  position: absolute;
  top: 50vh;
  left: 105vw;
  width: 35vw;
  height: 23vw;
  border-radius: 20vw 20vw 0 0;
border: 3vw solid #000000;
  z-index: 10;
	transition-duration: .4s;

  background-color: #ffffff00;
  transform-origin: bottom center;
	transform: translate(-50%, -105%) rotate(90deg);
}

.de3.hover {
 position: absolute;
  top: 200vh;
  left: 94vw;
  width: 35vw;
  height: 35vw;
  border-radius: 20vw 20vw 20vw 20vw;
border: .1vw solid #000000;
  z-index: 10;
	transition-duration: .4s;

  background-color: #000000;
  transform-origin: bottom center;
	transform: translate(-50%, -50%) rotate(90deg);
}


.de3.hover:hover {
background-image: url(at_circle.png);
	background-size: cover;
 position: absolute;
  top: 160vh;
  left: 94vw;
  width: 35vw;
  height: 35vw;
  border-radius: 20vw 20vw 20vw 20vw;
border: .1vw solid #000000;
  z-index: 10;
	transition-duration: .4s;

  background-color: #000000;
  transform-origin: bottom center;
	transform: translate(-50%, -50%) rotate(90deg);
}
.de1 {
		top: 50vh;
	left: 88vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: transparent;
    position: fixed;
z-index: 559;
	border: 3vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -95%);

	
}

.de1.hover {
		top: -110vh;
	left: 88vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: black;
    position: fixed;
z-index: 559;
	border: 3vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);

	
}
	
.de1.hover:hover {
		top: -105vh;
	left: 88vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: black;
    position: fixed;
z-index: 559;
	border: 3vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -50%);
background-image: url(circle-insta.png);
	background-size: cover;
	
}

.de2 {
	top: 50vh;
	left: 88vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: transparent;
    position: fixed;
z-index: 558;
	border: 3vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -10%);

}


.de2.hover {
	top: 50vh;
	left: 210vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: black;
    position: fixed;
z-index: 558;
	border: 3vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -10%);

}
.de2.hover:hover {
	top: 50vh;
	left: 208vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: black;
    position: fixed;
z-index: 558;
	border: 3vw solid #000000;
transition-duration: .4s;
	transform: translate(-50%, -10%);
background-image: url(circle-linkedin.png);
	background-size: cover;
}

.hideout {
top: 50vh;
	left: 69vw;
  width: 20vw;
  height: 20vw;
  background-color: white;
    position: fixed;
z-index: 559;
transition-duration: .4s;
	transform: rotate(0deg);
	transform: translate(-0%, -50%);
}

.hideout.hover {
top: 50vh;
	left: 69vw;
  width: 0vw;
  height: 0vw;
  background-color: white;
    position: fixed;
z-index: 559;
transition-duration: .4s;
	transform: rotate(0deg);
	transform: translate(-0%, -50%);
	border: 0vw;
}
.img{
  
top:50vh;
	height: 30vw;
	width: 30vw;
	border-radius: 50%;
	
  }
  
  
.middle span:nth-of-type(1)
{
    left: 65vw; 
    position: fixed;
    z-index:55556; 
    content: '';

    margin: 0;
  top: 50vh;

  	background-color: black;

	width: 15vw;
         border: 1.4vw solid #000000;
    transform: translate(-50%, -50%) translateX(0px) rotate(90deg) ;
	  display: inline-block;
}
.middle span:nth-of-type(2)
{
    left: 65vw;    position: fixed;
    z-index:55556; 
    content: '';
  top: 50vh;
    margin: 0;
  	background-color: #000000;;

	width: 15vw;
         border: 1.4vw solid #000000;
    transform: translate(-50%, -50%) translateX(0px) rotate(0deg);
	  display: inline-block;
}

  
.middle.hover span:nth-of-type(1)
{
    left: 65vw; 
    position: fixed;
    z-index:55556; 
    content: '';

    margin: 0;
  top: 50vh;

  	background-color: white;

	width: 15vw;
         border: 1.4vw solid #00bcd400;
    transform: translate(-50%, -50%) translateX(0px) rotate(90deg) ;
	  display: inline-block;
}
.middle.hover span:nth-of-type(2)
{
    left: 65vw;    position: fixed;
    z-index:55556; 
    content: '';
  top: 50vh;
    margin: 0;
  	background-color: #00000000;;

  
	width: 15vw;
         border: 1.4vw solid #00bcd400;
    transform: translate(-50%, -50%) translateX(0px) rotate(0deg);
	  display: inline-block;
}




.right span:nth-of-type(1)
{
 left: 65vw; 
    position: fixed;
    z-index:55556; 
    content: '';

    margin: 0;
  top: 50vh;
  
  	background-color: black;

   transition-duration: .5s;

	width: 15vw;
         border: 1.4vw solid black;
    transform: translate(-50%, -50%) translateX(0px) rotate(90deg) ;
	  display: inline-block;
}
.right span:nth-of-type(2)
{
    left: 65vw; 
    position: fixed;
    z-index:55556; 
    content: '';
  top: 50vh;
    margin: 0;
  	background-color: black;
  
  
  transition-duration: .5s;
	width: 15vw;
         border: 1.4vw solid black;
    transform: translate(-50%, -50%) translateX(0px) rotate(0deg);
	  display: inline-block;
}
.right.hover span:nth-of-type(1)
{
      
        left: 50vw;
   position: fixed;
    z-index: 444453;
    content: '';
  top: 47vh;
    margin: 0;
  	background-color: black;
  transition-duration: 1.75s;
   

	width: 15vw;
         border: 1.4vw solid black;
    transform: translate(-50%, -50%) translateX(0px) rotate(45deg);
	  display: inline-block;}

.right.hover span:nth-of-type(2)
{
       
   left: 50vw;
   position: fixed;
    z-index: 444543;
    content: '';
    margin: 0;
  	background-color: black;
  top: 47vh;
  transition-duration: 1.75s;


   
	width: 15vw;
         border: 1.4vw solid black;
    transform: translate(-50%, -50%) translateX(0px) rotate(-45deg);
	  display: inline-block;}

.right.hover:hover span:nth-of-type(1)
{
      
        left: 50vw;
   position: fixed;
    z-index: 444453;
    content: '';
  top: 47vh;
    margin: 0;
  	background-color: black;
   
  transition-duration: .1s;

	width: 15vw;
         border: 3vw solid black;
    transform: translate(-50%, -50%) translateX(0px) rotate(45deg);
	  display: inline-block;}

.right.hover:hover span:nth-of-type(2)
{
       
   left: 50vw;
   position: fixed;
    z-index: 444543;
    content: '';
    margin: 0;
  	background-color: black;
  top: 47vh;

  transition-duration: .1s;

   
	width: 15vw;
         border: 3vw solid black;
    transform: translate(-50%, -50%) translateX(0px) rotate(-45deg);
	  display: inline-block;}

body
    {overflow: hidden;
		cursor: pointer;
height: 100vh;
	 background-color: #ffffff;

       background-image: url("fnaallalala.png");
   background-position: 50px 25px;
background-size:100vw;*/	}

 
    .hide
    {
        opacity: 0;
        transition-duration: 0s;
		transition-delay: s;
		
    }
    .show
    {
        opacity: 1;
		        transition-duration: .3s;

     	transition-delay: 0s;
    }  .silent1
    {
        opacity: 0;  
        transition-duration: 0.0s;
    }
    .loud1
    {
      opacity: 1;
		     transition-duration: 0.0s;
	          transition-delay: 1.5s;

    }
}