:root {
    --coin-size: 92px;
    --coin-thickness: 10px;
    --edge-face-length: calc( calc( 3.14 * var(--coin-size) ) / 150);
    --x: calc( calc( var(--coin-size) / 2) - calc( var(--coin-thickness) / 2 ) );
    --y: calc( calc( var(--coin-size) / 2 ) - calc( var(--edge-face-length) / 2 ) );
}

container > *,
:after,
:before {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    margin: 0;
    height: 100%;
}

.animation-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}

.c-back,
.c-front {
    background-size: cover;
}

.c-back,
.c-front,
.c-shadow {
    border-radius: 50%;
    position: absolute;
}

.c-back,
.c-front,
.coin {
    height: var(--coin-size);
    width: var(--coin-size);
}

#animation {
    width: 100%;
    height: 100%;
}

.coin {
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    -webkit-animation: 2.0s ease-in-out infinite rotate3d;
    animation: 2.0s ease-in-out infinite rotate3d;
    transition: 0.3s;
}

.c-back,
.c-front {
    overflow: hidden;
    background-color: #b3b3b3;
}

.c-front {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJMYXllcl8yIiB4PSIwIiB5PSIwIiBjbGFzcz0ic2l6ZS1tZSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgODguOCA4OC44Ij4KICA8ZGVmcyBpZD0iZGVmczMxIj4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIHgxPSI3OC42OCIgeDI9Ijc4LjY4IiB5MT0iMzQuNDczIiB5Mj0iMTIzLjIzMSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQuMyAtMzQuNSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3AgaWQ9InN0b3A2IiBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM5MzkzOTMiLz4KICAgICAgPHN0b3AgaWQ9InN0b3A4IiBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3MzczNzMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzJfIiB4MT0iNzguNjgiIHgyPSI3OC42OCIgeTE9IjUwLjQ3OSIgeTI9IjEwNy4yMjUiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM0LjMgLTM0LjUpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIGlkPSJzdG9wMTMiIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzUzNTM1MyIvPgogICAgICA8c3RvcCBpZD0ic3RvcDE1IiBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyQjJCMkIiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxzdHlsZSBpZD0ic3R5bGUyIiB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qxe29wYWNpdHk6MC43O30KCS5zdDJ7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9Cgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQoJLnN0NHtmaWxsOiNGRkZGRkY7fQogIDwvc3R5bGU+CiAgPGcgaWQ9ImczMzMiPgogICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgY3g9IjQ0LjQiIGN5PSI0NC40IiByPSI0Mi4yIiBjbGFzcz0ic3QwIi8+CiAgICA8cGF0aCBpZD0icGF0aDExIiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgZD0iTTQ0LjQgMEMxOS45IDAgMCAxOS45IDAgNDQuNHMxOS45IDQ0LjQgNDQuNCA0NC40IDQ0LjQtMTkuOSA0NC40LTQ0LjRTNjguOSAwIDQ0LjQgMHptMCA4NC4yYy0yMiAwLTM5LjktMTcuOS0zOS45LTM5LjlTMjIuMyA0LjUgNDQuNCA0LjVjMjIgMCAzOS45IDE3LjkgMzkuOSAzOS45UzY2LjQgODQuMiA0NC40IDg0LjJ6IiBjbGFzcz0ic3QyIi8+CiAgICA8cGF0aCBpZD0icGF0aDE4IiBmaWxsPSJ1cmwoI1NWR0lEXzJfKSIgZD0iTTQ0LjQgMTZDMjguNyAxNiAxNiAyOC43IDE2IDQ0LjRzMTIuNyAyOC40IDI4LjQgMjguNCAyOC40LTEyLjcgMjguNC0yOC40UzYwLjEgMTYgNDQuNCAxNnoiIGNsYXNzPSJzdDMiLz4KICAgIDxwYXRoIGlkPSJwb2x5Z29uMjAiIGQ9Im02Mi42IDYyLjkgMTMuNyAxNi42LTE0LjQgMTcuM2gzLjlsMTIuNS0xNSAxMi40IDE1aDMuOUw4MC4yIDc5LjUgOTQgNjIuOWgtMy45TDc4LjMgNzcuMSA2Ni41IDYyLjl6IiBjbGFzcz0ic3Q0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQuMyAtMzQuNSkiLz4KICA8L2c+Cjwvc3ZnPgo=");
    transform: translateZ(calc(var(--coin-thickness) / 2));
}

