@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
.primecard_box {
  position: relative;
  transition: 0s;
}
.primecard{
  background: url(../img/attack-01.png) no-repeat center center;
  background-size: 65px auto; 
  width:65px;
  height:65px;
  background-color: transparent!important;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
}
.primecard:hover{
  background-color: rgba(195, 0, 0, 1);
}
.cashbox {
  width: 320px;
  /* height: 200px; */
  display: block;margin: 0 auto;
  position: relative;
  z-index: 999996;
}
@keyframes cardshake {
  from {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
	
  20%{
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }	

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
	
  53%{
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);

  }	

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
	
  80%{
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }	

  90% {
    transform: translate3d(0,-4px,0);
  }
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
	
}
.cardshake {
  transform-origin: center bottom; 
  animation: cardshake 4s infinite ;
  transition: 0s;
}
.blurin{
	animation: blurin 3s forwards;
}
@keyframes blurin {

  0% {
	-webkit-filter: blur(0px); 
     -moz-filter: blur(0px);
     -ms-filter: blur(0px); 
     -o-filter: blur(0px);
     filter: blur(0px);
	 opacity: (0%);
     filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');/* IE6~IE9 */	
  }
	
	
  to {
	-webkit-filter: blur(5px); 
     -moz-filter: blur(5px);
     -ms-filter: blur(5px); 
     -o-filter: blur(5px);
     filter: blur(5px);
	 opacity: (100%);
     filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');/* IE6~IE9 */	
  }
	
}

.blurout{
	animation: blurout 1.5s forwards;
}

@keyframes blurout {

  0% {
	-webkit-filter: blur(5px); 
     -moz-filter: blur(5px);
     -ms-filter: blur(5px); 
     -o-filter: blur(5px);
     filter: blur(5px);
     filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');/* IE6~IE9 */	
  }
	
	
  to {
	-webkit-filter: blur(0px); 
     -moz-filter: blur(0px);
     -ms-filter: blur(0px); 
     -o-filter: blur(0px);
     filter: blur(0px);
     filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');/* IE6~IE9 */	
  }
	
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both!important;
  animation-iteration-count: 1!important;
}

.cardclose {
	background-image: url('../img/close-icon.png');
	background-size: 35px auto!important;
	display: block;
	position: absolute;
	top: -25px;
	right: 10px;
	width: 35px;
	height: 35px;
	cursor: pointer;
	z-index: 999999;
}

@keyframes rubberBand {
	
  from {
    transform: scale3d(0, 0, 0);
	  opacity: 0;
  }

  to {
    transform: scale3d(1, 1, 1);
	opacity: 1;
  }
	
}

.change {
  animation-name: change;
}


@keyframes change {
  from {
  transform: scale3d(1, 1, 1);
	top: 0px;  
	left: 0%;
	opacity: 1; 
	width: 400px;
  	height: 248px;
	border-radius: 0;
  }

  50% {
	opacity: 0; 	
  }

  to {
    transform: scale3d(0, 0, 0);
	top: 600px;
	left: 100%;
	opacity: 0;
	width: 50px;
	height: 50px;
	border-radius: 99em;
  }
}

.rubberBand {
  animation-name: rubberBand;
}

.coin1 {
  animation: drop 1s 2;
}

.coin2 {
  animation: drop 1s 2;
  animation-delay: .2s;
}

.coin3 {
  animation: drop 1s 2;
  animation-delay: .4s;
}

@keyframes drop {

  0% {
    transform: translate3d(50px, -100px, 0px);
	  opacity: 1;
  }
	
	
  to {
    transform: translate3d(0px, 430px, 0px);
	  opacity: 1;
  }
	
}

#cardbox{
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 999999;
	display: none;
}

.fgh{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.8);
	display: none;
}

.flip {
  position: relative;
  z-index: 999997;
  top:200px;
}
.flip  .front, .flip  .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.5s;
  transition-property: transform, opacity;
  box-shadow: inset 0.15vmin 0.15vmin 0.1vmin rgba(white, 0.25);
  backface-visibility: hidden;

}

.flip  .front:after , .flip  .back:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -0.5vmin;
    left: 2vmin;
    right: 2vmin;
    height: 1vmin;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.35);
    -webkit-filter: blur(0.5vmin);
    z-index: -1;
	
}
.flip  .front {
  transform: rotateY(0deg);
}

.flip  .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}

.flip  .front.rr {
  transform: rotateY(180deg);
}

.flip  .back.rr {
  opacity: 1;
  transform: rotateY(0deg);

}
.flip:hover  .front {
  transform: rotateY(180deg);
}
.flip:hover  .back {
  opacity: 1;
  transform: rotateY(0deg);
}
.flip.flip-vertical  .back {
  transform: rotateX(-180deg);
}
.flip.flip-vertical:hover  .front {
  transform: rotateX(180deg);
}
.flip.flip-vertical:hover  .back {
  transform: rotateX(0deg);
}
.flip {
  position: relative;
  margin-right: 2px;
  margin: 108px auto;
  width: 400px;

}
.flip  .front, .flip  .back {
  display: block;
  color: white;
 /* width: inherit;*/
	background-size: cover;
  background-position: center !important;
  height: 248px;
  padding: 1em 2em;
  background: #313131;
  border-radius: 10px;	

}
.flip  .front p, .flip  .back p {
  font-size: 0.9125rem;
  line-height: 160%;
  color: #999;
}


.flip  .front, .flip  .back {
  display: block;
  color: white;
  /*width: inherit;*/
  background-size: cover!important;
  background-position: center !important;
  height: 248px;
  padding: 1em 2em;
  background: #313131;
  border-radius: 10px;
}


.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}

@media only screen and (max-width: 650px) {
	.flip {
		width: 320px;
	}
	
	.flip  .front, .flip  .back {
		height: 202px;
	}
}
@media only screen and (max-width: 350px) {
  .flip {
    width: 310px;
  }
}
