.main-container.lesson-container {
    padding: 0;
}

.sided-lesson {
    position: relative;
    left: -1px !important;
}
/********************* IFRAME SIZE ***********************/

.iframe-container div:first-child {
    padding: 0 !important;
    height: 100%;
}

.video-container {
    width: 100%;
    height: 32vh;
    display: flex;
    justify-content: center;
}

.video-container.bordered {
    border-style: solid;
    border-width: var(--margin-xs);
}

.iframe-container {
    height: 100%;
    width: 100%;
}

.iframe-container iframe {
    max-height: 100%;
    max-width: 100%;
    position: relative !important;
}

@media screen and (min-width: 992px) {
    .video-container {
        height: 55vh;
        max-height: 55vh;
    }
}

/********************* CONTENT ***********************/
.lesson-nav-title {
    padding: var(--margin-s) var(--margin-m);
    border-bottom: 1px solid var(--color-light-grey);
    text-transform: uppercase;
    cursor: pointer;
}

.lesson-nav-title:hover {
    color: var(--color-light-on-primary);
}

.lesson-navigation {
    height: 120px;
    width: 100%;
    background-color: var(--color-bonus-red);
    border-bottom: 1px solid var(--color-light-grey);
    
    animation: rotateMenu 400ms ease-in-out forwards;
    transform-origin: top center;
    opacity: 1;
}

.lesson-navigation.gone {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lesson-content {
    padding: var(--margin-s) var(--margin-m);
}

.lesson-content .lesson-title {
    text-transform: uppercase;
    font-size: var(--title-text-size);
}

.lesson-content hr {
    width: 98%;
    margin: auto;
    color: var(--color-light-grey);
    margin-top: var(--margin-s);
    margin-bottom: var(--margin-s);
}

.lesson-com-container {
    height: 200px;
    width: 100%;
    background-color: var(--color-light-grey);
    padding: var(--margin-s) var(--margin-m);
    color: black;
}