

/*Expand png 1 -------------------------------------------*/

#textbannerPng {     
    position: absolute;left: 0; width:80vw; left:10vw; top: 40vh;z-index: 999999999;text-align:center;
}

.scale-up-center {
	-webkit-animation: scale-up-center 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
 
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



/*Expand png 2 -------------------------------------------*/

#textbannerPng2 {     
    position: absolute;left: 0; width:80vw; left:10vw; top: 40vh;z-index: 999999999;text-align:center;
}

.scale-up-center {
	-webkit-animation: scale-up-center 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
 
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



/*
    font-family: 'Allison', cursive;
    font-family: 'Beth Ellen', cursive;
    font-family: 'Dawning of a New Day', cursive;
    font-family: 'Kristi', cursive;
    font-family: 'Mr De Haviland', cursive;
    font-family: 'Reenie Beanie', cursive;
    font-family: 'Seaweed Script', cursive;
    font-family: 'Special Elite', cursive; <--typewriter
    font-family: 'Syne Mono', monospace;
*/

/*Expand 1 -------------------------------------------*/

#textbanner1 {
    font-family: 'Reenie Beanie', cursive;white-space: nowrap;font-size:3vw;color: #fff; line-height:80%;
    position: absolute;left: 0; width:90vw; top: 40vh;z-index: 999999999;text-align:center; text-shadow: -2px 2px 9px rgba(0,0,0,0.71);

}

    .expand1 {-webkit-animation: expand1 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;animation: expand1 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;}

    @-webkit-keyframes expand1 {0% {-webkit-filter: blur(0.01);filter: blur(0.01);}
  100% {-webkit-filter: blur(12px) opacity(0%);filter: blur(12px) opacity(0%);font-size: 1vw;}}
@keyframes expand1 {0% {-webkit-filter: blur(0.01);filter: blur(0.01);}
  100% {-webkit-filter: blur(12px) opacity(0%);filter: blur(12px) opacity(0%);font-size: 1vw;}}




/*Expand 2 -------------------------------------------*/
#textbanner2 {
    font-family: 'Nothing You Could Do', cursive; white-space: nowrap;font-size:6vw;color: #fff; line-height:80%;
    position: absolute;left: 0; width:90vw; top: 40vh;z-index: 999999999;text-align:center;
}
    
 /*Expand 3 ----------------------typewriter---------------------*/
#textbanner3 {
    font-family: 'Allison', cursive; white-space: nowrap;font-size:5vw;color: #fff; line-height:100%;
    position: absolute;left: 0; width:90vw; top: 40vh;z-index: 999999999;text-align:center;
}
   
/*Expand 4 -------------------------------------------*/
#textbanner4 {
    font-family: 'Beth Ellen', cursive;; white-space: nowrap;font-size:3vw;color: #fff; line-height:100%;
    position: absolute;left: 0; width:90vw; top: 40vh;z-index: 999999999;text-align:center;
}
/*Expand 5 -------------------------------------------*/
#textbanner5 {
    font-family: 'Mr De Haviland', cursive; white-space: nowrap;font-size:6vw;color: #fff; line-height:100%;
    position: absolute;left: 0; width:90vw; top: 40vh;z-index: 999999999;text-align:center;
}
/*Expand 6 -------------------------------------------*/
#textbanner6 {
    font-family: 'Reenie Beanie', cursive; white-space: nowrap;font-size:6vw;color: #fff; line-height:100%;
    position: absolute;left: 0; width:60vw; top: 40vh;z-index: 999999999;text-align:center;
}
/*Expand 7 -------------------------------------------*/
#textbanner7 {
    font-family: 'Special Elite', cursive; white-space: nowrap;font-size:3vw;color: #000; line-height:100%;
    position: absolute;left: 0; width:90vw; top: 40vh;z-index: 999999999;text-align:center;
}
 

/*FARBEN*/
.purpur {color: #4a203b!important;}
.gold {color:  #9b8a52!important;}
.rot {color:  #6a1113!important;}
.hellblau {color: #82a7b9!important;}
.schwarz {color:#000!important;}
.weiss {color:#f7f2e8!important;}

.sh_purpur {text-shadow: -2px 2px 9px rgba(74, 32, 59,0.71)!important;   }
.sh_gold {text-shadow: -2px 2px 9px rgba(155, 138, 82,0.71)!important; }
.sh_rot {text-shadow: -2px 2px 9px rgba(106, 17, 19,0.71)!important; }
.sh_hellblau {text-shadow: -2px 2px 9px rgba(130, 167, 185,0.71)!important; }
.sh_schwarz {text-shadow: -2px 2px 9px rgba(0,0,0,0.71)!important;}
.sh_weiss {text-shadow: -2px 2px 9px rgba(255,255,255,0.71)!important;}



/*Introtext-Kasten*/
#Szene {cursor:pointer;  position: absolute;left: 70px; width:calc(100vw - 180px); top: 3vh;z-index: 999999999;text-align:center;}
#Szene .overline {line-height:130%;   font-family: 'bebas',Arial; white-space: nowrap;font-size:3vw;  letter-spacing:4px;  }
#Szene .titel1 {line-height:90%;   font-family: 'ysra','Times New Roman'; white-space: nowrap;font-size:6vw; font-weight:700;  }
#Szene .titel2 {line-height:90%;   font-family:  'ysra','Times New Roman'; white-space: nowrap;font-size:6vw;   font-weight:700;  }


.expandSzene {-webkit-animation: expandSzene 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;animation: expandSzene 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;}
@-webkit-keyframes expandSzene {0% {-webkit-filter: blur(0.01);filter: blur(0.01);}
  100% {-webkit-filter: blur(12px) opacity(0%);filter: blur(12px) opacity(0%);font-size: 1vw;}}
@keyframes expandSzene {0% {-webkit-filter: blur(0.01);filter: blur(0.01);}
  100% {-webkit-filter: blur(12px) opacity(0%);filter: blur(12px) opacity(0%);font-size: 1vw;}}
