/*^-- Button section CSS*/

.button{
    width: 100% fixed;
    height: 100% fixed;
    align-content: center;
    align-items: center;
    text-align: center;
    margin-top: 89svh;
    position: absolute;
    z-index: 999;
    left: 46%;
}
.button button{
    background-color: transparent;
    cursor: pointer;
    border: none;
}
.item {
    display: block;
    margin-left: auto;
    margin-right: auto;
    animation: 1s ease-in-out 0s infinite bounce;
}

/*^-- Animation and media section CSS*/

@keyframes menuOpen{
    0%{
        height: 0;
    }
    100%{
        height: 50svh;
    }
}

@keyframes secFade{
    17%{
        opacity: 1;
    }
    18%{
        transform: translateX(0%);
        opacity: 0;
    }
    19%{
        transform: translateY(-100%);
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    37%{
        opacity: 1;
    }
    38%{
        transform: translateY(-100%);
        opacity: 0;
    }
    39%{
        transform: translateY(-200%);
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
    57%{
        opacity: 1;
    }
    58%{
        transform: translateY(-200%);
        opacity: 0;
    }
    59%{
        transform: translateY(-300%);
        opacity: 0;
    }
    60%{
        opacity: 1;
    }
    77%{
        opacity: 1;
    }
    78%{
        transform: translateY(-300%);
        opacity: 0;
    }
    79%{
        transform: translateY(-400%);
        opacity: 0;
    }
    80%{
        opacity: 1;
    }
    97%{
        opacity: 1;
    }
    98%{
        transform: translateY(-400%);
        opacity: 0;
    }
    99%{
        transform: translateY(0%);
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes slideR{
    0%{
        opacity: 1;
    }
    19%{
        opacity: 1;
    }
    20%{
        transform: translateX(0rem);
    }
    21%{
        opacity: 0;
    }
    29%{
        opacity: 0;
    }
    30%{
        transform: translateX(-82.2rem);
    }
    31%{
        opacity: 1;
    }
    49%{
        opacity: 1;
    }
    50%{
        transform: translateX(-82.2rem);
    }
    51%{
        opacity: 0;
    }
    59%{
        opacity: 0;
    }
    60%{
        transform: translateX(-164rem);
    }
    61%{
        opacity: 1;
    }
    89%{
        opacity: 1;
    }
    90%{
        transform: translateX(-164rem);
    }
    91%{
        opacity: 0;
    }
    99%{
        opacity: 0;
    }
    100%{
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes slideM{
    0%{
        opacity: 1;
    }
    19%{
        opacity: 1;
    }
    20%{
        transform: translateX(0svw);
    }
    21%{
        opacity: 0;
    }
    29%{
        opacity: 0;
    }
    30%{
        transform: translateX(-77svw);
    }
    31%{
        opacity: 1;
    }
    49%{
        opacity: 1;
    }
    50%{
        transform: translateX(-77svw);
    }
    51%{
        opacity: 0;
    }
    59%{
        opacity: 0;
    }
    60%{
        transform: translateX(-157svw);
    }
    61%{
        opacity: 1;
    }
    89%{
        opacity: 1;
    }
    90%{
        transform: translateX(-157svw);
    }
    91%{
        opacity: 0;
    }
    99%{
        opacity: 0;
    }
    100%{
        transform: translateX(0svw);
        opacity: 1;
    }
}

@keyframes scrollLeftPoster{
    19%{
        transform: translateX(0rem);
    }
    20%{
        transform: translateX(-23.37rem);
    }
    39%{
        transform: translateX(-23.37rem);
    }
    40%{
        transform: translateX(-46.62rem);
    }
    59%{
        transform: translateX(-46.62rem);
    }
    60%{
        transform: translateX(-69.89rem);
    }
    79%{
        transform: translateX(-69.89rem);
    }
    80%{
        transform: translateX(-93.3rem);
    }
    99%{
        transform: translateX(-93.3rem);
    }
    100%{
        transform: translateX(0rem);
    }
}
@keyframes scrollLeft{
    to{
        left: -8rem;
    }
}
@keyframes scrollRight{
    to{
        left: 100%;
    }
}
@keyframes fadeImg{
    0%{
        opacity: 1;
    }
    20%{
        opacity: 1;
    }
    40%{
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadeDesc{
    100%{
        opacity: 0;
    }
}
@keyframes fade{
    0%{
        opacity: 0;
        transform: translateX(-30rem);
    }
    100%{
        opacity: 1;
        transform: translateX(0rem);
    }
}
@font-face {
    font-family: abadi-mt-std;
    src: url('/content/fonts/abadi-mt-std/abadi-mt-std.otf');
}
@keyframes popUp{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0%);
    }
}