.post-item {
	margin-top: 20px;

		&:hover {

				.post-read {
					color: #fff;
					border-color: #4c4c4c;
					background-color: #4c4c4c;

						&:hover {
							border-color: @brand-primary;
							background-color: @brand-primary;
						}
				}
		}
}

.post-header {
	margin-bottom: 20px;
	background: url("@{images-background}post-header-bg.jpg") center no-repeat;
	background-size: cover;

		.postid-16062 & {
			background: url("../images/backgrounds/sigle-page-top-title-bg.jpg") top center no-repeat;
			background-size: cover;
		}
}

.post-title {
	color: #fff;
}

.post-item-title {
	margin-bottom: 20px;
	color: @gray-darker;
	font-size: 24px;
	line-height: 32 / 24;

		a:hover {
			color: @brand-primary;
		}
}

.post-meta {
	padding-bottom: 10px;
	font-size: 14px;
	.clearfix;

		li {
			color: #a3a3a3;
			float: left;
			padding-bottom: 10px;
			margin-right: 15px;

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

		img {
			margin-right: 5px;
			.opacity(.2);
			.transition(opacity 250ms ease-in-out);
		}

		a {
			display: inline-block;
			vertical-align: middle;
			padding-top: 4px;
			padding-bottom: 4px;
		}

		a:hover {
			color: @brand-info;
			text-decoration: underline;

				img {
					.opacity(1);
				}
		}
}

.post-data {
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	background-color: @brand-info;
	.border-radius(4px);

		&:hover {
			text-decoration: none !important;
			color: #fff !important;
			background-color: darken(@brand-info, 10%);
		}
}

.post-thumb {
	overflow: hidden;
	margin-bottom: 20px;
	.text-center;

		img {
			.transition(transform 250ms ease-in-out);
		}

		a:hover {

				img {
					.scale(1.02);
				}
		}
}

.stick_parent {
	position: relative;
}

.post-share {
	position: absolute;
	top: 0;
	right: 1400px;
	left: 0;
	width: 50px;
	margin: 0 auto 20px;
	font-size: 0;

		h5 {
			color: @gray;
			font-size: 12px;
			.text-center;
			margin-bottom: 10px;
		}

		&.is_stuck + div {
			display: none !important;
		}
}

.post-content {
	color: #111;
	line-height: 34 / 18;
	border-bottom: 1px solid fade(#000, 5%);
		
		h1, h2, h3, h4, h5, h6 {
			color: #000;
			line-height: 1.2;
		}

		h1, h2, h3, h4, h5, h6,
		p, ul, ol, li, div {

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

		a {
			color: @brand-info;
			text-decoration: underline;

				&:hover {
					color: @brand-primary;
					text-decoration: none;
				}
		}

		.post-item & {
			padding-bottom: 20px;
			border: 0;
			font-size: 16px;
		}
		
		img.aligncenter {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		iframe {
			max-width: 100%;
		}

		div.wp-caption {
			max-width: 100%;
		}

		.postid-16062 & {
			color: #999;

				h1 {
					font-size: 40px;
					.geomanist_medium;
				}

				iframe {
					//box-shadow: 0 25px 30px rgba(1, 1, 1, 0.15);
					width: 100%;
					border: 40px solid #f2f2f2;
					height: 760px;
				}

				img {
					box-shadow: 0 25px 30px rgba(1, 1, 1, 0.15);
					margin-bottom: 15px;
				}

				ol,
				ul {
					counter-reset: counter;
				}

				li {
					position: relative;
					padding-left: 50px;

						strong {
							.geomanist_medium;
						}
					
						&:before {
							content: counter(counter);
			    		counter-increment: counter;
							width: 36px;
							height: 36px;
							background-color: #1e93ff;
							border-radius: 50%;
							position: absolute;
							left: 0;
							top: 0;
							text-align: center;
							font-size: 20px;
							color: #fff;
							.geomanist_medium;
						}
				}
		}
}

.more-posts {

		h3 {
			color: @gray-darker;
		}

		h4 {
			color: #adadad;
		}
}

.post-read {
	display: inline-block;
	padding: 13px 26px;
	color: @gray;
	font-size: 14px;
	border: 1px solid fade(#000, 10%);
}

.post-comments {

		h2 {
			color: @gray-darker;
		}

		li {

				&:last-child {
					border-bottom: 0;
				}

				h3 {
					margin-bottom: 10px;
					color: @gray-dark;
				}

				a {
					display: inline-block;
					color: @brand-info;

						&:hover {
							color: @brand-info;
							text-decoration: underline;
						}
				}

				p {
					padding-left: 20px;
					color: @gray;
					line-height: 1.3;
				}
		}

		> ul {
				
				> li {
					border-bottom: 1px solid #f2f2f2;
				}

				ul {
					background-color: #f2f2f2;

						li {
							position: relative;
							border-bottom: 1px solid darken(#f2f2f2, 10%);
						}

						h3 {
							position: relative;

								&:before {
									content: '';
									position: absolute;
									top: 5px;
									left: -40px;
									.size(26px, 16px);
									background: url("@{images-icons}replay.png");
									background-image: url("@{images-icons}replay.svg"), none;
								}
						}

						p {
							margin-bottom: 0;
						}
				}
		}
}

.comment-respond {

		h2 {
			color: @gray-darker;
		}

		h3 {
			color: @gray;
		}

		form {
			background-color: #f7f7f7;
		}

		.cfield {
			
				input,
				textarea {
					display: block;
					width: 100%;
					color: #000;
					border-bottom: 2px solid #dedede;
					.placeholder(#7b7c7c);

						&:focus {
							border-bottom-color: #000;
						}
				}
		}

		.field-comment textarea {
			background: url("@{images-icons}com-write.png") 0 0 no-repeat;
			background-image: url("@{images-icons}com-write.svg"), none;
		}

		.field-author input {
			background: url("@{images-icons}com-user.png") center left no-repeat;
			background-image: url("@{images-icons}com-user.svg"), none;
		}

		.field-email input {
			background: url("@{images-icons}com-mail.png") center left no-repeat;
			background-image: url("@{images-icons}com-mail.svg"), none;
		}

		.field-url input {
			background: url("@{images-icons}com-url.png") center left no-repeat;
			background-image: url("@{images-icons}com-url.svg"), none;
		}

		.form-submit {
			.text-center;

				input {
					display: inline-block;
					padding: 20px;
					color: @brand-info;
					.text-uppercase;
					.geomanist_medium;
					.border-radius(4px);
					text-decoration: underline;

						&:hover {
							color: #fff;
							text-decoration: none;
							background-color: @brand-info;
						}
				}
		}
}

.comment-notes {
	margin-bottom: 30px;
}

#cancel-comment-reply-link {
	color: @brand-info;
	text-decoration: underline;

		&:hover {
			color: @brand-primary;
			text-decoration: none;
		}
}

@media screen and (min-width: @screen-md-min) {

		.post-loop {

				.row {
					margin-left: -21px;
					margin-right: -21px;

						> div {
							padding-left: 21px;
							padding-right: 21px;
						}
				}
		}

		.post-item {
			margin-bottom: 50px;

				&:hover {
					@shadow: 0 0 0 26px #fff, 0 0 0 27px #e5e5e5, 0 15px 25px 28px rgba(1, 1, 1, 0.1);
					.box-shadow(@shadow);
				}
		}

		.post-single {
			padding-bottom: 80px;
		}

		.post-header {
			padding: 100px 0;
		}
	
		.post-title {
			font-size: 45px;
		}

		.post-content {
			padding-bottom: 60px;

				h2 {
					font-size: 32px;
				}

				h3 {
					font-size: 28px;
				}

				h3 {
					font-size: 24px;
				}

				h4 {
					font-size: 20px;
				}

				h5 {
					font-size: 18px;
				}

				h1, h2, h3, h4, h5, h6,
				p, ul, ol, li, div {
					margin-bottom: 30px;
				}
		}

		.post-footer {
			padding-top: 50px;
		}

		.more-posts {

				h3 {
					font-size: 45px;
				}

				h4 {
					margin-top: 30px;
					font-size: 24px;
				}

				.post-loop {
					margin-top: 50px;
				}
		}

		.post-comments {

				> h2 {
					padding: 30px 0;
					border-bottom: 4px solid #f2f2f2;
				}

				li {
					padding: 50px 0;

						p {
							margin: 30px 0;
							font-size: 20px;
						}
				}

				> ul {

						ul {
							margin-top: 50px;
							margin-bottom: -50px;
							padding: 0 80px;
						}
				}
		}

		.comment-respond {
			margin-top: 60px;

				h2 {
					margin-bottom: 20px;
				}

				h3 {
					margin-bottom: 50px;
				}

				form {
					padding: 60px 60px 40px;
				}

				.cfield {
					margin-bottom: 25px;

						input,
						textarea {
							padding-left: 70px;
							font-size: 24px;
						}

						input {
							height: 70px;
						}

						textarea {
							height: 90px;
						}
				}

				.form-submit {
					font-size: 24px;
				}
		}
}

@media screen and (min-width: 1230px) and (max-width: 1500px) {
	.postid-16062 {
		.post-content {
			iframe {
				height: 570px;
			}
		}
	}
}

@media screen and (min-width: @screen-lg-min) {

		.post-header {

				.postid-16062 & {
					padding: 240px 0;
				}
		}
}

@media screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {

		.post-header {

				.postid-16062 & {
					padding: 140px 0;
				}
		}

		.post-content {
				
				.postid-16062 & {
					
						iframe {
							height: 430px;
						}
				}
		}
}

@media screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

		.post-item {
			margin-bottom: 30px;

				&:hover {
					@shadow: 0 0 0 20px #fff, 0 0 0 21px #e5e5e5, 0 15px 25px 22px rgba(1, 1, 1, 0.1);
					.box-shadow(@shadow);
				}
		}

		.post-single {
			padding-bottom: 60px;
		}

		.post-header {
			padding: 70px 0;

				.postid-16062 & {
					padding: 120px 0;
				}
		}

		.post-content {
			padding-bottom: 50px;

				h1, h2, h3, h4, h5, h6,
				p, ul, ol, li, div {
					margin-bottom: 25px;
				}

				h2 {
					font-size: 26px;
				}

				h3 {
					font-size: 24px;
				}

				h3 {
					font-size: 20px;
				}

				h4 {
					font-size: 18px;
				}

				h5 {
					font-size: 16px;
				}

				.postid-16062 & {
					
						iframe {
							border: 10px solid #f2f2f2;
    					height: 330px;
						}
				}
		}

		.post-footer {
			padding-top: 40px;
		}

		.more-posts {

				h3 {
					font-size: 30px;
				}

				h4 {
					margin-top: 20px;
					font-size: 18px;
				}

				.post-loop {
					margin-top: 40px;
				}
		}

		.post-comments {

				> h2 {
					padding: 20px 0;
					border-bottom: 3px solid #f2f2f2;
				}

				li {
					padding: 40px 0;

						p {
							margin: 25px 0;
							font-size: 18px;
						}
				}

				> ul {

						ul {
							margin-top: 40px;
							margin-bottom: -40px;
							padding: 0 60px;
						}
				}
		}

		.comment-respond {
			margin-top: 50px;

				h2 {
					margin-bottom: 15px;
				}

				h3 {
					margin-bottom: 40px;
				}

				form {
					padding: 40px 40px 20px;
				}

				.cfield {
					margin-bottom: 20px;

						input,
						textarea {
							padding-left: 60px;
							font-size: 22px;
						}

						input {
							height: 60px;
						}

						textarea {
							height: 80px;
						}
				}

				.form-submit {
					font-size: 22px;
				}
		}
}

@media screen and (max-width: @screen-xs-max) {

		.post-item {
			margin-bottom: 20px;

				&:hover {
					@shadow: 0 0 0 10px #fff, 0 0 0 11px #e5e5e5, 0 15px 25px 12px rgba(1, 1, 1, 0.1);
					.box-shadow(@shadow);
				}
		}

		.post-single {
			padding-bottom: 30px;
		}

		.post-header {
			padding: 50px 0;

				.postid-16062 & {
					padding: 50px 0;
				}
		}

		.post-content {
			padding-bottom: 40px;

				h1, h2, h3, h4, h5, h6,
				p, ul, ol, li, div {
					margin-bottom: 20px;
				}

				h2 {
					font-size: 24px;
				}

				h3 {
					font-size: 22px;
				}

				h3 {
					font-size: 18px;
				}

				h4 {
					font-size: 16px;
				}

				h5 {
					font-size: 15px;
				}

				.postid-16062 & {
						
						li:before {
							width: 26px;
							height: 26px;
							font-size: 14px;
						}

						iframe {
							border: 10px solid #f2f2f2;
				    	height: 250px;
						}
				}
		}

		.post-footer {
			padding-top: 40px;
		}

		.more-posts {

				h3 {
					font-size: 24px;
				}

				h4 {
					margin-top: 15px;
					font-size: 16px;
				}

				.post-loop {
					margin-top: 30px;
				}
		}

		.post-comments {

				> h2 {
					padding: 15px 0;
					border-bottom: 2px solid #f2f2f2;
				}

				li {
					padding: 25px 0;

						p {
							margin: 15px 0;
							font-size: 16px;
						}
				}

				> ul {

						ul {
							margin-top: 25px;
							margin-bottom: -25px;
							padding: 0 20px 0 50px;
						}
				}
		}

		.comment-respond {
			margin-top: 30px;

				h2 {
					margin-bottom: 15px;
				}

				h3 {
					margin-bottom: 40px;
				}

				form {
					padding: 25px 15px;
				}

				.cfield {
					margin-bottom: 15px;

						input,
						textarea {
							padding-left: 45px;
							font-size: 16px;
						}

						input {
							height: 60px;
						}

						textarea {
							height: 80px;
						}
				}

				.form-submit {
					font-size: 16px;
				}
		}
}

@media screen and (max-width: @screen-xs-max),
			 screen and (min-width: @screen-md-min) and (max-width: 1050px),
			 screen and (min-width: @screen-sm-min) and (max-width: 850px) {
		
		.post-share {
			position: static !important;
			width: 100%;

				h5 {
					display: none;
				}
		}
}