/******************************/
/** Card conoce **/
/*****************************/
#card_conoce {
    background-image: url('../images/regalo.gif');
    background-repeat: no-repeat;
    transition: all 1s;
    background-position: 240% 24px;
    background-size: 170px;
    height: 100%;
}
@media (max-width: 1024px){
    #card_conoce {
        background-position: 240% 24px;
        background-size: 170px;
    }
}

/******************************/
/** Card compra **/
/*****************************/
.card-compra-bg-img {
    background-image: url('../images/Comprar_Sin_tarjeta_300kb.gif');
    background-repeat: no-repeat;
    background-size: 160px;
    transition: all 1s;
    background-position: 240% 24px;
}
@media (max-width: 1024px){
    .card-compra-bg-img {
        background-position: 240% 24px;
        background-size: 160px;
    }
}

/******************************/
/** Card tdc **/
/*****************************/
/* compras */
.card-tdc-bg-compras {
    background-image: url('../images/Modulos_Beneficios_compras.png');
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 1s;
    background-position: 200% 50%;
}
@media (max-width: 1024px){
    .card-tdc-bg-compras {
        background-image: url('../images/Modulos_Beneficios_compras_2.png');
        background-position: 250% 90%;
        background-size: 70% !important;
    }
}
@media (max-width: 450px){
    .card-tdc-bg-compras {
        background-image: url('../images/Modulos_Beneficios_compras_2.png');
        background-position: 250% 90%;
        background-size: 90% !important;
    }
}
/* Viajes */
.card-tdc-bg-viajes {
    background-image: url('../images/Modulos_Beneficios_viaje.png');
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 1s;
    background-position: 330% 50%;
}
@media (max-width: 1024px){
    .card-tdc-bg-viajes {
        background-image: url('../images/Modulos_Beneficios_viaje.png');
        background-size: 90%;
        background-position: 580% 90%;
    }
}
/******************************/
/** Futurista **/
/*****************************/
/* Futurista */
.card-tdc-bg-comida {
    background-image: url('../images/Modulos_Beneficios_Futurista.png');
    background-repeat: no-repeat;
    background-size: 70%;
    transition: all 1s;
    background-position: 330% 50%;
}
@media (max-width: 1024px){
    .card-tdc-bg-comida {
        background-image: url('../images/Modulos_Beneficios_Futurista.png');
        background-size: 77;
        background-position: 590% 80%;
    }
}

/* Tecnologia */
.card-tdc-bg-tecnologia {
    background-image: url('../images/Geek.gif');
    background-repeat: no-repeat;
    background-size: 200px;
    transition: all 1s;
    background-position: 330% 50%;
}
@media (max-width: 1024px){
    .card-tdc-bg-tecnologia {
        background-image: url('../images/Geek.gif');
        background-size: 150px;
        background-position: 590% 90%;
    }
}

/******************************/
/** Card situaciones  **/
/*****************************/
.card-situaciones-bg-img {
    background-image: url('../images/Control_Tarjetas.gif');
    background-repeat: no-repeat;
    background-size: 250px;
    transition: all 1s;
    background-position: 200% 50%;
}
@media (max-width: 1024px){
    .card-situaciones-bg-img {
        background-position: 240% 30px;
        background-size: 160px;
    }
}

/******************************/
/** Card perfiles  **/
/*****************************/
#card_perfiles {
    background-image: url('../images/otras_opciones.png');
    background-repeat: no-repeat;
    background-size: 250px;
    transition: all 1s;
    background-position: 200% 50%;
}
#card_perfiles:hover{
    background-color: var(--core-blue-dark);
}
@media (max-width: 1024px){
    #card_perfiles {
        background-position: 240% 30px;
        background-size: 180px;
    }
}


/******************************/
/** Card Califica  **/
/*****************************/
.card-califica-bg-img {
    background-image: url('../images/Pregunta-Califica.gif');
    background-repeat: no-repeat;
    background-size: 200px;
    transition: all 1s;
    background-position: 200% 50%;
}

@media (max-width: 1024px){
    .card-califica-bg-img {
        background-position: 240% 30px;
        background-size: 180px;
    }
}