/** Shopify CDN: Minification failed

Line 61:51 The "-" operator only works if there is whitespace on both sides

**/
.community-wall {
    position: relative;
    width: 100%;

    & .community-wall--inner-container {
        position: relative;
        padding-top: 100px;
        height: 1200px;
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;

        @media(max-width: 1023px) {
            padding-top: 60px;
        }
    }

    & .community-wall--headline {
        font-size: 36px;
        font-family: 'Paris Sans';
        text-align: center;
        color: white;

        @media(max-width: 760px) {
            font-size: 18px;
        }
    }

    & .community-wall--content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 100%;
        text-align: center;
        color: white;
        font-size: 125px;
        font-family: 'Paris Sans';

        & em {
            font-family: "VeryVogue Italic" !important;
        }

        @media(max-width: 768px) {
            font-size: 50px;
            top: 45%;
        }
    }


    & .community-wall--video-container {
        @media(max-width: 1200px) {
            width: calc(var(--desktop-ref-width) - (var(--desktop-ref-width) / 3)) !important;
            height: calc(var(--desktop-ref-height) -(var(--desktop-ref-height) / 3)) !important;
        }

        @media(max-width: 760px) {
            width: calc((var(--desktop-ref-width) / 2)) !important;
            height: calc((var(--desktop-ref-height) / 2)) !important;
        }
    }


    & .community-wall--video {
        position: absolute;

        & video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.order-1 {
            top: 50%;
            left: 2%;
            transform: translate(-2%, -50%);

            @media(max-width: 760px) {
                top: 60%;
                left: 0;
                transform: translate(0%, -50%);
            }
        }

        &.order-2 {
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);

            @media(max-width: 760px) {
                top: 25%;
            }
        }

        &.order-3 {
            top: 30%;
            right: 2%;
            transform: translate(-2%, -50%);

            @media(max-width: 760px) {
                top: 55%;
                right: 0;
                transform: translate(0%, -50%);
            }
        }

        &.order-4 {
            bottom: 0%;
            right: 5%;
            transform: translate(-5%, -50%);

            @media(max-width: 760px) {
                bottom: 12%;
                right: 15%;
            }
        }

        & p {
            color: white;
            font-family: "Paris Sans";
            font-size: 14px;
            margin-top: 10px;
        }
    }

    & .community-wall--video-quote {
        position: absolute;
        bottom: 10%;
        left: 5%;
        max-width: 60%;
        width: 100%;
        text-align: center;

        @media(max-width: 768px) {
            bottom: 5.5%;
            left: 0px;
            max-width: 100%;

        }

        & p {
            color: white;
            font-size: 45px;
            line-height: 1;
            font-family: "VeryVogue Italic";
            margin-bottom: 1rem;

            @media(max-width: 768px) {
                font-size: 27px;
            }
        }

        & .community-wall--video-quote-author {
            font-family: "Paris Sans";
            font-size: 12px;
            color: white;
        }
    }
}