.box-video-container {
    max-width: 1100px;
    margin: auto;
    padding: 0 15px;
    z-index: 20!important;

    .box-no-video,.box-video {
        display: block;
        position: relative;
        width: 100%;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0 0 30px var(--box-shadow);

        .video-container-16by9,.video-container-2_35by1,.video-container-2by1,.video-container-4by3 {
            position: relative;
            width: 100%;
            height: 0;
            margin: 0;
            z-index: 1;
            display: block;

            iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 20!important
            }
        }

        .video-container-16by9 {padding-top: 56.25%}
        .video-container-2by1 {padding-top: 50%}
        .video-container-4by3 {padding-top: 75%}
        .video-container-2_35by1 {padding-top: 42.55319%}
    }

    .box-no-video {cursor: default}
}

.main-img-div {
    max-width: 1100px;
    margin: auto;
    padding: 0 15px;

    img {
        width: 100%;
        display: block;
        box-shadow: 0 0 20px var(--box-shadow)
    }
}

.project-metadata,
.video-subtitle-container,
.video-subtitle-mobile {
    display: flex;
    max-width: 1100px;

    p,span    {color: var(--subtitle); margin: 0}
    p a       {color: var(--subtitle)!important}
    p a:hover {color: var(--accent)!important}
}

.project-metadata {
    padding: 0 15px;
    margin: 15px auto 20px;
    justify-content: space-between;

    .left,
    .right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 7px;
        row-gap: 5px;
    }

    @media only screen and (max-width:700px) {display: none}
}

.video-subtitle-container,
.video-subtitle-mobile {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 7px;
    row-gap: 5px;
    padding: 15px;
}

.video-subtitle-container {
    margin: auto;
    justify-content: right;

    @media only screen and (max-width:700px) {display: none}
}

.video-subtitle-mobile {
    margin: 0 auto 20px;
    background: var(--head);
    border-radius: 5px;

    @media only screen and (min-width:700px) {display: none;}
}

.video-subtitle-mobile.no-about {margin-top: 15px}

.columns {
    display: flex;
    justify-content: left;
    max-width: 1100px;
    margin: 0 auto 15px;
    padding: 0 15px;
    column-gap: 45px;

    .left {margin: 0; padding: 0}

    .right .sticky {
        position: sticky;
        top: 0;

        .social {
            display: flex;
            box-sizing: border-box;
            row-gap: 15px;
            column-gap: 25px;
            margin-bottom: 15px;

            a {
                display: flex;
                align-items: center;

                .icon {
                    width: 30px;
                    height: 30px;
                }

                p {
                    margin: 0 0 0 15px;
                    text-decoration: underline;
                }
            }
        }
    }
}

.toc-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 35px;
}

.code-off .code-toggle span {color: var(--prism-light-blue-alt)!important}

@media only screen and (min-width: 1100px) {
    .columns .right {
        max-width: 255px;

        .sticky .social {flex-direction: column;}

        .sticky h3 {margin-top: 35px;}
        
        .sticky div:first-child h3 {
            padding-top: 25px;
            margin-top: -30px
        }

        .sticky h3.top {
            padding-top: 25px;
            margin-top: 10px
        }
    }
}

@media only screen and (max-width: 1100px) {
    .columns {
        flex-direction: column;
        max-width: 800px;
        margin: 0 auto 15px;

        .right {
            display: block;

            .sticky h3 {margin: 35px 0 25px}
            .sticky .social {flex-wrap: wrap;}
        }
    }
}

@media only screen and (min-width: 700px) {h2 {text-align: center}}
@media only screen and (max-width: 700px) {.about-title {margin: 30px 15px}}

h3.no-about {padding-top: 25px}

