.cardTarjeta {
    height: 221px;
    position: relative;
    color: white;
    background-color: transparent;
}

.card-bar {
    margin-top: 10%;
    background: #ffffff52;
    height: 40px;
}

.frente {
    transform: rotateY(0);
}

.atras {
    transform: rotateY(180deg);
}

.frente,
.atras {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Agrega esta clase CSS para aplicar la animación */
.flip {
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* Rota la tarjeta en el eje Y para mostrar la parte trasera */
.flipped {
    transform: rotateY(180deg);
}


/* FRONT OF CARD */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2 {
    fill: #FFFFFF;
}

#cardfront .st3 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
}

#cardfront .st4 {
    font-size: 54.7817px;
}

#cardfront .st5 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardfront .st6 {
    font-size: 33.1112px;
}

#cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
}

#cardfront .st8 {
    font-size: 24px;
}

#cardfront .st9 {
    font-size: 36.5498px;
}

#cardfront .st10 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
}

#cardfront .st11 {
    font-size: 16.1716px;
}

#cardfront .st12 {
    fill: #4C4C4C;
}

/* BACK OF CARD */
#cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
}

#cardback .st2 {
    fill: #111111;
}

#cardback .st3 {
    fill: #F2F2F2;
}

#cardback .st4 {
    fill: #D8D2DB;
}

#cardback .st5 {
    fill: #C4C4C4;
}

#cardback .st6 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardback .st7 {
    font-size: 27px;
}

#cardback .st8 {
    opacity: 0.6;
}

#cardback .st9 {
    fill: #FFFFFF;
}

#cardback .st10 {
    font-size: 24px;
}

#cardback .st11 {
    fill: #EAEAEA;
}

#cardback .st12 {
    font-family: 'Rock Salt', cursive;
}

#cardback .st13 {
    font-size: 37.769px;
}

#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

#ccsingle svg {
    width: 100px;
    max-height: 60px;
}


#titleMatricula {
    font-weight: bold;
    text-align: center;
    padding-top: 13px;
}

#tarjetasCard {
    width: 100%;
    height: 100%;
}

@media (max-width: 320px) and (max-height: 568px) {
    #cardFormularios {
        width: 300px;
    }
    .cardTarjeta{
        width: 100%;
    }
    #tarjetasCards{
        margin-top: -90px;
    }
    #cardTarjeta{
        margin-bottom: -90px;
    }
  }

  @media (max-width: 375px) and (max-height: 812px) {
    #cardFormularios {
        width: 300px;
    }
    .cardTarjeta{
        width: 100%;
    }
    #tarjetasCards{
        margin-top: -70px;
    }
    
  }

  @media (max-width: 414px) and (max-height: 896px) {
    #cardFormularios {
        width: 300px;
    }
    .cardTarjeta{
        width: 100%;
    }
    #cardTarjeta{
        margin-bottom: -10px;
    }
    
  }

  @media only screen and (min-width: 1200px) {
    #rowCardFormulario {
        justify-content: center !important;
    }
    .cardTarjeta{
        width: 100%;
    }
  }
  
  @media (min-width: 576px) and (max-width: 767px) {
    .cardTarjeta{
        width: 100%;
    }
  }
  
  @media (max-width: 991px){
    .cardTarjeta{
        width: 100%;
    }
  }
  
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    #rowCardFormulario {
        justify-content: unset !important;
    }
    .modal-body .containerArt {
      margin-bottom: 15px;  /* Ajusta el valor según tus necesidades */
    }
    .frente{
        width: 100%;
    }
    .formCard{
        width: 100%;
        height: 100%;
    }
    .cardTarjeta{
        width: 100%;
    }
  }