.coin-merry-go-round.coin-elem { 
  width: 20%;
  height: 20%;  
} 
 
.coin-merry-go-round:nth-child(1) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-merry-go-round:nth-child(2) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(3) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(4) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(5) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(6) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(7) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(8) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(9) {
   background-image: url('../dataimg/pl_2zlote_rev.jpg');  
}
 
.coin-merry-go-round:nth-child(10) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(11) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(12) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(13) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(14) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(15) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(16) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round:nth-child(17) {
   background-image: url('../dataimg/pl_2zlote_obv.jpg');  
}
 
.coin-merry-go-round_1 {
  top: 50.0%;
  left: 50.0%;
}
 
.coin-merry-go-round_2 {
  top: 12.0%;
  left: 50.0%;
}
 
.coin-merry-go-round_3 {
  top: 23.1%;
  left: 76.9%;
}
 
.coin-merry-go-round_4 {
  top: 50.0%;
  left: 88.0%;
}
 
.coin-merry-go-round_5 {
  top: 76.9%;
  left: 76.9%;
}
 
.coin-merry-go-round_6 {
  top: 88.0%;
  left: 50.0%;
}
 
.coin-merry-go-round_7 {
  top: 76.9%;
  left: 23.1%;
}
 
.coin-merry-go-round_8 {
  top: 50.0%;
  left: 12.0%;
}
 
.coin-merry-go-round_9 {
  top: 23.1%;
  left: 23.1%;
}
 
.coin-merry-go-round_10 {
  top: 12.0%;
  left: 50.0%;
}
 
.coin-merry-go-round_11 {
  top: 23.1%;
  left: 76.9%;
}
 
.coin-merry-go-round_12 {
  top: 50.0%;
  left: 88.0%;
}
 
.coin-merry-go-round_13 {
  top: 76.9%;
  left: 76.9%;
}
 
.coin-merry-go-round_14 {
  top: 88.0%;
  left: 50.0%;
}
 
.coin-merry-go-round_15 {
  top: 76.9%;
  left: 23.1%;
}
 
.coin-merry-go-round_16 {
  top: 50.0%;
  left: 12.0%;
}
 
.coin-merry-go-round_17 {
  top: 23.1%;
  left: 23.1%;
}
 
    .coin-wrap {
  perspective: 1000px;
}

.coin-elem {
  transition: transform 1.3s;
}
.coin-elem.disabled {
pointer-events: none;
}
.front {
  transform: translate(-50%, -50%) rotateY(180deg);
  z-index: 1;
}

.back {
  transform: translate(-50%, -50%) rotateY(0deg);
  z-index: 2;
}
 .coin-elem.front.flip {
  transform: translate(-50%, -50%) rotateY(0deg);

}
.coin-elem.back.flip {
  transform: translate(-50%, -50%) rotateY(-180deg);

}

.coin-elem.scale {
  animation: scaleUpDown 1s ease;
}

@keyframes scaleUpDown {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.coin-elem.active {

}

.coin-elem.error {
  animation: coinShake 200ms ease-in-out 200ms forwards;
}
@keyframes coinShake {
  0% {
    transform: translate(-50%, -50%);
  }
  15% {
    transform: translate(-60%, -50%);
  }
  35% {
    transform: translate(-40%, -50%);
  }
  55% {
    transform: translate(-55%, -50%);
  }
  75% {
    transform: translate(-45%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

.coin-wrap .coin-elem.click{
    transform: translate(-60%, -60%);
    box-shadow: 5px 5px 2px #00000069;
transition: all 50ms;
}

.decoration-element-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.decoration-circle{
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid transparent;
    background-color: transparent;
    z-index: 1;
    transition: all 200ms;
}

.decoration-circle.active{
    border: 2px solid #f2f2f2;

}

.drop-img {
    width: 53%;
    height: 53%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
    opacity: 0; 
    transition: transform 500ms ease-in-out;
}


.drop-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 400ms;
}

.drop-img-bcg{
    opacity: 1; 
}
.drop-img-outline{
    opacity: 1; 
}