.pink-flower-background {
    background-image: url('/images/nature/pink-flowers.jpg');
    background-position: 0% 22%;
    background-repeat: no-repeat;
    background-size: cover;
}

.firefly-background {
    background-image: url('/images/backgrounds/firefly_background.png');
    background-position: 0% 25%;
    background-repeat: no-repeat;
    background-size: cover;
}

.white-futuristic-background {
    background-image: url('/images/backgrounds/white-futuristic-background.jpg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.white-futuristic-background-footer {
    background-color: #FFFFFF;
    background-image: url('/images/backgrounds/white-futuristic-background.jpg');
    background-blend-mode: multiply;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-navbar {
    position: relative;
    z-index: 1;
}

    .main-navbar::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        z-index: -1;
        background-color: lightgrey;
        box-shadow: 0px 0.025in 0.1in grey;
    }

.main-navbar-small {
    position: relative;
    z-index: 1;
    margin: 0px !important;
}

    .main-navbar-small::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.25;
        z-index: -1;
        background-color: #234E4C;
        box-shadow: 0px 0.025in 0.1in grey;
    }

.bottom-navbar {
    position: relative;
    z-index: 1;
    height: 60px;
}

    .bottom-navbar::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        z-index: -1;
        background-color: lightgrey;
        box-shadow: 0px -0.025in 0.1in grey;
    }

.navbar-content-shadow {
    position: relative;
    z-index: 1;
}

    .navbar-content-shadow::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 0.025in;
        opacity: 0.5;
        z-index: -1;
        background-color: #234E4C;
        box-shadow: 0px 0.025in 0.1in black;
    }

    .navbar-content-shadow::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 0.025in;
        opacity: 0.5;
        z-index: -1;
        background-color: #234E4C;
        box-shadow: 0px 0.025in 0.1in white;
    }


.text-shadow {
    text-shadow: 0.025in 0.025in 0.1in darkgrey;
}

.hero-background {
    position: relative;
    z-index: 1;
    height: 4.0in;
}

    .hero-background::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        z-index: -1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }


/* Used for drop-down links in the menu */
.menu-link {
    color: #FFFFFF;
    font-family: raleway-semibold;
    transition: color 0.3s;
    transition: background-color 0.3s;
}

    .menu-link:hover {
        color: #FFFFFF;
        background-color: #269C66
    }

    .menu-link:focus {
        color: #FFFFFF;
        background-color: #269C66
    }

    .menu-link:active {
        color: #FFFFFF;
        background-color: #269C66
    }

.z2 {
    z-index: 2;
}

.main-menu-link {
    color: #234E4C !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-radius: 0.1in 0.1in 0.0in 0.0in !important;
    transition: color 0.5s !important;
    transition: background-color 0.5s !important;
    transition: border-color 0.5s !important;
}

    .main-menu-link:hover {
        color: #FFFFFF !important;
        background-color: #234E4CF9 !important;
        border-color: #234E4C !important;
    }

    .main-menu-link:focus {
        color: #FFFFFF !important;
        background-color: #234E4CF9 !important;
        border-color: #234E4C !important;
    }

    .main-menu-link:active {
        color: #FFFFFF !important;
        background-color: #234E4CF9 !important;
        border-color: #234E4C !important;
    }

.menu-panel-background {
    background-color: #FFFFFF66;
    border-radius: 0.0in 0.1in 0.1in 0.1in;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.menu-panel-bottom {
    position: relative;
}

    .menu-panel-bottom::before {
        content: "";
        position: absolute;
        top: -0.1in;
        left: -0.1in;
        right: -0.1in;
        bottom: -0.1in;
        opacity: 0.2;
        z-index: -1;
        background-color: #234E4C;
        border-radius: 0.0in 0.0in 0.1in 0.1in;
    }

.menu-color
{
    color: #3E5541;
}

.menu-panel-header-shadow
{
    filter: drop-shadow(1px 1px 1px black);
}

.menu-color-dark
{
    color: #3E5541;
}


.z2
{
    z-index: 2;
}

.z3
{
    z-index: 3;
}


/* Input File */
input[type=file]
{
    display: none;
}

.about-icon-left
{
    width: 2.0in;
    align-self: end;
    margin-right: 0.2in;
}

.about-icon-right
{
    width: 2.0in;
    align-self: start;
    margin-left: 0.2in;
}

.splash-background
{
    background-image: url('../images/backgrounds/grid.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-rounded-border
{
    border-radius: 0 !important;
}

.icon-large
{
    width: 0.8in;
    height: 0.8in;
}

.hero-card-override
{
    width: 4.0in;
}
    .hero-card-override:hover
    {
        box-shadow: 0.025in 0.025in 0.1in #3E5541 !important;
    }