/* =========================================================
   SPMOVIES — COMPLETE MENU SYSTEM
   Mobile Drawer + Desktop Drawer + SVG Icons + Header
   ========================================================= */


/* =========================================================
   1. MOBILE MENU
   ========================================================= */

@media only screen and (max-width: 600px) {

    /* -----------------------------------------------------
       MOBILE DRAWER
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 72vw !important;
        max-width: 320px !important;
        height: 100vh !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        background: #1b1c20 !important;

        z-index: 100000 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translateX(-105%) !important;

        visibility: hidden !important;
        opacity: 0 !important;

        transition:
            transform .28s ease-in-out,
            opacity .28s ease,
            visibility .28s ease !important;

        scrollbar-width: thin !important;
        scrollbar-color: #45464c transparent !important;
    }


    /* -----------------------------------------------------
       MOBILE DRAWER OPEN
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp.sidblock {

        transform: translateX(0) !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* -----------------------------------------------------
       INNER MENU
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp .menu {

        position: relative !important;

        width: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;

        padding: 62px 12px 25px 12px !important;

        box-sizing: border-box !important;

        background: #1b1c20 !important;
    }


    /* -----------------------------------------------------
       CLOSE BUTTON
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp .sp-menu-close {

        position: absolute !important;

        top: 13px !important;
        right: 13px !important;

        width: 38px !important;
        height: 38px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(255,255,255,.06) !important;

        border-radius: 50% !important;

        background: #2d2e33 !important;

        color: #ffffff !important;

        font-size: 18px !important;
        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 100002 !important;

        -webkit-appearance: none !important;
        appearance: none !important;
    }


    .fixheadresp #arch-menu.menuresp .sp-menu-close:hover {

        background: #3b3c42 !important;

        color: #ffffff !important;
    }


    .fixheadresp #arch-menu.menuresp .sp-menu-close i {

        color: #ffffff !important;

        font-size: 18px !important;

        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       MOBILE OVERLAY
       ----------------------------------------------------- */

    .fixheadresp .sp-menu-overlay {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background: rgba(0,0,0,.68) !important;

        z-index: 99998 !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;

        transition:
            opacity .28s ease,
            visibility .28s ease !important;
    }


    /* -----------------------------------------------------
       OVERLAY OPEN
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp.sidblock
    ~ .sp-menu-overlay {

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       WORDPRESS MOBILE MENU
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .fixheadresp #arch-menu.menuresp ul.resp li {

        width: 100% !important;

        margin: 2px 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* -----------------------------------------------------
       MOBILE MENU LINK
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp > li > a {

        display: flex !important;

        width: 100% !important;
        min-height: 48px !important;

        align-items: center !important;

        margin: 0 !important;
        padding: 10px 13px !important;

        box-sizing: border-box !important;

        border-radius: 9px !important;

        background: transparent !important;

        color: #d0d0d3 !important;

        font-size: 15px !important;
        font-weight: 500 !important;

        line-height: 1.2 !important;

        text-decoration: none !important;

        transition:
            background .18s ease,
            color .18s ease !important;
    }


    /* -----------------------------------------------------
       MOBILE HOVER
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp > li > a:hover {

        background: #292a2f !important;

        color: #ffffff !important;
    }


    /* -----------------------------------------------------
       MOBILE ACTIVE
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp > li.current-menu-item > a,
    .fixheadresp #arch-menu.menuresp ul.resp > li.current_page_item > a,
    .fixheadresp #arch-menu.menuresp ul.resp > li.current-menu-ancestor > a {

        background: #303136 !important;

        color: #ffffff !important;

        font-weight: 600 !important;
    }


    /* -----------------------------------------------------
       MOBILE SUBMENU
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp ul.sub-menu {

        margin: 2px 0 4px 8px !important;

        padding: 0 0 0 8px !important;

        border-left: 1px solid rgba(255,255,255,.08) !important;

        background: transparent !important;
    }


    .fixheadresp #arch-menu.menuresp ul.resp ul.sub-menu li {

        margin: 1px 0 !important;
    }


    .fixheadresp #arch-menu.menuresp ul.resp ul.sub-menu li a {

        min-height: 42px !important;

        padding: 9px 12px !important;

        border-radius: 7px !important;

        color: #b8b8bd !important;

        font-size: 14px !important;
    }


    /* -----------------------------------------------------
       MOBILE USER AREA
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp .user {

        margin: 0 0 12px 0 !important;

        padding: 10px !important;

        border-radius: 10px !important;

        background: #242529 !important;

        box-sizing: border-box !important;
    }


    .fixheadresp #arch-menu.menuresp .user a {

        color: #ffffff !important;

        text-decoration: none !important;
    }


    /* -----------------------------------------------------
       MOBILE SVG ICON
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp li a svg {

        width: 25px !important;
        height: 25px !important;

        margin-right: 16px !important;

        flex: 0 0 25px !important;
        flex-shrink: 0 !important;

        color: #ffffffa6 !important;

        fill: currentColor !important;
        stroke: currentColor !important;

        transition:
            color .18s ease,
            fill .18s ease,
            stroke .18s ease !important;
    }


    /* -----------------------------------------------------
       MOBILE ACTIVE SVG
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp ul.resp li.current-menu-item > a svg,
    .fixheadresp #arch-menu.menuresp ul.resp li.current_page_item > a svg,
    .fixheadresp #arch-menu.menuresp ul.resp li.current-menu-ancestor > a svg {

        color: #2ecc71 !important;

        fill: currentColor !important;
        stroke: currentColor !important;
    }


    /* -----------------------------------------------------
       MOBILE SCROLLBAR
       ----------------------------------------------------- */

    .fixheadresp #arch-menu.menuresp::-webkit-scrollbar {

        width: 4px !important;
    }


    .fixheadresp #arch-menu.menuresp::-webkit-scrollbar-track {

        background: transparent !important;
    }


    .fixheadresp #arch-menu.menuresp::-webkit-scrollbar-thumb {

        background: #45464c !important;

        border-radius: 10px !important;
    }

}


