@charset 'UTF-8';

/**
* Комментарии
*/

.comment-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0;
}

.comment-wrap__main {
  width: 53.57143%;
}
.comment-wrap__steam {
  width: 46.42857%;
  padding-left: 62px;
}

.comment-wrap__steam.review {
  width: 571px;
  padding-left: 62px;
}

.comment-wrap__head {
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 14px 0;
  color: #383838;
}

.comment-wrap__head-count {
  font-size: 17px;
}

.comment-form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 30px;
}

.comment-form__avatar {
  padding: 9px 12px 9px 10px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 72px;
  -ms-flex: 0 0 72px;
  flex: 0 0 72px;
}

.comment-form__main {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex-basis: 0;
  flex-basis: 0;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  -ms-flex-preferred-size: 0;
}

.comment-form__control {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  display: block;
  width: 100%;
  height: 110px;
  padding: 15px 12px 46px 12px;
  resize: none;
  color: #6b6b6b;
  border: 1px solid #cfcfcf;
  background-color: #ffffff;
}

.comment-form__control::-webkit-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control::-moz-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control:-ms-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control::-ms-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control::-webkit-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control::-moz-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control:-ms-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__control::placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-form__action {
  position: absolute;
  z-index: 10;
  right: 9px;
  bottom: 9px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.comment-form__photo-btn {
  display: block;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  background: url(../img/comment/ico-camera.svg) center center no-repeat;
  background-size: 100% auto;
}

.comment-form__smile {
  margin-left: 10px;
}

.comment-form__smile-btn {
  display: block;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  background: url(../img/comment/ico-smile.png) 0 0 no-repeat;
  background-size: 100% 100%;
}

.comment-form__reset {
  display: block;
  margin-left: 16px;
}

.comment-form__reset-btn {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: block;
  padding: 0 2px;
  color: #00c0e9;
  border: none;
  background: none;
}

.comment-form__submit {
  margin-left: 16px;
}

.comment-form__btn {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  display: block;
  padding: 5px 18px;
  color: #ffffff;
  border: none;
  background-color: #00c0e9;
}

.comment-modal__ico {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 auto 16px auto;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #808080;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.comment-modal__title {
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  max-width: 322px;
  margin: 0 auto 14px auto;
  padding-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
  color: #808080;
  border-bottom: 1px solid #edf1f2;
}

.comment-modal__social-head {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 14px;
  text-align: center;
  color: #808080;
}

.comment-social {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.comment-social__btn {
  width: 53px;
  height: 53px;
  margin-right: 7px;
  margin-bottom: 7px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #f0f0f0;
  background-repeat: no-repeat;
  background-position: center center;
}

.comment-social__btn:last-child {
  margin-right: 0;
}

.comment-social__btn_steam {
  background-image: url(../img/comment/ico-social-steam-gray.png);
  background-position: 0 center;
  background-size: 45px auto;
}

.comment-social__btn_steam:hover {
  background-color: #303336;
  background-image: url(../img/comment/ico-social-steam-white.png);
}

.comment-social__btn_vk {
  background-image: url(../img/comment/ico-social-vk-gray.svg);
  background-size: 34px auto;
}

.comment-social__btn_vk:hover {
  background-color: #365c83;
  background-image: url(../img/comment/ico-social-vk-white.svg);
}

.comment-social__btn_fb {
  background-image: url(../img/comment/ico-social-fb-gray.svg);
  background-size: 18px auto;
}

.comment-social__btn_fb:hover {
  background-color: #384e94;
  background-image: url(../img/comment/ico-social-fb-white.svg);
}

.comment-social__btn_ya {
  background-image: url(../img/comment/ico-social-ya-gray.svg);
  background-size: 14px auto;
  background-position: 45% center;
}

.comment-social__btn_ya:hover {
  background-color: #ff0000;
  background-image: url(../img/comment/ico-social-ya-white.svg);
}

.comment-social__btn_ok {
  background-image: url(../img/comment/ico-social-ok-gray.svg);
  background-size: 17px auto;
}

.comment-social__btn_ok:hover {
  background-color: #ff9400;
  background-image: url(../img/comment/ico-social-ok-white.svg);
}

.comment-social__btn_gplus {
  background-image: url(../img/comment/ico-social-google-gray.svg);
  background-size: 32px auto;
}

.comment-social__btn_gplus:hover {
  background-image: url(../img/comment/ico-social-google-color.svg);
}

.comment-social__btn_tw {
  background-image: url(../img/comment/ico-social-tw-gray.svg);
  background-size: 31px auto;
}

.comment-social__btn_tw:hover {
  background-color: #00a3da;
  background-image: url(../img/comment/ico-social-tw-white.svg);
}

.comment-social__btn_mailru {
  background-image: url(../img/comment/ico-social-mailru-gray.png);
  background-size: 33px auto;
}

.comment-social__btn_mailru:hover {
  background-color: #005ffd;
  background-image: url(../img/comment/ico-social-mailru-color.png);
}

.comment {
  border-top: 1px solid #d0d0d0;
}

.comment:first-child,
.comment_border-none {
  border-top: none;
}

.comment .comment {
  margin-left: 70px;
}

.comment .comment-more {
  margin-left: 70px;
}

.comment .comment-form {
  margin-bottom: 0;
  margin-left: -15px;
}

.comment__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0;
}

.comment__img {
  padding-right: 25px;
  padding-left: 10px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 85px;
  -ms-flex: 0 0 85px;
  flex: 0 0 85px;
}

.comment__date {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  margin-top: 8px;
  text-align: center;
  color: #898989;
}

.comment__main {
  -webkit-box-flex: 1;
  -webkit-flex-basis: 0;
  flex-basis: 0;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  -ms-flex-preferred-size: 0;
}

.comment__head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.comment__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #383838;
}

