/*  Robert Haas 28.1.2023  */

.nav {
	background-color: rgba(0, 0, 255, 0.0);
	color:white;
  font-size: 140%;
  animation: navi 18s linear infinite 0s; 
}

.nav a {color: inherit;}
.nav a.icon  {color: inherit;}


@keyframes navi {  
    0% 	{ color: white;  animation-timing-function: ease-in;}
    32% { color: white;  animation-timing-function: ease-out;}
    
    36% { color: black;	}
    64% { color: black; }
    
    70% { color: white; } 
    100%{ color: white; }
    }

.nav.responsive {background-color: rgba(205, 205, 205, 0.7);}

main{
	position: absolute; /*     position: fixed; */
	width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;	 
    font-size: 130%;    
}
	
main li figure { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 18s linear infinite 0s; 
}

main li{color: white;}

/* Animation */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - Bild 1 */
main li:nth-child(1) figure { 
	background-image:  url(../b_front/01_KH_Scan.jpg);
	}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - Bild 2 */
main li:nth-child(2) figure { 
	background-image: url(../b_front/02_Hochhaus_Skizze.png);
    animation-delay: 6s; 
	}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - Bild 3 */
main li:nth-child(3) figure { 
	background-image: url(../b_front/03_Bruettisellen.jpg); 
	animation-delay: 12s; 
	}

/* - - - - - - - - - - - - - - - - - - - - -  Text Bild 1 */
main li div { 
    z-index: 1000;
    position: absolute;
    bottom: 0em;
     width: 100%;
    height: 2em;
    padding-left: 0px;
  	padding-right: 20px;
    text-align: right;
    opacity: 0;
    font-size: 100%;
    color:white;
	animation: titleAnimation 18s linear infinite 0s; 
}	

main li div h3 {
	font-style: normal;}	
	
/* - - - - - - - - - - - - - - - - - - - - -  Text Bild 2 */
main li:nth-child(2) div {
	color: black; 
    animation-delay: 6s; 
}

/* - - - - - - - - - - - - - - - - - - - - -  Text Bild 3 */
main li:nth-child(3) div { 
     animation-delay: 12s; 
}


/* - - - - - - - - - - - - - - - - - - - - Animation time */
@keyframes imageAnimation { 
    0%  { opacity: 0; animation-timing-function: ease-in; }
    10% { opacity: 1; animation-timing-function: ease-out; }
    40% { opacity: 1 ;}
    50% { opacity: 0 ;}
    100%{ opacity: 0 ;}
}

/* - - - - - - - - - - - - - - - - - - - Animation title */
@keyframes titleAnimation { 
	0% 	{ opacity: 0; }
    10% { opacity: 0; animation-timing-function: ease-in;}
    15% { opacity: 1; animation-timing-function: ease-out;}
    35% { opacity: 1; }
    40% { opacity: 0; }
    100%{ opacity: 0; }
}
	
/* footer -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - */
footer{
  position: fixed;
  width: 100%;
  bottom: 0em;
  z-index: 99;
  }
  
footer address{
  width: 100%;
  max-width: 1200px;
  margin-left: auto; margin-right: auto;
  text-align: left;
  line-height: 1.8em;
  padding-left: 20px;  
  padding-right: 20px;
  color: black;
  background-color: rgba(255, 255, 255, 0.0);   
  font-size: 100%;
  }
  
footer img{
  padding-top: 1em;
  width:100px;}


/* responsiv * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * phone horizontal*/
  @media screen and (min-width: 368px) and (orientation:landscape){
  
  }
  
  /* responsiv * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * iPad */
  @media screen and (min-width: 768px) and (orientation:portrait){	

  }
  
  @media screen and (min-width: 768px) and (orientation:landscape){

  }
  
  /* responsiv * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * screen */
  @media all and (min-width: 1200px){

  }