/* =========================================================
   2. DESKTOP MENU
   ========================================================= */

@media only screen and (min-width: 601px) {

    /* -----------------------------------------------------
       DESKTOP LEFT DRAWER
       ----------------------------------------------------- */

    #header.main .head-main-nav {

        position: fixed !important;

        top: 70px !important;
        left: 0 !important;

        width: 240px !important;
        height: calc(100vh - 70px) !important;

        margin: 0 !important;
        padding: 18px 10px 25px 10px !important;

        box-sizing: border-box !important;

        background: #1b1c20 !important;

        z-index: 9990 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        display: block !important;

        transform: translateX(0) !important;

        transition: transform .25s ease !important;
    }


    /* -----------------------------------------------------
       DESKTOP MENU LIST
       ----------------------------------------------------- */

    #header.main .head-main-nav ul.main-header {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }


    #header.main .head-main-nav ul.main-header > li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }


    /* -----------------------------------------------------
       DESKTOP MENU LINK
       ----------------------------------------------------- */

    #header.main .head-main-nav ul.main-header > li > a {

        display: flex !important;

        width: 100% !important;
        min-height: 44px !important;

        align-items: center !important;

        margin: 3px 0 !important;
        padding: 0 14px !important;

        box-sizing: border-box !important;

        border-radius: 6px !important;

        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 400 !important;

        line-height: 20px !important;

        float: none !important;

        text-decoration: none !important;
    }


    #header.main .head-main-nav ul.main-header > li > a:hover {

        background: #25262b !important;

        color: #ffffff !important;
    }


    /* -----------------------------------------------------
       DESKTOP ACTIVE
       ----------------------------------------------------- */

    #header.main .head-main-nav ul.main-header > li.current-menu-item > a,
    #header.main .head-main-nav ul.main-header > li.current_page_item > a,
    #header.main .head-main-nav ul.main-header > li.current-menu-ancestor > a {

        background: #2ecc711a !important;

        color: #2ecc71 !important;

        font-weight: 600 !important;
    }


    /* -----------------------------------------------------
       DESKTOP SVG ICON
       ----------------------------------------------------- */

    #header.main .head-main-nav ul.main-header > li > a svg {

        width: 24px !important;
        height: 24px !important;

        margin-right: 14px !important;

        flex: 0 0 24px !important;
        flex-shrink: 0 !important;

        color: #ffffffa6 !important;

        fill: currentColor !important;
        stroke: currentColor !important;

        transition:
            color .18s ease,
            fill .18s ease,
            stroke .18s ease !important;
    }


    /* -----------------------------------------------------
       DESKTOP ACTIVE SVG
       ----------------------------------------------------- */

    #header.main .head-main-nav ul.main-header > li.current-menu-item > a svg,
    #header.main .head-main-nav ul.main-header > li.current_page_item > a svg,
    #header.main .head-main-nav ul.main-header > li.current-menu-ancestor > a svg {

        color: #2ecc71 !important;

        fill: currentColor !important;
        stroke: currentColor !important;
    }


    /* -----------------------------------------------------
       DESKTOP MENU HIDDEN
       ----------------------------------------------------- */

    body.sp-desktop-menu-hidden #header.main .head-main-nav {

        transform: translateX(-105%) !important;

        display: block !important;
    }


    /* -----------------------------------------------------
       CONTENT — MENU OPEN
       ----------------------------------------------------- */

    body:not(.sp-desktop-menu-hidden) #contenedor {

        width: calc(100% - 240px) !important;

        max-width: none !important;

        margin-left: 240px !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;

        transition:
            width .25s ease,
            margin-left .25s ease !important;
    }


    /* -----------------------------------------------------
       CONTENT — MENU CLOSED
       ----------------------------------------------------- */

    body.sp-desktop-menu-hidden #contenedor {

        width: 100% !important;

        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;

        transition:
            width .25s ease,
            margin-left .25s ease !important;
    }

}