.c-back {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJMYXllcl8yIiB4PSIwIiB5PSIwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA4OC44IDg4LjgiPgogIDxkZWZzIGlkPSJkZWZzMjIiPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgeDE9Ijc4LjY2MSIgeDI9Ijc4LjY2MSIgeTE9IjM0LjQ4IiB5Mj0iMTIzLjIzOSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQuMyAtMzQuNSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3AgaWQ9InN0b3A2IiBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM5MzkzOTMiLz4KICAgICAgPHN0b3AgaWQ9InN0b3A4IiBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3MzczNzMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxzdHlsZSBpZD0ic3R5bGUyIiB0eXBlPSJ0ZXh0L2NzcyI+CiAgICAuc3Qwe2ZpbGw6I0ZGRkZGRjt9CiAgICAuc3Qxe29wYWNpdHk6MC43O30KICAgIC5zdDJ7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAuc3Qze2ZpbGw6IzJCOTIyQjt9CiAgPC9zdHlsZT4KICA8Y2lyY2xlIGlkPSJjaXJjbGU0IiBjeD0iNDQuNCIgY3k9IjQ0LjQiIHI9IjQyLjIiIGNsYXNzPSJzdDAiLz4KICA8cGF0aCBpZD0icGF0aDExIiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgZD0iTTQ0LjQgMEMxOS45IDAgMCAxOS45IDAgNDQuNHMxOS45IDQ0LjQgNDQuNCA0NC40IDQ0LjQtMTkuOSA0NC40LTQ0LjRTNjguOSAwIDQ0LjQgMHptMCA4NC4zYy0yMiAwLTM5LjktMTcuOS0zOS45LTM5LjlTMjIuMyA0LjUgNDQuNCA0LjVjMjIgMCAzOS45IDE3LjkgMzkuOSAzOS45UzY2LjQgODQuMyA0NC40IDg0LjN6IiBjbGFzcz0ic3QyIi8+CiAgPGcgaWQ9ImcxNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM0LjMgLTM0LjUpIj4KICAgIDxwYXRoIGlkPSJwYXRoMTMiIGQ9Ik03OC43IDUwLjVjLTE1LjcgMC0yOC40IDEyLjctMjguNCAyOC40czEyLjcgMjguNCAyOC40IDI4LjQgMjguNC0xMi43IDI4LjQtMjguNC0xMi44LTI4LjQtMjguNC0yOC40ek01My4zIDc4LjljMC0xNCAxMS40LTI1LjQgMjUuNC0yNS40IDE0IDAgMjUuNCAxMS40IDI1LjQgMjUuNCAwIDQuNS0xLjIgOC44LTMuMyAxMi40LTIuMS4yLTQuMS40LTYuMS44Vjc2LjRjMC0xLjMtLjgtMi40LTEuOS0yLjQtLjkgMC0xLjcuNy0yIDIuMS43IDAgMS4xLjYgMS4xIDEuNnYxNWMtMS42LjQtMy4yLjgtNC43IDEuM1Y3Ni41YzAtMS4zLS44LTIuNC0xLjktMi40LS45IDAtMS43LjctMiAyLjEuNyAwIDEuMS42IDEuMSAxLjZWOTVjLTEuNy42LTMuMiAxLjMtNC43IDJWNzYuNWMwLTEuMy0uOC0yLjQtMS45LTIuNC0uOSAwLTEuNy43LTIgMi4xLjcgMCAxLjEuNiAxLjEgMS42djIwLjdjLTEuNyAxLTMuMyAxLjktNC43IDIuOVY3Ni42YzAtMS4zLS44LTIuNC0xLjktMi40LS45IDAtMS43LjctMiAyLjEuNyAwIDEuMS42IDEuMSAxLjZ2MjQuOWMtOS4zLTMuOS0xNi4xLTEzLjEtMTYuMS0yMy45em0yNi45LTEyLjRjLTguOCAwLTE3LjIgMS4zLTE3LjcgMy0yLS41LTMuNS0xLjItMy41LTIuMSAwLTIuNiA5LTMuNyAyMC4yLTMuN3MxOS4zIDEuNSAxOS4zIDMuNmMwIC40LS4xLjUtLjMuOGgtLjFjLTMtLjktOS4yLTEuNi0xNy45LTEuNnptMS42IDMuN2MtNy41IDAtMTQuNyAxLjEtMTUuMiAyLjYtMS44LS40LTMtMS0zLTEuOCAwLTIuMiA3LjctMy4yIDE3LjMtMy4yIDkuNiAwIDE2LjUgMS4zIDE2LjUgMy4xIDAgLjMtLjEuNC0uMy43SDk3Yy0yLjQtLjgtNy44LTEuNC0xNS4yLTEuNHoiIGNsYXNzPSJzdDMiLz4KICA8L2c+Cjwvc3ZnPgo=");
    transform: translateZ( calc( calc( var(--coin-thickness) / 2) * -1)) rotateY(180deg);
}

