.coin-icon{
  position: absolute;
  /* left: 0%;
  top: 0%;
  transform: translate(50%, 50%); */
  width: 45px;
  height: 45px;
}
.split-coins{
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  left:45px;
}
.coin-icon:hover{
  display: none;
}
.coin-icon:hover + .split-coins{
  display: block;
}
.coin{
  min-width: 50%;
  width: auto;
  height: auto;
}
.coin span{
  width: 45px;
  height:45px;
  background: url("../assets/images/coin.png") no-repeat;
  background-size:contain;
  display: block;
  position: absolute;
  /* left: 50%;
  top:50%; */
  z-index: 9999999;
}
.coin .coin-1{
  animation: coin1-Frames ease-in-out 4s;
  animation-iteration-count: 1;

  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: coin1-Frames ease-in-out 4s;
  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: coin1-Frames ease-in-out 4s;
  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: coin1-Frames ease-in-out 4s;
  -o-animation-iteration-count: 1;

  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: coin1-Frames ease-in-out 4s;
  -ms-animation-iteration-count: 1;

  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.coin .coin-2{
  animation: coin2-Frames ease-in-out 4s;
  animation-iteration-count: 1;

  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: coin2-Frames ease-in-out 4s;
  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: coin2-Frames ease-in-out 4s;
  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: coin2-Frames ease-in-out 4s;
  -o-animation-iteration-count: 1;

  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: coin2-Frames ease-in-out 4s;
  -ms-animation-iteration-count: 1;

  -ms-animation-fill-mode:forwards; /*IE 10+*/
}
.coin .coin-3{
  animation: coin3-Frames ease-in-out 4s;
  animation-iteration-count: 1;

  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: coin3-Frames ease-in-out 4s;
  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: coin3-Frames ease-in-out 4s;
  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: coin3-Frames ease-in-out 4s;
  -o-animation-iteration-count: 1;

  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: coin3-Frames ease-in-out 4s;
  -ms-animation-iteration-count: 1;

  -ms-animation-fill-mode:forwards; /*IE 10+*/
}
.coin .coin-4{
  animation: coin4-Frames ease-in-out 4s;
  animation-iteration-count: 1;

  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: coin4-Frames ease-in-out 4s;
  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: coin4-Frames ease-in-out 4s;
  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: coin4-Frames ease-in-out 4s;
  -o-animation-iteration-count: 1;

  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: coin4-Frames ease-in-out 4s;
  -ms-animation-iteration-count: 1;

  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.coin .coin-5{
  animation: coin5-Frames ease-in-out 4s;
  animation-iteration-count: 1;

  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: coin5-Frames ease-in-out 4s;
  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: coin5-Frames ease-in-out 4s;
  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: coin5-Frames ease-in-out 4s;
  -o-animation-iteration-count: 1;

  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: coin5-Frames ease-in-out 4s;
  -ms-animation-iteration-count: 1;

  -ms-animation-fill-mode:forwards; /*IE 10+*/
}


.popup-points{
  animation: popup-points-frames ease-in-out 1s;
}
@keyframes coin1-Frames{
  0% {
    transform: translate(0%, 0%);
  }
  30% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-50%, -50%);
   
  }
  100% {
    transform: translate(-310%, -710%);
  }
}
@keyframes coin2-Frames{
  0% {
    transform: translate(0%, 0%);
  }
  30% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-120%, -96%);
  }
  100% {
    transform: translate(-310%, -710%);
    
  }
}
@keyframes coin3-Frames{
  0% {
    transform: translate(0%, 0%);
  }
  30% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(-200%, 4px);
  }
  100% {
    transform: translate(-310%, -710%);
  }
}
@keyframes coin4-Frames{
  0% {
    transform: translate(0%, 0%);
  }
  30% {
    transform: translate(0%, 0%);
  }
  50% {
   
    transform: translate(-170%, 142%);
  }
  100% {
    transform: translate(-310%, -710%);
  }
}
@keyframes coin5-Frames{
  0% {
    transform: translate(0%, 0%);
  }
  30% {
    transform: translate(0%, 0%);
  }
  50% {
   
    transform: translate(-41%, 100%);
  }
  100% {
    transform: translate(-310%, -710%);
  }
}
@keyframes popup-points-frames{
  0% {
    top: 0px;
    transition: top 2s;
  }
  
  100% {
    top: -60px;
    transition: top 2s;
  }
}


.box img {
  -webkit-animation-delay:1s;
  -moz-animation-delay:1s;
  -ms-animation-delay:1s;
  -o-animation-delay:1s;
  animation-dely:1s;
}
img.animated {
  -webkit-animation: 16000ms bounceIn infinite alternate ease-in-out;
  -moz-animation: 16000ms bounceIn infinite alternate ease-in-out;
  -ms-animation: 16000ms bounceIn infinite alternate ease-in-out;
  -o-animation: 16000ms bounceIn infinite alternate ease-in-out;
  animation: 16000ms bounceIn infinite alternate ease-in-out;
}

@keyframes bounceIn {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform:scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform:scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform:scaleY(0.95);
  }

  90% {
    transform:scaleY(1.02);
  }
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@-moz-keyframes bounceIn {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}


.gift-unbox{
  position: relative;
}
.gift-unbox .box-top,
.gift-unbox .box-bottom{
  display: block;
  width: 295px;
  position: absolute;
}
.gift-unbox .box-top{
  background: url(../assets/images/box-top.png) no-repeat;
  height: 151px;
  top: -48px;
  z-index: 9;
  max-width: 200px;
    background-size: contain !important;
}
.gift-unbox .box-bottom{
  background: url(../assets/images/box-bottom.png) no-repeat;
  height: 165px;
  background-size: contain !important;
}

.gift-unbox .box-top {
  transition: top 2s;
  -webkit-animation: 1600ms unbox-top 1 alternate ease-in-out;
  -moz-animation: 1600ms unbox-top 1 alternate ease-in-out;
  -ms-animation: 1600ms unbox-top 1 alternate ease-in-out;
  -o-animation: 1600ms unbox-top 1 alternate ease-in-out;
  animation: 1600ms unbox-top 1 alternate ease-in-out;
}
.bounce-up-animation{
  max-width: 200px;
margin: 0 auto;
max-height: 200px;
}
.bg-battern.active{
  background: url(../assets/images/pattern.png) no-repeat;
  width: 431px;
  height: 366px;
  position: absolute;
  left: -56px;
  top: -126px;
}


#unbox-popup{
  /* background: url(../assets/images/bg-image.png) no-repeat; 
    background-size: cover;
    background-position: center center;
    position: relative !important; 
    height: 84vh;
    top: 62px;*/
}
#unbox-popup .modal-content{
  background: transparent;
  border: none;
}
#unbox-popup .modal-header{
  border-bottom: none;
    padding: 0px;
}