.sGenesisAllContaner {
    display: block;
    position: relative;
    float: none;
    margin: 0.25rem auto 0.5rem auto;
    border: 0px;
    width: 26rem;
    height: 5.5rem;
    transform-origin: top center;
    transition: all ease-out 0.5s;
    cursor: pointer;
    pointer-events: auto;
    animation: sLogoAnimGenesisAll 0.5s ease-out 1.9s 1 forwards;
    transform: scale(1.5, 1.5);
}

.sGenesisLabelContaner {
    display: block;
    position: absolute;
    top: 1.5rem;
    left: 6rem;
    width: 28rem;
    height: 6rem;
    transform-origin: top left;
    transform: scale(1.0, 1.0);
    transition: all ease-in-out 0.5s;
    overflow: hidden;
    animation: sLogoAnimGenesisLabel 0.5s ease-out 1.9s 1 forwards;
}

.sGenesisBottomStickerText {
    display: block;
    position: absolute;
    left: 6.8rem;
    top: 5.8rem;
    width: 17rem;
    height: 1.4rem;
    border-radius: 0.25rem;
    background-color: rgba(204, 0, 0, 0.0);
    color: rgba(64, 64, 64, 1.0);
    font-size: 1.1em;
    line-height: 1.4rem;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform-style: flat;
    font-weight: 400;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: center center;
    border-top: 0.05rem solid rgba(180, 180, 180, 1.0);
    transition: all 0.25s ease-out;
    letter-spacing: 0.3rem;
    animation: sLogoAnimBottomText 0.5s ease-out 2.25s 1 forwards;
}

.sGenesisBox, .sGenesisBoxPink, .sGenesisBoxBlue,
.sGenesisBoxBlueRight, .sGenesisBoxTrinity,
.sGenesisBoxWhite, .sGenesisBoxWhiteTrinity,
.sGenesisBoxWhiteSimbol,
.sGenesisSimbol_G, .sGenesisSimbol_E,
.sGenesisSimbol_N, .sGenesisSimbol_E2,
.sGenesisSimbol_S, .sGenesisSimbol_I,
.sGenesisSimbol_S2, .sGenesisBottomText
{
    display: block;
    position: absolute;
    border: 0px;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform-style: flat;
    pointer-events: none;
}

