/* ===== ss_lpt_menu_animacija.css ===== */
.SS_LPT .header_top__menu h4 {
    font-size: var(--font_size_24);
    text-transform: uppercase;
    line-height: 1.6rem;
    font-weight: 700;
    color: red;
}
/*Prezrti*/
.divPrezrti,
.jsDivPrezrti {
    display: flex;
    position: absolute;
    top: 0px;
    left: 3rem;
    width: 12.5rem;
    height: 4rem;
    border-left: 1px solid var(--color_Brown);
    border-bottom: 1px solid var(--color_Brown);
    border-right: 1px solid var(--color_Brown);
}

.PrL,
.jsPrL {
    display: flex;
    position: absolute;
    top: -0.5rem;
    left: 3rem;
    width: 1px;
    height: 0rem; /*4rem*/
    background-color: transparent;
    border: 1px solid transparent;
    transform: rotate(90deg);
    transform-origin: top left;
}

.jsPrL {
    animation: AnPrL 1200ms linear 1 forwards;
}

@keyframes AnPrL {
    0% {
        opacity: 1;
        background-color: var(--color_White);
    }

    12% {
        width: 4rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    67% {
        width: 4.0rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 4.0rem;
        background-color: var(--color_White);
    }
}

.PrB,
.jsPrB {
    display: flex;
    position: absolute;
    top: 3.4rem;
    left: 2.9rem;
    width: 0rem; /*12.75rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(0deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsPrB {
    animation: AnPrB 1060ms linear 140ms 1 forwards;
}

@keyframes AnPrB {
    0% {
        opacity: 1;
        background-color: transparent;
    }

    12% {
        opacity: 1;
        background-color: var(--color_White);
    }

    30% {
        width: 12.7rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    67% {
        width: 12.7rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 12.7rem;
        background-color: var(--color_White);
    }
}

.PrD {
    display: flex;
    position: absolute;
    top: 4rem;
    left: 15.3rem;
    width: 2px;
    height: 0.8rem; /*0.8rem*/
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsPrD {
    display: flex;
    position: absolute;
    top: 3.5rem;
    left: 15.5rem;
    width: 1px;
    height: 0rem; /*0.8rem*/
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
    animation: AnPrD 675ms linear 400ms 1 forwards;
}

@keyframes AnPrD {
    0% {
        opacity: 1;
        background-color: transparent;
    }

    35% {
        opacity: 1;
        background-color: var(--color_White);
    }

    40% {
        opacity: 1;
        height: 0.8rem;
        background-color: var(--color_White);
    }

    67% {
        opacity: 1;
        height: 0.8rem;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        height: 0.8rem;
        background-color: var(--color_White);
    }
}

.h4Prezrti {
    visibility: hidden;
    color: var(--color_White);
    left: 13.4rem;
}

.jsH4Prezrti {
    position: absolute;
    left: 13.4rem;
    z-index: 2;
    visibility: hidden;
    color: var(--color_White) !important;
    animation-name: AnPrH4;
    animation-delay: 800ms;
    animation-duration: 700ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes AnPrH4 {
    0% {
        top: 1.3rem;
        visibility: visible;
        transform: scale(0);
    }

    100% {
        top: 1.3rem;
        transform: scale(2);
        visibility: visible;
    }
}
/*Aktualno */
.divAktualno,
.jsDivAktualno {
    display: flex;
    position: absolute;
    top: 0rem;
    left: 9.2rem;
    width: 6.3rem;
    height: 2rem;
    border-left: 1px solid var(--color_Brown);
    border-bottom: 1px solid var(--color_Brown);
    border-right: 1px solid var(--color_Brown);
}

.AkL,
.jsAkL {
    display: flex;
    position: absolute;
    top: -0.5rem;
    left: 9.3rem;
    width: 0px;
    height: 0rem; /*4rem*/
    background-color: transparent;
    border: 1px solid transparent;
    transform: rotate(90deg);
    transform-origin: top left;
}

.jsAkL {
    animation: AnAkL 1.2s linear 1 forwards;
}

@keyframes AnAkL {
    0% {
        opacity: 1;
        background-color: var(--color_White);
    }

    12% {
        width: 2rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    67% {
        width: 2rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 2rem;
        background-color: var(--color_White);
    }
}

.AkB,
.jsAkB {
    display: flex;
    position: absolute;
    top: 1.4rem;
    left: 9.3rem;
    width: 0rem; /*6.5rem*/
    height: 0px;
    transform-origin: top left;
    transform: rotate(0deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsAkB {
    animation: AnAkB 1060ms linear 140ms 1 forwards;
}

@keyframes AnAkB {
    0% {
        opacity: 1;
        background-color: var(--color_White);
    }

    20% {
        width: 5rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 5rem;
        background-color: var(--color_White);
    }
}

.h4Aktualno {
    visibility: hidden;
    color: var(--color_White);
    left: 13.4rem;
}

.jsH4Aktualno {
    position: absolute;
    left: 13.4rem;
    visibility: hidden;
    color: var(--color_White) !important;
    animation-name: AnAkH4;
    animation-delay: 1.2s;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes AnAkH4 {
    0% {
        top: 1.3rem;
        visibility: visible;
        transform: scale(0);
    }

    100% {
        top: 1.3rem;
        transform: scale(2);
        visibility: visible;
    }
}
/* Glasba */
.divGlasba,
.jsDivGlasba {
    display: none;
    position: absolute;
    top: 0px;
    left: 15.25rem;
    width: 0rem;
    height: 2rem;
    border-left: 1px solid var(--color_Brown);
}

.GlT {
    display: flex;
    position: absolute;
    top: 1rem;
    left: 15.3rem;
    width: 2px;
    height: 0rem; /*4rem*/
    background-color: transparent;
    border: 2px solid transparent;
    transform: rotate(90deg);
    transform-origin: top left;
    /* animation: AnGlT 1.4s linear 1 forwards; */
}

.jsGlT {
    display: flex;
    position: absolute;
    top: -0.5rem;
    left: 15.565rem;
    width: 2px;
    height: 0rem; /*4rem*/
    background-color: transparent;
    border: 1px solid transparent;
    transform: rotate(90deg);
    transform-origin: top left;
    animation: AnGlT 1.2s linear 1 forwards;
}

@keyframes AnGlT {
    0% {
        background-color: var(--color_White);
    }

    50% {
        opacity: 1;
        width: 0.8rem;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 0.8rem;
        background-color: var(--color_White);
    }
}

.h4Glasba {
    visibility: hidden;
    color: var(--color_White);
    left: 13.97rem;
}

.jsH4Glasba {
    position: absolute;
    left: 13.4rem;
    visibility: hidden;
    color: var(--color_White) !important;
    animation-name: AnGlH4;
    animation-delay: 1.2s;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes AnGlH4 {
    0% {
        top: 1.3rem;
        visibility: visible;
        transform: scale(0);
    }

    100% {
        top: 1.3rem;
        transform: scale(2);
        visibility: visible;
    }
}
/* Galerija */
.divGalerija,
.jsDivGalerija {
    display: flex;
    position: absolute;
    top: 0px;
    left: 15.5rem;
    width: 6.5rem;
    height: 2rem;
    border-left: 1px solid var(--color_Brown);
    border-bottom: 1px solid var(--color_Brown);
    border-right: 1px solid var(--color_Brown);
}

.GaD,
.jsGaD {
    top: -0.5rem;
    display: flex;
    position: absolute;
    left: 22rem;
    width: 2px;
    height: 0rem; /*2rem*/
    background-color: transparent;
    border: 1px solid transparent;
    transform: rotate(90deg);
    transform-origin: top left;
}

.jsGaD {
    animation: AnGaD 1.4s linear 1 forwards;
}

@keyframes AnGaD {
    0% {
        opacity: 1;
        background-color: var(--color_White);
    }

    12% {
        width: 2rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    67% {
        width: 2rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 2rem;
        background-color: var(--color_White);
    }
}

.GaB,
.jsGaB {
    display: flex;
    position: absolute;
    top: 1.5rem;
    left: 22rem;
    width: 0rem; /*12.75rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsGaB {
    animation: AnGaB 1060ms linear 140ms 1 forwards;
}

@keyframes AnGaB {
    0% {
        opacity: 1;
        background-color: var(--color_White);
    }

    20% {
        width: 5.4rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 5.4rem;
        background-color: var(--color_White);
    }
}

.h4Galerija {
    visibility: hidden;
    color: var(--color_White);
    left: 13.4rem;
}

.jsH4Galerija {
    position: absolute;
    left: 13.4rem;
    visibility: hidden;
    color: var(--color_White) !important;
    animation-name: AnGaH4;
    animation-delay: 1.2s;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes AnGaH4 {
    0% {
        top: 1.3rem;
        visibility: visible;
        transform: scale(0);
    }

    100% {
        top: 1.3rem;
        transform: scale(2);
        visibility: visible;
    }
}
/* Kontakt */
.divKontakt,
.jsDivKontakt {
    display: flex;
    position: absolute;
    top: 0px;
    left: 15.5rem;
    width: 12.85rem;
    height: 4rem;
    border-left: 1px solid var(--color_Brown);
    border-bottom: 1px solid var(--color_Brown);
    border-right: 1px solid var(--color_Brown);
}

.KoD,
.jsKoD {
    display: flex;
    position: absolute;
    top: -0.5rem;
    left: 28.35rem;
    width: 1px;
    height: 0rem; /*4rem*/
    background-color: transparent;
    border: 1px solid transparent;
    transform: rotate(90deg);
    transform-origin: top left;
}

.jsKoD {
    animation: AnKoD 1200ms linear 1 forwards;
}

@keyframes AnKoD {
    0% {
        opacity: 1;
        background-color: var(--color_White);
    }

    12% {
        width: 3.9rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    67% {
        width: 3.9rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 3.9rem;
        background-color: var(--color_White);
    }
}

.KoB,
.jsKoB {
    display: flex;
    position: absolute;
    top: 3.5rem;
    left: 28.35rem;
    width: 0rem; /*12.75rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKoB {
    animation: AnKoB 1060ms linear 140ms 1 forwards;
}

@keyframes AnKoB {
    0% {
        opacity: 1;
        background-color: transparent;
    }

    12% {
        opacity: 1;
        background-color: var(--color_White);
    }

    30% {
        width: 12.9rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    67% {
        width: 12.9rem;
        opacity: 1;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        width: 13rem;
        background-color: var(--color_White);
    }
}

.KoL,
.jsKoL {
    display: flex;
    position: absolute;
    top: 3.5rem;
    left: 15.5rem;
    width: 1px;
    height: 0.8rem; /*0.8rem*/
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKoL {
    animation: AnKoL 675ms linear 400ms 1 forwards;
}

@keyframes AnKoL {
    0% {
        opacity: 1;
        background-color: transparent;
    }

    35% {
        opacity: 1;
        background-color: var(--color_White);
    }

    40% {
        opacity: 1;
        height: 0.8rem;
        background-color: var(--color_White);
    }

    67% {
        opacity: 1;
        height: 0.8rem;
        background-color: var(--color_White);
    }

    100% {
        opacity: 0.25;
        height: 0.8rem;
        background-color: var(--color_White);
    }
}

.h4Kontakt {
    visibility: hidden;
    color: var(--color_White);
    left: 13.8rem;
}

.jsH4Kontakt {
    position: absolute;
    left: 13.8rem;
    visibility: hidden;
    color: var(--color_White) !important;
    animation-name: AnKoH4;
    animation-delay: 1s;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes AnKoH4 {
    0% {
        top: 1.3rem;
        visibility: visible;
        transform: scale(0);
    }

    100% {
        top: 1.3rem;
        transform: scale(2);
        visibility: visible;
    }
}
/* kvadrat  */
.divKvadrat,
.jsDivKvadrat {
    display: flex;
    position: absolute;
    top: 0.7rem;
    left: 14.2rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color_Brown);
    transform: rotate(0deg);
}

.KvL1,
.jsKvL1 {
    display: flex;
    position: absolute;
    top: 0.2rem;
    left: 15.5rem;
    width: 1.25rem; /* 1.25rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(0deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKvL1 {
    animation: AnKvL1 730ms linear 300ms 1 forwards;
}

@keyframes AnKvL1 {
    0% {
        background-color: var(--color_White);
        width: 0rem;
    }

    45% {
        background-color: var(--color_White);
        width: 1.2rem;
        opacity: 1;
    }

    100% {
        opacity: 0.25;
        background-color: var(--color_White);
        width: 1.2rem;
    }
}

.KvD1,
.jsKvD1 {
    display: flex;
    position: absolute;
    top: 0.3rem;
    left: 15.5rem;
    width: 1.3rem; /* 1.25rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKvD1 {
    animation: AnKvD1 730ms linear 300ms 1 forwards;
}

@keyframes AnKvD1 {
    0% {
        background-color: var(--color_White);
        width: 0rem;
    }

    45% {
        background-color: var(--color_White);
        width: 1.3rem;
        opacity: 1;
    }

    100% {
        opacity: 0.25;
        background-color: var(--color_White);
        width: 1.2rem;
    }
}

.KvL2,
.jsKvL2 {
    display: flex;
    position: absolute;
    top: 0.25rem;
    left: 16.75rem;
    width: 2.4rem; /* 1.25rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(90deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKvL2 {
    animation: AnKvL2 668ms linear 532ms 1 forwards;
}

@keyframes AnKvL2 {
    0% {
        width: 0rem;
    }

    40% {
        background-color: var(--color_White);
        width: 2.5rem;
        opacity: 1;
    }

    100% {
        opacity: 0.25;
        width: 2.5rem;
        background-color: var(--color_White);
    }
}

.KvD2,
.jsKvD2 {
    display: flex;
    position: absolute;
    top: 0.25rem;
    left: 14.3rem;
    width: 2.4rem; /* 1.25rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(90deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKvD2 {
    animation: AnKvD2 668ms linear 532ms 1 forwards;
}

@keyframes AnKvD2 {
    0% {
        width: 0rem;
    }

    40% {
        background-color: var(--color_White);
        width: 2.4rem;
        opacity: 1;
    }

    100% {
        opacity: 0.25;
        width: 2.4rem;
        background-color: var(--color_White);
    }
}

.KvL3,
.jsKvL3 {
    display: flex;
    position: absolute;
    top: 2.7rem;
    left: 16.7rem;
    width: 1.25rem; /* 1.25rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(180deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKvL3 {
    animation: AnKvL3 568ms linear 780ms 1 forwards;
}

@keyframes AnKvL3 {
    0% {
        background-color: var(--color_White);
        width: 0rem;
    }

    30% {
        background-color: var(--color_White);
        width: 1.25rem;
        opacity: 1;
    }

    100% {
        opacity: 0.25;
        background-color: var(--color_White);
        width: 1.25rem;
    }
}

.KvD3,
.jsKvD3 {
    display: flex;
    position: absolute;
    top: 2.6rem;
    left: 14.2rem;
    width: 1.25rem; /* 1.25rem*/
    height: 1px;
    transform-origin: top left;
    transform: rotate(0deg);
    background-color: transparent;
    border: 1px solid transparent;
}

.jsKvD3 {
    animation: AnKvD3 568ms linear 780ms 1 forwards;
}

@keyframes AnKvD3 {
    0% {
        background-color: var(--color_White);
        width: 0rem;
    }

    30% {
        background-color: var(--color_White);
        width: 1.45rem;
        opacity: 1;
    }

    100% {
        opacity: 0.25;
        background-color: var(--color_White);
        width: 1.45rem;
    }
}
/* Krog */
.divKrog {
    display: flex;
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    width: 1rem;
    border-radius: 50%;
    height: 1rem;
    border: 1px solid transparent;
}

.jsDivKrog {
    display: flex;
    position: absolute;
    top: 1.45rem;
    left: 15.0rem;
    width: 1rem;
    border-radius: 50%;
    height: 1rem;
    border: 1px solid transparent;
    animation-name: AnKrog;
    animation-duration: 450ms;
    animation-delay: 750ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes AnKrog {
    0% {
        border: 0px solid white;
    }

    3% {
        border-bottom: 1px solid white;
    }

    5% {
        border-bottom: 2px solid white;
        border-left: 1px solid white;
        border-right: 1px solid white;
    }

    7% {
        border-bottom: 2px solid white;
        border-left: 2px solid white;
        border-right: 2px solid white;
        border-top: 2px solid white;
    }

    9% {
        border-bottom: 1px solid white;
    }

    11% {
        opacity: 1;
        border: px solid white;
    }

    100% {
        opacity: 0.2;
        border: 2px solid white;
    }
}