div.menuwrapper {
    position: absolute;
    left: 0;
    bottom: 0;

    height: 77px;

    z-index: 30;

    user-select: none;
    -moz-user-select: none;

    z-index: 2000;
    text-align: center;
    width: 100%;
}

ul.menu-bar {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.menu-bar li {
    display: inline-block;
    position: relative;

    margin: 0;
    padding: 0;

    list-style-type: none;
}

ul.menu-bar a {
    display: block;

    color: #ffffff;

    text-decoration: none;

    line-height: 57px;

    padding: 0 0 20px;
}

ul.menu-bar > li > a {
    border-bottom: 5px solid transparent;
}

ul.menu-bar a span {
    display: block;

    font-weight: bold;
    font-size: 18px;
    color: #115e67;

    padding: 0 20px;

    line-height: 57px;
}

ul.menu-bar li:hover a,
ul.menu-bar a:hover,
ul.menu-bar a:active,
ul.menu-bar a.current {
    text-decoration: none;

    border-bottom-color: #da291c;
}

ul.menu-bar li + li a span {
    border-left: 1px solid #e5e5e5;
}

/** SECOND LEVEL MENUS **/
ul.menu-bar li:hover ul,
ul.menu-bar li a:hover ul {
    display: block;

    position: absolute;
    left: 0;
    top: 76px;

    height: auto;

    margin: 0;

    color: black;

    z-index: 5;
}

ul.menu-bar li ul {
    display: none;

    margin: 0;
    padding: 0;

    list-style: none;

    background: #ffffff;

    width: 320px;

    -moz-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

ul.menu-bar li ul li {
    float: none;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
}

ul.menu-bar li ul li + li {
    border-top: 1px solid #e5e5e5;
}

ul.menu-bar li ul a,
ul.menu-bar li:hover ul a {
    display: block;

    background: transparent;

    font-size: 16px;
    color: #000000;

    text-decoration: none;
    text-transform: none;

    line-height: 22px;

    padding: 5px 20px;
}

ul.menu-bar li ul li:hover a,
ul.menu-bar li:hover ul a:focus,
ul.menu-bar li:hover ul a:active,
ul.menu-bar li:hover ul a:hover {
    background: #4f868e;

    color: #ffffff;
}

ul.menu-bar li ul a.current {
    color: #4f868e;
}

/** THIRD LEVEL MENUS **/
ul.menu-bar li:hover ul li ul,
ul.menu-bar li a:hover ul li a ul {
    display: none;
}

ul.menu-bar li:hover ul li:hover ul,
ul.menu-bar li a:hover ul li a:hover ul {
    background: #ffffff;

    display: block;

    position: absolute;
    top: 0;
    left: 320px;

    color: #000000;

    width: 320px;
}

ul.menu-bar li:hover ul li:hover ul.popLeft,
ul.menu-bar li a:hover ul li a:hover ul.popLeft {
    left: auto;
    right: 320px;
}

ul.menu-bar li:hover ul li:hover ul li a {
    background: transparent;

    color: #000000;

    line-height: 22px;

    padding: 5px 20px;
}

ul.menu-bar li:hover ul li:hover ul li a:hover,
ul.menu-bar li a:hover ul li a:hover ul li a:hover {
    background: #4f868e;

    color: #ffffff;
}

ul.menu-bar li ul li ul a.current {
    color: #4f868e !important;
}

ul.menu-bar li ul li ul li:hover a.current,
ul.menu-bar li ul a.current:focus,
ul.menu-bar li ul a.current:hover,
ul.menu-bar li ul a.current:active {
    color: #ffffff !important;
}

/** FOURTH LEVEL MENUS **/
ul.menu-bar li:hover ul li:hover ul li ul {
    display: none;
}

ul.menu-bar li:hover ul li:hover ul li:hover ul {
    background: #ffffff;

    display: block;

    position: absolute;
    top: 0;
    left: 320px;

    color: #000000;

    width: 320px;
}

ul.menu-bar li:hover ul li:hover ul li ul.popLeft {
    top: 4px;
    left: auto;
    right: 320px;

    width: 310px;
}

ul.menu-bar li:hover ul li:hover ul li ul li a {
    background: transparent;

    color: #000000;

    line-height: 22px;

    padding: 5px 20px;
}

ul.menu-bar li:hover ul li:hover ul li ul li a:hover,
ul.menu-bar li a:hover ul li a:hover ul li ul li a:hover {
    background: #4f868e;

    color: #ffffff;
}

ul.menu-bar li ul li ul li ul li a.current {
    color: #4f868e !important;
}

ul.menu-bar li ul li ul li:hover li ul li a.current,
ul.menu-bar li ul li ul li a.current:focus,
ul.menu-bar li ul li ul li a.current:hover,
ul.menu-bar li ul li ul li a.current:active {
    color: #ffffff !important;
}

#mobile-menu-trigger,
#mobile-menu {
    display: none;
}

/**** Screen width smaller 1300px ****/
@media only screen and (max-width: 1300px) {
    #Header .menuwrapper {
        display: none;
    }

    #Header #mobile-menu-trigger {
        display: block;

        font-size: 20px;
        color: #115e67;

        position: absolute;
        left: 3px;
        top: 160px;
    }

    #Header #mobile-menu-trigger:hover,
    #Header #mobile-menu-trigger:active {
        text-decoration: none;
    }

    #mobile-menu {
        background: #115e67;

        position: absolute;
        top: 195px;
        left: 27px;

        width: 318px;

        border: 1px solid #729ea5;
        border-top: 0;

        padding: 14px 0;

        z-index: 1000;

        -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 2px 2px 4px 0.72px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    #mobile-menu #menu-bar > li:first-child > a {
        margin-right: 48px;
    }

    #mobile-menu li a {
        padding: 0 10px;
    }

    #mobile-menu li a.menu {
        margin-left: 53px;
        padding-left: 0;
    }

    #mobile-menu a:hover,
    #mobile-menu a:active {
        text-decoration: none;
    }

    #mobile-menu-close,
    #mobile-menu .submenu-trigger {
        background: #2e6e74;

        display: block;

        position: absolute;
        top: 13px;
        right: 12px;

        font-size: 18px;
        font-weight: bold;
        color: #d1ccbd;

        width: 27px;
        height: 27px;

        text-align: center;
    }

    #mobile-menu .submenu-trigger {
        -webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
    }

    #mobile-menu ul,
    #mobile-menu ul li {
        margin: 0;
        padding: 0;

        list-style-type: none;
    }

    #mobile-menu ul li a {
        display: block;

        font-size: 18px;
        color: #d1ccbd;

        padding: 8px 0;

        line-height: 20px;
    }

    #mobile-menu ul li a span {
        font-size: 18px;
    }

    #mobile-menu ul li.no-children a span {
        font-size: 18px;
        padding-left: 53px;
    }

    #mobile-menu .submenu-trigger,
    #mobile-menu #menu-bar > li:first-child > a.submenu-trigger {
        float: left;

        position: static;
        top: auto;
        left: auto;

        line-height: 27px;

        margin: 5px 7px 0 10px;
        padding: 0;

        overflow: hidden;
    }

    #mobile-menu .submenu-trigger .fa {
        font-size: 14px !important;

        width: 100%;

        line-height: 28px;

        vertical-align: top;
    }

    #mobile-menu ul li ul {
        background: #2e6e74;

        display: none;

        padding: 14px 0 14px 0;
    }

    #mobile-menu ul li ul.visible {
        display: block;
    }

    #mobile-menu li ul li a {
        font-weight: normal;
    }

    #mobile-menu ul.top-menu {
        border-top: 1px solid #5c5c5c;
    }

    #mobile-menu li ul li a {
        padding-left: 53px;
    }

    #mobile-menu ul li ul .submenu-trigger {
        left: 15px;
    }

    #mobile-menu ul li ul .submenu-trigger .fa,
    #mobile-menu ul li ul li ul {
        background: #467c7f;
    }

    #mobile-menu ul li ul li ul .submenu-trigger .fa,
    #mobile-menu ul li ul li ul li ul {
        background: #649a9e;
    }
}