.body { top: 0
   
}

a { text-decoration: none; 
    
    
}






/* Mainpage */

img {
  max-width: 100%;
  display: block;
}

/* Aspect Ratio */

.container {
  background-color: rgba(25 255 255 1);
  width: 100%;
  padding-top: 66.6%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
}

/* If you want text inside of the container */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
    
}

.write {
  text-align: center; 
  padding: 25% 8.33% 0 8.33%
    
}


.ImgContainer {position: relative; height: 100%; width: 833px; left: 50%; margin-left: -416.5px}

.ImgHoch { margin-right: 249.83px; margin-left: 249.83px; height: 500px; width: 334px}

.ImgHoch67 { margin-right: 216.5px; margin-left: 216.5px; height: 500px; width: 400px}

.ImgQuer { height: 500px; width: 750px; margin:0 41.5px 0 41.5px}

.ImgQuer1 { height: 500px; width: 625px; margin:0 104px 0 104px}

.ImgLang { height: 500px; width: 833px;} 

.ImgSquare { margin:0 166.5px 0 166.5px; height:500px; width: 500px}

.ImgFour { margin: 0 109px 0 109px; height:500px; width: 625px}

.ImgCaption {width: 100%; text-align: center; bottom: -40px; position: relative; z-index: 97}

.vertical-center {
  margin: 0;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

.vertical {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

[class*="col-"]{ 
        float: left; 
        
        }

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Next & previous buttons */
.prev {   cursor: pointer;
  color: dimgray;
  font-weight: lighter;
  transition: 0.6s ease;
 
   }



.next {
  cursor: pointer;
  color: dimgray;
  font-weight: lighter;
  transition: 0.6s ease;
 
 

  
}

.prevbox { 
	cursor: w-resize;
	height: 100%;
		 width: 99.99%;
	background-color: transparent;
	position: absolute;z-index: 98;
	}

.nextbox { 
	cursor: e-resize;
	height: 100%;
		 width: 99.99%;
	background-color: transparent;
	position: absolute; z-index: 98;
	}

.PORT {

z-index: 95;
position: relative;
    
}

.VFTOS {

z-index: 95;
position: relative;
    
}

.GC  {

z-index: 95;
position: relative;
    
} 

.Food  {

z-index: 95;
position: relative;
    
} 

.Loise {

z-index: 95;
position: relative;
    
} 

.WELL {

z-index: 95;
position: relative;
    
} 

.STAHL {

z-index: 95;
position: relative;
    
} 

.POETS {

z-index: 95;
position: relative;
    
} 

.ZAHN {

z-index: 95;
position: relative;
    
} 

.GANESH {

z-index: 95;
position: relative;
    
} 


.COFFEE {

z-index: 95;
position: relative;
    
} 

.SP {

z-index: 95;
position: relative;
    
} 

.Pickle {

z-index: 95;
position: relative;
    
} 

.Pea {

z-index: 95;
position: relative;
    
} 

.CheeseCake {

z-index: 95;
position: relative;
    
} 

.Adiv {

  z-index: 95;
  position: relative;
      
  } 

  .Sicomoro {

    z-index: 95;
    position: relative;
        
    } 

    .BingoLingo {

      z-index: 95;
      position: relative;
          
      } 

.Sister {

z-index: 95;
position: relative;

    
} 

.Neighbour {

z-index: 95;
position: relative;
    
}

.Danger {

z-index: 95;
position: relative;
    
}

.Gold {

z-index: 95;
position: relative;
    
}

.TpFood{

  z-index: 95;
  position: relative;
      
  }


.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

.fadeKoma {
  -webkit-animation-name: fadeKoma;
  -webkit-animation-duration: 10s;
  animation-name: fadeKoma;
  animation-duration: 10s;
}

@-webkit-keyframes fadeKoma {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeKoma {
  from {opacity: 0} 
  to {opacity: 1}
}


.fadeKoma2 {
  -webkit-animation-name: fadeKoma2;
  -webkit-animation-duration: 16.5s;
  animation-name: fadeKoma2;
  animation-duration: 16.5s;

}

@-webkit-keyframes fadeKoma2 {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeKoma2 {
  from {opacity: 0} 
  to {opacity: 1}
}



@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/* Transition */

.content {
        text-align: center; 
        height: 100%; 
        z-index: 95;
        }


/* Fading animation */



.overlay {
        position: absolute;
        bottom: 250%;
        left: 8.33%;
        right: 8.33%;
        background-color: rgba(0, 0, 0, 0);
        overflow: hidden;
        width: auto;
        z-index: 95;
        height:0;
        transition: 0s ease;
        }

.overlay2 {
        position: absolute;
        bottom: 0;
        left: 8.33%;
        right: 8.33%;
        background-color: rgba(0, 0, 0, 0);
        overflow: hidden;
        width: auto;
        z-index: 95;
        height:0;
        transition: 4s ease;
       
-webkit-animation-name: fade
	;
  -webkit-animation-duration: 11.5s;
  animation-name: fade;
	
  animation-duration: 11.5s; }

.overlay3 {
        position: absolute;
        bottom: 0;
        left: 8.33%;
        right: 8.33%;
        background-color: rgba(0, 0, 0, 0);
        overflow: hidden;
        width: auto;
        z-index: 95;
        height:0;
        transition-delay: 10s ease;
       
-webkit-animation-name: fade
	;
  -webkit-animation-duration: 20.5s;
  animation-name: fade;
	
  animation-duration: 20.5s; }

.overlay4 {
        position: absolute;
        bottom: 0;
        left: 8.33%;
        right: 8.33%;
        background-color: rgba(0, 0, 0, 0);
        overflow: hidden;
        width: auto;
        z-index: 95;
        height:0;
		transition: 10s;
        transition-delay: 15s ease;
       
-webkit-animation-name: fade
	;
  -webkit-animation-duration: 30.5s;
  animation-name: fade;
	
  animation-duration: 30.5s; }


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:0.9; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:0.9; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:0.9; } }


@media (max-width: 600px) 

{ 
  h1 {
    text-decoration: none;
    color: black;
 	  font-family: Helvetica;
    font-size: 0.3em;
    font-weight: lighter;
    z-index: 94; 
	  letter-spacing: 0.14em; 
	  line-height: 120%;
  }

  h2 {  
    
    text-decoration: none;
    color: dimgray;
    line-height: 140%;
	  font-family: Helvetica;
    font-size: 0.2em;
    font-weight: lighter;
    z-index: 94; 
	  text-align: center;
	  text-transform: uppercase;
  }
  
    
        [class*="col-"]{ 
        float: left; 
        
        }

      .col-1 {width: 8.33%;}
      .col-10 {width: 83.34%;}   
      
      
      .head { 
  
        padding: 8px 0px 5px 0px; 
        text-align: center; 
        background-color: rgba(255, 255, 255, 0.9); 
        position:fixed; 
        width: 100%; 
        left: 0; 
        top: 0; 
        z-index: 300 
      
      }
      
    
    


}

@media (min-width: 601px) { 
  
  h1 {
    text-decoration: none;
    color: black;
 	  font-family: Helvetica;
    font-size: 0.9em;
    font-weight: lighter;
    z-index: 94; 
	  letter-spacing: 0.14em; 
	  line-height: 1.3em;
}

  h2 {text-decoration: none;
    color: dimgray;
    line-height: 140%;
	  font-family: Helvetica;
    font-size: 0.8em;
    font-weight: lighter;
    z-index: 94; 
	  text-align: center;
	  text-transform: uppercase;
}

.head { 
  
    padding: 15px 0px 10px 0px; 
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.9); 
    position:fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 300 
  
  }

}

@media (min-width: 900px) and (orientation: portrait) 

{ 
    
  h1 {
    text-decoration: none;
    color: black;
 	  font-family: Helvetica;
    font-size: 0.9em;
    font-weight: lighter;
    z-index: 94; 
	  letter-spacing: 0.14em; 
	  line-height: 1.3em;
  }

  h2 {text-decoration: none;
    color: dimgray;
    line-height: 140%;
	  font-family: Helvetica;
    font-size: 0.8em;
    font-weight: lighter;
    z-index: 94; 
	  text-align: center;
	  text-transform: uppercase;
    }
    
    [class*="col-"]{ 
        float: left; 
        
        }

  .col-1 {width: 16.66%;}
  .col-10 {width: 66.66%;}        
        
  .head { 
  
    padding: 20px 0px 15px 0px; 
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.9); 
    position:fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 300 
  
  }     
    


  
   

}

