/* Blog
----------------------------------------------------------*/
	
.post {
	margin-bottom: 40px;

	.post-image {
		margin-bottom: 30px;
	}

	ul.post-meta {
		list-style: none;
		padding: 0;
		margin: 5px 0 0 0;
		text-align: right;
		width: 170px;
		float: left;

		> li {
			font-weight: 600;
			margin-bottom: 20px;
			line-height: 1.2;

			@media #{$screen-xs} {
				display: inline-block;
				margin-right: 20px;

				&:last-child {
					margin-right: 0;
				}
			}

			> span {
				display: block;
				@include opacity(0.5);
				font-size: 12px;
			}
		}

		@media #{$screen-xs} {
			float: none;
			width: 100%;
			margin-bottom: 10px;
			text-align: left;
		}
	}

	.post-content {
		margin-left: 200px;

		@media #{$screen-xs} {
			margin-left: 0;
		}

		h1, h2 {
			font-size: 30px;
			margin-bottom: 35px;
		}
	}

	&.post-boxed {
		color: $color-text-dark;
		
		.post-image {
			position: relative;
			margin-bottom: 0;

			img {
				@include border-radius(3px 3px 0 0);
			}
		}
		.post-meta {
			float: none;
			width: 100%;
			text-align: left;
			font-size: 12px;
			border-bottom: 1px solid $color-line-dark;
			padding: 20px 20px 0 20px;
			background: $color-white;
			margin-top: 0;
			@include border-radius(3px 3px 0 0);

			> li {
				display: inline-block;
				margin-right: 15px;

				&:last-child {
					margin-right: 0;
				}
			}

			@media #{$screen-xs} {
				margin-bottom: 0px;
			}
		}
		.post-content {
			margin-left: 0;
			padding: 20px;
			background: $color-white;
			@include border-radius(0 0 3px 3px);

			h1, h2 {
				font-size: 28px;
				margin-bottom: 20px;
			}
		}

		.post-image + .post-meta {
			@include border-radius(0);
		}
	}

	&.single {
		.post-image {
			margin-bottom: 40px;
		}
		.post-content {
			margin-left: 230px;

			@media #{$screen-xs} {
				margin-left: 0;
			}

			h1 {
				font-size: 36px;
			}
		}
		.post-module {
			> .title {
				width: 170px;
				text-align: right;
				float: left;

				@media #{$screen-xs} {
					width: 100%;
					float: none;
					text-align: left;
					margin-bottom: 40px;
				}
			}
			> .content {
				margin-left: 230px;

				@media #{$screen-xs} {
					margin-left: 0;
				}
			}
		}
	}
}

html[dir="rtl"] .post {
	ul.post-meta {
		text-align: left;
		float: right;

		> li {
			@media #{$screen-xs} {
				margin-left: 20px;
				margin-right: 0;

				&:last-child {
					margin-left: 0;
				}
			}
		}

		@media #{$screen-xs} {
			text-align: right;
		}
	}

	.post-content {
		margin-right: 200px;
		margin-left: 0;

		@media #{$screen-xs} {
			margin-right: 0;
		}
	}

	&.post-boxed {
		.post-meta {
			text-align: right;
			> li {
				margin-left: 15px;

				&:last-child {
					margin-left: 0;
				}
			}
		}
		.post-content {
			margin-right: 0;
		}
	}

	&.single {
		.post-content {
			margin-right: 230px;
			margin-left: 0;

			@media #{$screen-xs} {
				margin-right: 0;
			}
		}
		.post-module {
			> .title {
				width: 170px;
				text-align: left;
				float: right;

				@media #{$screen-xs} {
					text-align: right;
				}
			}
			> .content {
				margin-right: 230px;
				margin-left: 0;

				@media #{$screen-xs} {
					margin-right: 0;
				}
			}
		}
	}
}


.comments {
	list-style: none;
	padding: 0;
	margin: 0;

	> li {
		margin-bottom: 5px;

		.avatar {
			width: 58px;
			height: 58px;
			float: left;
			@include border-radius(2px);
		}
		.content {
			padding: 10px 0;
			margin-left: 78px;

			> .details {
				font-family: $font-secondary;
				font-size: 12px;
				color: $color-text-muted-dark;
			}
		}

		ul {
			padding-left: 58px;
		}
	}
}


html[dir="rtl"] .comments {
	> li {
		.avatar {
			float: right;
		}
		.content {
			margin-right: 78px;
			margin-left: 0;
		}

		ul {
			padding-right: 58px;
			padding-left: 0;
		}
	}
}