.comment-list {
	margin: 0;
	padding: 0;
	.comment {

	}
}
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
	.comment-meta {
		&:before {
			content: '\f005';
			@include fa-icon();
			@include font-size(1.1);
			padding: 7px 7px;
			border-radius: 100%;
			color: $color__white;
			background-color: $color__main;
			position: absolute;
			top: -12px;
		}
	}
}

.comments-title {
	@include font-size(4.2);
	font-weight: 200;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 43px;
}
.comment-meta {
	position: relative;
}
.comment-author {
	.avatar {
		border-radius: 100%;
		float: left;
		margin-right: 20px;
		width: 50px;
	}
	.says {
		display: none;
	}
	.fn {
		font-weight: 400;
		@include font-size(1.6);
		color: $color__main;
		line-height: 1.5;
	}
}

.comment-metadata {
	margin-top: -10px;
}

.comment-content {
	@include font-size(1.4);
	margin-bottom: 0;
	word-wrap: break-word;
	padding-left: 70px;
	padding-right: 70px;
	>:first-child {
		margin-top: 0;
	}
	p {
		margin-bottom: 30px;
		font-weight: 400;
		color: $color__black;
		line-height: 1.7;
		opacity: 0.7;
	}
}

.comment-form {
	.comment-notes {
		text-align: center;
		font-weight: 400;
		@include font-size(1.4);
		line-height: 1.7;
		opacity: 0.7;
	}
	& > p > label {
		margin-bottom: 5px;
	}
}
.comments-area {
	margin-top: 80px;
	margin-bottom: 127px;
}
.comments-area ol {
	list-style: none;
	.reply {
		position: absolute;
		top: 16px;
		right: 30px;
		a {
			color: $color__main;
			@include font-size(1.4);
			&:hover {
				color: $color__black;
			}
		}
	}
}

ol.children {
	margin-left: 0;
	position: relative;
	padding-left: 28px;
}

.comment-body {
	position: relative;
	padding-top: 30px;
	padding-left: 30px;
	border-radius: 5px;
	margin-bottom: 25px;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
}
.comment-metadata {
	time {
		position: relative;
		text-transform: uppercase;
		color: $color__black;
		opacity: 0.6;
		font-weight: 400;
		@include font-size(1.1);
		line-height: 2.2;
		letter-spacing: 0.1em;
		&:hover {
			color: $color__link-hover;
		}
	}
}
.comment-edit-link {
	text-transform: uppercase;
	font-weight: 400;
	@include font-size(1.1);
	color: #f7941d;
	margin-left: 10px;
	line-height: 2.2;
	letter-spacing: 0.1em;
}
.comment-respond {
	padding: 48px 68px 68px 68px;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	margin-top: 50px;
	margin-bottom: 30px;
	label {
		display: block;
		font-weight: 400;
		@include font-size(1.7);
		line-height: 1.9;
		opacity: 0.8;
		span {
			color: $color__main;
		}
	}
	p {
		margin-bottom: 0px;
		margin-top: 13px;
	}
	input[type="text"],
	input[type="email"],
	input[type="url"] {
		padding: 8px 15px;
		width: 100%;
	}
	.form-submit {
		margin-top: 33px;
	}
	input[type="submit"] {
		border-radius: 100px;
		padding: 0 33px;
		text-transform: uppercase;
		@include font-size(1.4);
		line-height: 3.1;
		letter-spacing: 0.05em;
		&:focus,
		&:active {
			outline: none;
			background-color: $color__main;
			color: $color__white;
		}
	}
	.comment-subscription-form {
		display: none;
	}
}

.comment-form {
	.comment-form-comment {
		margin-top: 33px;
		textarea {
			height: 274px;
		}
	}
	.comment-form-author {
		margin-top: 2px;
	}
}

.comment-reply-title {
	margin-top: 0;
	text-align: center;
	font-weight: 200;
	line-height: 1.3;
	@include font-size(3.6);
	margin-bottom: 18px;
	small {
		float: right;
		font-size: 14px;
		margin-top: 7px;
	}
}

.comment-navigation {
	margin-top: 50px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 3px;
	padding-bottom: 7px;
	margin-left: 28%;
	border-radius: 100px;
	width: 45%;
	background: #ebfafe;
	.nav-links {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		.nav-previous {
			a::before {
				content: '\f0d9';
				@include fa-icon();
				color: $color__main;
				margin-right: 5px;
			}
		}
		.nav-next {
			a::after {
				content: '\f0da';
				@include fa-icon();
				color: $color__main;
				margin-left: 5px;
			}
		}
		a {
			text-transform: uppercase;
			font-weight: 400;
			@include font-size(1.4);
			color: $color__black;
			line-height: 1.7;
			letter-spacing: 0.05em;
			opacity: 0.8;
			&:hover {
				color: $color__main;
			}
		}
	}
}
@media(max-width: 991px) {
	.comment-navigation {
		width: 100%;
		margin-left: 0;
	}
}

@media(max-width: 767px) {
	ol.children, ul.children, .comment-list {
		padding: 0;
	}
}

@media(max-width: 574px) {
	.comments-area {
		.comments-title {
			@include font-size(3.2);
		}
		.avatar {
			margin-bottom: 30px;
		}
		.reply {
			right: 30px;
			text-align: right;
		}
	}
	.comments-area.comments-area .reply {
		position: relative;
		top: 0;
	}
	.comment-respond {
		padding-left: 10px;
		padding-right: 10px;
		box-shadow: none;
		.comment-reply-title {
			@include font-size(2.7);
		}
		.logged-in-as {
			a {
				@include font-size(1.7);
			}
		}
	}
	.comment-respond.comment-respond input,
	.comment-respond.comment-respond textarea {
		@include font-size(1.4);
	}
}

@media(max-width: 320px) {
	.comment-content {
		padding-right: 15px;
	}
}