.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-cards {    
    width: 7vw;
    top: 1vw;
    left: 90vw; 
    opacity: 0;
    animation:  
        fade-in 1s ease-in 1.4s forwards,
        bounce 5s ease-in-out 0s infinite;
}

.homepage-banner-image-overlay-book {    
    width: 7vw;
    top: 5vw;
    left: 80vw; 
    opacity: 0;
    animation:  
        fade-in 1s ease-in 1.3s forwards,
        bounce 8s ease-in-out 0s infinite;
}

.homepage-banner-image-overlay-pocket-watch {    
    width: 4vw;
    top: 5vw;
    left: 45vw; 
    opacity: 1;
    animation:
        fade-in 3s ease-in forwards,
        bounce 5s ease-in-out 1s infinite;  
}

.homepage-banner-image-overlay-key {    
    width: 5vw;
    top: 1vw;
    left: 70vw; 
    opacity: 0;
    animation:  
        fade-in 1s ease-in 1.2s forwards,
        bounce 10s ease-in-out 0s infinite;
}

.homepage-banner-image-overlay-tea-cup {    
    width: 6vw;
    top: 10vw;
    left: 8vw; 
    opacity: 0;
    animation:  
        fade-in 1s ease-in 1s forwards,
        bounce 8s ease-in-out 0s infinite;
}

.homepage-banner-image-overlay-pocket-watch2 {    
    width: 7vw;
    top: 10vw;
    left: 93vw; 
    opacity: 0;
    animation:
        fade-in-out 15s ease-out 1.2s infinite,
        bounce 20s ease-in-out infinite;
        
}

.homepage-banner-image-overlay-alice {    
    width: 18vw;
    top: 1vw;
    left: 52vw; 
    opacity: 0;
    animation:        
        alice 40s ease-in 1.8s infinite;    
}

.homepage-banner-image-overlay-presents {    
    width: 50vw;
    top: 1vw;
    left: 1vw; 
    opacity: 1;
    animation: fade-in 3s ease-in forwards
}

.homepage-banner-image-overlay-title {    
    width: 20vw;
    top: 5vw;
    left: 25vw; 
    opacity: 1;
    animation: fade-in 3s ease-in forwards,
               swing 9s ease-in-out 5s infinite;
}

.homepage-banner-image-overlay-date1 {    
    width: 29vw;
    top: 17vw;
    left: 2vw; 
    opacity: 0;
    animation: fade-in 3s ease-in 1s forwards;
}

.homepage-banner-image-overlay-date2 {    
    width: 26vw;
    top: 19vw;
    left: 30vw; 
    opacity: 0;
    animation: fade-in 3s ease-in 1s forwards;
}

.homepage-banner-image-overlay-on-sale-now {    
    width: 15vw;
    top: 12vw;
    left: 70vw; 
    opacity: 0;
    animation:
        fade-in 3s ease-in 1.2s forwards,
        swing 9s ease-in-out 2s infinite;
}


/* GENERIC KEYFRAMES */

@keyframes rise-up {
    100% {
        transform: translate(0vw,-20vw);       
    }
}

@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-date {
    0% {       
        opacity: 0;
    }   

    100% {     
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {       
        opacity: 0;
    }   

    100% {     
        opacity: 1;
    }
}

@keyframes fade-to-20 {
    0% {       
        opacity: 1;
    }   

    100% {     
        opacity: .2;
    }
}

/* BANNER SPECIFIC KEYFRAMES */


@keyframes alice {
    8% {
        opacity: 1;        
    }
    100% {
        transform: translate(0,20vw) scale(.95);        
    }
}