/*----------------------------------------*/
/*  2.3  header-menu-area
/*----------------------------------------*/
.header-menu-area {
    background: #2b2b2b none repeat scroll 0 0;
}

.container-main-menu {
    z-index: 100;
}

.main-menu .logo {
    display: none;
    padding-top: 0px;
}

.menu-area.sticky {
    position: fixed;
    left: 0;
    /*background-color: rgba(0,0,0,0.85);
	box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);*/
    top: 0;
    width: 100%;
    z-index: 1071;
    transition: .3s;
}

/* Mobile header sticky*/
.top-middle .row .col-12.rp.sticky {
    position: fixed;
    left: 0;
    background-color: #fff;
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
    top: 0;
    height: 55px;
    width: 100%;
    z-index: 999;
    transition: .3s;
}

.mmobile-menu .nav-icon.sticky {
    position: fixed;
    top: -5px;
}

.top-middle .row .col-12.rp.sticky .logo {
    margin-top: 14px;
}

.top-middle .row .col-12.rp.sticky .search-top-mobile {
    top: 10px;
}

.main-menu.sticky .logo {
    display: block;
}

.main-menu ul {
    margin: 0;
    padding: 0;
}

    .main-menu ul li {
        display: inline-block;
        /*position:relative;*/
    }

        .main-menu ul li a {
            background: transparent none repeat scroll 0 0;
            color: #000;
            display: block;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            /*text-decoration: none;*/
            display: flex;
            /*justify-content: center;
			align-items: center;*/
            text-align: left;
            font-family: var(--bold);
        }

        .main-menu ul li ul li ul li a {
            font-family: var(--regular);
            font-size: 14px;
        }

@media screen and (min-width:1240px) {
    .main-menu ul li.logo:hover {
        background: white !important;
    }

    .main-menu ul li:hover {
        background: #313131;
        transition: all .3s;
    }

        .main-menu ul li:hover > a {
            color: var(--boja1) !important;
        }

    .main-menu ul li ul li:hover {
        background: #fff;
    }

        .main-menu ul li ul li:hover > a {
            color: var(--siva) !important;
        }

    .main-menu ul li ul li ul li:hover > a {
        text-decoration: underline;
    }
}



.main-menu .sub-menu > ul {
    display: flex;
}

.main-menu ul > div > i {
    display: inline-block;
    color: #d7d7d7;
}

.main-menu ul li .mega-menu-area {
    background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 0 0 9.6px 0.4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    left: 0;
    width: 1040px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
}


.main-menu ul li .sub-menu {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 9.6px 0.4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
}

.main-menu ul li:hover .sub-menu {
    /*transform: scaleY(1);*/
    visibility: visible;
    opacity: 1;
}


.main-menu ul li .sub-menu ul li {
    display: block;
}

.main-menu ul li .sub-menu > ul > li > a {
    color: #000;
    display: block;
    font-size: 15x;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0;
    letter-spacing: 0.3px;
    font-family: var(--regular);
}

.main-menu nav ul li .sub-menu ul li ul {
    min-width: 240px;
    opacity: 1;
}

    .main-menu nav ul li .sub-menu ul li ul a {
        font-weight: 500;
        padding: 10px 0px 0px 0;
        text-transform: none;
    }

        .main-menu nav ul li .sub-menu ul li ul a:hover {
            text-decoration: underline;
        }

        .main-menu nav ul li .sub-menu ul li ul a.crveno {
            color: var(--crveno);
            font-weight: 700;
        }

/***************************************************************************************************************/

.nav-categories {
    display: flex;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .2);
    height: 60px;
    font-size: 18px;
    text-transform: uppercase;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    font-weight: 700;
    background: #fff
}

    .nav-categories > li {
        border-right: 1px solid #e0e2db;
        flex-grow: 1;
        text-align: center;
        height: 100%;
    }

        .nav-categories > li:last-child {
            border: 0
        }

        .nav-categories > li.active {
            background: #313131
        }

            .nav-categories > li.active > a {
                color: #fcd002
            }

        .nav-categories > li > a {
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
            z-index: 1
        }

.sticky .nav-categories {
    box-shadow: 0 2px 60px 0 rgba(0,0,0,.5);
}

/* Mobile menu */
.nav-icon {
    margin: 1em;
    width: 30px;
    position: absolute;
    top: 0;
    left: 0;
}

.mmobile-menu > a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.nav-icon::after, .nav-icon::before, .nav-icon div {
    background-color: white;
    border-radius: 3px;
    content: '';
    display: block;
    height: 3px;
    margin: 7px 0;
    transition: all .2s ease-in-out;
}

.mm-wrapper_opened .nav-icon div {
    background-color: #000;
}

.nav-icon:active::before, .mm-wrapper_opened .nav-icon::before {
    -webkit-transform: translateY(9px) rotate(137deg);
    -ms-transform: translateY(9px) rotate(137deg);
    transform: translateY(9px) rotate(137deg);
    background-color: #fff;
}

.nav-icon:active::after, .mm-wrapper_opened .nav-icon::after {
    -webkit-transform: translateY(-12px) rotate(-135deg);
    -ms-transform: translateY(-12px) rotate(-135deg);
    transform: translateY(-12px) rotate(-135deg);
    background-color: #fff;
}