.comment_review-good .comment__name {
  color: #00b048;
}

.comment_admin .comment__name {
  color: #ff004b;
}

.comment__name-link {
  color: #383838;
}

.comment__social {
  margin-left: 8px;
}

.comment__social-btn {
  display: block;
  width: 21px;
  height: 21px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
}

.comment__social-btn_vk {
  background-color: #3f5a77;
  background-image: url(../img/comment/ico-social-vk-white.svg);
  background-size: 13px auto;
}

.comment__social-btn_tw {
  background-color: #00a4da;
  background-image: url(../img/comment/ico-social-tw-white.svg);
  background-size: 13px auto;
}

.comment__social-btn_fb {
  background-color: #384e94;
  background-image: url(../img/comment/ico-social-fb-white.svg);
  background-size: 8px auto;
}

.comment__social-btn_yandex {
  background-color: #ff0000;
  background-image: url(../img/comment/ico-social-ya-white.svg);
  background-size: 6px auto;
  background-position: 45% center;
}

.comment__social-btn_mailru {
  background-color: #005ffd;
  background-image: url(../img/comment/ico-social-mailru-color.png);
  background-size: 13px auto;
}

.comment__social-btn_google {
  background-color: #ffffff;
  background-image: url(../img/comment/ico-social-google-color.svg);
  background-size: 13px auto;
}

.comment__social-btn_ok {
  background-color: #ff9500;
  background-image: url(../img/comment/ico-social-ok-white.svg);
  background-size: 7px auto;
}

.comment__social-btn_steam {
  background-color: #303336;
  background-image: url(../img/comment/ico-social-steam-white.png);
  background-position: 0 center;
  background-size: 18px auto;
}

.comment__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #6b6b6b;
}

.comment__desc p {
  margin: 0 0 16px 0;
}

.comment__desc p:last-child {
  margin-bottom: 0;
}

.comment__note {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 10px;
  color: #b4b4b4;
}

