
.homepage-banner-image-overlay-olympians {   
    position: absolute;
    width: 40vw;
    top: 4vw;
    left: 30vw; 
    animation: bounce 5s infinite ease-out;    
}

.homepage-banner-image-overlay-date-1 {
    position: absolute;
    width: 19vw;
    top: 9.5vw;
    left: 6vw;    
    animation: fade-in 5s forwards;
    animation-delay: 0s;    
    opacity: 0;    
}

.homepage-banner-image-overlay-date-2 {
    position: absolute;
    width: 13vw;
    top: 14vw;
    left: 17.5vw;
    animation: fade-in 5s forwards;
    animation-delay: .5s;    
    opacity: 0;    
}

.homepage-banner-image-overlay-date-3 {
    position: absolute;    
    width: 14.5vw;
    top: 14.5vw;
    left: 32.5vw;
    animation: fade-in 5s forwards;
    animation-delay: 1.0s;    
    opacity: 0;    
}

.homepage-banner-image-overlay-tickets {
    position: absolute;
    width: 29vw;
    top: 16.5vw;
    left: 51.5vw;
    animation: fade-in 5s forwards;
    animation-delay: 1s;
    opacity: 0;
}

.homepage-banner-image-overlay-clouds-1 {
    position: absolute;
    width: 25vw;
    top: 9vw;
    left: 0vw;
    animation: clouds 70s forwards;   
    opacity: 1;
}


.homepage-banner-image-overlay-clouds-2 {
    position: absolute;
    width: 25vw;
    top: 2vw;
    left: 90vw;
    animation: clouds 65s forwards;    
    opacity: 1;
}

.homepage-banner-image-overlay-mountain {
    position: absolute; 
    width: 14.5vw;
    top: 6.2vw;
    left: 85.5vw;   
    opacity: 1;
}

.homepage-banner-image-overlay-bird-1 {
    position: absolute;
    width: 6vw; top: 9vw; left: -7vw;
    animation: bird-1 50s infinite linear;    
    opacity: 1;
}

.homepage-banner-image-overlay-bird-2 {
    position: absolute;
    width: 3vw; top: 8vw; left: 100vw;
    animation: bird-2 40s infinite linear;  
    opacity: 1;
}

.homepage-banner-image-overlay-bird-4 {
    position: absolute;  
    width: 5.5vw;
    top: 15vw;
    left: 100vw;
    animation: bird-4 50s infinite linear;     
    opacity: 1;
}

.homepage-banner-image-overlay-branches {
    position: absolute;  
    width: 28vw;
    top: 0vw;
    left: 0vw;
    opacity: 1;
}

/* KEYFRAMES */

@keyframes bounce {
    0% {        
        transform: translate(0,0);
        opacity: 1;
    }

    10% {           
        transform: translate(0,0);
        opacity: 1;
    }    

   50% {       
        opacity: 1;
        transform: translate(0,.5vw);
    }

    100% {
        transform: translate(0,0);        
        opacity: 1;
    }
}

@keyframes bird-1 {
    0% {                
        transform: translate(0vw,0);
        opacity: 0;
    }   

    10% {
        opacity: 1;
    }  

    90% {
        opacity: 1;
    }  

    100% {
        transform: translate(45vw,-15vw); 
        opacity: 0;
    }
}

@keyframes bird-2 {
    0% {                
        transform: translate(0vw,0);
        opacity: 1;
    }     

    100% {
        transform: translate(-30vw,-14vw); 
        opacity: 1;
    }
}

@keyframes bird-4 {
    0% {                
        transform: translate(0vw,0);
        opacity: 0;
    }   

    10% {
        opacity: 1;
    }  

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(-30vw,-20vw); 
        opacity: 0;
    }
}

@keyframes clouds {
    0% {                
        transform: translate(0vw,0);
        opacity: 1;
    }     

    100% {
        transform: translate(-15vw,0); 
        opacity: 1;       
    }
}

@keyframes fade-in {
    0% {       
        opacity: 0;
    }   

    100% {     
        opacity: 1;
    }
}

