/**
 * rec.reviews
 *
 * @author    Presta-Module.com <support@presta-module.com> - https://www.presta-module.com
 * @copyright Presta-Module - https://www.presta-module.com
 * @license   see file: LICENSE.txt
 *
 *           ____     __  __
 *          |  _ \   |  \/  |
 *          | |_) |  | |\/| |
 *          |  __/   | |  | |
 *          |_|      |_|  |_|
 */

#pvr {
    .progress-stars-distribution {
        text-align: right;
    }
    .distribution {
        width: 49%;
        float: left;
    }
    .text-distribution {
        text-align: left;
    }
    
    .progress-distrib {
        height: 22px;
        background: #e1e4e8;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .progress-distrib-total {
        vertical-align: middle;
        font-size: 14px;
    }
    
    @media screen and (min-width: 0px) and (max-width: 576px) {
        .progress-distrib {
            height: 22px;
            background: #e1e4e8;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .distribution {
            width: 100%;
            float: left;
        }
    
        .text-distribution {
            margin-bottom: 5%;
            text-align: center;
        }
    }
    @media screen and (min-width: 577px) and (max-width: 768px) {
        .progress-distrib {
            width: 100%;
            height: 22px;
            background: #e1e4e8;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 10px;
        }
    
        .distribution {
            width: 100%;
            float: left;
        }
    
        .text-distribution {
            margin-bottom: 5%;
        }
    }
    
    @media screen and (min-width: 769px) and (max-width: 992px) {
        .progress-distrib {
            max-width: 100%;
            height: 22px;
            background: #e1e4e8;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 10px;
            margin-left: auto;
        }
    
        .distribution {
            width: 100%;
            float: left;
        }
    
        .text-distribution {
            margin-bottom: 5%;
            text-align: left;
            margin-left: 25px;
        }
    
        .distribution {
            text-align: center;
        }
    }
    @media screen and (min-width: 993px) and (max-width: 1200px) {
        .distribution {
            text-align: left;
            width: 41%;
        }
    
        .text-distribution {
            text-align: center;
        }
    }
    
}