.card.safari.identified .front:before, .card.safari.identified .back:before {
  background: -webkit-radial-gradient(top left, ellipse cover, rgba(200,220,240,1) 0%, rgba(31,146,181,1) 100%); /* Chrome10+,Safari5.1+ */
background: -webkit-radial-gradient(top left, ellipse cover, #94cee0 1%,#0d87c4 100%); /* Chrome10+,Safari5.1+ */
 }

.card.ie-10.flipped, .card.ie-11.flipped {
  -webkit-transform: 0deg;
  -ms-transform: 0deg;
  transform: 0deg; }
  .card.ie-10.flipped .front, .card.ie-11.flipped .front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  .card.ie-10.flipped .back, .card.ie-11.flipped .back {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg); }
    .card.ie-10.flipped .back:after, .card.ie-11.flipped .back:after {
      left: 18%; }
    .card.ie-10.flipped .back .cvc, .card.ie-11.flipped .back .cvc {
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      transform: rotateY(180deg);
      left: 5%; }
    .card.ie-10.flipped .back .shiny, .card.ie-11.flipped .back .shiny {
      left: 84%; }
      .card.ie-10.flipped .back .shiny:after, .card.ie-11.flipped .back .shiny:after {
        left: -480%;
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg); }

.card.ie-10.amex .back, .card.ie-11.amex .back {
  display: none; }

.card-logo {
  height: 36px;
  width: 60px;
  font-style: italic; 
  }
  .card-logo, .card-logo:before, .card-logo:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

