.homepage-annimated-banner-placeholder {
    position: relative;
    overflow: hidden;
    background-color: black;
}

.homepage-annimated-banner-placeholder a{
    position: relative;
}

.homepage-annimated-banner-placeholder div img {
    position: absolute;    
}

.homepage-banner-image-overlay-curtains-left {    
    width: 6.8vw;
    top: 0vw;
    left: -6vw; 
    opacity: 1;
    animation: curtain-left 2s ease-in forwards;
}

.homepage-banner-image-overlay-curtains-right {    
    width: 6.8vw;
    top: 0vw;
    left: 99vw; 
    opacity: 1;
    transform: scaleX(-1);
    animation: curtain-right 2s ease-in forwards;
}


.homepage-banner-image-overlay-lights-left {    
    width: 7vw;
    top: 1vw;
    left: 7.5vw; 
    opacity: 0;
    animation: fade-in 3s ease-in forwards;
}

.homepage-banner-image-overlay-lights-right {    
    width: 7vw;
    top: 1vw;
    left: 40vw; 
    opacity: 1;
    transform: scaleX(-1);
    opacity: 0;
    animation: fade-in 3s ease-in forwards;
}


.homepage-banner-image-overlay-the-abbey-lane {    
    width: 14vw;
    top: .5vw;
    left: 18.9vw; 
    opacity: 0;
    animation: fade-in 3s ease-in forwards,
               swing 9s ease-in-out 5s infinite;
    
}

.homepage-banner-image-overlay-variety-show {    
    width: 33vw;
    top: 5vw;
    left: 13vw; 
    opacity: 0;
    animation: fade-in 3s ease-in .5s forwards;    
}

.homepage-banner-image-overlay-hits {    
    width: 3vw;
    top: 12vw;
    left: 19vw; 
    opacity: 0;
    animation: fade-in 2s ease-in 1s forwards;
    
}

.homepage-banner-image-overlay-broadway {    
    width: 25vw;
    top: 12vw;
    left: 16vw; 
    opacity: 0;
    animation: fade-in 2s ease-in 1.5s forwards,
               swing 6s ease-in-out 7s infinite;    
    
}

.homepage-banner-image-overlay-skyline {    
    width: 40vw;
    top: 2vw;
    left: 48vw; 
    opacity: 0;
    animation: skyline 2s ease-in 1.5s forwards,
                fade-to-20 2s ease-in 4s forwards;     
}

.homepage-banner-image-overlay-date {    
    width: 25vw;
    top: 4.8vw;
    left: 56vw; 
    opacity: 0;
    animation: fade-in 2s ease-in 4.3s forwards,
               bounce 6s ease-in-out 5s infinite;
}

.homepage-banner-image-overlay-stars {    
    width: 86vw;
    top: 1vw;
    left: 5vw; 
    opacity: 0;
    animation: fade-in 2s ease-in 4.3s forwards    
}

.homepage-banner-image-overlay-red-star {    
    width: 1.3vw;
    top: 15vw;
    left: 13.5vw; 
    opacity: 0;
    animation: fade-in-out 5s ease-in-out 7s infinite;    
}

.homepage-banner-image-overlay-white-star {    
    width: 1.3vw;
    top: 12vw;
    left: 48vw; 
    opacity: 0;
    animation: fade-in-out 5s ease-in-out 8s infinite;
}

.homepage-banner-image-overlay-yellow-star {    
    width: 1.3vw;
    top: 17vw;
    left: 70vw; 
    opacity: 0;
    animation: fade-in-out 5s ease-in 9s infinite;
}

.homepage-banner-image-overlay-white-star-2 {    
    width: 1.3vw;
    top: 2vw;
    left: 76vw; 
    opacity: 0;
    animation: fade-in-out 5s ease-out 10s infinite;
}

.homepage-banner-image-overlay-red-star-2 {    
    width: 1.3vw;
    top: 15vw;
    left: 85vw; 
    opacity: 0;
    animation: fade-in-out 5s ease-out 11s infinite;
}

.homepage-banner-image-overlay-dr-maurer {    
    width: 10vw;
    top: 22vw;
    left: 5vw; 
    opacity: 1;
    animation: rise-up 3.5s ease-in 6s forwards;               
}

.homepage-banner-image-overlay-callout {    
    width: 5vw;
    top: 13vw;
    left: 12vw; 
    opacity: 0;
    animation: fade-in 2s ease-in 9.25s forwards,
               bounce 15s ease-in-out 12s infinite;
}


/* GENERIC KEYFRAMES */

@keyframes rise-up {
    100% {
        transform: translate(0vw,-10vw);       
    }
}

@keyframes fade-in-out {
    0% {        
        opacity: 0;
    }

    50% {        
        opacity: 1;       
    }        

    100% {        
        opacity: 0;       
    }
}

@keyframes clouds {
    0% {                
        transform: translate(0vw,0);
        opacity: 1;
    }     

    100% {
        transform: translate(-15vw,0); 
        opacity: 1;       
    }
}

@keyframes bounce {
    0% {        
        transform: translate(0,0);        
    }

    10% {           
        transform: translate(0,0);        
    }    

   50% {
        transform: translate(0,.5vw);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes swing {
    0% {        
        transform: translate(0,0);
    }

    10% {           
        transform: translate(0,0);
    }    

   50% {       
        transform: translate(.5vw,0);
    }

    100% {
        transform: translate(0,0);        
    }
}

@keyframes fade-in {
    0% {       
        opacity: 0;
    }   

    100% {     
        opacity: 1;
    }
}

@keyframes fade-to-20 {
    0% {       
        opacity: 1;
    }   

    100% {     
        opacity: .2;
    }
}

/* BANNER SPECIFIC KEYFRAMES */

@keyframes curtain-left {    

    100% {           
        transform: translate(6vw,0);
    }
   
}

@keyframes curtain-right {    
    100% {                   
        transform: scaleX(-1) translate(6vw,0);
    }   
}

@keyframes skyline {
    0% {       
        opacity: 0;
    }   

    100% {     
        opacity: 1;
    }
}