/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
    margin-bottom: 1rem;
}

@media all and (min-width: 1201px) {
    .nav-link{
        display: block;
        text-decoration: none;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    }

    .navbar .nav-item:hover .nav-link {
        color: #fff;
    }

    .dropdown-toggle {
        white-space: nowrap;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        z-index: 1000;
        display: none;
        width: 150px;
        padding: 5px 0;
        margin: 0;
        font-size: 16px;
        text-align: left;
        list-style: none;
        background-color:rgba(0,0,0,0.7);
        background-clip: padding-box;
    }
    .menu1 .dropdown-menu{
        left: -40px;
    }
    .menu2 .dropdown-menu{
        left: -30px;
    }
    .menu3 .dropdown-menu{
        left: -40px;
    }
    .menu4 .dropdown-menu{
        left: -47px;
    }

    /* .navbar .nav-item .dropdown-menu::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0px;
        height: 0px;
        border-bottom: calc(6px * 1.732) solid rgba(255, 255, 255, 0.9);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    } */

    .navbar .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        margin-top: 6px;
    }

    .navbar .dropdown-menu.fade-up {
        top: 180%;
    }
    
    .dropdown-item {
        display: block;
        width: 100%;
        padding: 0.25rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
    }

    .navbar .dropdown-menu-end {
        right: 0;
        left: auto;
    }

    .nav-item .dropdown-menu li{
        text-align: center;
    }
    .nav-item .dropdown-menu li a{
        display: inline-block;
        padding:6px 0;
        font-weight: 500;
        color: #d9d9d9;

    }
    .nav-item .dropdown-menu li.on a,
    .nav-item .dropdown-menu li a:hover{
        color: #fff;
    }

    .navbar .dropdown-menu.fade-down {
        top: 80%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: 100%;
        transform: rotateX(0deg);
    }

    /* Header fixed */
    header.navbar-fixed-top nav ul.navbar-nav > li > a {
        padding:0;
        color:#363636;
    }
    header.navbar-fixed-top nav ul.navbar-nav>li.on>a,
    header.navbar-fixed-top nav ul.navbar-nav > li > a:hover,
    header.navbar-fixed-top .navbar .nav-item:hover .nav-link {
        color:#162347;
    }
    header.navbar-fixed-top .navbar .nav-item:hover .dropdown-menu {
        margin-top:38px
    }
    header.navbar-fixed-top .navbar .nav-item .dropdown-menu::after {
        border-bottom: calc(6px * 1.732) solid rgba(236, 236, 236, 0.9);
    }
}