video {
    position: relative;
    left: 1px;
    top: 1px;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none;
}

.animated-block-wrapper {
    background-color: var(--blue-800);
    padding: 112px 0 100px;
    color: white;
}

.animated-block-wrapper h2 {
    text-transform: uppercase;
    margin-bottom: 64px;
}

.animated-block-wrapper .footnote {
    grid-column: 1 / -4;
}

.animated-block-container {
    grid-column: 1 / -1;

    display: grid;
    overflow: hidden;
    grid-template-columns: subgrid;

    background-color: #0478ff;
    border-radius: 10px;
    overflow: hidden;
    min-height: 550px;
}

.animated-content {
    grid-column: span 4;
    position: relative;
    height: 100%;
    /* display: flex;
    justify-content: center;
    flex-direction: column; */
}

.animated-content button {
    bottom: var(--internal-hecto);
}

.animated-video {
    grid-column: span 7;
    position: relative;
    overflow: hidden;
}

.animated-content h4 {
    margin-bottom: var(--internal-micro);
}

.video-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
    padding: 64px;
}

.intro-video-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 3;
}

.active-slide {
    position: relative;
    z-index: 2;
}

.video-layer video {
    width: 100%;
}

.intro-video-layer video {
    width: 100%;
}

#animation-button {
    position: absolute;
    left: 80%;
    display: flex;
    gap: 30px;
    bottom: 30px;
}

.animated-content-container {
    position: relative;
    height: 100%;
}

.intro-content-layer {
    transition: .5s;
}

.content-layer {
    opacity: 0;
    position: absolute;
    transition: .5s;
    top: 50%;
    transform: translateY(-50%);
}

#start-button {
    position: absolute;
    left: 100%;
    display: flex;
    gap: 30px;
    bottom: 40px;
    opacity: 0;
    height: 27px;
}

.animated-block-container h4 {
    color: var(--secondary-blue);
}

.animated-block-container p {
    color: var(--utility-charcoal-grey);
}

/* #back-button.disabled,
#forward-button.disabled {
    pointer-events: none;
} */

/* #back-button.disabled path,
#forward-button.disabled path {
    pointer-events: none;
    fill: #63A8FD;
} */

@media (max-width: 1028px) {
    .animated-block-wrapper .footnote {
        grid-column: 1 / -1;
    }

    .animated-content {
        padding: var(--internal-micro) 0 0;
    }

    .intro-video-layer {
        display: none;
    }

    .animated-video {
        grid-column: 1 / -1;
    }

    .animated-content {
        grid-row: 2;
        grid-column: 1 / -1;
        padding: 0 32px;
        text-align: center;
    }

    #animation-button {
        position: relative;
        margin-top: 186px;
        justify-content: space-between;
        left: unset;
    }

    .animated-content-container {
        height: 272px;
    }
}

@media (max-width: 767px) {
    #animation-button {
        margin-top: 87px;
    }
}