#rates{
    width: 25%;
    float: left;
}

#rates-wrapper{
    background: #fdcb38;
    background: -moz-linear-gradient(top, #fdcb38 0%,#de8d22 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdcb38),color-stop(100%,#de8d22));
    background: -webkit-linear-gradient(top, #fdcb38 0%,#de8d22 100%);
    background: -o-linear-gradient(top, #fdcb38 0%,#de8d22 100%);
    background: -ms-linear-gradient(top, #fdcb38 0%,#de8d22 100%);
    background: linear-gradient(to bottom, #fdcb38 0%,#de8d22 100%);
    float: left;
    width: 100%;
    -webkit-box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4);
    box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4);
    border-radius: 3px;
    padding: 1.2em 1.6em;
}

#rates .rates_item{
    float:left;
    width:100%;
    padding: 6px 0;
}
#rates .rates_item .rates_name,#rates .rates_item .rates_buy,#rates .rates_item .rates_sell{
    float:left;
}
#rates .rates_item .rates_name{
        font-weight: bold;
}
#rates .rates_item .rates_name img{
    vertical-align: middle;
    margin-right: 5px;
}
#rates .rates_item .tablo{
    width: 63px;
    height: 27px;
    background: url(/bitrix/components/ubs/ubs_currency/templates/.default/img/bg-tablo.png) no-repeat 0px 0;
    margin-left: 5px;
    color: #F5F5F5;
    letter-spacing: 0.14em;
    font-family: 'NHsmsOAR';
    font-size: 0.55em;
    padding: 0.5em 0 0 0.3em;
    background-size: 100% 100%;
}
#rates-wrapper h5 sup{
    color: #b20e14;
}
#rates-info{
    margin-top: 0.8em;
    font-size: 0.7em;
    float: left;
    width: 100%;
}
#rates-info .rates-star{
    color:#b20e14;
    margin-right: 2px;  
}
#workarea #rates{
    width: 100%;
    float: left;
    margin-right: 0em;
}

#workarea #rates table{width:100%;}

@media screen and (max-width: 1060px) {
    #rates .rates_item .tablo{
        letter-spacing: 0.16em;
        font-size: 0.6em;    
        line-height: 2.6em;
            padding: 0em 0 0 0.3em;
    }

}
@media screen and (min-width: 1025px){
    #rates .rates_item .rates_name,#rates .rates_item .rates_buy,#rates .rates_item .rates_sell{
        width:33%;
    } 
}
@media screen and (max-width: 1024px) and (min-width: 571px){
    #rates-wrapper{    padding: 1.2em 1.0em;}    
    #rates .rates_item .rates_name{
        width:100%;
        margin-bottom:5px;
    } 
    #rates .rates_item .rates_buy,#rates .rates_item .rates_sell{
        width:50%;
    } 
    #rates .rates_item .tablo{
            margin-left: 0px;
    }
}
@media screen and (max-width: 768px){
    #rates{
        width: 30%;
    }    
}
@media screen and (max-width: 570px){
    #rates{
        width: 100%;
    }    
    #rates .rates_item .rates_name,#rates .rates_item .rates_buy,#rates .rates_item .rates_sell{
        width:33%;
    }     
}