.sGenesisBottomText {
    top: 4.2rem;
    left: calc((4rem * 0.29) * 1);
    height: 2rem;
    width: 26.5rem;
    background-image: url('/Content/Images/Design/Logo/home-collection.svg');
    opacity: 1;
    transform: rotateX(90deg);
    animation: sLogoAnimBottomText 0.5s ease-out 1.5s 1 forwards;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.sGenesisSimbol_G {
    top: 0rem;
    left: calc((4rem * 0.29) * 1);
    height: 4rem;
    width: calc(4rem / 1.41);
    background-image: url('/Content/Images/Design/Logo/G.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.25s 1 forwards;
    pointer-events: none;
}

.sGenesisSimbol_E {
    top: 0rem;
    left: calc((4rem / 1.41) + (4rem * 0.29) * 2 );
    height: 4rem;
    width: calc(4rem / 1.41);
    background-image: url('/Content/Images/Design/Logo/E.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.3s 1 forwards;
    pointer-events: none;
}

.sGenesisSimbol_N {
    top: 0rem;
    left: calc((4rem / 1.41) * 2 + (4rem * 0.29) * 3 );
    height: 4rem;
    width: calc(4rem / 1.41);
    background-image: url('/Content/Images/Design/Logo/N.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.35s 1 forwards;
    pointer-events: none;
}

.sGenesisSimbol_E2 {
    top: 0rem;
    left: calc((4rem / 1.41) * 3 + (4rem * 0.29) * 4 );
    height: 4rem;
    width: calc(4rem / 1.41);
    background-image: url('/Content/Images/Design/Logo/E2.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.4s 1 forwards;
    pointer-events: none;
}

.sGenesisSimbol_S {
    top: 0rem;
    left: calc((4rem / 1.41) * 4 + (4rem * 0.29) * 5 );
    height: 4rem;
    width: calc(4rem / 1.41);
    background-image: url('/Content/Images/Design/Logo/S.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.45s 1 forwards;
    pointer-events: none;
}

.sGenesisSimbol_I {
    top: 0rem;
    left: calc((4rem / 1.41) * 5 + (4rem * 0.29) * 6 );
    height: 4rem;
    width: calc(4rem / 1.6);
    background-image: url('/Content/Images/Design/Logo/I.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.5s 1 forwards;
    pointer-events: none;
}

.sGenesisSimbol_S2 {
    top: 0rem;
    left: calc((4rem / 1.6) + (4rem / 1.41) * 5 + (4rem * 0.29) * 7 );
    height: 4rem;
    width: calc(4rem / 1.41);
    background-image: url('/Content/Images/Design/Logo/S2.svg');
    opacity: 0;
    animation: sLogoAnimSimbols 0.25s ease-out 1.55s 1 forwards;
    pointer-events: none;
}

.sGenesisBox {
    position: absolute;
    top: 0rem;
    left: 5rem;
    height: 15rem;
    width: 15rem;
    background-image: url('/Content/Images/Design/Logo/Yellow.svg');
    transform-origin: center center;
    /*animation: sLogoAnimYellow 0.5s ease-out 0.0s 1 forwards;*/
    animation: sLogoAnimBox 0.5s ease-out 1.25s 1 forwards;
    opacity: 1;
    overflow: hidden;
    clip: rect(0%, 0%, 100%, 100%);
    pointer-events: none;
}

.sGenesisBoxPink {
    left: 0%;
    bottom: 0%;
    position: absolute;
    height: calc(15rem / 1.135);
    width: 15rem;
    background-image: url('/Content/Images/Design/Logo/Pink.svg');
    transform-origin: center center;
    opacity: 0;
    animation: sLogoAnimPink 0.5s ease-out 0.0s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxBlue, .sGenesisBoxBlueRight {
    left: calc(15rem * 0.067);
    top: calc(15rem * 0.047);
    position: absolute;
    height: calc(15rem * 0.587);
    width: 50%;
    background-image: url('/Content/Images/Design/Logo/Blue.svg');
    background-position: left top;
    transform-origin: left center;
    opacity: 1;
    animation: sLogoAnimBlue 0.5s ease-out 0.25s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxBlueRight {
    left: auto;
    right: calc(15rem * 0.067);
    background-position: right top;
    transform-origin: right center;
    background-repeat: no-repeat;
    background-image: url('/Content/Images/Design/Logo/BlueRight.svg');
    opacity: 1;
    animation: sLogoAnimBlue 0.5s ease-out 0.25s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite, .sGenesisBoxWhite60 {
    left: calc(15rem / 2 - (15rem / 3.464086915699819 / 2));
    top: auto;
    /*top: calc(15rem / 2 - (15rem / 3.464086915699819 / 2));*/
    bottom: calc(-15rem / 2);
    /*top: calc(15rem / 2);*/
    position: absolute;
    width: calc(15rem / 3.464086915699819);
    /*height: calc(15rem / 3.464086915699819);*/
    height: calc(15rem / 2);
    transform-origin: center 0rem;
    opacity: 1;
    border: 0px solid red;
    transform: translateY(-7.5rem) rotate(0deg);
    /*animation: sLogoAnimPink 0.5s ease-out 0.0s 1 forwards;*/
    pointer-events: none;
}

.sGenesisBoxWhiteSimbol {
    display: block;
    position: absolute;
    background-image: url('/Content/Images/Design/Logo/WhiteSimbol.svg');
    animation: sLogoAnimWhiteSimbol 0.25s ease-out 0.75s 1 forwards;
    pointer-events: none;
    width: 2.25rem;
    height: 2.25rem;
    top: 6.375rem;
    left: 6.375rem;
    background-size: 100% 100%;
}

.sGenesisBoxWhiteTrinity {
    left: 0rem;
    top: 0rem;
    width: calc(15rem / 3.464086915699819);
    height: calc(15rem / 3.464086915699819 / 1.154650928844477);
    transform-origin: center center;
    background-image: url('/Content/Images/Design/Logo/WhiteTrinity.svg');
    opacity: 0;
    border: 0px solid red;
    animation: sLogoAnimWhiteTrinity 0.25s ease-out 0.75s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite0, .sGenesisBoxWhite60,
.sGenesisBoxWhite120, .sGenesisBoxWhite180,
.sGenesisBoxWhite240, .sGenesisBoxWhite300
{    display: block;
    position: absolute;
    left: calc(15rem / 2 - (15rem / 3.464086915699819 / 2));
    top: 0rem;
    /*bottom: 0rem;*/
    position: absolute;
    width: calc(15rem / 3.464086915699819);
    height: calc(15rem / 2);
    transform-origin: center bottom;
    opacity: 1;
    border: 0px solid red;
    transform: rotate(0deg);
    animation: sLogoAnimWhite0 0.5s ease-out 1.0s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite60 {
    transform: rotate(60deg);
    animation: sLogoAnimWhite60 0.5s ease-out 1.0s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite120 {
    transform: rotate(120deg);
    animation: sLogoAnimWhite120 0.5s ease-out 1.0s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite180 {
    transform: rotate(180deg);
    animation: sLogoAnimWhite180 0.5s ease-out 1.0s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite240 {
    transform: rotate(240deg);
    animation: sLogoAnimWhite240 0.5s ease-out 1.0s 1 forwards;
    pointer-events: none;
}

.sGenesisBoxWhite300 {
    transform: rotate(300deg);
    animation: sLogoAnimWhite300 0.5s ease-out 1.0s 1 forwards;
    pointer-events: none;
}

@keyframes sBottomStickerTextAnim {
    0% {
        border-radius: 50%;
        opacity: 0;
        transform: scale(2.0, 0.25);
        filter: blur(0.4rem);
        background-color: rgba(204, 0, 0, 1.0);
        border-top: 0.05rem solid rgba(180, 180, 180, 0.0);
        top: 6.7rem;
    }

    20% {
        border-radius: 0.25rem;
        opacity: 1.0;
        transform: scale(1.0, 1.0);
        filter: blur(0.0rem);
        background-color: rgba(204, 0, 0, 1.0);
        border-top: 0.05rem solid rgba(180, 180, 180, 0.0);
        top: 6.7rem;
    }

    70% {
        border-radius: 0.25rem;
        opacity: 1.0;
        transform: scale(1.0, 1.0);
        filter: blur(0.0rem);
        background-color: rgba(204, 0, 0, 1.0);
        border-top: 0.05rem solid rgba(180, 180, 180, 0.0);
        color: rgba(255, 255, 255, 1.0);
        top: 6.7rem;
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 1.2rem;
        text-align: center;
    }

    100% {
        border-radius: 0.0rem;
        opacity: 1.0;
        transform: scale(1.0, 1.0);
        filter: blur(0.0rem);
        background-color: rgba(204, 0, 0, 0.0);
        border-top: 0.05rem solid rgba(180, 180, 180, 1.0);
        color: rgba(64, 64, 64, 1.0);
        font-size: 1.0rem;
        line-height: 1.5rem;
        font-weight: 400;
        top: 6.7rem;
        text-align: right;
    }
}

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

    100% {
        opacity: 1.0;
    }
}
@keyframes sMenuBttonAllAnimReverse {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

    100% {
        opacity: 0.25;
    }
}

@keyframes sLogoAnimGenesisAll {
    0% {
        transform: scale(1.5,1.5);
    }

    100% {
        transform: scale(0.85, 0.85);
        /*transform: scale(2.2, 2.2);*/
    }
}

@keyframes sLogoAnimGenesisLabel {
    0% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(0.65, 0.65);
    }
}

@keyframes sLogoAnimBottomText {
    0% {
        transform: rotateX(90deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimSimbols {
    0% {
        transform: rotateY(90deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimBox {
    0% {
        transform: translateX(0rem) scale(1, 1);
    }

    100% {
        transform: translateX(-9.5rem) translateY(-4rem) scale(0.4, 0.4);
    }
}

@keyframes sLogoAnimYellow {
    0% {
        transform: translateY(-25%) rotate(-120deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0%) rotate(0deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimPink {
    0% {
        transform: rotate(60deg) translateY(-25%);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg) translateY(0%);
        opacity: 1;
    }
}

@keyframes sLogoAnimBlue {
    0% {
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }

    100% {
        transform: rotate3d(0, 1, 0, 0deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhite0 {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: rotate(60deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhite60 {
    0% {
        transform: rotate(60deg);
        opacity: 1;
    }

    100% {
        transform: rotate(120deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhite120 {
    0% {
        transform: rotate(120deg);
        opacity: 1;
    }

    100% {
        transform: rotate(180deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhite180 {
    0% {
        transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: rotate(240deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhite240 {
    0% {
        transform: rotate(240deg);
        opacity: 1;
    }

    100% {
        transform: rotate(300deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhite300 {
    0% {
        transform: rotate(300deg);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhiteTrinity {
    0% {
        transform: rotate(240deg) scale(0.75, 0.75);
        opacity: 0;
    }

    100% {
        transform: rotate(360deg) scale(1.0, 1.0);
        opacity: 1;
    }
}

@keyframes sLogoAnimWhiteSimbol {
    0% {
        background-size: 100% 100%;
        width: 2.25rem;
        height: 2.25rem;
        top: 6.375rem;
        left: 6.375rem;
        opacity: 0;
    }

    100% {
        width: 4.5rem;
        height: 4.5rem;
        top: 5.25rem;
        left: 5.25rem;
        background-size: 100% 100%;
        opacity: 1;
    }
}



/*STATIC*/
.sGenesisAllContaner {
    transform: scale(0.8, 0.8);
    animation:none;
}
.sGenesisLabelContaner {
    animation: none;
    transform: scale(0.7, 0.7);
}
.sGenesisBottomStickerText {
    border-radius: 0.0rem;
    opacity: 1.0;
    transform: scale(1.1, 1.1) rotateX(0deg);
    font-size: 0.85em;
    line-height: 1.4rem;
    transform-origin: left top;
    font-weight: 600;
}

.sGenesisBottomText {
    animation: sLogoAnimBottomText 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_G {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_E {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_N {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_E2 {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_S {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_I {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisSimbol_S2 {
    animation: sLogoAnimSimbols 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisBox {
    animation: sLogoAnimYellow 0.0s ease-out 0.0s 1 forwards;
    animation: sLogoAnimBox 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisBoxPink {
    animation: sLogoAnimPink 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisBoxBlue, .sGenesisBoxBlueRight {
    animation: sLogoAnimBlue 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisBoxWhiteSimbol {
    animation: sLogoAnimWhiteSimbol 0.0s ease-out 0.0s 1 forwards;
}

.sGenesisBoxWhiteTrinity {
    animation: sLogoAnimWhiteTrinity 0.0s ease-out 0.0s 1 forwards;
}