/* =========================================================
   SS_LPT — PAGE
   47 = 13 + 34
   ========================================================= */

.SS_LPT .sl_page {
    display: grid;
    grid-template-rows: calc(var(--space_4) * 6.5) minmax(0, 1fr) var(--space_18);
    width: calc(var(--space_4) * 47);
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   HEADER
   13 + 34 = 47
   ========================================================= */

.SS_LPT .sl_header {
    display: grid;
    grid-template-columns: var(--space_52) calc(var(--space_4) * 34);
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   HEADER LEFT_D
   13
   ========================================================= */

.SS_LPT .sl_header_left {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.SS_LPT .sl_header_left_link {
    display: block;
    width: 100%;
    height: 100%;
}

    .SS_LPT .sl_header_left_link > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }


/* =========================================================
   HEADER MAIN_F
   34
   ========================================================= */

.SS_LPT .sl_header_main {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-image: url("/media/images/layout/ss_lpt/3s-ostalo-menu-zgoraj.webp");
    background-repeat: no-repeat;
    background-position: left top;
}


/* =========================================================
   HEADER MENU
   ========================================================= */

.SS_LPT .sl_header_menu {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: var(--space_3);
}


/* ---------------------------------------------------------
   HEADER BUTTONS
   --------------------------------------------------------- */

.SS_LPT .sl_header_buttons {
    width: calc(var(--space_4) * 31);
    display: flex;
    justify-content: space-between;
    padding: 0;
}


/* ---------------------------------------------------------
   HEADER BUTTON
   --------------------------------------------------------- */

.SS_LPT .sl_header_button {
    display: flex;
    justify-content: center;
    align-content: center;
    width: var(--space_22);
    height: var(--space_6);
    background-color: var(--color_Brown);
    border: 1px solid var(--color_Black);
    font-variant: small-caps;
}

    .SS_LPT .sl_header_button h3 {
        margin: 0;
    }


/* =========================================================
   HEADER ANIMATION
   4 × space_4
   ========================================================= */

.SS_LPT .sl_header_animation {
    position: relative;
    width: 100%;
    height: var(--space_16);
}


/* =========================================================
   STAGE
   13 + 33 + 1 = 47

   TO JE MANJKALO.
   ========================================================= */

.SS_LPT .sl_stage {
    display: grid;
    grid-template-columns: var(--space_52) calc(var(--space_4) * 33) var(--space_4);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   STAGE LEFT_D
   13
   ========================================================= */

.SS_LPT .sl_stage_left {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

    .SS_LPT .sl_stage_left .sl_main_left {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }


        /* ---------------------------------------------------------
   PRVA SLIKA — GLAVA
   --------------------------------------------------------- */

        .SS_LPT .sl_stage_left
        .sl_main_left > div:nth-child(1) {
            flex: 0 0 var(--space_24);
            height: var(--space_24);
            min-width: 0;
            overflow: hidden;
        }


        /* ---------------------------------------------------------
   DRUGA SLIKA — MENU
   --------------------------------------------------------- */

        .SS_LPT .sl_stage_left
        .sl_main_left > div:nth-child(2) {
            flex: 0 0 var(--space_24);
            height: var(--space_24);
            min-width: 0;
            overflow: hidden;
        }


        /* ---------------------------------------------------------
   PRAZEN SPODNJI DEL
   --------------------------------------------------------- */

        .SS_LPT .sl_stage_left
        .sl_main_left > div:nth-child(3) {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
        }


        /* ---------------------------------------------------------
   STAGE LEFT SLIKE
   --------------------------------------------------------- */

        .SS_LPT .sl_stage_left
        .sl_main_left img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: fill;
        }


/* =========================================================
   STAGE CENTER_D
   33
   edini scrollable center
   ========================================================= */

.SS_LPT .sl_stage_center {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

    .SS_LPT .sl_stage_center::-webkit-scrollbar {
        display: none;
    }


/* =========================================================
   STAGE BANNER RIGHT_F
   1
   ========================================================= */

.SS_LPT .sl_stage_banner {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

    .SS_LPT .sl_stage_banner img {
        display: block;
        width: auto;
        height: 100%;
        max-width: none;
        object-fit: none;
        object-position: center;
    }


/* =========================================================
   FOOTER
   skupaj 4.5 × space_4
   ========================================================= */

.SS_LPT .sl_footer {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   FOOTER BANNER_F
   stari footer_bottom__devider
   ========================================================= */

.SS_LPT .sl_footer_banner {
    position: relative;
    flex: 0 0 var(--space_8);
    width: 100%;
    height: var(--space_8);
    min-width: 0;
    overflow: hidden;
}

    .SS_LPT .sl_footer_banner > img {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: auto;
        height: var(--space_4);
    }


/* =========================================================
   FOOTER MAIN_F
   2.5 × space_4
   ========================================================= */

.SS_LPT .sl_footer_main {
    position: relative;
    flex: 0 0 var(--space_10);
    display: flex;
    width: 100%;
    height: var(--space_10);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.SS_LPT .sl_navigation_bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: var(--space_10);
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   BOTTOM LINK
   --------------------------------------------------------- */

.SS_LPT .sl_navigation_bottom_link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space_6);
    padding: var(--space_1_6);
    border-right: 1px solid var(--color_Brown);
    text-decoration: none;
    white-space: nowrap;
}

    .SS_LPT
    .sl_navigation_bottom_link:first-child {
        border-left: 1px solid var(--color_Brown);
    }


    /* ---------------------------------------------------------
   BOTTOM TEXT
   --------------------------------------------------------- */

    .SS_LPT
    .sl_navigation_bottom_link h3 {
        margin: 0;
        font-family: var(--font_Roboto);
        font-variant: small-caps;
        font-weight: 400;
        color: var(--color_Brown);
        line-height: 1;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 48em) {

    .SS_LPT .l_panel {
        background-color: var(--color_Black);
        display: flex;
        flex-direction: row;
     }

    .SS_LPT .l_panel .sl_navigation {
        width: 100%;
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--color_Brown);
        font-family: var(--font_Roboto);
        text-align: center;
        line-height: var(--space_12);
    }

        .SS_LPT .l_panel .sl_navigation_link {
            width: 100%;
            color: var(--color_Brown);
            font-family: var(--font_Roboto);
            text-align: center;
            line-height: var(--space_12);
        }

        .SS_LPT .l_panel .sl_navigation_devider {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: fit-content;
            display: flex;
            align-items: center;
        }

            .SS_LPT .l_panel .sl_navigation_devider img {
                display: block;
                width: auto;
                height: auto;
                max-width: none;
            }

    .SS_LPT .sl_page {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100%;
        min-height: 0;
    }

    .SS_LPT .sl_header {
        display: none;
    }

    .SS_LPT .sl_stage {
        grid-template-columns: 1fr;
        width: 100vw;
        min-height: 0;
        height: 100%;
    }

    .SS_LPT .sl_stage_left,
    .SS_LPT .sl_stage_banner {
        display: none;
    }

    .SS_LPT .sl_stage_center {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }



    .SS_LPT .sl_main_center_header {
        width: 100%;
    }


    .SS_LPT .sl_main_center_news.sl_main_center_news_news {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

    }

        .SS_LPT .sl_main_center_news.sl_main_center_news_news .sl_left {
            position: relative;
            width: 100%;
            left: auto;
            top: auto;
        }

        .SS_LPT .sl_main_center_news.sl_main_center_news_news .sl_right {
            position: relative;
            width: 100%;
            left: auto;
            top: auto;
        }


    .SS_LPT .sl_footer {
        display: none;
    }
}