/* Start RFID Card Animation */
@-webkit-keyframes rfid-card{
	0%  {opacity:0; left:200px; top:25px;}
	5%,10%  {opacity:1; left:200px; top:25px; -webkit-transform: scale(1);}
	45%,55%  {left:0px; top:150px; -webkit-transform: scale(.8);}
	90%{opacity:1; left:200px; top:300px; -webkit-transform: scale(1);}
	95%,100%{opacity:0; left:200px; top:300px;}
}
.rfid-card {
	margin:auto;
	position:relative;
	display:block;
	width:163px;
	height:520px;
}
.rfid-card img {
	position:absolute;
}
.rfid-card .reader {
	top:200px;
	left:0px;
	z-index:1;
}
.rfid-card .card {
	z-index:2;
	left:0px;
	top:25px;
	-webkit-animation:rfid-card 5s ease-in-out infinite normal;
}
/* End RFID Card Animation */

/* Start Magstripe Card Animation */
@-webkit-keyframes magstripe-card {
	0% {opacity: 0; top: 0px;}
	10%,50%	{opacity: 1; top: 0px;}
	65%	{opacity: 1;top: 260px;}
	75%,100% {opacity: 0;top: 260px;}
}
.magstripe-card {
	display: block;
	height: 520px;
	margin: auto;
	position: relative;
	width: 163px;
}
.magstripe-card img {
	position: absolute;
}
.magstripe-card .swipe-left {
	left: 50px;
	top: 90px;
	z-index: 3;
}
.magstripe-card .swipe-right {
	left: 108px;
	top: 97px;
	z-index: 1;
}
.magstripe-card .card {
	left: 50px;
	top: 0px;
	-webkit-animation: magstripe-card 4s ease-in-out infinite normal;
	z-index: 2;
}
/* End Magstripe Card Animation */

/* Start Barcode Tag Animation */
@-webkit-keyframes barcode-tag{
	0%  {opacity:0; left:calc(100% - 250px); top:100px;}
	5%,10%  {opacity:1; left:calc(100% - 250px); top:100px; -webkit-transform: scale(1);}
	45%,55%  {left:calc(50% - 120px); top:75px; -webkit-transform: scale(.8);}
	90%, 95% {opacity:1; left:0%; top:100px; -webkit-transform: scale(1);}
	100% {opacity:0; left:0%; top:100px;}
}
.barcode-tag {
	margin: auto auto;
	position: relative;
	display: block;
	width: 100%;
	height: 150px;
}
.barcode-tag img {
	position:absolute;
}
.barcode-tag .reader {
	margin: auto auto;
	position: relative;
	z-index:1;
}
.barcode-tag .tag {
	z-index:0;
	left:0px;
	-webkit-animation:barcode-tag 5s ease-in-out infinite normal;
}
/* End Barcode Tag Animation */

/* Start Print Animation */
#slot{
    width:300px;
    height:5px;
    background-color:black;
    margin:10px;
    border-radius:5px;
    position:relative;
	margin: auto auto;
}
#paper-holder{
    position:absolute;
    overflow:hidden;
    top:3px;
    left:0;
    right:0;
	margin: auto auto;
	-webkit-animation:printing 4s ease-in-out infinite normal;
}
@-webkit-keyframes printing {
	0%,5% {height: 0px;}
	100% {height: 61px;}
}
#paper{
    position:absolute;
    width:288px;
    left:5px;
    bottom:0;
    height:60px;
    line-height:30px;
    text-align:center;
    background-color: #fcf5be;
    border:1px solid #ccc;
    box-shadow:2px 2px 2px rgba(0,0,0,0.1);
    border-top:0;
	margin: auto auto;
	letter-spacing: 2px;
	font-weight: bold;
}
/* End Print Animation */

/* Start Fade Out */
@-webkit-keyframes fadeout {
	0% {opacity: 1;}
	75%	{opacity: 1;}
	100% {opacity: 0;}
}

/* End Fade Out */

/* Start Check Mark */
.checkmark-circle {
  width: 150px;
  height: 150px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.checkmark-circle .background {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #2EB150;
  position: absolute;
}
.checkmark-circle .checkmark {
  border-radius: 5px;
}
.checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 600ms;
  -moz-animation-delay: 600ms;
  animation-delay: 600ms;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
  opacity: 0;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 15px solid white;
  border-top: 15px solid white;
  border-radius: 2.5px !important;
  content: '';
  left: 25px;
  top: 75px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
/* End Check Mark */

input.hidden {
    background: transparent;
    border: none;
	opacity:.05;
	border: none;
	outline: none;
	display: block;
}