comments form style css

.comment-section-title{
  padding:10px 20px;
  margin-top:20px}
.comment-list{
  color:#000;
  margin-top:20px;
  list-style:none}
.comment-list .children{
  margin:0;
  list-style:none}
.comment-list .depth-1{
  padding:15px;
  margin-bottom:20px;
  border:1px solid #bfdeec}
.comment-list h1,.comment-list h2,.comment-list h3,.comment-list h4,.comment-list h5,.comment-list h6{
  margin-bottom:20px;
  margin-bottom:1.25rem}
.comment-meta{
  line-height:2.5;
  margin-bottom:20px;
  margin-bottom:1.25rem;
  background:#fff}
.comment-meta,.comment-meta a{
  color:#2a2a2a}
.comment-meta-date{
  font-size:10px;
  font-size:.625rem;
  text-transform:uppercase}
.comment-meta-links{
  font-weight:700;
  text-align:right;
  text-transform:uppercase}
.comment-meta-links .comment-edit-link{
  margin-left:10px}
.bypostauthor .fn:after{
  font-family:'FontAwesome';
  font-weight:400;
  color:#1e8cbe;
  content:'\f006';
  margin-left:5px}
.comment-author .fn{
  font-size:16px;
  font-size:1rem;
  font-weight:700;
  margin-right:5px}
.comment-gravatar{
  display:inline-block}
.comment-gravatar .avatar{
  width:40px;
  height:40px;
  padding:2px;
  margin:0 15px 0 0;
  border:1px solid #f5f5f5;
  background:#fff;
  vertical-align:middle}
.comment-content p,.comment-content blockquote{
  margin-bottom:20px;
  margin-bottom:1.25rem}
.comment-content blockquote p:last-child{
  margin:0}
.comment-info{
  color:#1e8cbe;
  margin:20px 0}
.comments-pagination{
  margin-bottom:20px}
.ping-list{
  padding:0 15px;
  margin-top:20px;
  border:1px solid #bfdeec}
.ping-list .ping-item{
  padding:15px 0;
  border-top:1px dotted #bfdeec}
.ping-list .ping-item:first-child{
  border-top:none}
.ping-list .ping-item .fa{
  margin-right:15px}
.no-comments{
  margin-top:20px}
#respond{
  color:#000;
  padding:20px;
  margin-top:20px;
  border:1px solid #bfdeec}
#respond a{
  color:#000}
#respond a:hover{
  color:#1e8cbe}
#respond .comment-reply-title{
  margin-bottom:20px;
  margin-bottom:1.25rem}
#respond #cancel-comment-reply-link{
  font-size:12px;
  font-size:.75rem;
  color:#fff;
  padding:5px 10px;
  background:#1e8cbe}
#respond #cancel-comment-reply-link:hover{
  background:#2a2a2a}
#commentform textarea{
  font-size:14px;
  font-size:.875rem}
#commentform p{
  margin-bottom:10px;
  margin-bottom:.625rem}
#commentform .form-submit{
  margin:20px 0 0;
  margin:1.25rem 0 0}
.required{
  color:#1e8cbe}
input{
  font-size:14px;
  font-size:.875rem;
  color:#666;
  padding:5px;
  border:1px solid #bfdeec;
  background:#e8f3f8;
  -webkit-transition:all 0.25s ease-in-out;
  -moz-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out}
input[type=text],input[type=email],input[type=tel],input[type=url]{
  width:60%}
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,textarea:focus{
  color:#1e8cbe}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,input[type=url]:hover,textarea:hover{
  border:1px solid #1e8cbe}
input[type=submit]{
  display:inline-block;
  min-width:100px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  padding:10px 15px;
  background:#1e8cbe;
  cursor:pointer;
  text-transform:uppercase;
  border:0;
  -webkit-appearance:none}
input[type=submit]:hover{
  background:#555}
textarea{
  width:96%;
  line-height:1.5;
  padding:5px;
  border:1px solid #bfdeec;
  background:#e8f3f8}

@media screen and (max-width:620px){
  input[type=text],input[type=email],input[type=tel],input[type=url]{
    width:88%}
  .comment-list ul,.entry-content ol,.comment-list ol{
    margin:0 0 20px 20px;
    margin:0 0 1.25rem 1.25rem}
  .comment-list ul ul,.entry-content ol ol,.comment-list ol ol{
    margin:0 0 0 20px;
    margin:0 0 0 1.25rem}
  .comment-gravatar .avatar{
    width:60px;
    height:60px;
    margin:0 auto 10px}
  .comment-meta{
    line-height:1.3;
    text-align:center}
  .comment-author .fn{
    display:block;
    clear:both}
}