/*::-webkit-scrollbar {*/
/*    width: 12px;*/
/*}*/

/*::-webkit-scrollbar-track {*/
/*    background: transparent;*/
/*    border-radius: 10px;*/
/*}*/

/*::-webkit-scrollbar-thumb {*/
/*    background: #1e1e1e;*/
/*}*/

/*::-webkit-scrollbar-thumb:hover {*/
/*    background: #1e1e1e;*/
/*}*/

.special-logo ul{
    position: relative;
}

#faceText {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
}

.special-logo li{
    list-style: none;
    float: left;
    color: transparent;
    font-family: "Arial black";
    font-size: 6em;
    position: relative;
}

.special-logo-sm li{
    font-size: 3.5em !important;
}

.special-logo ul li:before,
.special-logo ul li:after{
    content: attr(data-title);
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.special-logo .dark-logo li:before,
.special-logo .dark-logo li:after{
    content: attr(data-title);
    color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.special-logo ul li:nth-child(odd):before{
    -webkit-clip-path:polygon(55% 0, 0 0, 0 100%, 35% 100%);
    clip-path:polygon(55% 0, 0 0, 0 100%, 35% 100%);
    top: -7px;
    left: -2px;
}

.special-logo ul li:nth-child(odd):after{
    -webkit-clip-path:polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
    clip-path:polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
    top: 2px;
    left: 2px;
}

.special-logo ul li:nth-child(even):before{
    -webkit-clip-path:polygon(25% 0, 0 0, 0 100%, 75% 100%);
    clip-path:polygon(25% 0, 0 0, 0 100%, 75% 100%);
    top: 10px;
    left: -2px;
}

.special-logo ul li:nth-child(even):after{
    -webkit-clip-path:polygon(25% 0, 100% 0, 100% 100%, 75% 100%);
    clip-path:polygon(25% 0, 100% 0, 100% 100%, 75% 100%);
    top: 2px;
    left: 2px;
}

.special-logo ul li:nth-child(even){
    animation: even 3s linear infinite;
}

.special-logo ul li:nth-child(odd){
    animation: odd 3s linear infinite;
}

.bubbles {
    z-index: -1;
    rotate: 17deg;
    position: absolute !important;
    padding-top: 60px;
    top: 0;
    left: 0;
    right: 0;
    height: 2rem;
    background: transparent;
    filter: url("#blob");
}
.bubbles .bubble {
    position: absolute;
    left: var(--position, 50%);
    background: white;
    border-radius: 50px;
    -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
    animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
    transform: translate(50%, 50%);
}

@keyframes even{
    0%{
        transform: rotate(5deg);
    }
    25%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(-5deg);
    }
    75%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(5deg);
    }
}

@keyframes odd{
    0%{
        transform: rotate(-5deg);
    }
    25%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(5deg);
    }
    75%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-5deg);
    }
}

@-webkit-keyframes bubble-size {
    0%, 75% {
        width: var(--size, 4rem);
        height: var(--size, 4rem);
    }
    100% {
        width: 0rem;
        height: 0rem;
    }
}

@keyframes bubble-size {
    0%, 75% {
        width: var(--size, 4rem);
        height: var(--size, 4rem);
    }
    100% {
        width: 0rem;
        height: 0rem;
    }
}
@-webkit-keyframes bubble-move {
    0% {
        bottom: -4rem;
    }
    100% {
        bottom: var(--distance, 10rem);
    }
}
@keyframes bubble-move {
    0% {
        bottom: -4rem;
    }
    100% {
        bottom: var(--distance, 10rem);
    }
}

.slide-left {
    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-left-back {
    -webkit-animation: slide-left-back 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left-back 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-12-17 5:5:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-85vw);
        transform: translateX(-85vw);
    }
}
@keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-85vw);
        transform: translateX(-85vw);
    }
}

@-webkit-keyframes slide-left-back {
    0% {
        -webkit-transform: translateX(-85vw);
        transform: translateX(-85vw);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slide-left-back {
    0% {
        -webkit-transform: translateX(-85vw);
        transform: translateX(-85vw);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}