@import url('../renaissance.css');
@import url("../lib/sharing.css");
@import url("../../../../mobile/lib/video.css");

@media only screen and (max-width: 1024px) {
    .mute-button {
        top: 10px;
        right: 10px;
        height: 20px;
        width: 20px;
        padding: 3px;
    }

    .selection-body {
        top: -100px;
        margin-bottom: -100px;
    }
}

@media only screen and (max-width: 940px) {
    .selection-logo {
        display: none;
    }

    .viewing-options {
        justify-content: flex-end;
    }

    .selection-overview {
        margin: 0 50px 50px 0;
        width: calc(50% - 50px);
    }

    .selection-body {
        top: -75px;
        margin-bottom: -75px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 940px) {
    .selection-overview {
        height: 60%;
    }

    .gallery {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 768px) {
    .selection-body {
        top: 15rem;
        margin-bottom: 15rem;
    }

    .selection-overview {
        position: absolute;
        top: calc(100vw * (9/16));
        left: 0;
        height: auto;
        width: calc(100% - 4rem);
        margin:  0;
    }

    .viewing-options {
        height: auto;
        margin-bottom: 1rem;
    }

    .selection-main {
        flex-direction: column;
        width: calc(100% - 2rem);
        padding: 0 1rem;
    }

    .selection-main-content {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .selection-main-sidebar {
        width: 100%;
        padding: 0;
    }

    .quick-actions {
        margin: 0.5rem 0;
        justify-content: center;
    }

    .quick-action {
        justify-content: center;
    }

    .viewing-options {
        width: calc(100% - 2rem);
        flex-direction: row;
        justify-content: space-between;
        margin: 0;
        padding: 0 1rem 1rem 1rem;
    }

    button.play-selection {
        font-size: 0.8rem;
        padding: 0.25rem;
    }

    .screening-group {
        width: calc(100% - 0.5rem);
        padding: 0.25rem;
    }

    .language-info {
        margin: 0;
    }
}

@media only screen and (max-width: 480px) {
    .screening-times {
        flex-direction: column;
    }
}