#hc_datapresenter_wrapper{width: 100%;}
#hc_datapresenter_wrapper h3{margin-bottom: 1px; padding-bottom: 1px; margin-top: 20px;}
hc_datapresenter_wrapper .hc_datapresenter_col100{width: 100%; float: left;}

.hc_datapresenter_percentage_wrapper{width: 100%; height: 2rem; background-color: darkgrey; position: relative;}
.hc_datapresenter_percentage_wrapper .hc_datapresenter_percentage_value{position: absolute; top: 0; left: 0; width: 100%; text-align: left; color: #fff;}
.hc_datapresenter_percentage_wrapper .hc_datapresenter_percentage_bar{background-color: #e66d14; height: 2rem; color: #fff; text-align: right; font-size: 1rem; padding-right: 2%;}

.hc_datapresenter_percentage_mainwrapper{width: 100%;}
.hc_datapresenter_percentage_mainwrapper .hc_datapresenter_percentage_mainwrapper_label{width: 25%; float: left;}
.hc_datapresenter_percentage_mainwrapper .hc_datapresenter_percentage_wrapper{width: 75%; height: 2rem; background-color: darkgrey; float: left; margin-bottom: 1%;}

#hc_datapresenter_wrapper .note_label{width: 50%; float: left;}
#hc_datapresenter_wrapper .note{width: 50%; float: left;}
#hc_datapresenter_wrapper .note .hcdata-stars{font-size: 1.4rem;}

@media (max-width:481px){
    hc_datapresenter_wrapper .hc_datapresenter_col100{float: none;}
    .hc_datapresenter_percentage_mainwrapper .hc_datapresenter_percentage_mainwrapper_label{width: 100%; float: none;}
    .hc_datapresenter_percentage_mainwrapper .hc_datapresenter_percentage_wrapper{width: 100%; float: none;}
    #hc_datapresenter_wrapper .note_label{width: 100%; float: none;}
    #hc_datapresenter_wrapper .note{width: 100%; float: none;}
}