.card-logo.amex {
  text-transform: uppercase;
  font-size: 4px;
  font-weight: bold;
  color: white;
   background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px);
  background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px);
  border: 1px solid #EEE; }
  .card-logo.amex:before, .card-logo.amex:after {
    width: 28px;
    display: block;
    position: absolute;
    left: 16px; }
  .card-logo.amex:before {
    height: 28px;
    content: "american";
    top: 3px;
    text-align: left;
    padding-left: 2px;
    padding-top: 11px;
    background: #267AC3; }
  .card-logo.amex:after {
    content: "express";
    bottom: 11px;
    text-align: right;
    padding-right: 2px; }

.card.amex.flipped {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none; }
.card.amex.identified .front:before, .card.amex.identified .back:before {
	    background-color: #108168;
 
 content: 'American Express';
   bottom:-100px;
   left: -20px;
   color:rgba(255,255,255,0.06);

  font-size: 9em;
    font-weight:bold;
    font-style:italic;
    font-family: Arial;
  position: absolute;
  /* top: 38px; */
  width: 400px;
  padding-top: 106px;
  padding-left: 20px;}
.card.amex.identified .front .card-logo.amex {
  opacity: 1; }
.card.amex.identified .front .cvc {
  visibility: visible; }
.card.amex.identified .front:after {
  opacity: 1; }

.card-logo.discover {
  background: #FF6600;
  color: #111;
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  padding-top: 9px;
  letter-spacing: 0.03em;
  border: 1px solid #EEE; }
  .card-logo.discover:before, .card-logo.discover:after {
    content: " ";
    display: block;
    position: absolute; }
  .card-logo.discover:before {
    background: white;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    bottom: -5%;
    right: -80%;
    z-index: -1; }
  .card-logo.discover:after {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    top: 10px;
    left: 27px;
    background-color: #FFF;
    background-image: -webkit-radial-gradient(#FFF, #FF6600);
    background-image: radial-gradient(  #FFF, #FF6600);
    content: "network";
    font-size: 4px;
    line-height: 24px;
    text-indent: -7px; }

.card .front .card-logo.discover {
  right: 12%;
  top: 18%; }

.card.discover.identified .front:before, .card.discover.identified .back:before {

  background-color: #86B8CF;
    content: 'discover';

  bottom:-100px;

  left: -20px;

  color:rgba(255,255,255,0.06);

  font-size: 14em;
    font-weight:bold;
    font-style:italic;
    font-family: Arial;
  position: absolute;
  /* top: 38px; */
  width: 400px;
  padding-top: 68px;
  padding-left: 20px;
}
.card.discover.identified .card-logo.discover {
  opacity: 1; }
.card.discover.identified .front:after {
  -webkit-transition: 400ms;
  transition: 400ms;
  content: " ";
  display: block;
  background-color: #FF6600;
  background-image: -webkit-linear-gradient(#FF6600, #ffa166, #FF6600);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF6600), color-stop(#ffa166), to(#FF6600));
  background-image: linear-gradient(#FF6600, #ffa166, #FF6600);
  height: 50px;
  width: 50px;
  border-radius: 25px;
  position: absolute;
  left: 100%;
  top: 15%;
  margin-left: -25px;
  -webkit-box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5); }

.card.identified.visa .visa.card-logo { 
	position: absolute;
 	opacity: .9 !important;
	background-image: url('data:image/png;base64, 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');
	width: 65px;
	height: 45px;
}
.card.visa.identified .front:before, .card.visa.identified .back:before {
  background-color: #0061A8;
  content: 'visa';
   bottom:-100px;
   left: -20px;
   color:rgba(255,255,255,0.06);
   font-size: 14em;
    font-weight:bold;
    font-style:italic;
    font-family: Arial;
  position: absolute;
  /* top: 38px; */
  width: 400px;
  padding-top: 56px;
  padding-left: 20px;}
.card.visa.identified .card-logo.visa {
  opacity: 1; }


.card.identified.mastercard .mastercard.card-logo {  
	position: absolute;
	opacity: .9 !important;
	font-size: 22px;
	font-family: fantasy;
	background-image: url('data:image/png;base64, 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');
	width: 65px;
	height: 45px;
}

.card.mastercard.identified .front .card-logo.mastercard, .card.mastercard.identified .back .card-logo.mastercard {
  -webkit-box-shadow: none;
  box-shadow: none; }
.card.mastercard.identified .front:before, .card.mastercard.identified .back:before {
 background: linear-gradient(160deg, #db1431 0%, #b60722 100%) !important;
  content: 'mastercard';
   bottom:-100px;
   left: -20px;
   color:rgba(255,255,255,0.06);
   font-size: 14em;
    font-weight:bold;
    font-style:italic;
    font-family: Arial;
  position: absolute;
  /* top: 38px; */
  width: 400px;
  padding-top: 56px;
  padding-left: 20px;}
.card.mastercard.identified .card-logo.mastercard {
  opacity: 1; }

.card-container {
	font-family: "Helvetica Neue", sans-serif !important;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  width: 350px;
  max-width: 100%;
  height: 200px;
  margin: auto;
  z-index: 1;
  position: relative; }

.card {
  font-family: "Helvetica Neue";
  line-height: 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 200px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 400ms linear;
	transition: all 400ms linear;
	border-radius: 10px;
}

  .card > *, .card > *:before, .card > *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit; }
  .card.flipped {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .card .front, .card .back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 10px;
  background: #DDD;
	background: rgba(105, 110, 113, 0.6) !important;
   
         }
    .card .front:before, .card .back:before {
      content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 10px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    transition: all 400ms ease; 
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);
    
    }
    .card .front:after, .card .back:after {
      content: " ";
      display: block; }
    .card .front .display, .card .back .display {
	opacity: 1 !important;
	
	left: 0;
	font-weight: 500 !important;
      color: white;
      -webkit-transition: opacity 400ms linear;
      transition: opacity 400ms linear; }
      .card .front .display.focused, .card .back .display.focused {
        opacity: 1;
        font-weight: 700; }
    .card .front .cvc, .card .back .cvc {
      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
	font-size: 14px;
}

.card .front .shiny {
      width: 50px;
      height: 35px;
      border-radius: 5px;
      background: #CCC;
      position: relative;
      display: none;
}

.card .front .shiny:before {
        content: " ";
        display: block;
        width: 70%;
        height: 60%;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background: #d9d9d9;
        position: absolute;
        top: 20%; }
  .card .front .card-logo {
    position: absolute;
    opacity: 0;
    right: 5%;
    top: 8%;
    -webkit-transition: 400ms;
    transition: 400ms; }
  .card .front .lower {
	width: 80%;
    position: absolute;
	left: 10%;
	bottom: 30px;
}

    @media only screen and (max-width: 480px) {
      .card .front .lower {
        width: 90%;
		left: 5%;
        left: 5%; } }
    .card .front .lower .cvc {
      visibility: hidden;
      float: right;
      position: relative;
      bottom: 5px; }
    .card .front .lower .number {
      font-size: 24px;
      clear: both;
	margin-bottom: 30px;
}

.card .front .lower .number:before {
	content: attr(data-before) !important;
	display: block !important;
	font-size: 8px !important;
	font-weight: 500 !important;
	opacity: 0.5 !important;
	white-space: pre !important;
	margin-bottom: 5px !important;
}

    .card .front .lower .expiry {
      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
      letter-spacing: 0em;
      position: relative;
      float: right;
	width: 25%;
}

      .card .front .lower .expiry:after {
        position: absolute;
        content: attr(data-after);
        text-align: right;
        right: 100%;
        margin-right: 5px;
        margin-top: 2px;
	bottom: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 7px;
	white-space: pre;
	display: block;
	opacity: .5;
}

.card .front .lower .expiry:before {
	content: attr(data-before) !important;
	display: block !important;
	font-size: 8px !important;
	font-weight: 500 !important;
	opacity: 0.5 !important;
	white-space: pre !important;
	margin-bottom: 5px !important;
}

    .card .front .lower .name {
      text-transform: uppercase;
      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
	font-size: 18px;
      max-height: 45px;
      position: absolute;
      bottom: 0;
      width: 190px;
      -webkit-line-clamp: 2;
      -webkit-box-orient: horizontal;
      overflow: hidden;
	text-overflow: ellipsis;
}

.card .front .lower .number .card-number {
	color: #FFFFFF;
	font-size: 28px;
	display: block;
}

.card .front .lower .name .card-name
	{
	color: #FFFFFF;
	font-size: 18px;
	display: block;
}

.card .front .lower .expiry .card-expiry {
	color: #FFFFFF;
	font-size: 15px;
	display: block;
}

.card .front .lower .name:before {
	content: attr(data-before) !important;
	display: block !important;
	font-size: 8px !important;
	font-weight: 500 !important;
	opacity: 0.5 !important;
	white-space: pre !important;
	margin-bottom: 5px !important;
}

  .card .back {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg); }
    .card .back .bar {
      background-color: #444;
      background-image: -webkit-linear-gradient(#444, #333);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));
      background-image: linear-gradient(#444, #333);
      width: 100%;
      height: 20%;
      position: absolute;
      top: 10%; }
    .card .back:after {
      content: " ";
      display: block;
      background-color: #FFF;
      background-image: -webkit-linear-gradient(#FFF, #FFF);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF));
      background-image: linear-gradient(#FFF, #FFF);
      width: 80%;
      height: 16%;
      position: absolute;
      top: 40%;
      left: 2%; }
    .card .back .cvc {
      position: absolute;
      top: 40%;
      left: 85%;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms; }
    .card .back .shiny {
      position: absolute;
      top: 66%;
	left: 2%;
}

.card .back .shiny:before {
	content: " ";
	display: block;
	width: 70%;
	height: 60%;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background: #d9d9d9;
	position: absolute;
	top: 20%;
}

      .card .back .shiny:after {
	content:
		"This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free. It comes with no warranty. For support issues, please visit: github.com/jessepollak/card.";
        position: absolute;
        left: 120%;
        top: 5%;
        color: white;
        font-size: 7px;
        width: 230px;
	opacity: .5;
}

    .card.identified .front, .card.identified .back {
      background-color: #000;
      background-color: rgba(0, 0, 0, 0.5); }
      .card.identified .front:before, .card.identified .back:before {
        /* -webkit-transition: all 400ms ease; */
        /* transition: all 400ms ease; */
        /* background: #1db1cf; */ /* Old browsers */
    background: -moz-linear-gradient(top,  #1db1cf 0%, #1078ab 100%); /* FF3.6+ */

        /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); */ /* Chrome,Safari4+ */

        /* background: -webkit-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); */ /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* IE10+ */

        /* background: linear-gradient(to bottom,  #1db1cf 0%,#1078ab 100%); */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */
        opacity: 1; }
      .card.identified .front .card-logo, .card.identified .back .card-logo {
        /* -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); */
        /* box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); */ }
    .card.identified.no-radial-gradient .front:before, .card.identified.no-radial-gradient .back:before {
      background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
      background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(115deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); }

.card.identified.hitit_test .hitit_test.card-logo{
	opacity: .9 !important;
	font-size: 22px;
	font-family: fantasy;
	background-image: url('data:image/gif;base64,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');
	background-size:90px;
	width: 90px;
	right: 5%;
	font-style: normal;
	white-space: nowrap;
	position: relative;
	margin: auto;
}
.card.hitit_test .front, .card.hitit_test .back {
	background: rgb(240,249,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(240,249,255,1) 0%, rgba(226,226,226,1) 100%, rgba(148,27,34,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(100%,rgba(226,226,226,1)), color-stop(100%,rgba(148,27,34,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(226,226,226,1) 100%,rgba(148,27,34,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(226,226,226,1) 100%,rgba(148,27,34,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(226,226,226,1) 100%,rgba(148,27,34,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(240,249,255,1) 0%,rgba(226,226,226,1) 100%,rgba(148,27,34,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#941b22',GradientType=0 ); /* IE6-9 */

}
.card.hitit_test .front .display, .card.hitit_test .back .display {
	color: rgba(148, 27, 34, 0.9);
}



.card.identified.troy .troy.card-logo{
	opacity: .9 !important;
  	background-image: url('data:image/png;base64, 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');
	width: 60px;
	position: absolute;
}
.card.troy .front, .card.troy .back {
	background-color: rgb(0,183,196);
	background: rgba(0,143,153,1);
	background: -moz-linear-gradient(left, rgba(0,143,153,1) 0%, rgba(43,180,192,1) 50%, rgba(43,180,192,1) 51%, rgba(0,143,153,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,143,153,1)), color-stop(50%, rgba(43,180,192,1)), color-stop(51%, rgba(43,180,192,1)), color-stop(100%, rgba(0,143,153,1)));
	background: -webkit-linear-gradient(left, rgba(0,143,153,1) 0%, rgba(43,180,192,1) 50%, rgba(43,180,192,1) 51%, rgba(0,143,153,1) 100%);
	background: -o-linear-gradient(left, rgba(0,143,153,1) 0%, rgba(43,180,192,1) 50%, rgba(43,180,192,1) 51%, rgba(0,143,153,1) 100%);
	background: -ms-linear-gradient(left, rgba(0,143,153,1) 0%, rgba(43,180,192,1) 50%, rgba(43,180,192,1) 51%, rgba(0,143,153,1) 100%);
	background: linear-gradient(to right, rgba(0,143,153,1) 0%, rgba(43,180,192,1) 50%, rgba(43,180,192,1) 51%, rgba(0,143,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008f99', endColorstr='#008f99', GradientType=1 );

}
.card.troy .front .display, .card.troy .back .display {
	color: #fff;
}
.card:not(.identified) .unknown.card-logo:after{
	
	opacity: 1;
	width: auto;
height: auto;
}
.card:not(.identified) .unknown.card-logo{

opacity: 1;
width: auto;
height: auto;
}