.custom-menu-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: -1;
    background-image: url('https://mitsubishi-motors.si/wp-content/uploads/2023/03/overlay-menu-bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}

.has-custom-dropdown > a {
    cursor: pointer;
}

.custom-dropdown-closed {
    bottom: 100%;
    background-position: 250%;
    transition: bottom 0.4s, background-position 0.4s;
    transition-delay: 0.4s , 0s;
}

.custom-dropdown-opened {
    bottom: 0%;
    background-position: 100%;
    transition: bottom 1s, background-position 0.4s;
    transition-delay: 0s , 0.5s;
}

.dropdown-menu-view .header-inner a:not(.current-custom-dropdown) {
    color: #000 !important;
}

.current-custom-dropdown {
    color: #ED0000 !important;
}

.header-nav li.menu-item a:hover {
    color: #ED0000 !important;
}

.nav>li>a>i {
    transform: rotate(0deg);
    transition: transform 0.4s !important;
}

.nav > li > a.current-custom-dropdown i {
    transform: rotate(180deg);
}

.nav > li.has-custom-dropdown > a {
    transition: color 0.4s !important;
}

.dropdown-menu-view .nav > li.has-custom-dropdown > a {
    transition-delay: 0.4s !important;
}

.custom-dropdown-container {
    display: flex;
    flex-flow: wrap;
    position: relative;
}

.custom-dropdown-image-container {
    height: 50%;
}

.custom-dropdown-menu-container {
    height: 100%;
}

.custom-dropdown-image-container, .custom-dropdown-menu-container {
    width: 50%;
    display: flex;
    flex-flow: unset;
    align-items: center;
    position: relative;
    transition: opacity 0.5s;
}

.custom-dropdown-archive-container, .custom-dropdown-page-container {
    width: 100%;
    height: 100%;
    transition: opacity 0.5s;
}

.custom-dropdown-menu-container {
    justify-content: center;
}

.custom-dropdown-image {
    position: absolute;
}

img.custom-dropdown-image {
    left: -100%;
    transition: left 0.4s;
}

ul.custom-dropdown-menu {
    position: absolute;
    top: 50%;
    right: -100%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    list-style-type: none;
}

.custom-dropdown-hidden {
    display: none;
}
.custom-dropdown-visible {
    display: flex;
}

ul.custom-dropdown-menu {
    min-width: 30%;
}

.custom-dropdown-archive-container {
    display: flex;
    flex-flow: wrap;
    align-content: flex-start;
    align-items: baseline;
    margin: 0 2em;
}

.custom-dropdown-archive-container > * {
    width: 25%;
}

.custom-dropdown-page-container {
    display: flex;
    flex-flow: wrap;
    align-items: center;
}

.menu-archive-item > * {
    text-align: center;
    display: block;
    margin: auto;
}

.custom-dropdown-container > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.custom-dropdown-archive-container {
    margin: 1em 0;
}

.custom-dropdown-archive-container a {
    color: #5A646E;
}

.custom-dropdown-archive-container a {
    color: #5A646E;
    transition: color 0.4s;
}

.custom-dropdown-archive-container a:hover {
    color: #000000;
}

.custom-dropdown-archive-container a:first-child {
    text-transform: initial;
}

.custom-dropdown-archive-container a {
    text-transform: uppercase;
    font-size: 1.3em;
}

.menu-archive-item-title {
    margin-top: 1em !important;
}

li.custom-dropdown-menu-item {
    margin: 1.5em 0;
}

li.custom-dropdown-menu-item a {
    font-size: 1.3em;
    color: #000000;
    opacity: 0.5;
    transition: opacity 0.4s;
} 


li.custom-dropdown-menu-item a:hover {
    opacity: 1;
}