:root {   
    --text-xxs: 0.675rem;

    --orange-darkest: #462a16;
    --orange-darker: #613b1f;
    --orange-dark: #de751f;
    --orange: #f6993f;
    --orange-light: #faad63;
    --orange-lighter: #fcd9b6;
    --orange-lightest: #fff5eb;
  
    --yellow-darkest: #453411;
    --yellow-darker: #684f1d;
    --yellow-dark: #f2d024;
    --yellow: #fbbf24;
    --yellow-light: #fff382;
    --yellow-lighter: #fff9c2;
    --yellow-lightest: #fcfbeb;

    --TEST: #a2a2a3;
    --gray-1000: rgb(13, 19, 32);
    --gray-700: #374151;
    --blue-500: #3B82F6;
}
[x-cloak] { display: none; }


@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;900&display=swap');
/* Text Properties */
.bg-gray-1000 {
    background-color: var(--gray-1000);
}
/* Hero Section */
.hero-heading {
    font-size: 6rem;
    color: white;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    align-items: center;
}
.hero-section {
    position: relative;;
    width: 100%;
    display: flex;
    align-items:center;
    justify-content:center;
}
.hero-section img {
    height: 48rem !important;
}
.hero-section h1 {
    font-size: 78px;
    color: white;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase;
    font-family: Lato, Helvetica, sans-serif;
    line-height: 75px;
}
.video-section {
    position: relative;;
    width: 100%;
    display: flex;
    align-items:center;
    justify-content:center;
    /* Below for video iframe use */
    padding-bottom: 36.25%;
    padding-top: 25px;
    height: 0;
}
.video-section iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* .hero-section p {
    font-size: 4rem;
    color: white;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
} */
.hero-section span {
    color: rgb(203, 9, 9);
    text-align: center;
    font-size: 78px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.alert {
    z-index: 9999;
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    overflow: hidden;
    animation: fadeOut 1s forwards;
    animation-delay: 2.8s;
}
@keyframes fadeOut {
    from 
    {
        opacity: 1;
    }
    to 
    {
        opacity: 0;
        top: -60px;
    }
}




/*-------- Media Queries --------*/
@media (max-width:480px)  {
    .text-xs {
        font-size: 0.6rem;
    }
    .hero-section h1 {
        font-size: 48px;
        line-height: 50px;
    }
    .hero-section span {
        font-size: 48px;
    }
}


@media (max-width: 1024px) {
    .hidden-mobile {
        display: none;
    }
}