#nav-project {
    text-decoration: underline;
}

#nav-video {
    text-decoration: none;
}

/* HERO IMAGE SETUP */
#newmedia-hero {
    display: flex;
    height: 1200px;
    overflow: hidden;
    align-items: center;

    #newmedia-hero-bg {
        background-image: url("../media/img/parallax/newmedia/newmedia-Sky.webp");
        background-size: cover;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #newmedia-hero-foreground {
        background-image: url("../media/img/parallax/newmedia/newmedia-Mountain.webp");
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
        transform: translateY(-40px);

        @media screen and (min-width: 1200px) {
                    transform: translateY(40px);
        }
    }

    #newmedia-hero-text {
        position: absolute;
        width: 100vw;
        text-align: center;
        transform: translateY(-260px);

        #hero {
            color: var(--jidarkgreen);
            font-family: "Anybody", sans-serif;
            font-optical-sizing: auto;
            font-size: 50px;
            font-weight: 800;
            font-style: normal;
            font-variation-settings:
                "wdth" 100;

            @media screen and (min-width: 1200px) {
                font-size: 80px;
            }
        }
    }
}
/* HERO IMAGE SETUP END */


/* ON TO THE GOOD STUFF */
.content-container {
    text-align: center;
    position: absolute;
    background-color: var(--jigrey);
    margin-top: -270px;

    @media screen and (min-width: 1200px) {
        margin-top: -70px;
    }

    #grey-cover  {
        position: relative;
        background-color: var(--jigrey);
        width: 100vw;
        height: 50px;
        background-image: url("../media/topo/footer/left.png"), url("../media/topo/footer/right.png");
        background-position: top left, top right;
        background-repeat: no-repeat;
    }

    h1 {
        color: white;
        font-size: 48px;
        padding: 60px;
    }

    .project-banner-container {
        display: flex;
        flex-direction: column;
        padding-top: 0px;
        position: relative;

        .project {
            width: 100%;
            transition: all 0.3s ease;
            height: 840px;

            @media screen and (min-width: 1200px) {
                height: 566px;
                width: 100%;
            }
    
            .project-info {
                position: absolute;
                height: 840px;
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                overflow: hidden;
                border: #FFF 6px solid;
                border-style: solid none none none;

                @media screen and (min-width: 1200px) {
                    height: 566px;
                    width: 100%;
                    border: none;
                }

                .left-side-info {
                    flex-grow: 0;
                    flex-shrink: 1;
                    flex-basis: 500px;
                    padding-left: 20px;
                    padding-right: 20px;
                    padding-top: 20px;
                    padding-bottom: 20px;
                    background-color: var(--jiolive);
                    text-align: left;

                    @media screen and (min-width: 1200px) {
                        padding-left: 60px;
                        padding-right: 80px;
                    }

                    .mobile-cover {
                        width: 100%;
                    }

                    h2 {
                        color: #FFF;
                        font-family: Anybody;
                        font-size: 36px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 0.9;
                    }

                    h3 {
                        color: #FFF;
                        font-family: "Be Vietnam Pro";
                        font-size: 28px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 1.2;

                        @media screen and (min-width: 1200px) {
                            line-height: 0.2;
                        }
                    }

                    .project-type {
                        color: #3B6842;
                        font-family: "Be Vietnam Pro";
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 0.3;
                    }

                    .project-desc {
                        color: #FFF;
                        font-family: "Be Vietnam Pro";
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        padding-top: 40px;

                        @media screen and (min-width: 1200px) {
                            padding-top: 60px;
                        }
                    }
                }
            }
        }

        .project:hover {
            background-color: rgba(0,0,0,0.4);
            background-blend-mode: overlay;
        }
    }

    #project-stsfilmfest {
        background-image: none;
        background-size: cover;
        background-position: center;

        @media screen and (min-width: 1200px) {
            background-image: url("../media/img/banners/stsfilmfestprojectcover.webp");
        }
    }

    #project-alpinearmour {
        background-image: none;
        background-size: cover;
        background-position: center;

        @media screen and (min-width: 1200px) {
            background-image: url("../media/img/banners/alpinearmourcover.webp");
        }
    }

    #project-indigenousvideo {
        background-image: none;
        background-size: cover;
        background-position: center;

        @media screen and (min-width: 1200px) {
            background-image: url("../media/img/banners/tanina-banner.webp");
        }
    }
    #project-broadcast {
        background-image: none;
        background-size: cover;
        background-position: center;

        @media screen and (min-width: 1200px) {

            background-image: url("../media/img/banners/broadcast-banner-wsc.webp");
        }
    }
    #project-ubcsnb {
        background-image: none;
        background-size: cover;
        background-position: center;

        @media screen and (min-width: 1200px) {
            background-image: url("../media/img/banners/ubcsnb-banner.webp");
        }
    }

    #project-worca {
        background-image: none;
        background-size: cover;
        background-position: center;

        @media screen and (min-width: 1200px) {
            background-image: url("../media/img/banners/worca-banner.webp");
        }
    }
}

.mobile-cover {
    display: block;
        @media screen and (min-width: 1200px) {
            display: none;
        }
}