﻿.js-mega-menu {
    display: none
}

#mainnav .navbar-nav {
    display: flex;
}

#mainnav .dropdown-item {
    padding: .5rem 1rem;
}

#mainnav > ul > li {
    padding: 0.25rem 0.75rem;
}

#mainnav .dropdown-item {
    padding: .5rem 1rem;
}

#mainnav > ul > li {
    padding: 0.25rem 0.75rem;
}

#mainnav a.dropdown-item {
    padding: 0.75rem;
    margin-right: 12px;
}

    #mainnav a.dropdown-item:hover {
        color: #d00;
    }

.arrow:before, .arrow:after {
    border-right: 1px solid;
    content: '';
    display: block;
    height: 8px;
    margin-top: -6px;
    position: absolute;
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    right: 10px;
    top: 50%;
    width: 0;
}

.arrow:after {
    margin-top: -1px;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
    .navbar-brand {
        width: 45px;
    }

    .navbar div {
        width: 70%;
    }

        .navbar div h4 {
            text-align: center;
            line-height: 20px;
        }

        .navbar div p {
            text-align: center;
            font-size: 11px !important;
        }
}

@media (min-width: 992px) {

    #mainnav .dropdown-menu .dropdown-toggle:after {
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }

    #mainnav .dropdown-menu .dropdown-menu {
        margin-left: 0;
        margin-right: 0;
    }

    #mainnav .dropdown-menu li {
        position: relative;
    }

    #mainnav .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    #mainnav .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }

    #mainnav .dropdown-menu > li:hover {
        background-color: #f1f1f1
    }

        #mainnav .dropdown-menu > li:hover > .submenu {
            display: block;
        }
}
