@import url('https://fonts.googleapis.com/css?family=Special+Elite');

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

#footer-sticker {
    display: flex;
    flex-direction: column;
    min-height: 88%;
}
.wrapper {
    position: relative;
    flex: 1 0 auto;
    width: 100%;
    max-width: 1024px;
    margin: 40px auto;
    background: #fff;
    z-index: 10;
}

.centered {
    border: 1px solid #ccc;
    background: #eee;
    padding: 10px;
    max-width: 500px;
    width: 90%;
    margin: 0 auto;
}
.center-both {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.ratio {
    padding-bottom: 51%
}

#header {
    height: 100px;
    background: rgba(0,0,0,.1);
    z-index: 9999;
}

#header .relative {
    position: absolute;
    left: 10px;
    top: 2px;
    height: 100px;
    width: 180px;
}

#below-the-fold {
    flex-shrink: 0;
    position: relative;
    background: url("../img/seamless_wood_small.jpg") repeat;
}
#below-the-fold:before {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 100%;
    height: 40px;
    background: linear-gradient(rgba(0,0,0,.9) 0%,
                                rgba(0,0,0,.0) 20%,
                                rgba(100,100,100,.0) 40%,
                                rgba(255,255,255,0) 50%,
                                rgba(255,255,255,0) 90%,
                                rgba(0,0,0,.4) 91%,
                                rgba(0,0,0,.9) 95%,
                                rgba(0,0,0,.4) 100%),
                url("../img/seamless_wood_small.jpg") repeat;
    background-size: 100% 40px, auto;
    z-index: 0;

}
#below-the-fold:after {
    content: '';
    position: absolute;
    width: 100%;
    top: 100%;
    height: 40px;
    background: linear-gradient(0deg,
                    rgba(0,0,0,.9) 0%,
                    rgba(0,0,0,.0) 20%,
                    rgba(100,100,100,.0) 40%,
                    rgba(255,255,255,0) 50%,
                    rgba(255,255,255,0) 90%,
                    rgba(0,0,0,.4) 91%,
                    rgba(0,0,0,.9) 95%,
                    rgba(0,0,0,.4) 100%),
                url("../img/seamless_wood_small.jpg") repeat;
    background-size: 100% 40px, auto;
    z-index: 0;
}

.page {
    font-family: 'Special Elite', monospace;
    font-size: 1em;
    box-sizing: border-box;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    transform: translate(calc(-50%), 0) rotate(2deg);
    background: white;
    left: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
}

.standalone.page {
    position: absolute;
    padding: 75px 50px;
    height: calc(100% - 100px);
    top: 50px;
    min-width: 458px;
    width: 80%;
    max-width: 900px;
    left: 50%;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    transform: translate(calc(-50%), 0) rotate(2deg);
    overflow: hidden;
    z-index: 0;
}

.page.content {
    position: relative;
    padding: 75px 50px;
    margin: 50px 0;
    transform: translateX(calc(-50%));
    overflow: unset;
    min-width: 458px;
    width: 80%;
    max-width: 900px;
    left: 50%;
    background: unset;
    box-shadow: unset;
}

.page.content:before {
    content: '';
    position: absolute;
    background: white;
    width: calc(100%);
    height: calc(100%);
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    overflow: hidden;
    z-index: -1;
}

.page.content:after {
    content: '';
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    left: 50%;
    top: 0;
    transform: translateX(-50%) rotate(-2deg);
    box-sizing: border-box;
    overflow: hidden;
    z-index: -2;
}

.drawer-push {
    height: 300px;
}

