body{
                background-color: black;
            }

            nav{
                background-color: black;
            }

            nav #menu-wrapper #menu li a, h4{
                color:white;
            }

            footer{
                background-color: black !important;
            }
            
            .active-nav{
                font-family: 'NEOPIXEL', sans-serif;
                font-size: 20px;
            }

            .section-image video {
                max-height: 100%;
            }
/* 
            video, img{
                border-radius: 0;
                border: none;
            } */

            body{
                color: white;
            }

            .preview {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            a{
                text-decoration: none;
            }

            h2{
                margin-bottom: 0;
            }
             div > p{
                margin-top: 0;
                /* padding: 0; */
                /* line-height: 1;   */
               }

            #fullscreen{
                background-color: black;
            }

            #case-study-wrapper {
                flex-direction: column;
            }


            .stage-visual-wrapper {
                /* width: 1080px; */
                width: 100%;
                max-width: 100%;
                /* border: solid 2px blue; */
                /* box-sizing: border-box; */
                display: grid;
                grid-template-columns: repeat(auto-fill, auto);
                grid-template-rows: auto auto;
                gap: 12px;
                height: auto;
            }
      
            .stage-visual-video .hover-text p, .branding-item .hover-text p{
                color: white;
            }


            .stage-visual-video .hover-text, .branding-item .hover-text{
                color: white;
                font-size: 20px;
                position: absolute;
                bottom: 0;
                left: 20px;
            }

            .stage-visual-video,
            .branding-item{
                padding: 0;
                margin: 0;
                display: block;
                position: relative;
            }

            
            .overlay{
                position: absolute;
                /* top: calc(100%); */
                bottom: 0px;
                left: 0;
                right: 0;
                height: 50%;
                width: 100%;
                opacity: 1;
                transition: .5s ease;
                background-image: 
                linear-gradient(-180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
                border-radius: 12px;    
            }

            .stage-visual-video:hover .overlay,
            .branding-item:hover .overlay {
                opacity: 1;
            }


            /* .stage-visual-video > a {
                display: block;
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                line-height: 0;
            } */

            .stage-visual-wrapper > .stage-visual-video:nth-child(1) {
                grid-column: 1;
                grid-row: 1;
                /* width: 638.4px;
                height: 359.1px; */
            }

            .stage-visual-wrapper > .stage-visual-video:nth-child(2) {
                grid-column: 1;
                grid-row: 2;
                /* width: 638.4px;
                height: 359.1px; */
            }

            .stage-visual-wrapper > .stage-visual-video:nth-child(3) {
                grid-column: 2;
                grid-row: 1 / span 2;
                /* min-width: 417.6px;
                max-width: 417.6px;
                height: 742.4px; */
            }

        

            .stage-visual-wrapper > .stage-visual-video > a > video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                padding: 0;
                margin: 0;
            }
            

            
            /* 3D Projects Layout */
            .projects-3d-wrapper {
                display: flex;
                flex-direction: row;
                gap: 12px;
                width: 100%;
            }

            .projects-3d-wrapper > .col-1,
            .projects-3d-wrapper > .col-2,
            .projects-3d-wrapper > .col-3 {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .project-3d {
                /* border: solid 2px red; */
                width: 100%;
                height: auto;
            }

            .project-3d video {
                width: 100%;
                height: auto;
                display: block;
            }


            /* Cover art */
            #animated-cover-art-wrapper {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                /* background-color: white; */
            }

            #animated-cover-art-wrapper > video {
                /* width: 100%; */
                max-width: 25%;
            }   


            /* Branding */
            .branding-wrapper{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 12px;
            }

            .branding-wrapper > .branding-item {
                display: block;
                height: auto;
                width: 100%;
            }



            .branding-wrapper > .branding-item:nth-child(2), 
            .branding-item:nth-child(3), 
            .branding-item:nth-child(4), 
            .branding-item:nth-child(5) {
                flex: 1 0 calc(50% - 24px);
            }

            .branding-wrapper > .branding-item:nth-child(2), 
            .branding-wrapper > .branding-item:nth-child(3){
                aspect-ratio: 1;
            }

            .branding-wrapper > .branding-item > img,
            .branding-wrapper > .branding-item > video  
            {
                width: 100%;
                height: auto;
                object-fit: cover;
                display: block;
                padding: 0;
                margin: 0;
                aspect-ratio: 3 / 4;
            }

            /* DO NOT MOVE POSITION OF THIS. The above code applies to this. 
            This changes the marty supreme aspect ratio*/
            .branding-wrapper > .branding-item:nth-child(1) > video {
                flex: 100%;
                aspect-ratio: 16 / 9;
            }

            @media only screen and (max-width: 768px) {

                .stage-visual-wrapper, 
                .projects-3d-wrapper, 
                .branding-wrapper,             
                .projects-3d-wrapper > .col-1,
                .projects-3d-wrapper > .col-2,
                .projects-3d-wrapper > .col-3 {
                    gap: 24px;
                }

                .stage-visual-video {
                    height: auto;
                }

                .stage-visual-video > a {
                    height: auto;
                }

                .stage-visual-wrapper {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: auto;
                    grid-template-columns: 1fr;
                    grid-template-rows: auto;
                }

                .stage-visual-video {
                    width: 100%;
                    height: auto;
                }

                /* .stage-visual-wrapper > .stage-visual-video:nth-child(1),
                .stage-visual-wrapper > .stage-visual-video:nth-child(2),
                .stage-visual-wrapper > .stage-visual-video:nth-child(3) {
                    grid-column: 1;
                    grid-row: auto;
                    width: 100%;
                    height: auto;
                }
                 */
                /* Makes the vertical video of crystalized reformated to the 16:9 ratio */
                .stage-visual-wrapper > .stage-visual-video > a > video {
                    /* max-height: 405px; */
                    aspect-ratio: 16 / 9;
                }

                /* No need for hover to see the title / descriptions */
                .stage-visual-wrapper > .stage-visual-video > a > video {
                    display: block;
                }

                
                .stage-visual-video .hover-text, .branding-item .hover-text{
                    position: relative;
                    bottom: auto;
                    left: auto;
                }

                
                /* .hover-text > h2{
                    color: black;
                }


                 .hover-text > p{
                    color: #595959;
                } */

                .projects-3d-wrapper {
                    flex-direction: column;
                }

                .stage-visual-video .overlay,
                .branding-item .overlay {
                    opacity: 1;
                }

                .overlay{
                    position: relative;
                    top: 0;
                    bottom: 20px;
                    left: 0;
                    right: 0;
                    height: auto;
                    width: auto;
                    opacity: 1;
                    background-image: none;
                    border-radius: 12px;    
                }

                .overlay > .hover-text > p {
                    /* color: #595959; */
                    color: white;
                }

 

                #animated-cover-art-wrapper {
                    flex-wrap: wrap;
                }
                #animated-cover-art-wrapper > video {
                    max-width: 50%;
                }   


                .branding-wrapper{

                    flex-direction: column;
                }
            }