/* =========================================================
   SAGA STORIES COMMENTS
========================================================= */

.comments-area{

    max-width:900px;

    margin:80px auto;

    padding:0 20px;

    color:#ffffff;
}

.comments-area *{
    box-sizing:border-box;
}


/* =========================================================
   TITLES
========================================================= */

.comments-title,
.comment-reply-title{

    margin:0 0 24px;

    color:#ffffff;

    font-size:56px;

    font-weight:800;

    line-height:1;
}

.comment-notes{

    margin-bottom:30px;

    color:rgba(255,255,255,.7);

    font-size:16px;

    line-height:1.6;
}


/* =========================================================
   COMMENT LIST
========================================================= */

.comment-list{

    margin:0 0 60px;

    padding:0;

    list-style:none;
}

.comment{

    margin:0;

    padding:24px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.comment:last-child{

    border-bottom:none;
}


/* =========================================================
   COMMENT CONTENT
========================================================= */

/* COMMENT AUTHOR */

.comment-author{

    margin-bottom:4px;

    font-size:16px;

    font-weight:700;

    color:#ffffff;
}

.comment-author a{

    color:#ffffff;

    text-decoration:none;
}

.comment-author a:hover{

    color:#8da2ff;
}

/* DATE */

.comment-meta{

    margin-bottom:12px;

    font-size:13px;

    color:rgba(255,255,255,.55);
}

.comment-meta a{

    color:inherit;

    text-decoration:none;
}

.comment{

    padding:24px 0;

    position:relative;

    background-color: #ffffff;
}

.comment::after{

    content:"";

    display:block;

    margin-top:24px;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
}


/* =========================================================
   REPLY BUTTON
========================================================= */

.comment-reply-link{

    display:inline-block;

    color:#8da2ff;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.2s ease;
}

.comment-reply-link:hover{

    color:#ffffff;
}


/* =========================================================
   FORM
========================================================= */

.comment-form{

    margin-top:40px;
}


/* LABELS */

.comment-form label{

    display:none;

    margin-bottom:8px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;
}


/* =========================================================
   TEXTAREA & INPUTS
========================================================= */

.comment-form textarea{

    width:100%;

    min-height:140px;

    padding:18px 20px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:#ffffff;

    color:#101938;

    font-size:16px;

    resize:vertical;

    transition:.25s ease;
}

/* =========================================================
   INPUTS
========================================================= */

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"]{

    width:100%;

    height:52px;

    padding:0 18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:#ffffff;

    color:#101938;

    font-size:15px;

    transition:.25s ease;
}

.comment-form textarea::placeholder,
.comment-form input::placeholder{

    color:#64748b;
}

.comment-form textarea:focus,
.comment-form input::focus{

    border-color:#6f7cff;

    box-shadow:0 0 0 3px rgba(111,124,255,.15);

    outline:none;
}


/* =========================================================
   INPUT ROW
========================================================= */

.comment-form-author,
.comment-form-email{

    width:calc(50% - 10px);

    float:left;
}

.comment-form-author{

    margin-right:20px;
}

.comment-form-url{

    display: none;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.form-submit{

    clear:both;

    margin-top:24px;
}

.comment-form .submit{

    height:52px;

    min-width:180px;

    padding:0 32px;

    background:#6f7cff;

    color:#ffffff;

    border:none;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.comment-form .submit:hover{

    background:#8593ff;

    transform:translateY(-2px);
}


/* =========================================================
   NESTED REPLIES
========================================================= */

.children{

    margin-top:20px;

    margin-left:30px;

    padding-left:20px;

    border-left:2px solid rgba(111,124,255,.3);

    list-style:none;
}

/* =========================================================
   LOGGED IN MESSAGE
========================================================= */

.logged-in-as{

    margin:0 0 24px;

    padding:14px 18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    color:rgba(255,255,255,.75);

    font-size:14px;

    line-height:1.6;
}

.logged-in-as a{

    color:#8da2ff;

    font-weight:600;

    text-decoration:none;

    transition:.2s ease;
}

.logged-in-as a:hover{

    color:#ffffff;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .comments-title,
    .comment-reply-title{

        font-size:42px;
    }

    .comment-form-author,
    .comment-form-email{

        width:100%;

        margin-right:0;
    }

    .comment-form-email{

        margin-top:20px;
    }

    .children{

        margin-left:15px;

        padding-left:15px;
    }
}