.result-container {
    border-bottom: 1px solid #999;
    padding: 5px;
    display: inline-block; 
    width: 100%;
}
.result-text {
    width: 50%;
    float: left;
    padding: 0px 30px 5px 5px;
    min-height: 100px;
    font-size: 13px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
.result-image {
    width: 20%;
    float: left;
}
.result-percent {
    float: left;
    width: 30%;
    border: 1px solid #05a9f1;
    text-align: center;
    border-radius: 5px;
}
.real-percent {
    float: left;
    background: #05a9f1;
    padding: 15px;
    color: #fff;
	-webkit-transition: width 2s;
    transition: width 2s;
}
.finalpercent {
    float: left;
    width: 100%;
    text-align: center;
    padding: 30px;
    font-size: 26px
}
.clear {
    clear: both
}

@media only screen and (max-device-width: 320px) {
    .result-text {
        width: 100%;
        float: none;
        padding: 10px;
        text-align: justify;
    }
    .result-percent {
        float: left;
        width: 100%;
        border: 1px solid #05a9f1;
        text-align: center;
        border-radius: 5px;
        display: inherit;
    } 
}