.ranking_icon{    
    position: relative;
}

.ranking_icon_1, .ranking_icon_2, .ranking_icon_3, .ranking_icon_4{
    position: absolute;  
}

.ranking_icon_1_pd, .ranking_icon_2_pd, .ranking_icon_3_pd, .ranking_icon_4_pd{
    position: static;
}

.ranking_icon_1 > span, .ranking_icon_2 > span, .ranking_icon_3 > span, .ranking_icon_4 > span,
.ranking_icon_1_pd > span, .ranking_icon_2_pd > span, .ranking_icon_3_pd > span, .ranking_icon_4_pd > span{
    width: 30px!important;
    height: 30px;
    color: #fff;
    text-align: center!important;
    display:table-cell!important;
    vertical-align: middle;
}

.ranking_icon_1 > span, .ranking_icon_1_pd > span{
    background: #ADA142;
}

.ranking_icon_2 > span, .ranking_icon_2_pd > span{
    background: #767676;
}

.ranking_icon_3 > span, .ranking_icon_3_pd > span{
    background: #8C4841;
}

.ranking_icon_4 > span, .ranking_icon_4_pd > span{
    background: #000;   
}