/*Estilos diseño tarjeta*/
.text-num-card {
    position: absolute;
    bottom: 75%;
    left: 7%;
}
.text-year {
    position: absolute;
    bottom: 42%;
    left: 19%;
}
.text-name {
    position: absolute;
    bottom: 12%;
    left: 7%;
    text-align: left !important;
}
.text-date {
    bottom: 42%;
    left: 50%;
    position: absolute;
}
.card-data {
    position: absolute;
    height: 148px;
    width: 100%;
    bottom: 0px;
}
.card-data > p{
    color: #FFF !important;
    margin-bottom: 0px;
}
@media only screen and (min-width: 1px) and (max-width: 330px){
    .nav li{
        padding-left: 0px!important;
    }
    .text-rs{
        font-size: 13px!important;
    }
}
@media only screen and (min-width: 1px) and (max-width: 767px){
    .tarjetaimg{
        width: 100%!important;
    }
}
@media only screen and (min-width: 200px) and (max-width: 300px){
    .card-data > p{
        font-size: 10px!important;
    }
    .text-year, .text-date {
        bottom: 25%!important;
    }
    .text-num-card {
        bottom: 45%!important;
    }
}
@media only screen and (min-width: 301px) and (max-width: 350px){
    .card-data > p{
        font-size: 14px!important;
    }
    .card-data {
        height: 115px!important;
    }
}
@media only screen and (min-width: 351px) and (max-width: 400px){
    .card-data > p{
        font-size: 14px!important;
    }
    .card-data {
        height: 150px!important;
    }
}
@media only screen and (min-width: 401px) and (max-width: 450px){
    .card-data > p{
        font-size: 16px!important;
    }
    .card-data {
        height: 165px!important;
    }
}
@media only screen and (min-width: 451px) and (max-width: 500px){
    .card-data > p{
        font-size: 16px!important;
    }
    .card-data {
        height: 180px!important;
    }
}
@media only screen and (min-width: 501px) and (max-width: 600px){
    .card-data > p{
        font-size: 18px!important;
    }
    .card-data {
        height: 207px!important;
    }
}
@media only screen and (min-width: 601px) and (max-width: 700px){
    .card-data > p{
        font-size: 20px!important;
    }
    .card-data {
        height: 215px!important;
    }
}
@media only screen and (min-width: 701px) and (max-width: 763px){
    .card-data > p{
        font-size: 20px!important;
    }
    .card-data {
        height: 215px!important;
    }
}
@media only screen and (min-width: 701px) and (max-width: 763px){
    .card-data > p{
        font-size: 20px!important;
    }
    .card-data {
        height: 215px!important;
    }
}
@media only screen and (min-width: 764px) and (max-width: 992px){
    .text-name {
        position: absolute;
        bottom: 15%;
        left: 7%;
        text-align: left!important;
    }
    .text-num-card {
        bottom: 75%!important;
    }
    .text-year {
        bottom: 43%;
        left: 22%;
    }
    .text-date {
        bottom: 43%;
        left: 59%;
    }
}
@media only screen and (min-width: 993px) and (max-width: 1200px){
    .card-data > p{
        font-size: 16px!important;
    }
    .tarjetaimg{
        width: 100%!important;
    }
    .card-data {
        width: 94%;
        height: 112px;
    }
    .text-name {
        position: absolute;
        bottom: 15%;
        left: 10%;
        text-align: left!important;
    }
    .text-num-card {
        bottom: 75%!important;
        left: 10%!important;
    }
    .text-year {
        bottom: 43%;
        left: 27%;
    }
    .text-date {
        bottom: 43%;
        left: 75%;
    }
}
@media only screen and (min-width: 1201px) and (max-width: 1655px){
    .card-data > p{
        font-size: 18px!important;
    }
    .tarjetaimg{
        width: 100%!important;
    }
    .card-data {
        width: 94%;
        height: 145px;
    }
    .text-name {
        position: absolute;
        bottom: 15%;
        left: 7%;
        text-align: left!important;
    }
    .text-num-card {
        bottom: 75%!important;
    }
    .text-year {
        bottom: 43%;
        left: 27%;
    }
    .text-date {
        bottom: 43%;
        left: 75%;
    }
}
@media only screen and (min-width: 1656px) and (max-width: 2000px){
    .card-data > p{
        font-size: 25px!important;
    }
    .tarjetaimg{
        width: 100%!important;
    }
    .card-data {
        width: 94%;
        height: 218px;
    }
    .text-name {
        position: absolute;
        bottom: 15%;
        left: 10%;
        text-align: left!important;
    }
    .text-num-card {
        bottom: 75%!important;
    }
    .text-year {
        bottom: 43%;
        left: 27%;
    }
    .text-date {
        bottom: 43%;
        left: 75%;
    }
}