body {

    font-family: arial;

    background: #fff;

}



body {

    /* background-color: #353535; */

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

}



h1 {

    font-family: 'Righteous';

    color: white;

    text-align: center;

    position: relative;

    top: 10px;

}



.container_coin {

    height: 160px;

    width: 160px;

    position: absolute;

    top: 46%;

    left: 50%;

    margin-top: -80px;

    margin-left: -80px;

}



.coin {

    height: 160px;

    width: 160px;

    position: absolute;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 50%;

    -webkit-animation: 1s;

}



.coin .front,

.coin .back {

    position: absolute;

    height: 160px;

    width: 160px;

    border-radius: 50%;

    background-size: cover;

}



.coin .front {

    -webkit-transform: translateZ(8px);

    background-color: #dfc8e7 !important;

}



.coin .back {

    -webkit-transform: translateZ(3px) rotateY(180deg);

    /* background-image: url(assets/Box_01b.png) !important; */

    background-size: cover !important;

}



.coin .side {

    -webkit-transform: translateX(72px);

    -webkit-transform-style: preserve-3d;

    /* -webkit-backface-visibility: hidden; */

}



.coin .side .circle {

    height: 160px;

    width: 16px;

    position: absolute;

    -webkit-transform-style: preserve-3d;

    /* -webkit-backface-visibility: hidden; */

}



.coin .side .circle:before,

.coin .side .circle:after {

    content: '';

    display: block;

    height: 15.682742452729697px;

    width: 5px;

    position: absolute;

    -webkit-transform: rotateX(84.375deg);

    background: #613f64;

}



.coin .side .circle:before {

    -webkit-transform-origin: top center;

}



.coin .side .circle:after {

    bottom: 0;

    -webkit-transform-origin: center bottom;

}



.coin .side .circle:nth-child(16) {

    -webkit-transform: rotateY(90deg) rotateX(180deg);

}



.coin .side .circle:nth-child(15) {

    -webkit-transform: rotateY(90deg) rotateX(168.75deg);

}



.coin .side .circle:nth-child(14) {

    -webkit-transform: rotateY(90deg) rotateX(157.5deg);

}



.coin .side .circle:nth-child(13) {

    -webkit-transform: rotateY(90deg) rotateX(146.25deg);

}



.coin .side .circle:nth-child(12) {

    -webkit-transform: rotateY(90deg) rotateX(135deg);

}



.coin .side .circle:nth-child(11) {

    -webkit-transform: rotateY(90deg) rotateX(123.75deg);

}



.coin .side .circle:nth-child(10) {

    -webkit-transform: rotateY(90deg) rotateX(112.5deg);

}



.coin .side .circle:nth-child(9) {

    -webkit-transform: rotateY(90deg) rotateX(101.25deg);

}



.coin .side .circle:nth-child(8) {

    -webkit-transform: rotateY(90deg) rotateX(90deg);

}



.coin .side .circle:nth-child(7) {

    -webkit-transform: rotateY(90deg) rotateX(78.75deg);

}



.coin .side .circle:nth-child(6) {

    -webkit-transform: rotateY(90deg) rotateX(67.5deg);

}



.coin .side .circle:nth-child(5) {

    -webkit-transform: rotateY(90deg) rotateX(56.25deg);

}



.coin .side .circle:nth-child(4) {

    -webkit-transform: rotateY(90deg) rotateX(45deg);

}



.coin .side .circle:nth-child(3) {

    -webkit-transform: rotateY(90deg) rotateX(33.75deg);

}



.coin .side .circle:nth-child(2) {

    -webkit-transform: rotateY(90deg) rotateX(22.5deg);

}



.coin .side .circle:nth-child(1) {

    -webkit-transform: rotateY(90deg) rotateX(11.25deg);

}



.coin .front {

    background-color: #dfc8e7;

    /* background-image: url(assets/Box_01b.png); */

}



.coin .back {

    background-color: #dfc8e7;

}



@keyframes flipCoin {

    0% {

        transform: rotateY(0deg);

    }



    100% {

        transform: rotateY(180deg);

    }

}





@keyframes flipCoinBack {

    0% {

        transform: rotateY(180deg);

    }



    100% {

        transform: rotateY(360deg);

    }

}



@keyframes coinDown {

    0% {

        opacity: 0;

        transform: translateY(-2000px) rotateY(180deg);

    }



    60% {

        opacity: 1;

        transform: translateY(30px) rotateY(180deg);

    }



    80% {

        transform: translateY(-10px) rotateY(180deg);

    }



    100% {

        transform: translateY(0) rotateY(180deg);

    }

}



@keyframes coinUp {

    0% {

        transform: translateY(0) rotateY(180deg);

    }



    20% {

        transform: translateY(-10px) rotateY(180deg);

    }



    40% {

        opacity: 1;

        transform: translateY(30px) rotateY(180deg);

    }



    100% {

        opacity: 0;

        transform: translateY(-2000px) rotateY(180deg);

    }

}



.coinEnter {

    animation: coinDown 1s;

    transform: rotateY(180deg) !important;

}



.coinOut {

    animation: coinUp 2s;

    transform: rotateY(180deg) !important;

}



.coinFlip {

    animation: flipCoinBack 1s;

    transform: rotateY(360deg) !important;

}



.coinFlipBack {

    animation: flipCoin 1s;

    transform: rotateY(180deg) !important;

}



.button-in {

    position: absolute;

    bottom: 3rem;

    width: 100%;

}