#drawer {
    position: fixed;
    left: 50%;
    bottom: 50px;
    width: 80%;
    max-width: 800px;
    height: 300px;
    transform: translateX(-50%);
    background: linear-gradient(rgba(0,0,0,.5),
                                rgba(0,0,0,.5)),
                url("../img/seamless_wood_small.jpg") repeat-y;
    background-size: auto, 100% 100%;
    z-index: -10;
}
#drawer:before {
    content: '';
    position: absolute;
    left: 0%;
    bottom: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(90deg, rgba(255,255,255,.2) 50%,
                                rgba(0,0,0,.2) 51%,
                                rgba(0,0,0,.5) 100%),
        url("../img/seamless_wood_small.jpg") repeat;
    z-index: -1;
}
#drawer:after {
    content: '';
    position: absolute;
    right: 0%;
    bottom: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(270deg, rgba(255,255,255,.2) 50%,
                                rgba(0,0,0,.2) 51%,
                                rgba(0,0,0,.5) 100%),
        url("../img/seamless_wood_small.jpg") repeat;
    z-index: -1;
}
#drawer-handle:before {
    content: '';
    position: absolute;
    right: 20px;
    bottom: 0;
    height: 40px;
    width: calc(100% - 40px);
    background: linear-gradient(0deg, rgba(255,255,255,.2) 50%,
                                rgba(0,0,0,.2) 51%,
                                rgba(0,0,0,.5) 100%),
        url("../img/seamless_wood_small.jpg") repeat;
    z-index: 0;
}
#drawer-handle:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -25px;
    height: 40px;
    width: 100px;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(255,255,255,.2) 0%,
                                rgba(0,0,0,.2) 51%,
                                rgba(0,0,0,.5) 100%),
        url("../img/seamless_wood_small.jpg") repeat;
        border-radius: 10px;
    z-index: -3;
}
#drawer .card {
    position: absolute;
    width: 50%;
    height: 70px;
    left: 50%;
    bottom: calc(20px);
    transform: translate(-50%, -50%);
}
#drawer .drawer-items {
    display: flex;
}
#drawer .drawer-items svg {
    position: absolute;
    width: 20%;
    bottom: 45px;
}
#drawer .drawer-items svg.blue1 {
    left: 2%;
}
#drawer .drawer-items svg.blue2 {
    transform: rotate(6deg);
    left: 10%;
}
#drawer .drawer-items svg.scissors {
    top: -50%;
    left: calc(50% + 50px);
    transform: translate(-50%, 0) rotate(100deg);
    width: 25%;
}
#drawer .drawer-items svg.red {
    right: 10%;
    transform: rotate(165deg);
}

.paper-spread {
    display: flex;
}

.paper-spread img {
    width: 250%;
    transform: translate(0%, 0%) rotate(-2deg);
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    z-index: 2;
}

.paper-spread img:first-child {
    transform: translate(0%, -20%) rotate(-20deg);
    z-index: 3;
}

.paper-spread img:last-child {
    transform: translate(0%, 20%) rotate(20deg);
    z-index: 1;
}



/***********
~~~ LOGO ~~~
************/
.enigma {
    position: absolute;
    height: 100%;
    top: 0;  bottom: 0;  left: 0;  right: 0;
    padding: 0 24px;
}

.relative {
    position:relative;
    height: 100%;
}

.ea, .nim, .g {
    position: absolute;
    left: 50%;
    transform: translate(-50%) rotate(180deg);
}

.ea {
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: url(../img/ea.svg);
    width: 100%;
    height: 41.2%;
    top: 27.5%;
}

.nim {
    transform: translate(-50%) rotate(180deg);
    z-index: 2;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: url(../img/nim.svg);
    width: 72%;
    height: 45.1%;
    top: 25.5%;
}

.g {
    transform: translate(-50%) rotate(180deg);
    z-index: 3;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: url(../img/g.svg);
    width: 18.25%;
    height: 100%;
    top: 0%;
}

.g.animated {
    -webkit-animation: rotate 1s linear 0s 1 forwards;
    animation: rotate 1s linear 0s 1 forwards;
}

.g.animated ~ .nim {
    -webkit-animation: rotate 1s linear 0.05s 1 forwards;
    animation: rotate 1s linear 0.05s 1 forwards;
}

.g.animated ~ .ea {
    -webkit-animation: rotate 1s linear 0.1s 1 forwards;
    animation: rotate 1s linear 0.1s 1 forwards;
}

