/** header component - logo, title and subtitle
 * mobile first approach design - components are designed in mobile mode,
 * then progressively scales up to larger devices.
 *  */
    .header-container {
        width: 100%;
        height: auto;
        /* padding: 1rem; */
        /* background-color: cadetblue; */
    }
    
    .menu-container {
        display: flex;
        justify-content:center;
        align-items: center;
        /* padding-top: 1rem; */
    } 

    .logo-container {
        display: flex;
        /* flex-wrap: nowrap; */
        width: 100%;
        height: auto;
        /* background-color: brown; */
    } 

    .dit-logo {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        aspect-ratio: 1200 / 90;
    }

    /** mobile header style definitions - common/shared mobile header style deifinitions.
    * utilized by scripts/components/mobile/MobileHeaderCom.js component */
    .mobile-header {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* left:0px;
        top:0px; */
        padding: .85rem 0 .25rem 0;
        /* background-color: coral; */
    }

    .mobile-header-top{
        display: flex;
        width: 100%;
        left:0px;
        top:0px;
        padding: .85rem 0 .25rem 0;
    }

    .mobile-header-bottom{
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        padding: 0 0 1rem .35rem;
    }

    .subheader-div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    /** picture remedy logo icon */
    .mobile-logo-img {
        width: 75.3px;
        height: 80.85px;
    }
    
    .title-div {
        display: block;
        padding: 1.5rem .2rem;
    }

    /* text after company logo */
    .mobile-logo-title {
        font-style: normal;
        font-family: Cabin;
        font-weight: 400;
        font-size: 1rem;
        /* letter-spacing: .2rem; */
        text-align: right;
        line-height: normal;
        text-transform: uppercase;
        color: #ffffff;
    }

    .mobile-dit-logo {
        /* display: block; */
        width: 100%;
        height: auto;
        max-width: 100%;
        /* aspect-ratio: 1200 / 90; */
    }

    .hamburger-div {
        float: left;
        margin-right: auto;
        cursor: pointer;
    }
    /** end mobile header style definitions **************************************/


@media (min-width: 600px) {
    
} /* end min-width: 600px */

@media (min-width: 992px) {
    
} /* end min-width: 992px */


@media (min-width: 1200px) {
    
} /* end min-width: 1200px */