@media (min-width: 900px) and (orientation: landscape) 

{ 
    
  h1 {
    text-decoration: none;
    color: black;
 	  font-family: Helvetica;
    font-size: 0.9em;
    font-weight: lighter;
    z-index: 94; 
	  letter-spacing: 0.14em; 
	  line-height: 150%;
  }

  h2 {text-decoration: none;
    color: dimgray;
    line-height: 140%;
	  font-family: Helvetica;
    font-size: 0.8em;
    font-weight: lighter;
    z-index: 94; 
	  text-align: center;
	  text-transform: uppercase;
    }
    
    [class*="col-"]{ 
        float: left; 
        
        }

  .col-1 {width: 16.66%;}
  .col-10 {width: 66.66%;}        
        
  .head { 
  
    padding: 5px 0px 4px 0px; 
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.9); 
    position:fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 300 
  
  }     

}


@media (orientation: landscape) {

.PaddingPortrait {padding: 0% 27.8% 0% 27.8%; height: 100%;}

.PaddingPortrait2 {padding: 4.165% 27.8% 4.165% 27.8%; height: 100%;}



.PaddingSquare {padding: 11% 27.8% 11% 27.8%; height: 100%;}

.PaddingTP {height:100%; padding: 9.7% 0% 9.87% 0%;
  
}

.TP {padding: 13.3% 0%;}

.Editorial {padding: 8.33% 0% 0% 0%}

}

@media (orientation: portrait) {

  .PaddingPortrait {width: 100%;}

  

  .PaddingSquare {padding: 11% 27.8% 11% 27.8%; height: 100%;}

  .PaddingQuer {padding: 41.5% 0% 41.5% 0%}


  .PaddingTP {width:100%; padding: 14.94% 0% 14.94% 0%;}

  .TP {padding: 60% 0% 50% 0%}

  .Editorial {padding: 33.33% 0% 0% 0%}
    
  }