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

@media all and (min-width: 1201px) {
    .dropdownMenu {
        display: none;
        position: absolute;
        z-index: 1000;
        background-color:var(--color-white);
        left: 50%;
        transform: translateX(-50%);
    }
    .navbar .navItem {
        position: relative;
    }
    .navbar .navItem .dropdownMenu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        margin-top: 40px
    }
    .navbar .dropdownMenu.fade-up {
        top: 180%;
    }
    .navbar .dropdownMenu.fade-down {
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }
    .navbar .navItem:hover .dropdownMenu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: 100%;
    }
    .navbar .navItem .dropdownMenu::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0px;
        height: 0px;
        border-bottom: calc(6px * 1.732) solid var(--color-white);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }
    .navItem .dropdownMenu .inner {
        display: flex;
        padding: var(--space-10) var(--space-20);
    }
    .navItem .dropdownMenu .inner .depth {
        padding: 0 var(--space-20);
    }
    .navItem .dropdownMenu .depth1 {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        font-weight: var(--fw-bold);
        color: var(--color-dark);
        font-size: var(--font-15);
        /* border-bottom: var(--border) */
    }
    .navItem .dropdownMenu .depth2 > li {
        text-align: center;
    }
    .navItem .dropdownMenu .depth2 > li > a {
        display:block;
        font-weight: var(--fw-normal);
        padding: var(--space-5) 0;
        font-size: var(--font-15);
        color: var(--color-dark);
        transition: all 0.3s;
        white-space: nowrap;
    }
    .navItem .dropdownMenu .depth2 > li.on a,
    .navItem .dropdownMenu .depth2 > li a:hover {
        font-weight: var(--fw-semibold);
        color: var(--color-primary)
    }
    /* Header fixed */
    header.navbarFixedTop .navbar .navItem:hover .dropdownMenu {
        margin-top: var(--space-15);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    }
}