.c-edge {
    transform-style: preserve-3d;
}

    .c-edge div {
        position: absolute;
        height: var(--edge-face-length);
        width: var(--coin-thickness);
    }

        .c-edge div:first-child {
            background: #050505;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(92.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(2) {
            background: #0a0a0a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(94.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(3) {
            background: #0e0e0e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(97.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(4) {
            background: #131313;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(99.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(5) {
            background: #181818;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(102deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(6) {
            background: #1c1c1c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(104.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(7) {
            background: #202020;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(106.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(8) {
            background: #252525;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(109.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(9) {
            background: #292929;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(111.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(10) {
            background: #2d2d2d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(114deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(11) {
            background: #313131;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(116.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(12) {
            background: #353535;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(118.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(13) {
            background: #393939;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(121.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(14) {
            background: #3d3d3d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(123.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(15) {
            background: #414141;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(126deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(16) {
            background: #454545;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(128.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(17) {
            background: #484848;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(130.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(18) {
            background: #4c4c4c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(133.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(19) {
            background: #4f4f4f;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(135.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(20) {
            background: #535353;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(138deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(21) {
            background: #565656;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(140.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(22) {
            background: #5a5a5a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(142.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(23) {
            background: #5d5d5d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(145.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(24) {
            background: #606060;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(147.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(25) {
            background: #646464;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(150deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(26) {
            background: #676767;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(152.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(27) {
            background: #6a6a6a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(154.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(28) {
            background: #6d6d6d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(157.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(29) {
            background: #707070;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(159.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(30) {
            background: #737373;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(162deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(31) {
            background: #767676;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(164.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(32) {
            background: #787878;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(166.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(33) {
            background: #7b7b7b;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(169.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(34) {
            background: #7e7e7e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(171.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(35) {
            background: gray;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(174deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(36) {
            background: #838383;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(176.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(37) {
            background: #858585;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(178.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(38) {
            background: #888;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(181.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(39) {
            background: #8a8a8a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(183.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(40) {
            background: #8c8c8c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(186deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(41) {
            background: #8e8e8e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(188.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(42) {
            background: #909090;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(190.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(43) {
            background: #939393;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(193.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(44) {
            background: #959595;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(195.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(45) {
            background: #969696;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(198deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(46) {
            background: #989898;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(200.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(47) {
            background: #9a9a9a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(202.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(48) {
            background: #9c9c9c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(205.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(49) {
            background: #9e9e9e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(207.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(50) {
            background: #9f9f9f;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(210deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(51) {
            background: #a1a1a1;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(212.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(52) {
            background: #a2a2a2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(214.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(53) {
            background: #a4a4a4;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(217.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(54) {
            background: #a5a5a5;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(219.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(55) {
            background: #a6a6a6;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(222deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(56) {
            background: #a8a8a8;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(224.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(57) {
            background: #a9a9a9;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(226.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(58) {
            background: #aaa;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(229.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(59) {
            background: #ababab;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(231.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(60) {
            background: #acacac;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(234deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(61) {
            background: #adadad;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(236.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(62) {
            background: #aeaeae;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(238.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(63) {
            background: #aeaeae;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(241.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(64) {
            background: #afafaf;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(243.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(65) {
            background: #b0b0b0;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(246deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(66) {
            background: #b0b0b0;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(248.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(67) {
            background: #b1b1b1;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(250.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(68) {
            background: #b1b1b1;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(253.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(69) {
            background: #b2b2b2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(255.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(70) {
            background: #b2b2b2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(258deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(71) {
            background: #b2b2b2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(260.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(72) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(262.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(73) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(265.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(74) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(267.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(75) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(270deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(76) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(272.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(77) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(274.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(78) {
            background: #b3b3b3;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(277.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(79) {
            background: #b2b2b2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(279.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(80) {
            background: #b2b2b2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(282deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(81) {
            background: #b2b2b2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(284.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(82) {
            background: #b1b1b1;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(286.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(83) {
            background: #b1b1b1;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(289.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(84) {
            background: #b0b0b0;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(291.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(85) {
            background: #b0b0b0;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(294deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(86) {
            background: #afafaf;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(296.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(87) {
            background: #aeaeae;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(298.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(88) {
            background: #aeaeae;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(301.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(89) {
            background: #adadad;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(303.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(90) {
            background: #acacac;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(306deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(91) {
            background: #ababab;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(308.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(92) {
            background: #aaa;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(310.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(93) {
            background: #a9a9a9;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(313.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(94) {
            background: #a8a8a8;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(315.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(95) {
            background: #a6a6a6;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(318deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(96) {
            background: #a5a5a5;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(320.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(97) {
            background: #a4a4a4;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(322.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(98) {
            background: #a2a2a2;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(325.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(99) {
            background: #a1a1a1;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(327.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(100) {
            background: #9f9f9f;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(330deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(101) {
            background: #9e9e9e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(332.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(102) {
            background: #9c9c9c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(334.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(103) {
            background: #9a9a9a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(337.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(104) {
            background: #989898;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(339.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(105) {
            background: #969696;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(342deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(106) {
            background: #959595;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(344.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(107) {
            background: #939393;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(346.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(108) {
            background: #909090;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(349.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(109) {
            background: #8e8e8e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(351.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(110) {
            background: #8c8c8c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(354deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(111) {
            background: #8a8a8a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(356.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(112) {
            background: #888;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(358.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(113) {
            background: #858585;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(361.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(114) {
            background: #838383;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(363.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(115) {
            background: gray;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(366deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(116) {
            background: #7e7e7e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(368.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(117) {
            background: #7b7b7b;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(370.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(118) {
            background: #787878;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(373.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(119) {
            background: #767676;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(375.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(120) {
            background: #737373;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(378deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(121) {
            background: #707070;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(380.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(122) {
            background: #6d6d6d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(382.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(123) {
            background: #6a6a6a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(385.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(124) {
            background: #676767;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(387.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(125) {
            background: #646464;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(390deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(126) {
            background: #606060;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(392.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(127) {
            background: #5d5d5d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(394.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(128) {
            background: #5a5a5a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(397.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(129) {
            background: #565656;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(399.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(130) {
            background: #535353;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(402deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(131) {
            background: #4f4f4f;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(404.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(132) {
            background: #4c4c4c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(406.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(133) {
            background: #484848;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(409.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(134) {
            background: #454545;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(411.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(135) {
            background: #414141;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(414deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(136) {
            background: #3d3d3d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(416.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(137) {
            background: #393939;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(418.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(138) {
            background: #353535;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(421.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(139) {
            background: #313131;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(423.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(140) {
            background: #2d2d2d;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(426deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(141) {
            background: #292929;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(428.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(142) {
            background: #252525;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(430.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(143) {
            background: #202020;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(433.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(144) {
            background: #1c1c1c;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(435.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(145) {
            background: #181818;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(438deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(146) {
            background: #131313;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(440.4deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(147) {
            background: #0e0e0e;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(442.8deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(148) {
            background: #0a0a0a;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(445.2deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(149) {
            background: #050505;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(447.6deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

        .c-edge div:nth-child(150) {
            background: #010101;
            transform: translateY(var(--y)) translateX(var(--x)) rotateZ(450deg) translateX( calc( var(--coin-size) / 2) ) rotateY(90deg);
        }

@-webkit-keyframes rotate3d {
    0% {
        transform: perspective(1000px) rotateY(0);
    }

    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

@keyframes rotate3d {
    0% {
        transform: perspective(1000px) rotateY(0);
    }

    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
#divLoading,
.container {
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    cursor: wait;
    position: absolute;
    z-index: 100;
    display:none;
}
#divLoading {
    filter: grayscale(.4) opacity(.9);
    background-image: url('../images/ethosoft-bg-blue.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}