.about {
    padding: 0 15px;
    margin: auto;

    .about-p {
        padding: 0 0 15px 15px;
        margin-bottom: 15px;
        border-left: solid 2px var(--menu);
        border-bottom-left-radius: 15px;

        ol {
            padding-left: 15px;

            li {padding-left: 10px}
        }
    }

    h3,
    h4 {margin: 35px 0 25px}

    .about-p:last-child    {margin-bottom: 0}
    .about-p p:first-child {margin-top: 0}
    .about-p p:last-child  {margin-bottom: 0}

    .about-img-div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 15px;
        row-gap: 10px;
        padding: 15px 0;

        .gallery-img-container-alt {padding: 0}
    }

    .gallery-img-container-alt {
        padding: 15px 0;
        
        img {width: 100%}

        .jg-caption {
            color: var(--subtitle);
            font-family: "Nunito";
            font-size: 1rem;
            text-decoration: none;
            text-align: center;
            padding: 5px 10px !important;

            .marker {
                color: var(--active);
                margin-right: 5px
            }

            a {color: var(--subtitle)!important}
            a:hover {color: var(--accent)!important}
            a:active {text-decoration: none!important}
        }
    }

    .tracklist {
        margin-bottom: 0;

        p {margin: 0}

        .left-div {
            display: flex;

            p.left {
                width: 30px;
                color: var(--scroll)
            }
        }

        .track {
            display: flex;
            margin-top: 15px;

            span {
                flex: 1;
                overflow: hidden;
                margin: 0 5px;
                letter-spacing: 3px;
                color: var(--active)
            }
        }

        .track > * {padding: 0; margin: 0}
    }
}

.about:last-child {padding-bottom: 15px}

@media only screen and (min-width: 830px) {.about {width: 800px}}

#gallery {
    display: grid;
    column-gap: 15px;
    row-gap: 10px;
    padding: 0 15px;

    .img {width: 100%}
}

@media only screen and (min-width:700px) {
    #gallery {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 1400px;
        margin: 0 auto;
    }
}

@media only screen and (max-width:700px) {
    #gallery {grid-template-columns: 1fr 1fr}

    #site-footer {margin-top: 0!important}
}

.jg-caption {
    color: var(--font);
    font-family: "Nunito";
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    margin: 15px 15px 0;
    opacity: 0 !important;
    padding: 5px 10px !important;
    background: var(--head) !important;
    transition: opacity .3s ease-in-out !important;

    a {font-size: 0.85rem}

    .marker {
        color: var(--active);
        margin-right: 5px
    }
}

#gallery.last {margin-bottom: 45px}
#gallery.last.below {margin-bottom: 30px}

#gallery.below .jg-caption, .gallery-img-container-alt .jg-caption {
    font-size: 1rem !important;
    opacity: 1!important;
    background: none!important;
    color: var(--subtitle);
    font-style: italic;
}

#gallery.below .jg-caption {margin: 0 0 15px}

.gallery-img-container-alt .jg-caption {margin: 0}

.img-container:hover .jg-caption {
    opacity: 1 !important;
    transition: opacity .3s !important;
}

.img-container:active .jg-caption {
    color: var(--accent);
    transition: none;
}

.gallery-img-container img,
.gallery-img-container-alt img {transition: .15s filter ease-in-out}

.gallery-img-container:hover img,
.gallery-img-container-alt:hover img {
    filter: brightness(70%);
    transition: .15s filter ease-in-out;
}

#credits {
    max-width: 1000px;
    padding: 0 15px;
    margin: 0 auto 45px;

    h3 {margin: 35px 0 25px;}

    @media only screen and (min-width: 700px) {
        h3 {text-align: center}

        .credit {
            display: flex;
            gap: 15px;
            padding-bottom: 15px;

            p       {width: 50%; margin: 0}
            p.left  {text-align: right}
            p.right {text-align: left}
        }

        .credit:last-child {padding: 0}
    }

    @media only screen and (max-width: 700px) {
        .credits-border {
            border-left: solid 2px var(--menu);
            border-bottom-left-radius: 15px;
            padding-left: 15px;
        
            .credit {
                padding-bottom: 25px;

                p      {margin: 0}
                p.left {margin-bottom: 10px}
            }

            .credit:last-child {padding-bottom: 15px}
        }
    }
}

.meta-div {
    padding: 15px 0 0;
    display: flex;
    justify-content: right;

    .meta {
        display: flex;
        column-gap: 7px;
        row-gap: 3px;
        align-items: center;
        flex-wrap: wrap;
        background: var(--head);
        padding: 5px 10px;
        border-radius: 5px;

        span {
            color: var(--subtitle);
            font-size: 0.85rem
        }
    }
}

.columns .right .meta-div {
    margin-top: 45px;
    padding: 0;
    flex-direction: column;
    align-items: start;
    
    .meta .li {
        margin-bottom: 5px;

        .metadata {
            font-size: 0.85rem;
            color: var(--subtitle)
        }
    }

    .meta .li:last-child {margin: 0;}

    .dot {padding: 5px 7px}
}