/* =========================================================
   3. DESKTOP MENU BUTTON
   ========================================================= */

@media only screen and (min-width: 601px) {

    .sp-desktop-menu-toggle {

        position: absolute !important;

        top: 12px !important;
        left: 15px !important;

        width: 46px !important;
        height: 46px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        border-radius: 8px !important;

        background: #25262b !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 9999 !important;

        box-sizing: border-box !important;

        -webkit-appearance: none !important;
        appearance: none !important;

        transition:
            background .18s ease,
            color .18s ease,
            transform .18s ease !important;
    }


    .sp-desktop-menu-toggle:hover {

        background: #303136 !important;

        color: #ffffff !important;

        transform: scale(1.03) !important;
    }


    .sp-desktop-menu-toggle i {

        display: block !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1 !important;
    }

}


/* =========================================================
   4. MOBILE — DESKTOP BUTTON HIDDEN
   ========================================================= */

@media only screen and (max-width: 600px) {

    .sp-desktop-menu-toggle {

        display: none !important;
    }

}


/* =========================================================
   5. DESKTOP LOGO + SEARCH
   ========================================================= */

@media only screen and (min-width: 601px) {

    #header.main .hbox .logo {

        margin-left: 55px !important;
    }


    #header.main .search {

        width: 360px !important;
    }

}


/* =========================================================
   6. MOBILE AND DESKTOP HEADER — ALWAYS VISIBLE
   ========================================================= */

@media only screen and (max-width: 600px) {

    .fixheadresp {

        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;

        z-index: 9999 !important;

        transform: none !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    .fixheadresp header.responsive {

        display: block !important;
    }

}



@media only screen and (min-width: 601px) {

    #header.main {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;

        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}



/* =========================================================
  7. MOBILE MENU ICON — FIX DUPLICATE ICON
   ========================================================= */

.fixheadresp .nav-resp::before,
.fixheadresp .nav-resp::after {
    content: none !important;
    display: none !important;
}

.fixheadresp .nav-resp {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
}

.fixheadresp .nav-resp i {
    display: block !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 24px !important;
    line-height: 1 !important;

    color: #fff !important;
}

/* =========================================================
   END — COMPLETE MENU SYSTEM
   ========================================================= */