@font-face {
  font-family: "Aurulent";
  src: url("../fonts/AurulentSans-Regular.eot");
  src:
    url("../fonts/AurulentSans-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/AurulentSans-Regular.woff") format("woff"),
    url("../fonts/AurulentSans-Regular.ttf") format("truetype"),
    url("../fonts/AurulentSans-Regular.svg#svgAurulent") format("svg");
}

.chaves.spot-price {
  display: block;
  font:
    normal normal normal 48px/1 "Aurulent",
    Helvetica,
    Arial,
    sans-serif;
  padding: 10px 0;
  position: relative;
  text-align: center;
}

.chaves.spot-price-gold-1 {
  background: #ddb500;
  background: radial-gradient(#f0f0f0, #ddb500);
  border: 2px solid #ccc;
  color: #fff;
  text-shadow: #000 0 0 6px;
}

.chaves.spot-price-gold-2 {
  background: #f5a72a;
  background: radial-gradient(#ffd700, #f5a72a);
  border: 2px solid #cc071e;
  color: #fff;
  text-shadow: #666 0 0 6px;
}

.chaves.spot-price-gold-3 {
  background: #d38508;
  background: radial-gradient(#ddb500, #d38508);
  border: 2px solid #000;
  color: #f6f6f6;
  text-shadow: #000 0 0 6px;
}

.chaves.spot-price-gold-4 {
  background: #6d6230;
  background: radial-gradient(#d38508, #6d6230);
  border: 2px solid #000;
  color: #f6f6f6;
  text-shadow: #000 0 0 6px;
}

.chaves.spot-price-silver {
  background: #dadada;
  background: radial-gradient(#dadada, #757575);
  border: 2px solid #ccc;
  color: #f6f6f6;
  text-shadow: 0 0 6px #000;
}

.chaves.spot-price-platinum {
  background: #e5e4e2;
  background: radial-gradient(#e5e4e2, #eeeeee);
  border: 2px solid #ddb500;
  color: #fff;
  text-shadow: 0 0 2px #000;
}

.chaves.spot-price-palladium {
  background: #6f6a75;
  background: radial-gradient(#6f6a75, #97b5bd);
  border: 2px solid #97b5bd;
  color: #fff;
  text-shadow: 0 0 6px #000;
}

.chaves.spot-price .spot-price-content {
  position: relative;
  z-index: 2;
}

.chaves.spot-price .spot-price-background {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.chaves .spot-price-transition-increase {
  animation: spot-price-transition-fadeout 1.5s ease-out;
  background: radial-gradient(#1b5e20, #4caf50);
}

.chaves .spot-price-transition-decrease {
  animation: spot-price-transition-fadeout 1.5s ease-out;
  background: radial-gradient(#b71c1c, #ef5350);
}

.chaves .spot-price-transition-equal {
  animation: spot-price-transition-fadeout 1.5s ease-out;
  background: radial-gradient(#616161, #9e9e9e);
}

@keyframes spot-price-transition-fadeout {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 0;
  }
}