.comments-area {
    margin: 30px 0  ;

    @include media(desktop) {
        margin: 70px 0;
    }

    ol {
        list-style: none;
    }

    .comments-title {
        font-size: 36px;
        font-size: 2.25rem;
        margin-bottom: 21px;

        @include media(desktop) {
            margin-bottom: 28px;
        }

        @include media(diagonal) {
            margin-bottom: 36px;
        }
    }
}

.author-info {
    margin-top: 35px;
    padding: 28px;
    width: 100%;

    @include media(desktop) {
        margin-top: 70px;
        padding: 49px;
    }

    .author-section-title {
        font-size: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 2.33;
        text-transform: uppercase;
    }

    .author-avatar {
        float: left;
        margin-right: 37px;
        max-width: 100px;
    
        img {
            @include border(50%);
        }
    }

    .author-description {
        overflow: hidden;

        h2 {
            font-size: 20px;
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 0;
        }
    }
}

.comment-reply-title {
    display: block;
    font-weight: 700;
    font-size: 32px;
    font-size: 2rem;
    text-align: center;
}

.comment-body {
    border-bottom: 1px solid;
    margin-bottom: 43px;
    padding-bottom: 35px;

    .comment-author-container {
        float: none;
        margin-bottom: 30px;
        margin-right: 35px;
        width: 50px;

        @include media(tablet) {
            float: left;
            margin-bottom: 0;
        }

        img {
            @include border(50%);   
        }
    }

    .comment-container {
        overflow: visible;

        @include media(tablet) {
            overflow: hidden;
        }

        .comment-content {
            font-size: 18px;
            font-size: 1.125rem;
            margin: 21px 0 21px 0;
        }

        @include media(diagonal) {
            font-size: 21px;
            font-size: 1.25rem;
        }

        .comment-meta {
            font-weight: 500;

            cite {
                font-size: 20px;
                font-size: 1.25rem;
                text-transform: capitalize;
            }
        }

        .comment-permalink {
            font-size: 14px;
            font-size: 0.875rem;
            margin-right: 10px;
        }

        .comment-metadata {
            line-height: 1.62;
        }
    }

    &:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
}

.comment-list {
    margin: 0;
}

.comments-area ol.children {
    margin-left: 15px;
    margin-right: 0;

    @include media(desktop) {
        margin-left: 80px;
    }
}

.comment-form textarea,
.comment-form input {
    background: transparent;
    @include border(0);
    border: 0;
    border-bottom: 2px solid transparent;
}

.comment-respond {
    margin: 0 auto;
    max-width: 640px;
    padding: 25px;

    @include media(desktop) {
        padding: 56px 60px;
    }

    .comment-form {
        margin-top: 42px;

        p:not(.form-submit) input {
            @include border(0);
            background: transparent;
        }

        p {
            margin-bottom: 35px;

            label {
                display: block;
                font-size: 16px;
                font-size: 1rem;
                transform: translateY(30px) scale(1);
                -o-transform: translateY(30px) scale(1);
                -moz-transform: translateY(30px) scale(1);
                -webkit-transform: translateY(30px) scale(1);
                transform-origin: top left;
            }
        }

        .is-focused label {
            transform: translateY(0) scale(0.8);
            -o-transform: translateY(0) scale(0.8);
            -moz-transform: translateY(0) scale(0.8);
            -webkit-transform: translateY(0) scale(0.8);
        }
        
        .form-submit {
            margin-bottom: 0;
            text-align: center;
            
            input {
                @include border(0);
            }
        }
    }

    .comment-reply-title {

        small {
            display: block;
        }
    }
}

.comment_container img {
    @include border(50%);
    float: none;
    margin-bottom: 15px;
    margin-right: 15px;

    @include media(mobile_horizontal) {
        float: left;
    }
}

.comment-text {
    overflow: hidden;

    .star-rating {
        float: right;
    }
}

#review_form_wrapper {
    margin-top: 30px;
}

.commentlist li {
    margin-bottom: 20px;
}

.comment-reply-link {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}