#comments {
   float: left;
   width: 100%;
   margin-top: 30px;
   .title, .comments-title{
      font-size: 24px;
      position: relative;
      color: $black;
      h4{
         margin: 0;
         font-size: 22px;
      } 
   }
   .comments-title{
      margin: 30px 0 30px;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      padding-bottom: 15px;
      &:after{
         content: '';
         @include size(60px, 2px);
         background: $theme-color;
         position: absolute;
         bottom: 0;
         left: 0;
         z-index: 1;
      }
   }
   input[type*="email"], input[type*="text"], textarea{
      padding-left: 10px;
      padding-right: 10px;
      min-height: 68px;
      background: #F7F7F9;
      box-shadow: none;
      border: 0;
      &::-webkit-input-placeholder { 
        color: $body-color;
      }
      &::-moz-placeholder {
        color: $body-color;
      }
      &:-ms-input-placeholder { 
        color: $body-color;
      }
      &:-moz-placeholder { 
        color: $body-color;
      }
   }
   input[type*="email"], input[type*="text"]{
      height: 68px;
      padding: 0 20px;
      line-height: 68px;
   }
   textarea{
      padding: 20px;
   }
   .comment-rating{
      margin-bottom: 15px;
   }

   #add_review_button,
   #submit {
      font-size: 14px;
     background: $theme-color;
     color: #fff;
     font-weight: 500;
     padding: 22px 38px;
     line-height: 1.2;
     position: relative;
     z-index: 9;
     display: inline-block;
     @include transition(all 0.35s);
     text-decoration: none;
     display: inline-block;
     letter-spacing: 2px;
     width: auto;
     &:hover{
      background: $black;
     }

   }
   #add_review_button {
      margin-bottom: 20px;
   }
   .headline {
      height: 30px;
      text-align: left;
      margin-bottom: 10px;
      h2 {
         padding: 0;
      }
      a {
         text-transform: uppercase;
         float: right;
         margin-top: 2px;
         font-size: 12px;
      }
   }
   #reply-title {
      font-size: 28px;
      color: $theme-color;
      margin: 0 0 5px;
      float: left;
      width: 100%;
      position: relative;
      small {
         float: right;
         font-weight: 500;
         font-size: 14px;
         line-height: 39px;
         position: absolute;
         top: 0;
         right: 0;
         z-index: 11;
      }
   }
   .comment-notes {
      margin-bottom: 20px;
   }
   .commentform{
      float: left;
      width: 100%;
      margin-top: 5px;
      .row{
         margin-left: -8px;
         margin-right: -8px;
         > div{
            padding-left: 8px;
            padding-right: 8px;
         }
      }
      .form-submit{
         margin-bottom: 30px;
      }
   }
   ol.comment-list {
      list-style: none;
      width: 100%;
      float: left;
      margin: 0;
      padding: 0;
      display: block;
      float: left;
      width: 100%;
      @include media-breakpoint-down(md){
         padding: 20px;
      }
      .comment-body{
         -ms-word-wrap: break-word;
         word-wrap: break-word;
         p{
            margin-bottom: 5px;
         }
      }
      > li {
         width: 100%;
         float: left;
         position: relative;
         &:before {
            display: none; 
         }
         li {
            position: relative;
            &:last-child {
               padding-bottom: 0;
               margin-bottom: 0;
            }
         }
         &:last-child{
            padding-bottom: 0;
         }
         
         #respond {
            float: left;
            width: 100%;
            margin-top: 20px;
            display: block !important;
            #reply-title {
               display: block;
               #cancel-comment-reply-link{
                  font-family: $font-family-base;
               }
            }
         }
      }
      &>li {
         &:first-child {
            .comment-inner {
               margin-top:0;
            }
         }
         &:last-child {
            border: 0;
         }
      }
      .the-comment{
         border-bottom: 1px solid $border-color;
         padding-bottom: 20px;
         margin-bottom: 20px;
         .media-comment-left{
            min-width: 90px;
            float: left;
            @include media-breakpoint-down(md){
               min-width: 70px;
            }
            @media(max-width: 490px){
               display: block;
               .author-image{
                  margin-bottom: 8px;
               }
            }
            .author-image{
               img{
                  width: 70px;
                  height: 70px;
                  overflow: hidden;
                  border-radius: 50%;
                  @include media-breakpoint-down(md){
                     width: 55px;
                     height: 55px;
                  }
               }
            }
         }
         .media-comment-body{
            padding-left: 91px;
            @include media-breakpoint-down(md){
               padding-left: 71px;
            }
            @media(max-width: 490px){
               display: block;
               width: 100%;
               padding-left: 0;
            }
         }
         .comment-rate{
            margin-top: 2px;
            .on{
               color: $theme-color;
            }
         }
         .author-meta{
            line-height: 1.8;
            position: relative;
            margin-bottom: 5px;
            
            a{
               font-size: 14px;
            }
            .fn{
               font-weight: 700;
               font-family: $headings-font-family;
               display: block;
               width: 100%;
               font-size: 18px;
               font-style: normal;
               color: $black;
               a{
                  font-size: 18px;
               }
            }
         }
         .comment-meta {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 300;
            margin-bottom: 5px;
            color: #676767;
         }
         .comment-info{
            position: relative;
            padding-left: 22px;
            &:after{
               content: '';
               @include size(12px, 2px);
               background: $theme-color;
               position: absolute;
               top: 13px;
               left: 0;
               z-index: 1;
            }
            a{
               color: #999;
               &:hover{
                  color: $theme-color;
               }
            }
         }
         .comment-body {
            position: relative;
            margin-top: 5px;
         }
         .awaiting_moderation {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 8px;
            padding: 2px 4px;
            font-style: normal;
         }
         .comment-reply-link {
            display: inline-block;
            float: right;
            color: $theme-color;
            font-weight: 500;
            font-size: 13px;
            text-transform: uppercase;
            position: absolute;
            top: 0;
            right: 0;
         }
      }
      .children{
         display: block;
         float: left;
         width: 100%;
         padding-left: 50px;
         list-style: none;
         @include media-breakpoint-down(md){
            padding-left: 40px;
         }
         .comment-author{
            padding-left: 70px;
         }
         .children {
            padding-left: 50px;
            @include media-breakpoint-down(md){
               padding-left: 30px;
            }
           @include media-breakpoint-down(sm){
               padding-left: 20px;
            }
         }
      }
   }
}
#respond {
   clear: left;
   margin-bottom: 30px;
   input[type="text"], 
   input[type="tel"],
   input[type="password"],
   input[type="email"],
   textarea {
      width: 100%;   
   }
   .form-submit {
      margin: 16px 0 0;
   }
}
#reviews {
   float: left;
   width: 100%;
   #comments {
      width: 100%;
      padding: 0;
      margin: 30px 0 0;
      ol.commentlist {
         padding: 30px 0 0;
         
         .comment-container {
            margin-left: 0;
            
            .authorname {
               display: none;
            }
            .commentmeta strong {
               float: left;
            }
         }
         .comment-text {
            text-align: left;
            clear: both;
            margin-bottom: 20px;
         }
      }
   }
 
}
#comment_popup {
   background: #fff;
   padding: 50px;
   max-width: 50%;
   position: relative;
   margin: 0 auto;
   @include media-breakpoint-down(md){
      max-width: 100%;
   }
   @include media-breakpoint-down(md){
      padding: 30px;
   }
}

