.card1
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_11.png') no-repeat;
    display: inline-block;
}
.active, .card1:hover
{
    background: url('Images/emoji/img_1.png') no-repeat;
    
}
.card2
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_22.png') no-repeat;
    display: inline-block;
}

.active, .card2:hover
{
    background: url('Images/emoji/img_2.png') no-repeat;
}
.card3
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_33.png') no-repeat;
    display: inline-block;
}

.active, .card3:hover
{
    background: url('Images/emoji/img_3.png') no-repeat;
}
.card4
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_44.png') no-repeat;
    display: inline-block;
}

.active, .card4:hover
{
    background: url('Images/emoji/img_4.png') no-repeat;
}
.card5
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_55.png') no-repeat;
    display: inline-block;
}

.active, .card5:hover
{
    background: url('Images/emoji/img_5.png') no-repeat;
}

.card_1
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_1.png') no-repeat;
    display: inline-block;
}

.card_2
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_2.png') no-repeat;
    display: inline-block;
}
.card_3
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_3.png') no-repeat;
    display: inline-block;
}
.card_4
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_4.png') no-repeat;
    display: inline-block;
}
.card_5
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_5.png') no-repeat;
    display: inline-block;
}


/*-----------Agent-------------*/


.cardA1
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_11.png') no-repeat;
    display: inline-block;
}
.active, .cardA1:hover
{
    background: url('Images/emoji/img_1.png') no-repeat;
}
.cardA2
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_22.png') no-repeat;
    display: inline-block;
}

.active, .cardA2:hover
{
    background: url('Images/emoji/img_2.png') no-repeat;
}
.cardA3
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_33.png') no-repeat;
    display: inline-block;
}

.active, .cardA3:hover
{
    background: url('Images/emoji/img_3.png') no-repeat;
}
.cardA4
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_44.png') no-repeat;
    display: inline-block;
}

.active, .cardA4:hover
{
    background: url('Images/emoji/img_4.png') no-repeat;
}
.cardA5
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_55.png') no-repeat;
    display: inline-block;
}

.active, .cardA5:hover
{
    background: url('Images/emoji/img_5.png') no-repeat;
}

.card_A1
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_1.png') no-repeat;
    display: inline-block;
}

.card_A2
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_2.png') no-repeat;
    display: inline-block;
}
.card_A3
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_3.png') no-repeat;
    display: inline-block;
}
.card_A4
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_4.png') no-repeat;
    display: inline-block;
}
.card_A5
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_5.png') no-repeat;
    display: inline-block;
}

/*------------DIABOS--------------*/

.cardD1
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_11.png') no-repeat;
    display: inline-block;
}
.active, .cardD1:hover
{
    background: url('Images/emoji/img_1.png') no-repeat;
}
.cardD2
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_22.png') no-repeat;
    display: inline-block;
}

.active, .cardD2:hover
{
    background: url('Images/emoji/img_2.png') no-repeat;
}
.cardD3
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_33.png') no-repeat;
    display: inline-block;
}

.active, .cardD3:hover
{
    background: url('Images/emoji/img_3.png') no-repeat;
}
.cardD4
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_44.png') no-repeat;
    display: inline-block;
}

.active, .cardD4:hover
{
    background: url('Images/emoji/img_4.png') no-repeat;
}
.cardD5
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_55.png') no-repeat;
    display: inline-block;
}

.active, .cardD5:hover
{
    background: url('Images/emoji/img_5.png') no-repeat;
}

.card_D1
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_1.png') no-repeat;
    display: inline-block;
}

.card_D2
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_2.png') no-repeat;
    display: inline-block;
}
.card_D3
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_3.png') no-repeat;
    display: inline-block;
}
.card_D4
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_4.png') no-repeat;
    display: inline-block;
}
.card_D5
{
    width: 64px;
    height: 64px;
    background: url('Images/emoji/img_5.png') no-repeat;
    display: inline-block;
}