.billow {
	.comments {
		a {
			word-wrap: break-word;
		}

		.section-head {
			position: relative;
			margin-top: 3.5rem;
			text-align: center;
			font-size: 0;
			line-height: normal;

			.title {
				position: relative;
				display: inline-block;
				padding: 0 1.1rem;
				z-index: 1;
				background-color: $color_white;
				font-size: 1.25rem;
				font-weight: 600;
				vertical-align: middle;
			}

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				width: 100%;
				height: 1px;
				background: $color_border_input;
			}

			&::after {
				content: '';
				display: table;
				clear: both;
			}
		}

		.comments-area {
			.comments-wrap {
				.comments-list {
					position: relative;

					& > li.comment {
						padding: 1.5rem 0;
						border-bottom: 1px solid $color_border;
					}

					& > li.comment:last-child {
						border-bottom: 0;
					}

					li.comment {
						.comment-avatar {
							float: left;
							margin-right: 1.3rem;

							img {
								border-radius: 50%;
							}
						}

						.comment-content {
							overflow: hidden;

							.comment-meta {
								overflow: hidden;
								vertical-align: top;

								.comment-author {
									display: block;
									margin-top: 0.25rem;
									margin-bottom: 0.2rem;
									color: #161616;
									font-size: 1.06rem;
									font-weight: 500;
									line-height: 1;

									a {
										text-decoration: none;
									}

									.post-author {
										font-size: 0.9rem;
									}
								}

								a.comment-time {
									color: #b4b4b4;
									font-size: 0.7rem;
									font-weight: 600;
									letter-spacing: .1em;
									text-transform: uppercase;
									text-decoration: none;
									-webkit-font-smoothing: antialiased;
								}

								.reply {
									a.comment-reply-link {
										float: right;
										margin-top: -1.3rem;
										color: $color_main_hover;
										text-decoration: none;

										&::before {
											content: "\f3e5";
											font-family: "Font Awesome 5 Free";
											font-weight: 700;
											margin-right: 0.5rem;
										}
									}
								}
							}
						}

						ul.children {
							margin-top: 3rem;

							li.comment {
								position: relative;
								margin-top: 2rem;
								padding-top: 2rem;
								padding-left: 3rem;
								border-top: 1px solid $color_border;
							}
						}
					}
				}

				.comment-nav {
					display: flex;
					justify-content: space-between;
				}

			}

			.no-comments {
				padding: 0.9rem 1.25rem;
				text-align: center;
				background: rgba(242, 244, 247, 0.7);
				border-radius: 2px;
			}

			.comment-respond {
				.section-head {
					display: block;
				}

				.comment-form {
					margin: 3rem 0;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-wrap: wrap;
					flex-wrap: wrap;

					.inline-field {
						-ms-flex: 1 1 30%;
						flex: 1 1 30%;
						width: 33.3333%;
						margin-left: 0.8rem;
						margin-bottom: 1.5rem;
						font-size: 0.8rem;
						color: $color_text_main;
						box-sizing: border-box;

						input {
							width: 100%;
							color: inherit;
						}
					}

					.reply-field {
						margin-bottom: 25px;
						width: 100%;

						textarea {
							display: block;
							padding: 18px 14px;
							color: $color_text_main;
							box-sizing: border-box;
						}
					}

					.comment-form-cookies-consent {
						display: flex;
						align-items: center;
						width: 100%;

						label {
							margin-left: 0.4rem;
						}
					}

					:nth-child(2) {
						margin-left: 0;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 26rem) {
	.billow {
		.comments {
			.comments-area {
				.comments-wrap {
					.comments-list > li.comment {
						padding: 1.5rem 0 0 0;

						article.the-comment {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 0;
							padding: 0 !important;

							.comment-avatar {
								margin-right: 0;
								margin-bottom: 0.5rem;
							}

							.comment-content {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}