.sAboutContaner {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(244, 247, 245, 1.0);
    opacity: 0;
    cursor: pointer;
}

.sLogoContaner {
    display: block;
    position: absolute;
    float: none;
    width: 500px;
    height: 548.78px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    left: calc(50% - 250px);
    top: calc(50% - 548.78px / 2);
    transform-origin: top center;
    transform: scale(1.0, 1.0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: sAnimContaner 0.5s ease-out 1.5s 1 forwards;
    pointer-events: auto;
    cursor: pointer;
}

    .sLogoContaner .sLaurel,
    .sLogoContaner .sCopyCenter,
    .sLogoContaner .sPodium,
    .sLogoContaner .sColumnLeft,
    .sLogoContaner .sColumnCenter,
    .sLogoContaner .sColumnRight,
    .sLogoContaner .sRoof,
    .sLogoContaner .sRing,
    .sLogoContaner .sTopText,
    .sLogoContaner .sAbout {
        display: block;
        float: none;
        position: absolute;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform-origin: bottom center;
        background-size:contain;
        background-position: center center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .sLogoContaner .sBlue,
    .sLogoContaner .sMagenta,
    .sLogoContaner .sYellow {
        transform-origin: center center;
        display: block;
        float: none;
        position: absolute;
        width: 53.1px;
        height: 5.39px;
        bottom: 178.94px;
        border-radius: calc(5.39px / 2);
        transform-origin: center center;
        transform: perspective(50rem) rotateY(90deg);
        animation: sAnimColor 0.5s ease-out 0.75s 1 forwards;
    }
    .sLogoContaner .sBlue {
        left: 141.08px;
        background-color:rgba(0, 160, 227, 1.0);
    }
    .sLogoContaner .sMagenta {
        left: 225.7px;
        background-color: rgba(229, 9, 127, 1.0);
    }
    .sLogoContaner .sYellow {
        left: 310.32px;
        background-color: rgba(255, 237, 0, 1.0);
    }

    .sLogoContaner .sAbout {
        width: 195.44px;
        height: 33.86px;
        bottom: -70px;
        left: 152.28px;
        opacity: 0;
        background-image: url('Logo/sAbout.svg');
        transform-origin: top center;
        transform: scale(0.8, 0.8);
        animation: sAnimView 0.5s ease-out 2.0s 1 forwards;
    }
    .sLogoContaner:hover > .sLogoContaner .sAbout {
        border: 1px solid red;

    }
    .sLogoContaner .sLaurel {
        width: 500px;
        height: 344.82px;
        bottom: 0px;
        left: 0px;
        background-image: url('Logo/sLaurel.svg');
        transform-origin: bottom center;
        transform: perspective(5rem) rotateX(90deg);
        animation: sAnimLaurel 0.5s ease-out 0.0s 1 forwards;
    }
    .sLogoContaner .sCopyCenter {
        width: 247.73px;
        height: 48.61px;
        bottom: 96.22px;
        left: 128.39px;
        background-image: url('Logo/sCopyCenter.svg');
        transform-origin: center center;
        transform: perspective(50rem) rotateY(90deg);
        animation: sAnimCopyCenter 0.5s ease-out 0.5s 1 forwards;
    }
    .sLogoContaner .sPodium {
        width: 272.38px;
        height: 21.84px;
        bottom: 170.71px;
        left: 116.06px;
        background-image: url('Logo/sPodium.svg');
        transform-origin: center center;
        transform: perspective(5rem) rotateX(90deg);
        animation: sAnimPodium 0.5s ease-out 0.5s 1 forwards;
    }
    .sLogoContaner .sRoof {
        width: 272.38px;
        height: 100.06px;
        top: 79.19px;
        left: 115.8px;
        background-image: url('Logo/sRoof.svg');
        transform-origin: bottom center;
        transform: perspective(5rem) rotateX(90deg);
        animation: sAnimLaurel 0.5s ease-out 0.5s 1 forwards;
    }
    .sLogoContaner .sRing {
        width: 63.83px;
        height: 63.83px;
        top: 103.92px;
        left: 220.34px;
        background-image: url('Logo/sRing.svg');
        transform-origin: center center;
        transform: perspective(50rem) rotateY(90deg);
        animation: sAnimCopyCenter 0.25s ease-out 0.75s 1 forwards;
    }
    .sLogoContaner .sTopText {
        width: 459.21px;
        height: 172.81px;
        top: 0px;
        left: 22.65px;
        opacity: 0;
        background-image: url('Logo/sTopText.svg');
        transform-origin: 50% 274.39px;
        transform: perspective(50rem) rotateZ(-30deg);
        animation: sAnimTopText 0.75s ease-out 0.25s 1 forwards;
    }

    .sLogoContaner .sColumnLeft,
    .sLogoContaner .sColumnCenter,
    .sLogoContaner .sColumnRight {
        width: 65.21px;
        height: 169.75px;
        bottom: 196.16px;
        left: 219.65px;
        background-image: url('Logo/sColumn.svg');
        transform-origin: center center;
    }
    .sLogoContaner .sColumnLeft {
        opacity:0;
        transform: perspective(10rem) rotateY(90deg) translateX(84.48px);
        animation: sAnimColumnLeft 0.75s ease-out 0.5s 1 forwards;
    }
    .sLogoContaner .sColumnCenter {
        transform: perspective(10rem) rotateY(90deg) translateX(0px);
        animation: sAnimColumnCenter 0.75s ease-out 0.5s 1 forwards;
    }
    .sLogoContaner .sColumnRight {
        opacity: 0;
        transform: perspective(10rem) rotateY(90deg) translateX(-84.48px);
        animation: sAnimColumnRight 0.75s ease-out 0.5s 1 forwards;
    }


@keyframes sAnimView {
    0% {
        opacity: 0;
    }


    100% {
        opacity: 1;
    }
}
@keyframes sAnimTopText {
    0% {
        transform: perspective(50rem) rotateZ(-30deg);
        opacity: 0;
    }


    100% {
        transform: perspective(50rem) rotateZ(-0deg);
        opacity: 1;
    }
}
@keyframes sAnimColor {
    0% {
        transform: perspective(50rem) rotateY(90deg);
    }


    100% {
        transform: perspective(50rem) rotateY(0deg);
    }
}
@keyframes sAnimPodium {
    0% {
        transform: perspective(5rem) rotateX(90deg);
    }


    100% {
        transform: perspective(5rem) rotateX(0deg);
    }
}
@keyframes sAnimLaurel {
    0% {
        transform: perspective(5rem) rotateX(90deg);
    }


    100% {
        transform: perspective(5rem) rotateX(0deg);
    }
}
@keyframes sAnimCopyCenter {
    0% {
        transform: perspective(10rem) rotateY(90deg);
    }


    100% {
        transform: perspective(10rem) rotateY(0deg);
    }
}
@keyframes sAnimColumnCenter {
    0% {
        transform: perspective(10rem) rotateY(90deg);
    }

    50% {
        transform: perspective(10rem) rotateY(0deg);
    }

    100% {
        transform: perspective(10rem) rotateY(0deg);
    }
}
@keyframes sAnimColumnLeft {
    0% {
        transform: perspective(10rem) rotateY(90deg) translateX(0px);
        opacity: 0;
    }

    50% {
        transform: perspective(10rem) rotateY(0deg) translateX(0px);
        opacity: 0;
    }

    100% {
        transform: perspective(10rem) rotateY(0deg) translateX(-84.48px);
        opacity: 1;
    }
}
@keyframes sAnimColumnRight {
    0% {
        transform: perspective(10rem) rotateY(90deg) translateX(0px);
        opacity: 0;
    }

    50% {
        transform: perspective(10rem) rotateY(0deg) translateX(0px);
        opacity: 0;
    }

    100% {
        transform: perspective(10rem) rotateY(0deg) translateX(84.48px);
        opacity: 1;
    }
}
@keyframes sAnimContaner {
    0% {
        transform: scale(1.0, 1.0);
        left: calc(50% - 250px);
        top: calc(50% - 548.78px / 2);
    }

    100% {
        transform: scale(0.31, 0.31);
        left: calc((100% - 960px) / 2 - (500px / 2) * (1 - 0.31));
        top: 0.6rem;
    }
}
@keyframes sAnimContanerReverse {   
    0% {
        transform: scale(0.31, 0.31);
        left: calc((100% - 960px) / 2 - (500px / 2) * (1 - 0.31));
        top: 0.6rem;
    }
    100% {
        transform: scale(1.0, 1.0);
        left: calc(50% - 250px);
        top: calc(50% - 548.78px / 2);
    }
}