:host {
    /* General Navbar */
    --ema-navbar-background: var(--ema-background-light, #e9ecef);
    --ema-navbar-border: var(--ema-border, 1px solid #c0c3c6);
    --ema-navbar-color: var(--ema-color, #46444B);
    --ema-navbar-hover-color: #CC95F3;
    --ema-navbar-width: 100%;
    --ema-navbar-height: 50px;
    --ema-navbar-padding: var(--ema-padding, 15px);
    /* Menu Items */
    --ema-navbar-text-transform: none;
    --ema-navbar-a-padding: 0 24px;
    --ema-navbar-a-font-size: 0.9em;
    --ema-navbar-a-font-family: Arial, Helvetica, sans-serif;

    --ema-navbar-mobile-a-font-size: 1.8em;
//}
//
//ema-navbar {

    nav {
        background-color: var(--ema-navbar-background);
        border-bottom: var(--ema-navbar-border);
        color: var(--ema-navbar-color);
        top: 0;
        height: var(--ema-navbar-height);
        line-height: var(--ema-navbar-height);
        width: 100%;
        z-index: 1000;
    }

    .navbar-wrapper {
        margin: auto;
        text-align: right;
        width: calc(var(--ema-navbar-width) * 0.9);
    }

    @media (max-width: 768px) {
        .navbar-wrapper {
            width: calc(var(--ema-navbar-width) * 0.9);
        }
    }

    @media (max-width: 638px) {
        .navbar-wrapper {
            width: var(--ema-navbar-width);
        }
    }

    .logo {
        float: left;
        margin-left: 28px;
        font-size: 1.5em;
        height: calc(var(--ema-navbar-height) - 10px);
        letter-spacing: 1px;
        text-transform: var(--ema-navbar-text-transform);
    }

    .logo-image {
        max-height: 100%;
        width: auto;
    }

    @media (max-width: 768px) {
        .logo {
            margin-left: 5px;
        }
    }

    ul {
        display: inline-block;
        float: right;
        list-style: none;
        margin-top: 0px;

        text-align: right;
        transition: transform 0.5s ease-out;
        width: var(--ema-navbar-width);
        -webkit-transition: transform 0.5s ease-out;
    }

    @media (max-width: 638px) {
        ul {
            display: none;
        }
    }

    @media (orientation: landscape) {
        ul {
            display: inline-block;
        }
    }

    li {
        display: inline-block;
    }

    a, ::slotted(a) {
        color: var(--ema-navbar-color);
        display: block;
        font-size: var(--ema-navbar-a-font-size);
        height: var(--ema-navbar-height);
        letter-spacing: 1px;
        padding: var(--ema-navbar-a-padding);
        position: relative;
        text-decoration: none;
        text-transform: var(--ema-navbar-text-transform);
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }

    .overlay-menu a, .overlay-menu ::slotted(a) {
        display: inline-block;
        width: var(--ema-navbar-width);
        padding: 0;
        text-align: center;
        line-height: var(--ema-navbar-height);
    }

    .overlay-menu ul {
        width: var(--ema-navbar-width);
    }

    a:active, ::slotted(a:active) {
        color: var(--ema-navbar-hover-color);
    }

    a.active, ::slotted(a.active) {
        color: var(--ema-navbar-hover-color);
    }

    a:hover, ::slotted(a:hover) {
        /* border-bottom: 1px solid rgb(28, 121, 184); */
        color: var(--ema-navbar-hover-color);
        transition: all 1s ease;
        -webkit-transition: all 1s ease;
    }

    /* Animated Bottom Line */
    a:before, a:after, ::slotted(a:before), ::slotted(a:after) {
        content: '';
        position: absolute;
        width: 0%;
        height: 1px;
        bottom: -1px;
        background: var(--ema-navbar-hover-color);
    }

    a:before, ::slotted(a:before) {
        left: 0;
        transition: 0.5s;
    }

    a:after, ::slotted(a:after) {
        background: var(--ema-navbar-hover-color);
        right: 0;
        /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
    }

    a:hover:before, ::slotted(a:hover:before) {
        background: var(--ema-navbar-hover-color);
        width: 100%;
        transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    a:hover:after, ::slotted(a:hover:after) {
        background: transparent;
        width: 100%;
    }

    @media (max-width: 638px) {
        .menuIcon {
            display: inline-block;
            cursor: pointer;
            position: relative;
            top: 10px;
            right: 25px;
            height: 23px;
            width: 20px;
            z-index: 20;
        }

        /* Icon Bars */
        .bar1 {
            background: var(--ema-navbar-color);
            height: 2px;
            width: 100%;
            transition: 0.4s;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .bar2 {
            background: var(--ema-navbar-color);
            height: 2px;
            width: 100%;
            transition: 0.4s;
            position: absolute;
            top: 8px;
            left: 0px;
        }

        .bar3 {
            background: var(--ema-navbar-color);
            height: 2px;
            width: 100%;
            transition: 0.4s;
            position: absolute;
            top: 16px;
            left: 0px;
        }

        /* Rotate first bar */
        .opened .bar1 {
            -webkit-transform: rotate(-45deg) translate(-5px, 6px);
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        /* Fade out the second bar */
        .opened .bar2 {
            opacity: 0;
        }

        /* Rotate last bar */
        .opened .bar3 {
            -webkit-transform: rotate(45deg) translate(-5px, -6px);
            transform: rotate(45deg) translate(-5px, -6px);
        }
    }

    .overlay-menu {
        background: var(--ema-navbar-background);
        color: var(--ema-navbar-color);
        align-items: center;
        justify-content: center;
        position: fixed;
        top: var(--ema-navbar-height);
        left: 0;
        margin-right: 15px;
        padding-top: 15px;
        transform: translateX(-100%);
        width: 100vw;
        height: 100vh;
        -webkit-transition: transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
    }

    .overlay-menu ul, .overlay-menu li {
        display: block;
        position: relative;
    }

    .overlay-menu li a {
        display: block;
        font-size: var(--ema-navbar-mobile-a-font-size);
        font-family: var(--ema-navbar-a-font-family);
        letter-spacing: 4px;
        padding: 10px 0;
        text-align: right;
        text-transform: var(--ema-navbar-text-transform);
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
        width: 100%;
    }

    .overlay-menu li a:hover,
    .overlay-menu li a:active {
        color: var(--ema-navbar-hover-color);
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
    }



}
