.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-school-name-presents {
    width:20vw;
    top: 1vw;
    left: 40vw;
    opacity: 1;
    animation: fade-in 2s ease-in forwards
}

.homepage-banner-image-overlay-title {
    width: 35vw;
    top: 1vw;
    left: 32vw;
    opacity: 1;
    animation: fade-in 2s ease-in forwards,               
               scale-up-3 2s ease-in forwards,
               bounce 6s ease-in-out 5s infinite;
    transform-origin: center;               
}

.homepage-banner-image-overlay-date1 {
    width: 44vw;
    top: 19.5vw;
    left: 2vw;
    opacity: 0;
    animation: fade-in 3s ease-in 3s 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-date3 {
    width: 26vw;
    top: 19vw;
    left: 30vw;
    opacity: 0;
    animation: fade-in 3s ease-in 1s forwards;
} */

.homepage-banner-image-overlay-tickets {
    width: 8vw;
    top: 7vw;
    left: 22vw;
    opacity: 0;
    animation:
        fade-in 3s ease-in 2.5s forwards,
        swing 9s ease-in-out 2s infinite;
}

.homepage-banner-image-overlay-here {
    width: 6vw;
    top: 12vw;
    left: 23vw;
    opacity: 0;
    animation:
        fade-in 3s ease-in 2.5s forwards,
        swing 9s ease-in-out 2s infinite;
}

/* Banner Specific */

.homepage-banner-image-overlay-spread {
    width: 11.5vw;
    top: 5vw;
    left: 3vw;
    opacity: 0;
    transform: rotate(-10deg);
    animation: fade-in 3s ease-in 1s forwards;
}

.homepage-banner-image-overlay-the {
    width: 3vw;
    top: 9.5vw;
    left: 3.5vw;
    opacity: 0;
    transform: rotate(-10deg);
    animation: fade-in 3s ease-in 1.4s forwards;
}

.homepage-banner-image-overlay-word {
    width: 8.5vw;
    top: 8vw;
    left: 6.5vw;
    opacity: 0;
    transform: rotate(-10deg);
    animation: fade-in 3s ease-in 1.8s forwards;
}

.homepage-banner-image-overlay-nun {
    width: 38vw;
    top: 12vw;
    left: 62vw;
    opacity: 1;
    animation: fade-in 3s ease-in forwards,
               rise-up 5s linear forwards;
               
}

.homepage-banner-image-overlay-cloud1 {
    width: 10vw;
    top: 2vw;
    left: 0vw;
    opacity: 1;
    animation: cloud 190s linear infinite;
}

.homepage-banner-image-overlay-cloud2 {
    width: 5vw;
    top: 2vw;
    left: 30vw;
    opacity: 1;
    animation: cloud 190s linear infinite;
}

.homepage-banner-image-overlay-cloud3 {
    width: 12vw;
    top: 2vw;
    left: 50vw;
    opacity: 1;
    animation: cloud 190s linear infinite;
}

.homepage-banner-image-overlay-cloud4 {
    width: 8vw;
    top: 2vw;
    left: 80vw;
    opacity: 1;
    animation: cloud 190s linear infinite;
}

.homepage-banner-image-overlay-cloud5 {
    width: 5vw;
    top: 2vw;
    left: -10vw;
    opacity: 1;
    animation: cloud 190s linear 20s infinite;
}

.homepage-banner-image-overlay-cloud6 {
    width: 5vw;
    top: 2vw;
    left: -10vw;
    opacity: 1;
    animation: cloud 190s linear 40s infinite;
}



/* GENERIC KEYFRAMES */

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

    100% {
        opacity: 1;
    }
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

    100% {
        opacity: .2;
    }
}

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

@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 cloud {
    0% {
        
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translate(100vw,0);
        opacity: 0;
    }
}

@keyframes scale-up-3 {
     0% {
        transform:scale(1);        
    }
    50% {
        transform:scale(1.03);        
    }
    100% {
        transform:scale(1);        
    }    
}


/* BANNER SPECIFIC KEYFRAMES */