.review + .review {
    margin-top: 1.25rem
}

.review-body {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

.avatar {
    position: relative;
    display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    font-size: .625rem
}

    .avatar:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
    }

.avatar-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.avatar-title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #ccc
}

.avatar-offline::before,
.avatar-online::before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50%
}

.avatar-offline .avatar-img,
.avatar-online .avatar-img {
    -webkit-mask-image: url(../img/masks/avatar-status.svg);
    mask-image: url(../img/masks/avatar-status.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.avatar-online::before {
    background-color: #28bb74
}

.avatar-offline::before {
    background-color: #909090
}

.avatar-xs {
    width: 1rem;
    height: 1rem;
    font-size: .33333rem
}

.avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .5rem
}

.avatar-lg {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .75rem
}

.avatar-xl {
    width: 4rem;
    height: 4rem;
    font-size: 1.33333rem
}

.avatar-xxl {
    width: 4rem;
    height: 4rem;
    font-size: 1.33333rem
}


@media (min-width: 320px) {
    .avatar-xxl {
        width: 1rem;
        height: 1rem;
        font-size: .33333rem
    }
}

@media (min-width: 540px) {
    .avatar-xxl {
        width: 1.5rem;
        height: 1.5rem;
        font-size: .5rem
    }
}

@media (min-width: 768px) {
    .avatar-xxl {
        width: 2.25rem;
        height: 2.25rem;
        font-size: .75rem
    }
}

@media (min-width: 992px) {
    .avatar-xxl {
        width: 1rem;
        height: 1rem;
        font-size: .33333rem
    }
}

@media (min-width: 1200px) {
    .avatar-xxl {
        width: 4rem;
        height: 4rem;
        font-size: 1.33333rem
    }
}

.avatar.avatar-4by3 {
    width: 2.5rem
}

.avatar-xs.avatar-4by3 {
    width: 1.33333rem
}

.avatar-sm.avatar-4by3 {
    width: 2rem
}

.avatar-lg.avatar-4by3 {
    width: 3rem
}

.avatar-xl.avatar-4by3 {
    width: 5.33333rem
}

.avatar-xxl.avatar-4by3 {
    width: 8.33333rem
}

.avatar-group {
    display: -webkit-inline-box;
    display: inline-flex
}

    .avatar-group .avatar + .avatar {
        margin-left: -.46875rem
    }

    .avatar-group .avatar-xs + .avatar-xs {
        margin-left: -.25rem
    }

    .avatar-group .avatar-sm + .avatar-sm {
        margin-left: -.375rem
    }

    .avatar-group .avatar-lg + .avatar-lg {
        margin-left: -.5625rem
    }

    .avatar-group .avatar-xl + .avatar-xl {
        margin-left: -1rem
    }

    .avatar-group .avatar-xxl + .avatar-xxl {
        margin-left: -1.5625rem
    }

    .avatar-group .avatar:not(:last-child) {
        -webkit-mask-image: url(../img/masks/avatar-group.svg);
        mask-image: url(../img/masks/avatar-group.svg);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%
    }

    .avatar-group .avatar:hover {
        -webkit-mask-image: none;
        mask-image: none;
        z-index: 1
    }

        .avatar-group .avatar:hover + .avatar {
            -webkit-mask-image: url(../img/masks/avatar-group-hover.svg);
            mask-image: url(../img/masks/avatar-group-hover.svg);
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%
        }

            .avatar-group .avatar:hover + .avatar:last-child {
                -webkit-mask-image: url(../img/masks/avatar-group-hover-last.svg);
                mask-image: url(../img/masks/avatar-group-hover-last.svg)
            }

.rate-item {
    color: #111;
    white-space: nowrap
}

    .rate-item:hover {
        color: #303030
    }

    .rate-item::after {
        content: attr(data-count)
    }

    .rate-item + .rate-item {
        margin-left: 1rem
    }

.review {
    position: relative;
    padding-left: 2.5rem
}

    .review:not(.review-child) {
        padding-right: 2.5rem;
        border: 1px solid #e5e5e5;
        width: 100%;
    }

.review-child {
    border-top: 1px solid #e5e5e5
}

    .review-child::before {
        content: "\e946";
        position: absolute;
        top: 4.5rem;
        left: 0;
        font-family: Feather;
        font-size: 1.125rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

@media (min-width:768px) {
    .review-child::before {
        top: 5.625rem
    }
}

.rating {
    display: -webkit-inline-box;
    display: inline-flex;
    margin-bottom: 0
}

    .rating:not([data-value]) .rating-item {
        color: #ccc
    }

    .rating[data-value="1"] .rating-item:nth-child(n+2) {
        color: #ccc
    }

    .rating[data-value="2"] .rating-item:nth-child(n+3) {
        color: #ccc
    }

    .rating[data-value="3"] .rating-item:nth-child(n+4) {
        color: #ccc
    }

    .rating[data-value="4"] .rating-item:nth-child(n+5) {
        color: #ccc
    }

    .rating[data-value="5"] .rating-item:nth-child(n+6) {
        color: #ccc
    }

.rating-form {
    position: relative;
    display: -webkit-inline-box;
    display: inline-flex
}

.rating-input {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0
}