.coin {    
    margin: 150px auto;
    position: relative;
    width: 300px;
    height: 300px;
    transition: 5s linear;
    transform-style: preserve-3d;
   display: none;
}

.coin.__active {
display: block;}

.anim {animation: coin-anim 2s linear;}

@keyframes coin-anim {
  100% {transform: rotateY(360deg);  }
}

.coin:after {
    bottom: 0;
    content: '';
    left: 150px;
    position: absolute;
    top: 0;
    width: 5px;    
    transform: rotateY(-90deg);
    transform-origin: 100% 50%;
    /*background-color: #ffaf03;*/
}

#coin-1 .front, #coin-1 .back {
  background-image: url("../SWM-Token.svg");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#coin-2 .front, #coin-2 .back {
  background-image: url("../Sun-Token.svg");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#coin-3 .front, #coin-3 .back {
  background-image: url("../SRC-20-Token.svg");
   background-size: 100% 100%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.back {
   position: absolute;
   top: 0;   
   transform: translateZ(-5px) rotateY(-180deg);
}

.front-inner, .back-inner {
    border-radius: 50%; 
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /*background-color: #806136;*/
	background-color: #ffaf03;
	
}

.front-inner {       
    transform: translateZ(-1px);
}

.back-inner {
    transform: translateZ(-4px);
}