@-webkit-keyframes rotate {
    0% {-webkit-transform: translate(-50%) rotate(0deg);}
    1% {-webkit-transform: translate(-50%) rotate(2.152372370563753deg);}
    2% {-webkit-transform: translate(-50%) rotate(8.237280854743247deg);}
    3% {-webkit-transform: translate(-50%) rotate(17.675530396645648deg);}
    4% {-webkit-transform: translate(-50%) rotate(29.8735580886689deg);}
    5% {-webkit-transform: translate(-50%) rotate(44.2389499218557deg);}
    6% {-webkit-transform: translate(-50%) rotate(60.194208380987725deg);}
    7% {-webkit-transform: translate(-50%) rotate(77.18864210367705deg);}
    8% {-webkit-transform: translate(-50%) rotate(94.7083071632332deg);}
    9% {-webkit-transform: translate(-50%) rotate(112.28398305256289deg);}
    10% {-webkit-transform: translate(-50%) rotate(129.49721442083995deg);}
    11% {-webkit-transform: translate(-50%) rotate(145.98449153614763deg);}
    12% {-webkit-transform: translate(-50%) rotate(161.439678004293deg);}
    13% {-webkit-transform: translate(-50%) rotate(175.6148233389296deg);}
    14% {-webkit-transform: translate(-50%) rotate(188.31952058983114deg);}
    15% {-webkit-transform: translate(-50%) rotate(199.41898558052793deg);}
    16% {-webkit-transform: translate(-50%) rotate(208.8310446957959deg);}
    17% {-webkit-transform: translate(-50%) rotate(216.52222301096003deg);}
    18% {-webkit-transform: translate(-50%) rotate(222.5031243694833deg);}
    19% {-webkit-transform: translate(-50%) rotate(226.82329035626722deg);}
    20% {-webkit-transform: translate(-50%) rotate(229.56571658728856deg);}
    21% {-webkit-transform: translate(-50%) rotate(230.8411929709191deg);}
    22% {-webkit-transform: translate(-50%) rotate(230.78262022791554deg);}
    23% {-webkit-transform: translate(-50%) rotate(229.53943861155247deg);}
    24% {-webkit-transform: translate(-50%) rotate(227.27228704953387deg);}
    25% {-webkit-transform: translate(-50%) rotate(224.147992403312deg);}
    26% {-webkit-transform: translate(-50%) rotate(220.33496973227545deg);}
    27% {-webkit-transform: translate(-50%) rotate(215.99909583240097deg);}
    28% {-webkit-transform: translate(-50%) rotate(211.30010030696303deg);}
    29% {-webkit-transform: translate(-50%) rotate(206.38850137598254deg);}
    30% {-webkit-transform: translate(-50%) rotate(201.4030978345361deg);}
    31% {-webkit-transform: translate(-50%) rotate(196.46901425912483deg);}
    32% {-webkit-transform: translate(-50%) rotate(191.696283906791deg);}
    33% {-webkit-transform: translate(-50%) rotate(187.17894286653802deg);}
    34% {-webkit-transform: translate(-50%) rotate(182.994599965781deg);}
    35% {-webkit-transform: translate(-50%) rotate(179.20443971554036deg);}
    36% {-webkit-transform: translate(-50%) rotate(175.8536101622262deg);}
    37% {-webkit-transform: translate(-50%) rotate(172.97194382805134deg);}
    38% {-webkit-transform: translate(-50%) rotate(170.5749578607793deg);}
    39% {-webkit-transform: translate(-50%) rotate(168.6650789447169deg);}
    40% {-webkit-transform: translate(-50%) rotate(167.23303929627593deg);}
    41% {-webkit-transform: translate(-50%) rotate(166.25939201221425deg);}
    42% {-webkit-transform: translate(-50%) rotate(165.7160969809773deg);}
    43% {-webkit-transform: translate(-50%) rotate(165.56813232766368deg);}
    44% {-webkit-transform: translate(-50%) rotate(165.77509076207926deg);}
    45% {-webkit-transform: translate(-50%) rotate(166.2927250630349deg);}
    46% {-webkit-transform: translate(-50%) rotate(167.0744120948273deg);}
    47% {-webkit-transform: translate(-50%) rotate(168.07251005942598deg);}
    48% {-webkit-transform: translate(-50%) rotate(169.23958899971797deg);}
    49% {-webkit-transform: translate(-50%) rotate(170.52951976016467deg);}
    50% {-webkit-transform: translate(-50%) rotate(171.89841157306915deg);}
    51% {-webkit-transform: translate(-50%) rotate(173.30539308038166deg);}
    52% {-webkit-transform: translate(-50%) rotate(174.7132358492495deg);}
    53% {-webkit-transform: translate(-50%) rotate(176.08882323836636deg);}
    54% {-webkit-transform: translate(-50%) rotate(177.40347078238048deg);}
    55% {-webkit-transform: translate(-50%) rotate(178.63310705976792deg);}
    56% {-webkit-transform: translate(-50%) rotate(179.75832628687522deg);}
    57% {-webkit-transform: translate(-50%) rotate(180.76432564167789deg);}
    58% {-webkit-transform: translate(-50%) rotate(181.64074158120565deg);}
    59% {-webkit-transform: translate(-50%) rotate(182.38140020253684deg);}
    60% {-webkit-transform: translate(-50%) rotate(182.98399704298765deg);}
    61% {-webkit-transform: translate(-50%) rotate(183.4497216613641deg);}
    62% {-webkit-transform: translate(-50%) rotate(183.7828419345129deg);}
    63% {-webkit-transform: translate(-50%) rotate(183.99026229073309deg);}
    64% {-webkit-transform: translate(-50%) rotate(184.08106913446744deg);}
    65% {-webkit-transform: translate(-50%) rotate(184.06607554601274deg);}
    66% {-webkit-transform: translate(-50%) rotate(183.9573760158142deg);}
    67% {-webkit-transform: translate(-50%) rotate(183.76792054334092deg);}
    68% {-webkit-transform: translate(-50%) rotate(183.51111594080422deg);}
    69% {-webkit-transform: translate(-50%) rotate(183.20046067369452deg);}
    70% {-webkit-transform: translate(-50%) rotate(182.8492180807194deg);}
    71% {-webkit-transform: translate(-50%) rotate(182.47013137805183deg);}
    72% {-webkit-transform: translate(-50%) rotate(182.07518249483437deg);}
    73% {-webkit-transform: translate(-50%) rotate(181.67539553162675deg);}
    74% {-webkit-transform: translate(-50%) rotate(181.28068449898277deg);}
    75% {-webkit-transform: translate(-50%) rotate(180.89974399279603deg);}
    76% {-webkit-transform: translate(-50%) rotate(180.53998060507004deg);}
    77% {-webkit-transform: translate(-50%) rotate(180.20748215764357deg);}
    78% {-webkit-transform: translate(-50%) rotate(179.90702128251755deg);}
    79% {-webkit-transform: translate(-50%) rotate(179.6420894526695deg);}
    80% {-webkit-transform: translate(-50%) rotate(179.4149572854535deg);}
    81% {-webkit-transform: translate(-50%) rotate(179.22675678816492deg);}
    82% {-webkit-transform: translate(-50%) rotate(179.07758118132833deg);}
    83% {-webkit-transform: translate(-50%) rotate(178.96659800739113deg);}
    84% {-webkit-transform: translate(-50%) rotate(178.8921713973deg);}
    85% {-webkit-transform: translate(-50%) rotate(178.85198961075375deg);}
    86% {-webkit-transform: translate(-50%) rotate(178.84319427334086deg);}
    87% {-webkit-transform: translate(-50%) rotate(178.86250809095716deg);}
    88% {-webkit-transform: translate(-50%) rotate(178.9063582149614deg);}
    89% {-webkit-transform: translate(-50%) rotate(178.9709928472547deg);}
    90% {-webkit-transform: translate(-50%) rotate(179.05258910060763deg);}
    91% {-webkit-transform: translate(-50%) rotate(179.1473505549439deg);}
    92% {-webkit-transform: translate(-50%) rotate(179.251593365041deg);}
    93% {-webkit-transform: translate(-50%) rotate(179.3618201706656deg);}
    94% {-webkit-transform: translate(-50%) rotate(179.47478142938738deg);}
    95% {-webkit-transform: translate(-50%) rotate(179.58752412946603deg);}
    96% {-webkit-transform: translate(-50%) rotate(179.69742814093493deg);}
    97% {-webkit-transform: translate(-50%) rotate(179.8022307243054deg);}
    98% {-webkit-transform: translate(-50%) rotate(179.90003993642472deg);}
    99% {-webkit-transform: translate(-50%) rotate(179.98933785136194deg);}
    100% {-webkit-transform: translate(-50%) rotate(180deg);}
}

