/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.596);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in;
  z-index: 999999999999999999999999999999999;
}

.modal.is-visible {
  visibility: visible;
  opacity: 1;
}

.modal-content
{
  background: -o-radial-gradient( #afadad 50%, #0a0a0a),
  -o-repeating-linear-gradient(
    bottom,
    #212121 0px,
    #212121 1px,
    transparent 1px,
    transparent 25px
  ),
  -o-repeating-linear-gradient(
    left,
    #212121 0px,
    #212121 1px,
    transparent 1px,
    transparent 25px
  ),
  -o-linear-gradient(324deg, hsl(134, 34%, 38%), hsl(134, 34%, 38%));
  background: radial-gradient( #afadad 50%, #0a0a0a),
  repeating-linear-gradient(
    0deg,
    #212121 0px,
    #212121 1px,
    transparent 1px,
    transparent 25px
  ),
  repeating-linear-gradient(
    90deg,
    #212121 0px,
    #212121 1px,
    transparent 1px,
    transparent 25px
  ),
  linear-gradient(126deg, hsl(134, 34%, 38%), hsl(134, 34%, 38%));
 background-position-x: 0px;
 background-position-y: 7px;
 background-blend-mode: soft-light;
 will-change: transform;
}

.modal-content img
{
   width: 140px;
   height: 210px;
   -o-object-fit: fill;
      object-fit: fill;
}



.carta-box {
   width: 140px;
   height: 210px;
   position: relative;
   -webkit-perspective: 1000px;
           perspective: 1000px;
   margin: 0 auto;
}

.carta-box:hover .carta {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.cara img
{
  width: calc(140px*1.2);
  height: calc(210px*1.2);
  -o-object-fit: fill;
     object-fit: fill;

}


.carta {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.cara {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.cara.detras {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.modal-dialog {
  position: relative;
  max-width: 800px;
  /* max-height: auto; */
  border-radius: 5px;
  background: white;
  overflow: auto;
  cursor: default;
}

.modal-dialog > * {
  padding: 1.8rem;
}

.modal-header,
.modal-footer {
  background: -o-repeating-linear-gradient(45deg, #dadada5c, transparent 100px);
  background: repeating-linear-gradient(45deg, #dadada5c, transparent 100px);
  text-align: center;
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.modal-header p 
{
  text-align: center;
  font-family: 'poppins';
  text-align: center;
  margin: 0 auto;
  font-size: large;
  line-break: strict;
}

.modal-header .close-modal {
  font-size: 1rem;
  border-radius: 2rem;
  border: 2px double black;
  background: #f83737b8;
  color: white;
}

.modal p + p {
  margin-top: 1rem;
}

.descripcion-modal
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  text-align: center;
  margin-top: 3rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ataque
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100px;
  height: 60px;
  background: -o-linear-gradient(72deg, black, #12020259);
  background: linear-gradient(18deg, black, #12020259);
  position: relative;
  border-radius: 1rem;
  margin: 5px; 
}

.titulo-ataque
{
  background: #f44336;
  display: block;
  height: 20px;
  font-family: 'poppins';
}

.titulo-defensa
{
  background: #f4c836;
  display: block;
  height: 20px;
  font-family: 'poppins';
}

.titulo-vida
{
  background: #36f456;
  display: block;
  height: 20px;
  font-family: 'poppins';
}

.titulo-descripcion
{
  margin-top: 10px;
  font-family: 'poppins';
  color: white;
}

.rareza
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: auto;
  height: 60px;
  background: -o-linear-gradient(72deg, black, #12020259);
  background: linear-gradient(18deg, black, #12020259);
  position: relative;
  border-radius: 1rem;
  margin-top: 25px;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  text-align: center;
}

.titulo-rareza
{
  background: #3674f4;
  display: block;
  height: 20px;
  font-family: 'poppins';
}

.borde-carta
{
  
     --background: linear-gradient(to left, #000000 0%, #000000 100%);
     width: 150px;
     height: 220px;
     padding: 5px;
     border-radius: 1rem;
     overflow: visible;
     background: #020100;
     background: var(--background);
     position: relative;
     z-index: 1;
     margin: 20px;
    
    
}

/*Hover*/
.cards:hover::after {
 opacity: 0;
}

.cards:hover .cards-info {
 color: #f7ba2b;
 -webkit-transition: color 1s;
 -o-transition: color 1s;
 transition: color 1s;
}

.cards:hover .cards-info .descripcion 
{
 display: block;
 -webkit-transition: margin-left 0.3s;
 -o-transition: margin-left 0.3s;
 transition: margin-left 0.3s;

}

.cards-info {
 --color: #181818;
 background: var(--color);
 color: var(--color);
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 width: 100%;
 height: 100%;
 overflow: visible;
 border-radius: .7rem;
}

.cards-info img
{
 width: 180px;
 height: 250px;
 -o-object-fit: fill;
    object-fit: fill;

}

.cards .title {
 font-weight: bold;
 letter-spacing: .1em;
}
@media (max-width: 480px) 
{
  .cards-info img {
  width: 140px;
  height: 210px;
  -o-object-fit: fill;
     object-fit: fill;
 
  }

}