/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comments-area{
	margin: 0 0 60px;

	.comments-title{
		line-height: 1.381em;
		font-size: 1.222em;
		font-weight: 500;
		color: $secondary_color;
		margin: 0 0 30px;
		padding: 0 0 20px;
		border-bottom: 2px solid #f1f5f8;
	} /*comments-title*/

	ol{
		margin: 0;
		padding: 0;
		list-style: none;

		.comment-body{
			overflow: hidden;
			border-bottom: 2px solid #f1f5f8;
			margin-bottom: 50px;
			padding-bottom: 10px;

			.comment-meta{
				float: left;
				width: 48px;
				margin-right: 20px;
				margin-top: 7px;

				img{
					vertical-align: top;
					@include border-radius(4px);
				} /*img*/

			} /*comment-meta*/

			.text-holder{
				overflow: hidden;

				.top{
					overflow: hidden;
					margin: 0 0 10px;

					.left{
						float: left;

						.fn{
							font-size: 1em;
							font-weight: 500;
							color: $secondary_color;
						} /*fn*/

						.says{display: none;}

						.comment-metadata{	
							font-size: 0.7em;
							line-height: 1.5em;
							color: #86919d;

							a{
								color: #86919d;
								@include transition(ease, 0.2s);

								&:hover,
								&:focus{
									text-decoration: none;
									color: $primary_color;
								}

							} /*a*/

						} /*comment-metadata*/

					} /*left*/

					.reply{
						float: right;
						font-size: 0.8em;
						font-weight: 500;
						text-transform: uppercase;
						letter-spacing: 0.5px;

						a{
							padding-left: 26px;
							position: relative;

							&:before{
								position: absolute;
								top: -4px;
								left: 0;
								// content: '\f122';
								// font-family: 'FontAwesome';
								background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232f8be6' viewBox='0 0 576 512'%3E%3Cpath d='M136.309 189.836L312.313 37.851C327.72 24.546 352 35.348 352 56.015v82.763c129.182 10.231 224 52.212 224 183.548 0 61.441-39.582 122.309-83.333 154.132-13.653 9.931-33.111-2.533-28.077-18.631 38.512-123.162-3.922-169.482-112.59-182.015v84.175c0 20.701-24.3 31.453-39.687 18.164L136.309 226.164c-11.071-9.561-11.086-26.753 0-36.328zm-128 36.328L184.313 378.15C199.7 391.439 224 380.687 224 359.986v-15.818l-108.606-93.785A55.96 55.96 0 0 1 96 207.998a55.953 55.953 0 0 1 19.393-42.38L224 71.832V56.015c0-20.667-24.28-31.469-39.687-18.164L8.309 189.836c-11.086 9.575-11.071 26.767 0 36.328z'/%3E%3C/svg%3E") center center no-repeat;
								content: '';
								width: 15px;
								height: 29px;
							} /*a:before*/
						} /*a*/

					} /*reply*/

				} /*top*/

			} /*text-holder*/

		} /*comment-body*/

		.bypostauthor{

			.comment-body{
				border-bottom: 0;
				padding: 30px 25px 5px;
				border-left: 5px solid $primary_color;
				background: #f1f5f8;
			} /*comment-body*/

		} /*bypostauthor*/

		ol{
			margin-left: 30px;
		} /*ol ol*/

	} /*ol*/

	.comment-reply-title{
		line-height: 1.381em;
		font-size: 1.222em;
		font-weight: 500;
		color: $secondary_color;
		margin: 0 0 30px;
		padding: 0 0 20px;
		border-bottom: 2px solid #f1f5f8;
	} /*comment-reply-title*/

	.comment-form{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;

		label{display: none;} /*label*/

		.comment-notes,
		.comment-form-comment,
		.form-submit{width: 100%;} /*comment-notes*/

		.comment-form-author,
		.comment-form-email,
		.comment-form-url{width: 31%;}

		.comment-form-cookies-consent{
			width: 100%;
			
			label{
				display: inline-block;
				padding-left: 5px;
			}
		}

		input[type="text"],
		input[type="email"],
		input[type="url"]{width: 100%;}

	} /*comment-form*/

} /*comments-area*/

@media only screen and (max-width: 767px){
	
	.comments-area{

		ol{

			.comment-body{

				.comment-meta{display: none;} //comment-meta

			} //comment-body

			ol{
				margin-left: 10px;
			} //ol

		} //ol

		.comment-form{

			.comment-form-author,
			.comment-form-email,
			.comment-form-url{width: 100%;}

		} /*comment-form*/

	} //comments-area

} //media