@keyframes rotate {
    0% {transform: translate(-50%) rotate(0deg);}
    1% {transform: translate(-50%) rotate(2.152372370563753deg);}
    2% {transform: translate(-50%) rotate(8.237280854743247deg);}
    3% {transform: translate(-50%) rotate(17.675530396645648deg);}
    4% {transform: translate(-50%) rotate(29.8735580886689deg);}
    5% {transform: translate(-50%) rotate(44.2389499218557deg);}
    6% {transform: translate(-50%) rotate(60.194208380987725deg);}
    7% {transform: translate(-50%) rotate(77.18864210367705deg);}
    8% {transform: translate(-50%) rotate(94.7083071632332deg);}
    9% {transform: translate(-50%) rotate(112.28398305256289deg);}
    10% {transform: translate(-50%) rotate(129.49721442083995deg);}
    11% {transform: translate(-50%) rotate(145.98449153614763deg);}
    12% {transform: translate(-50%) rotate(161.439678004293deg);}
    13% {transform: translate(-50%) rotate(175.6148233389296deg);}
    14% {transform: translate(-50%) rotate(188.31952058983114deg);}
    15% {transform: translate(-50%) rotate(199.41898558052793deg);}
    16% {transform: translate(-50%) rotate(208.8310446957959deg);}
    17% {transform: translate(-50%) rotate(216.52222301096003deg);}
    18% {transform: translate(-50%) rotate(222.5031243694833deg);}
    19% {transform: translate(-50%) rotate(226.82329035626722deg);}
    20% {transform: translate(-50%) rotate(229.56571658728856deg);}
    21% {transform: translate(-50%) rotate(230.8411929709191deg);}
    22% {transform: translate(-50%) rotate(230.78262022791554deg);}
    23% {transform: translate(-50%) rotate(229.53943861155247deg);}
    24% {transform: translate(-50%) rotate(227.27228704953387deg);}
    25% {transform: translate(-50%) rotate(224.147992403312deg);}
    26% {transform: translate(-50%) rotate(220.33496973227545deg);}
    27% {transform: translate(-50%) rotate(215.99909583240097deg);}
    28% {transform: translate(-50%) rotate(211.30010030696303deg);}
    29% {transform: translate(-50%) rotate(206.38850137598254deg);}
    30% {transform: translate(-50%) rotate(201.4030978345361deg);}
    31% {transform: translate(-50%) rotate(196.46901425912483deg);}
    32% {transform: translate(-50%) rotate(191.696283906791deg);}
    33% {transform: translate(-50%) rotate(187.17894286653802deg);}
    34% {transform: translate(-50%) rotate(182.994599965781deg);}
    35% {transform: translate(-50%) rotate(179.20443971554036deg);}
    36% {transform: translate(-50%) rotate(175.8536101622262deg);}
    37% {transform: translate(-50%) rotate(172.97194382805134deg);}
    38% {transform: translate(-50%) rotate(170.5749578607793deg);}
    39% {transform: translate(-50%) rotate(168.6650789447169deg);}
    40% {transform: translate(-50%) rotate(167.23303929627593deg);}
    41% {transform: translate(-50%) rotate(166.25939201221425deg);}
    42% {transform: translate(-50%) rotate(165.7160969809773deg);}
    43% {transform: translate(-50%) rotate(165.56813232766368deg);}
    44% {transform: translate(-50%) rotate(165.77509076207926deg);}
    45% {transform: translate(-50%) rotate(166.2927250630349deg);}
    46% {transform: translate(-50%) rotate(167.0744120948273deg);}
    47% {transform: translate(-50%) rotate(168.07251005942598deg);}
    48% {transform: translate(-50%) rotate(169.23958899971797deg);}
    49% {transform: translate(-50%) rotate(170.52951976016467deg);}
    50% {transform: translate(-50%) rotate(171.89841157306915deg);}
    51% {transform: translate(-50%) rotate(173.30539308038166deg);}
    52% {transform: translate(-50%) rotate(174.7132358492495deg);}
    53% {transform: translate(-50%) rotate(176.08882323836636deg);}
    54% {transform: translate(-50%) rotate(177.40347078238048deg);}
    55% {transform: translate(-50%) rotate(178.63310705976792deg);}
    56% {transform: translate(-50%) rotate(179.75832628687522deg);}
    57% {transform: translate(-50%) rotate(180.76432564167789deg);}
    58% {transform: translate(-50%) rotate(181.64074158120565deg);}
    59% {transform: translate(-50%) rotate(182.38140020253684deg);}
    60% {transform: translate(-50%) rotate(182.98399704298765deg);}
    61% {transform: translate(-50%) rotate(183.4497216613641deg);}
    62% {transform: translate(-50%) rotate(183.7828419345129deg);}
    63% {transform: translate(-50%) rotate(183.99026229073309deg);}
    64% {transform: translate(-50%) rotate(184.08106913446744deg);}
    65% {transform: translate(-50%) rotate(184.06607554601274deg);}
    66% {transform: translate(-50%) rotate(183.9573760158142deg);}
    67% {transform: translate(-50%) rotate(183.76792054334092deg);}
    68% {transform: translate(-50%) rotate(183.51111594080422deg);}
    69% {transform: translate(-50%) rotate(183.20046067369452deg);}
    70% {transform: translate(-50%) rotate(182.8492180807194deg);}
    71% {transform: translate(-50%) rotate(182.47013137805183deg);}
    72% {transform: translate(-50%) rotate(182.07518249483437deg);}
    73% {transform: translate(-50%) rotate(181.67539553162675deg);}
    74% {transform: translate(-50%) rotate(181.28068449898277deg);}
    75% {transform: translate(-50%) rotate(180.89974399279603deg);}
    76% {transform: translate(-50%) rotate(180.53998060507004deg);}
    77% {transform: translate(-50%) rotate(180.20748215764357deg);}
    78% {transform: translate(-50%) rotate(179.90702128251755deg);}
    79% {transform: translate(-50%) rotate(179.6420894526695deg);}
    80% {transform: translate(-50%) rotate(179.4149572854535deg);}
    81% {transform: translate(-50%) rotate(179.22675678816492deg);}
    82% {transform: translate(-50%) rotate(179.07758118132833deg);}
    83% {transform: translate(-50%) rotate(178.96659800739113deg);}
    84% {transform: translate(-50%) rotate(178.8921713973deg);}
    85% {transform: translate(-50%) rotate(178.85198961075375deg);}
    86% {transform: translate(-50%) rotate(178.84319427334086deg);}
    87% {transform: translate(-50%) rotate(178.86250809095716deg);}
    88% {transform: translate(-50%) rotate(178.9063582149614deg);}
    89% {transform: translate(-50%) rotate(178.9709928472547deg);}
    90% {transform: translate(-50%) rotate(179.05258910060763deg);}
    91% {transform: translate(-50%) rotate(179.1473505549439deg);}
    92% {transform: translate(-50%) rotate(179.251593365041deg);}
    93% {transform: translate(-50%) rotate(179.3618201706656deg);}
    94% {transform: translate(-50%) rotate(179.47478142938738deg);}
    95% {transform: translate(-50%) rotate(179.58752412946603deg);}
    96% {transform: translate(-50%) rotate(179.69742814093493deg);}
    97% {transform: translate(-50%) rotate(179.8022307243054deg);}
    98% {transform: translate(-50%) rotate(179.90003993642472deg);}
    99% {transform: translate(-50%) rotate(179.98933785136194deg);}
    100% {transform: translate(-50%) rotate(180deg);}
}