.comment__foot {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

.comment__action {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.comment__action-unit {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  margin-right: 9px;
}

.comment__action-link {
  color: #b4b4b4;
}

.comment__reply {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.comment__reply-btn {
  color: #00a3da;
}

.comment__like {
  margin-left: auto;
}

.comment__like-btn {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  display: block;
  width: auto;
  height: 18px;
  padding: 0;
  padding-right: 18px;
  -webkit-transition: none;
  transition: none;
  color: #b4b4b4;
  border: none;
  background: url(../img/comment/ico-like-gray.png) right center no-repeat;
}

.comment__like-btn_active {
  color: #ff4248;
  background-image: url(../img/comment/ico-like-red.png);
}

.comment__attach {
  margin-top: 10px;
}

.comment__attach-head {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 4px;
  color: #b4b4b4;
}

.comment__attach-body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.comment__attach-unit {
  position: relative;
  margin-right: 10px;
  padding-right: 16px;
}

.comment__attach-remove {
  position: absolute;
  top: 3px;
  right: 0;
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  background: url(../img/comment/ico-close.png) 0 0 no-repeat;
}

.comment__game {
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  vertical-align: bottom;
  color: #ffffff;
}

.comment_review-good .comment__game {
  background-color: #00b048;
}

.comment__who {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-left: 8px;
  color: #383838;
}

.comment__for {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  margin-left: 10px;
  padding-left: 15px;
  color: #b4b4b4;
  background: url(../img/comment/ico-arrow-reply.png) 0 center no-repeat;
}

.comment__write {
  padding: 5px 0 30px 0;
}

.comment__write-control {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  display: block;
  width: 100%;
  height: 41px;
  padding: 0 20px;
  color: #6b6b6b;
  border: 1px solid #cfcfcf;
  background-color: transparent;
}

.comment__write-control::-webkit-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control::-moz-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control:-ms-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control::-ms-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control::-webkit-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control::-moz-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control:-ms-input-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment__write-control::placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.comment-more {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.comment-more:before,
.comment-more:after {
  display: block;
  height: 1px;
  content: '';
  background-color: #cfcfcf;
  -webkit-box-flex: 1;
  -webkit-flex-basis: 0;
  flex-basis: 0;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  -ms-flex-preferred-size: 0;
}

.comment-more:before {
  margin-right: 5px;
}

.comment-more:after {
  margin-left: 5px;
}

.comment-more__btn {
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  display: block;
  padding: 8px 35px 8px 26px;
  color: #6b6b6b;
  border: none;
  background: #e3e3e3 url(../img/comment/ico-arrow-more.png) -webkit-calc(100% - 18px) center no-repeat;
  background: #e3e3e3 url(../img/comment/ico-arrow-more.png) calc(100% - 18px) center no-repeat;
}

.comment-more__btn:hover {
  color: #6b6b6b;
}

.comment-load {
  margin: 20px 0;
}

.comment-load__btn {
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  display: block;
  padding: 8px;
  text-align: center;
  color: #6b6b6b;
  background-color: #e3e3e3;
}

.comment-load__btn:hover {
  color: #6b6b6b;
}

/**
* Медиазапросы
*/

@media (max-width: 991px) {
  .comment-wrap {
    display: block;
  }

  .comment-wrap__main {
    width: auto;
    margin-bottom: 40px;
  }

  .comment-wrap__steam {
    width: auto;
    padding-left: 0;
  }

  .comment-wrap__steam.review {
    width: auto;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .comment-form__avatar {
    padding-right: 10px;
    padding-left: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 60px;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
  }

  .comment-form__control {
    height: 160px;
  }

  .comment .comment {
    margin-left: 20px;
  }

  .comment .comment-more {
    margin-left: 20px;
  }

  .comment .comment-form {
    margin-left: 0;
  }

  .comment__img {
    padding-right: 10px;
    padding-left: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 60px;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
  }

  .comment__head {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

#Comments {
  margin-bottom:100px;
}