.block-area.api-uf-view#tableStriped .opening-cards-enviroment .cardContainer {
    margin: 20px 18px 0px;
  }
/* El primer elemento de cada fila (1, 4, 7, ...) */
.block-area.api-uf-view#tableStriped .opening-cards-enviroment .cardContainer:nth-child(3n+1) {
    margin-left: 0 !important;
}

/* El último elemento de cada fila (3, 6, 9, ...) */
.block-area.api-uf-view#tableStriped .opening-cards-enviroment .cardContainer:nth-child(3n) {
    margin-right: 0 !important;
}

 .opening-cards-enviroment .cardContainer .card .side{
    border-radius: 10px !important;
    border: 2px solid #c1e0ff;
}
 .opening-cards-enviroment .cardContainer .card .description {
    background-color: rgba(0, 0, 0, 0.3);
    border: none !important;
}
 .opening-cards-enviroment .cardContainer h3{
    padding: 2px ;;
 }

.opening-cards-enviroment .cardContainer .card .side .legend {
    width: 150px;
    height: 40px;
    clip-path: polygon(20px 0, 150px 0, 150px 35px, 0 21px);
    position: absolute;
    top: 7px !important;
    right: 7px;
    text-align: right;
    font-size: 15px;
    text-transform: uppercase;
    border-top-right-radius: 2px;
}

.opening-cards-enviroment .cardContainer .card .side .mainPic {
    border-radius: 15px 0 5px 0;
    border-width: 7px;
    border-bottom-width: 1px;
    border-right-width: 3px;
    border-left-width: 0px;
}
.opening-cards-enviroment .cardContainer .card.flipcard{
    background-color: transparent !important;
}

 .cardContainer .card .front,
 .cardContainer .card .back,
 .cardContainer .letter {
  background-color: #091217;
  background: #207acf;
  /* Old browsers */
  background: url("../images/cards/bg-left.png") repeat-y left top, url("../images/cards/bg-right.png") repeat-y right bottom, -moz-linear-gradient(top, #207acf 0%, #0d2e41 100%) !important;
  /* FF3.6+ */
  background: url("../images/cards/bg-left.png") repeat-y left top, url("../images/cards/bg-right.png") repeat-y right bottom, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #207acf), color-stop(100%, #0d2e41)) !important;
  /* Chrome,Safari4+ */
  background: url("../images/cards/bg-left.png") repeat-y left top, url("../images/cards/bg-right.png") repeat-y right bottom, -webkit-linear-gradient(top, #207acf 0%, #0d2e41 100%) !important;
  /* Chrome10+,Safari5.1+ */
  background: url("../images/cards/bg-left.png") repeat-y left top, url("../images/cards/bg-right.png") repeat-y right bottom, -o-linear-gradient(top, #207acf 0%, #0d2e41 100%) !important;
  /* Opera 11.10+ */
  background: url("../images/cards/bg-left.png") repeat-y left top, url("../images/cards/bg-right.png") repeat-y right bottom, -ms-linear-gradient(top, #207acf 0%, #0d2e41 100%) !important;
  /* IE10+ */
  background: url("../images/cards/bg-left.png") repeat-y left top, url("../images/cards/bg-right.png") repeat-y right bottom, linear-gradient(to bottom, #207acf 0%, #0d2e41 100%) !important;
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@cover-gradient-color1', endColorstr='@cover-gradient-color2', GradientType=0) !important;
  /* IE6-9 */
}


img.uf-card-premium-logo{
    display: none;
width: 65px !important;
    position: absolute;
    top: -15px;
    left: -15px;
    transform: rotateZ(-27deg);
    border-radius: 50%;
    padding: 2px 6px;
    border: 7px double #fedf54;
    height: 65px !important;
    background: radial-gradient(circle at 50% 50%, #16a0ff 0%, #065386 60%, #032d4b 100%);
    object-fit: contain;
}

 .uf-premium-card .card .side.back img.uf-card-premium-logo{
    display: block;
    z-index: 3;
}

 .uf-premium-card .card .side.back{
    border-color: #fedf54 !important;
}

.uf-premium-card.uf-premium-card-not-allowed .card .side.back,
.uf-premium-card.uf-premium-card-not-allowed .card .side.back * {
    filter: grayscale(100%) !important;
}

.uf-premium-card.uf-premium-card-not-allowed .card .side.back img.uf-card-premium-logo {
    filter: none !important;
}

.cardContainer:not(.have-not):not(.uf-premium-card-not-allowed) .card:hover .back .code{
    animation: uf-boing 500ms ease-in-out 1;
}

.cardContainer.have-not,
.cardContainer.uf-premium-card-not-allowed{
    transform: scale(0.95);
}
.cardContainer.uf-premium-card-not-allowed{
    cursor: pointer !important;
}
/* Hay q hacer este ajuste pq se descuadra por el grayscale!!! */
.uf-premium-card.uf-premium-card-not-allowed .card .side.back .legend{
     top: -22px !important;
    right: -18px;
}