/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.

----------------------------------------------------------- */

/* Main menu - horizontal */
.mod-menu.mainmenu_cls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.mod-menu.mainmenu_cls > li {
    position: relative;
    display: inline-block;
}

.mod-menu.mainmenu_cls > li > a {
    display: block;
    padding: 15px 20px;
    white-space: nowrap;
}

/* Submenu */
.mod-menu.mainmenu_cls .metismenu-item__children,
.mod-menu.mainmenu_cls .deeper > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    display: none;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    padding: 0;
}

/* Show submenu on hover */
.mod-menu.mainmenu_cls > li:hover > ul,
.mod-menu.mainmenu_cls > li:hover > .metismenu-item__children {
    display: block;
}

/* Submenu items */
.mod-menu.mainmenu_cls .deeper > ul li,
.mod-menu.mainmenu_cls .metismenu-item__children li {
    display: block;
    width: 100%;
}

.mod-menu.mainmenu_cls .deeper > ul li a,
.mod-menu.mainmenu_cls .metismenu-item__children li a {
    display: block;
    padding: 11px 15px;
    white-space: nowrap;
}

/* Hover */
.mod-menu.mainmenu_cls .deeper > ul li a:hover,
.mod-menu.mainmenu_cls .metismenu-item__children li a:hover {
    background: #f2f2f2;
}

/* Arrow for menu items that have submenu */
.mod-menu.mainmenu_cls > li.deeper > a::after {
    content: "▼";
    display: inline-block;
    margin-left: 7px;
    font-size: 10px;
    vertical-align: middle;
}

/* Remove arrow from items without submenu */
.mod-menu.mainmenu_cls > li:not(.deeper) > a::after {
    content: none;
}

/* Second-level submenu */
.mod-menu.mainmenu_cls .deeper > ul .deeper {
    position: relative;
}

.mod-menu.mainmenu_cls .deeper > ul .deeper > ul {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.mod-menu.mainmenu_cls .deeper > ul .deeper:hover > ul {
    display: block;
}

@media only screen and (max-width: 600px) {
.module_round_box{
	padding: 0 !important;
}
#s5_logo_wrap{
	margin-left: 20px;
    text-align: left;
}
#s5_responsive_mobile_top_bar{
	width: 50px !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
}
#s5_responsive_mobile_top_bar_spacer{
	display: none !important;
}
}