.comment-rating{
   .comment-star-rating{
      margin: 0;
      padding: 0;
      @include clearfix();
      > li{
         float: left!important;
         width: auto!important;
         border: none!important;
         list-style: none;
         position: relative;
         margin: 0 15px 0 0!important;
         padding: 0 15px 0 0 !important;
         @include media-breakpoint-down(md){
            margin-right: 10px!important;
            padding-right: 10px!important;
         }
         &:after{
            content: '|';
            position: absolute;
            right: 0;
            top: 0;
            z-index: 11;
         }
         &:last-child{
            padding-right: 0!important;
            margin-right: 0!important;
            &:after{
               content: none;
            }
         }
         a{
            color: #888888;
            &.active{
               color: $theme-color;
            }
         }
      }
   }
}

.pingbacklist{
   list-style-type: none;
   padding: 0;
   > li{
      margin-bottom: 20px;
      padding-bottom: 5px;
      line-height: 32px;
      border-bottom: 1px solid $border-color;
      .author-meta{
         .fn{
            font-weight: 500;
            font-family: $headings-font-family;
            font-size: 18px;
            font-style: normal;
         }
         .comment-info{
            position: relative;
            padding-left: 22px;
            display: block;
            width: 100%;
            font-size: 14px;
            &:after{
               content: '';
               @include size(12px, 2px);
               background: $theme-color;
               position: absolute;
               top: 13px;
               left: 0;
               z-index: 1;
            }
            a{
               color: #999;
               &:hover{
                  color: $theme-color;
               }
            }
         }
      }
      .comment-body {
         position: relative;
         margin-top: 5px;
      }
   }
}