/* Sizing is 1em = 20px */
@font-face {
  font-family: 'ocraregular';
  src: url("../fonts/ocra-webfont.eot");
  src: url("../fonts/ocra-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ocra-webfont.woff") format("woff"), url("../fonts/ocra-webfont.ttf") format("truetype"), url("../fonts/ocra-webfont.svg#ocraregular") format("svg");
  font-weight: normal;
  font-style: normal; }

.skeuocard.js {
  width: 24.8em;
  height: 15.6em;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000; }
  .skeuocard.js input[type=number]::-webkit-inner-spin-button,
  .skeuocard.js input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  .skeuocard.js .card-body {
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    position: relative; }
    .skeuocard.js .card-body .face {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-backface-visibility: visible;
      -webkit-backface-visibility: hidden;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 0.25s ease, background-image 0.25s ease;
      -ms-transition: -ms-transform 0.25s ease, background-image 0.25s ease;
      -moz-transition: -moz-transform 0.25s ease, background-image 0.25s ease;
      -o-transition: -o-transform 0.25s ease, background-image 0.25s ease;
      transition: transform 0.25s ease, background-image 0.25s ease;
      position: absolute;
      top: 0;
      left: 0;
      width: 24.8em;
      height: 15.6em;
      -webkit-border-radius: 1.15em;
      border-radius: 1.15em;
      background-color: #eee;
      background-size: cover;
      border: 1px solid #ddd; }
    .skeuocard.js .card-body .face.front {
      -webkit-transform: translate3d(0, 0, 0);
      z-index: 2; }
    .skeuocard.js .card-body .face.back {
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      transform: rotateY(-180deg); }
  .skeuocard.js .card-body.flip .face.back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  .skeuocard.js .card-body.flip .face.front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .skeuocard.js.valid .card-body .face {
    box-shadow: 0 0 10px #00cfa7;
    -webkit-box-shadow: 0 0 10px #00cfa7;
    -ms-box-shadow: 0 0 10px #00cfa7;
    -moz-box-shadow: 0 0 10px #00cfa7;
    -o-box-shadow: 0 0 10px #00cfa7; }
  .skeuocard.js .flip-tab {
    position: absolute;
    -webkit-border-radius: 3.55em;
    border-radius: 3.55em;
    cursor: pointer;
    cursor: hand;
    height: 3.55em;
    width: 13em;
    display: none !important;
    background: #666;
    background-size: 1.375em 1.725em;
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease; }
    .skeuocard.js .flip-tab p {
      margin: 0.6em;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      font-size: 1.0em;
      line-height: 1.2em; }
    .skeuocard.js .flip-tab.front {
      right: -1.25em;
      top: 1em; }
      .skeuocard.js .flip-tab.front:hover {
        right: -1.8em; }
    .skeuocard.js .flip-tab.back {
      left: -1.25em;
      top: 1em; }
      .skeuocard.js .flip-tab.back:hover {
        left: -1.8em; }
  .skeuocard.js .flip-tab.valid-anim {
    background: #00cfa7 url("../images/skeuocard/card-valid-anim.gif") no-repeat;
    background-size: 2.3em 2.3em; }
    .skeuocard.js .flip-tab.valid-anim.front {
      background-position: 10.05em 0.6em; }
      .skeuocard.js .flip-tab.valid-anim.front p {
        margin-right: 2.9em;
        margin-left: 1.25em;
        margin-top: 0.6em; }
    .skeuocard.js .flip-tab.valid-anim.back {
      background-position: 0.6em 0.6em; }
      .skeuocard.js .flip-tab.valid-anim.back p {
        margin-right: 1.25em;
        margin-left: 2.9em;
        margin-top: 0.6em; }
  .skeuocard.js .flip-tab.prompt {
    background-color: #00cfa7; }
  .skeuocard.js .flip-tab.warn {
    background-color: #ff655a; }

.skeuocard.js input {
  border: none;
  outline: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -ms-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px; }
.skeuocard.js input:focus {
  outline: none;
  box-shadow: 0 0 10px #0096de;
  -webkit-box-shadow: 0 0 10px #0096de;
  -ms-box-shadow: 0 0 10px #0096de;
  -moz-box-shadow: 0 0 10px #0096de;
  -o-box-shadow: 0 0 10px #0096de; }
.skeuocard.js .face.front {
  background-color: #eee;
  background-image: url("../images/skeuocard/products/generic-front.png"), url("../images/skeuocard/card-front-background.png");
  background-repeat: no-repeat;
  background-size: cover; }
.skeuocard.js .face.back {
  background-color: #eee;
  background-image: url("../images/skeuocard/products/generic-back.png");
  background-repeat: no-repeat;
  background-size: cover; }
.skeuocard.js .cc-number {
  position: absolute;
  display: block;
  left: 1.8em;
  top: 8.05em; }
  .skeuocard.js .cc-number input {
    color: #333;
    background-color: #fff;
    font-family: "ocraregular", "OCR A Std", "OCR A", Courier, "Courier New", monospace;
    font-size: 1.5em; }
    .skeuocard.js .cc-number input.group4 {
      width: 3.2em; }
    .skeuocard.js .cc-number input.group5 {
      width: 3.8em; }
    .skeuocard.js .cc-number input.group6 {
      width: 4.6em; }
    .skeuocard.js .cc-number input.group19 {
      width: 14em; }
  .skeuocard.js .cc-number input + input {
    margin-left: 0.4em; }

.skeuocard.card-product .face.front, .skeuocard.product-visa .face.front, .skeuocard.product-amex .face.front, .skeuocard.product-dinersclubintl .face.front, .skeuocard.product-mastercard .face.front, .skeuocard.product-discover .face.front {
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover; }
.skeuocard.card-product .face.back, .skeuocard.product-visa .face.back, .skeuocard.product-amex .face.back, .skeuocard.product-dinersclubintl .face.back, .skeuocard.product-mastercard .face.back, .skeuocard.product-discover .face.back {
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover; }
.skeuocard.card-product .cc-number, .skeuocard.product-visa .cc-number, .skeuocard.product-amex .cc-number, .skeuocard.product-dinersclubintl .cc-number, .skeuocard.product-mastercard .cc-number, .skeuocard.product-discover .cc-number {
  background-color: transparent;
  padding: 0.1em; }
  .skeuocard.card-product .cc-number input, .skeuocard.product-visa .cc-number input, .skeuocard.product-amex .cc-number input, .skeuocard.product-dinersclubintl .cc-number input, .skeuocard.product-mastercard .cc-number input, .skeuocard.product-discover .cc-number input {
    color: #333;
    background-color: transparent;
    border: none; }
  .skeuocard.card-product .cc-number input:focus, .skeuocard.product-visa .cc-number input:focus, .skeuocard.product-amex .cc-number input:focus, .skeuocard.product-dinersclubintl .cc-number input:focus, .skeuocard.product-mastercard .cc-number input:focus, .skeuocard.product-discover .cc-number input:focus {
    background-color: rgba(255, 255, 255, 0.6); }
.skeuocard.card-product .cc-exp, .skeuocard.product-visa .cc-exp, .skeuocard.product-amex .cc-exp, .skeuocard.product-dinersclubintl .cc-exp, .skeuocard.product-mastercard .cc-exp, .skeuocard.product-discover .cc-exp {
  position: absolute;
  display: block; }
  .skeuocard.card-product .cc-exp input, .skeuocard.product-visa .cc-exp input, .skeuocard.product-amex .cc-exp input, .skeuocard.product-dinersclubintl .cc-exp input, .skeuocard.product-mastercard .cc-exp input, .skeuocard.product-discover .cc-exp input, .skeuocard.card-product .cc-exp .separator, .skeuocard.product-visa .cc-exp .separator, .skeuocard.product-amex .cc-exp .separator, .skeuocard.product-dinersclubintl .cc-exp .separator, .skeuocard.product-mastercard .cc-exp .separator, .skeuocard.product-discover .cc-exp .separator {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: "ocraregular", "OCR A Std", "OCR A", Courier, "Courier New", monospace;
    color: #333;
    background-color: transparent;
    border: none;
    text-align: center; }
    .skeuocard.card-product .cc-exp input.group2, .skeuocard.product-visa .cc-exp input.group2, .skeuocard.product-amex .cc-exp input.group2, .skeuocard.product-dinersclubintl .cc-exp input.group2, .skeuocard.product-mastercard .cc-exp input.group2, .skeuocard.product-discover .cc-exp input.group2, .skeuocard.card-product .cc-exp .separator.group2, .skeuocard.product-visa .cc-exp .separator.group2, .skeuocard.product-amex .cc-exp .separator.group2, .skeuocard.product-dinersclubintl .cc-exp .separator.group2, .skeuocard.product-mastercard .cc-exp .separator.group2, .skeuocard.product-discover .cc-exp .separator.group2 {
      width: 2em; }
    .skeuocard.card-product .cc-exp input.group4, .skeuocard.product-visa .cc-exp input.group4, .skeuocard.product-amex .cc-exp input.group4, .skeuocard.product-dinersclubintl .cc-exp input.group4, .skeuocard.product-mastercard .cc-exp input.group4, .skeuocard.product-discover .cc-exp input.group4, .skeuocard.card-product .cc-exp .separator.group4, .skeuocard.product-visa .cc-exp .separator.group4, .skeuocard.product-amex .cc-exp .separator.group4, .skeuocard.product-dinersclubintl .cc-exp .separator.group4, .skeuocard.product-mastercard .cc-exp .separator.group4, .skeuocard.product-discover .cc-exp .separator.group4 {
      width: 4em; }
.skeuocard.card-product .cc-name, .skeuocard.product-visa .cc-name, .skeuocard.product-amex .cc-name, .skeuocard.product-dinersclubintl .cc-name, .skeuocard.product-mastercard .cc-name, .skeuocard.product-discover .cc-name {
  margin: 0;
  padding: 0;
  position: absolute;
  display: block;
  font-size: 1em;
  font-family: "ocraregular", "OCR A Std", "OCR A", Courier, "Courier New", monospace;
  background-color: transparent;
  border: none;
  text-transform: uppercase; }
.skeuocard .cc-exp input, .skeuocard input.cc-name {
  background-color: #fff !important;
  border: 1px solid #000 !important;
}
.skeuocard .cc-name {
  width: 180px;
}
.skeuocard.card-product .cc-cvc, .skeuocard.product-visa .cc-cvc, .skeuocard.product-amex .cc-cvc, .skeuocard.product-dinersclubintl .cc-cvc, .skeuocard.product-mastercard .cc-cvc, .skeuocard.product-discover .cc-cvc {
  margin: 0;
  padding: 0;
  position: absolute;
  display: none !important;
  font-size: 1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: transparent;
  border: none; }
.skeuocard.card-product .invalid, .skeuocard.product-visa .invalid, .skeuocard.product-amex .invalid, .skeuocard.product-dinersclubintl .invalid, .skeuocard.product-mastercard .invalid, .skeuocard.product-discover .invalid {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }
.skeuocard.card-product .invalid, .skeuocard.product-visa .invalid, .skeuocard.product-amex .invalid, .skeuocard.product-dinersclubintl .invalid, .skeuocard.product-mastercard .invalid, .skeuocard.product-discover .invalid {
  outline: none;
  box-shadow: 0 0 10px #ff655a;
  transition: box-shadow linear 0.15s;
  -webkit-transition: box-shadow linear 0.15s;
  -ms-transition: box-shadow linear 0.15s;
  -moz-transition: box-shadow linear 0.15s;
  -o-transition: box-shadow linear 0.15s; }
  .skeuocard.card-product .invalid input:focus, .skeuocard.product-visa .invalid input:focus, .skeuocard.product-amex .invalid input:focus, .skeuocard.product-dinersclubintl .invalid input:focus, .skeuocard.product-mastercard .invalid input:focus, .skeuocard.product-discover .invalid input:focus {
    border: 1px solid blue;
    outline: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px; }

/* prevent the name textbox from showing up with error */
.skeuocard .cc-name.invalid {
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 3px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: inherit !important;
  -webkit-transition: inherit !important;
  -ms-transition: inherit !important;
  -moz-transition: inherit !important;
  -o-transition: inherit !important; }
.skeuocard.product-visa {
  /*
  &.issuer-simple{
    .face.front{
      background-image: url('../images/skeuocard/issuers/visa-simple-front.png');
    }
    input, .separator {
      color: #eee;
      background-color: transparent;
      text-shadow: 1px 1px 1px #bbb;
      filter: dropshadow(color=#aaa, offx=1, offy=1);
      border: none;
      @include input-placeholder{ 
        color: #fff; 
        text-shadow: 1px 1px 1px #ccc;
        filter: dropshadow(color=#ddd, offx=1, offy=1);
      };
    }
    .cc-number{

      background-color: transparent;
    }
  }
  */ }
  .skeuocard.product-visa .face.front {
    background-image: url("../images/skeuocard/products/visa-front.png"), url("../images/skeuocard/card-front-background.png"); }
  .skeuocard.product-visa .face.back {
    background-image: url("../images/skeuocard/products/visa-back.png"), url("../images/skeuocard/products/generic-back.png"); }
  .skeuocard.product-visa .cc-number {
    left: 1.8em;
    top: 8.05em; }
  .skeuocard.product-visa .cc-exp {
    left: 10.9em;
    top: 11.2em;
    width: 5em; }
  .skeuocard.product-visa .cc-name {
    left: 1.8em;
    top: 13em; }
  .skeuocard.product-visa .cc-cvc {
    top: 7.15em;
    left: 18.1em;
    width: 3em; }
  .skeuocard.product-visa.issuer-chase-sapphire .face.front {
    background-image: url("../images/skeuocard/issuers/visa-chase-sapphire.png"); }
  .skeuocard.product-visa.issuer-chase-sapphire .cc-name {
    left: 1.25em;
    top: 8.90em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px; }
  .skeuocard.product-visa.issuer-chase-sapphire .cc-number {
    left: 1.25em;
    top: 9.6em; }
    .skeuocard.product-visa.issuer-chase-sapphire .cc-number input {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: 2px;
      font-size: 1.425em; }
      .skeuocard.product-visa.issuer-chase-sapphire .cc-number input.group4 {
        width: 2.8em; }
    .skeuocard.product-visa.issuer-chase-sapphire .cc-number input + input {
      margin-left: 0.1em; }
  .skeuocard.product-visa.issuer-chase-sapphire .cc-exp {
    left: 3.75em;
    top: 11.5em; }
    .skeuocard.product-visa.issuer-chase-sapphire .cc-exp input, .skeuocard.product-visa.issuer-chase-sapphire .cc-exp .separator {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
      .skeuocard.product-visa.issuer-chase-sapphire .cc-exp input.group2, .skeuocard.product-visa.issuer-chase-sapphire .cc-exp .separator.group2 {
        width: 1.6em; }
  .skeuocard.product-visa.issuer-chase-sapphire .cc-cvc {
    top: 6.3em;
    left: 15.25em; }

.skeuocard.product-amex .face.front {
  background-image: url("../images/skeuocard/products/amex-front.png"), url("../images/skeuocard/card-front-background.png"); }
.skeuocard.product-amex .face.back {
  background-image: url("../images/skeuocard/products/visa-back.png"), url("../images/skeuocard/products/generic-back.png"); }
.skeuocard.product-amex .cc-number {
  left: 3em;
  top: 7.05em; }
.skeuocard.product-amex .cc-name {
  left: 2.5em;
  top: 13.5em; }
.skeuocard.product-amex .cc-exp {
  left: 2.5em;
  top: 11.5em; }
.skeuocard.product-amex .cc-cvc {
  left: 21.25em;
  top: 7em;
  width: 3em; }

.skeuocard.product-dinersclubintl .face.front {
  background-image: url("../images/skeuocard/products/dinersclubintl-front.png"), url("../images/skeuocard/card-front-background.png"); }
.skeuocard.product-dinersclubintl .face.back {
  background-image: url("../images/skeuocard/products/visa-back.png"), url("../images/skeuocard/products/generic-back.png"); }
.skeuocard.product-dinersclubintl .cc-number {
  left: 1.8em;
  top: 8.05em; }
.skeuocard.product-dinersclubintl .cc-name {
  left: 1.8em;
  top: 11.5em; }
.skeuocard.product-dinersclubintl .cc-exp {
  left: 17.5em;
  top: 13.5em; }
.skeuocard.product-dinersclubintl .cc-cvc {
  top: 7.15em;
  left: 18.1em;
  width: 3em; }

.skeuocard.product-mastercard .face.front {
  background-image: url("../images/skeuocard/products/mastercard-front.png"), url("../images/skeuocard/card-front-background.png"); }
.skeuocard.product-mastercard .face.back {
  background-image: url("../images/skeuocard/products/visa-back.png"), url("../images/skeuocard/products/generic-back.png"); }
.skeuocard.product-mastercard .cc-number {
  left: 1.8em;
  top: 7.0em; }
.skeuocard.product-mastercard .cc-name {
  left: 2.5em;
  top: 12.4em; }
.skeuocard.product-mastercard .cc-exp {
  left: 11.5em;
  top: 10.8em; }
.skeuocard.product-mastercard .cc-cvc {
  top: 7.15em;
  left: 18.1em;
  width: 3em; }

.skeuocard.product-discover .face.front {
  background-image: url("../images/skeuocard/products/discover-front.png"), url("../images/skeuocard/card-front-background.png"); }
.skeuocard.product-discover .face.back {
  background-image: url("../images/skeuocard/products/visa-back.png"), url("../images/skeuocard/products/generic-back.png"); }
.skeuocard.product-discover .cc-number {
  left: 1.8em;
  top: 8.05em; }
.skeuocard.product-discover .cc-name {
  left: 1.55em;
  top: 13.575em; }
.skeuocard.product-discover .cc-exp {
  left: 13.15em;
  top: 11.61em; }
.skeuocard.product-discover .cc-cvc {
  top: 7.15em;
  left: 18.1em;
  width: 3em; }

/* Preload face images */
body:after {
  display: none;
  content: url("../images/skeuocard/products/visa-front.png") url("../images/skeuocard/products/amex-front.png") url("../images/skeuocard/products/discover-front.png") url("../images/skeuocard/products/mastercard-front.png") url("../images/skeuocard/products/dinersclubintl-front.png"); }

.ie10 .skeuocard .cc-number input ::-ms-clear {
  display: none !important; }

/* 
Fix for issue with Chrome in which no GPU acceleration will mess with 
backface visibility in 3d transforms
see: https://code.google.com/p/chromium/issues/detail?id=127844 
*/
@media screen and (-webkit-transform-3d: 0) {
  .chrome.win .skeuocard .card-body .face {
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-duration: 0.25s, 0;
    -webkit-transition-timing-function: ease-in-out,ease-in-out;
    -webkit-transition-delay: 0, 0; }
  .chrome.win .skeuocard .card-body .face.back {
    opacity: 0; }
  .chrome.win .skeuocard .card-body.flip .face.front {
    -webkit-transform: rotateX(0deg) rotateY(-180deg);
    opacity: 0;
    z-index: -1; }
  .chrome.win .skeuocard .card-body.flip .face.back {
    opacity: 1; } }