:root {
    --main-color-rgb: 219, 166, 128;
    --secondary-color-rgb: 0, 156, 134;
}

.cursor-pointer {
    cursor: pointer !important;
}

.w-content {
    width: fit-content !important;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.list-style-none {
    list-style: none;
}

ul.list-style-alphabet {
    list-style-type: none;
    counter-reset: letter-counter;
}

ul.list-style-alphabet[data-suffix] > li {
    counter-increment: letter-counter;
}

ul.list-style-alphabet[data-suffix=")"] > li::before {
    content: counter(letter-counter, lower-alpha) ") ";
    font-weight: bold;
}

ul.list-style-alphabet[data-suffix="."] > li::before {
    content: counter(letter-counter, lower-alpha) ". ";
    font-weight: bold;
}

ul.list-style-check,
ul.list-style-arrow,
ul.list-style-square,
ul.list-style-chev {
    list-style: none;
    padding: 0;
}

ul.list-style-check li::before,
ul.list-style-arrow li::before,
ul.list-style-square li::before,
ul.list-style-chev li::before {
    font-family: FontAwesome, serif;
    margin-right: .5rem;
    font-weight: 900;
}

ul.list-style-check li::before {
    content: '\f00c';
}

ul.list-style-arrow li::before {
    content: '\f30b';
}

ul.list-style-square li::before {
    content: '\f0c8';
}

ul.list-style-chev li::before {
    content: '\f054';
}

@keyframes rightLeftShake {
    0% {
        transform: translatex(0);
    }
    100% {
        transform: translatex(5px);
    }
}

@keyframes upDownShake {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}


/* -------------------- ANIMACIO START -------------------- */
.slideFromLeft, .slideFromRight, .slideFromUp, .slideFromDown {
    opacity: 0;
    transition: all 0.8s ease;
    will-change: transform, opacity;
}

.slideFromLeft {
    transform: translateX(-150px);
}

.slideFromRight {
    transform: translateX(150px);
}

.slideFromUp {
    transform: translateY(-150px);
}

.slideFromDown {
    transform: translateY(150px);
}

.slideFromLeft.visible,
.slideFromRight.visible {
    opacity: 1;
    transform: translateX(0);
}

.slideFromUp.visible,
.slideFromDown.visible {
    opacity: 1;
    transform: translateY(0);
}

.fadeFromBehind {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease;
    will-change: transform, opacity;
}

.fadeFromBehind.visible {
    opacity: 1;
    transform: scale(1);
}

.rotateFromFade {
    opacity: 0;
    transform: rotate(180deg) scale(0.8);
    transition: all 0.8s ease;
    will-change: transform, opacity;
}

.rotateFromFade.visible {
    transform: scale(1) translateY(0);
    animation: spin 1.5s forwards;
}

@keyframes spin {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(360deg);
    }
}

/* -------------------- ANIMACIO END -------------------- */