
/* #Blog, Portfolio, Albums
================================================== */
/*Display content area*/
.page-info {
	padding: 0 0 10px 0;
}

.post {
	position: relative;
}
	.post:before,
	.post:after {
		content: "";
		display: table;
		clear: both;
	}
		.post .entry-title a {
			display: inline-block;
		}
		/*read more button*/
		.blog .details.more-link,
		.dt-blog-shortcode .details.more-link {
			margin-bottom: 10px;
		}
		.more-link.dt-btn {
			margin-top: 5px;
		}
		.post .more-link.dt-btn {
			margin-right: 10px;
		}

		/* #post format
		================================================== */
		.post.bg-on .block-style-widget,
		.post.bg-on .format-aside-content,
		.post.bg-on .format-status-content,
		.post.bg-on .format-link-content {
			padding: 0;
			background: none !important;
			box-shadow: none !important;
			.box-sizing (border-box);
		}
		.format-aside-content,
		.format-link-content {
			padding: 25px 30px 15px;
			margin: 0 0 15px;
		}
		.author-quote {
			border-left: 5px solid;
			padding-left: 10px;
		}
		.format-status-content {
			padding: 25px 20px 15px;
			margin: 5px 0 15px;
		}
			.format-link .details,
			.format-aside .details,
			.format-status .details,
			.format-quote .details {
				display: none;
			}
		/*resize image to 100% width parent container*/
		.images-container img,
		.albums .post img,
		.media .post img,
		.portfolio .post img,
		.blog .post img,
		.related-projects .rollover img,
		.related-projects .rollover-video img,
		.dt-blog-shortcode img,
		.dt-albums-shortcode:not(.owl-carousel) img,
		.dt-portfolio-shortcode:not(.owl-carousel) img,
		.wf-container.iso-grid img,
		.wf-container.layout-masonry img {
			max-width: 100%;
			width: 100%;
			height: auto;
		}
		.portfolio .slider-simple.owl-carousel img {
			max-width: none;
		}
		.mobile-true .post img.iso-lazy-load {
			width: 100%;
		}
		.blog.layout-list .post .blog-media img {
			width: 100%;
		}


	/* #Background under projects
	================================================== */
	.bg-on .blog-content {
		padding: 10px 25px 10px;
	}
	.bg-on .project-list-content {
		padding: 10px 25px 10px;
	}
	.slider-wrapper .bg-on .project-list-content {
		padding-top: 20px;
	}
	.iso-container .bg-on .project-list-content > *,
	.iso-grid .bg-on .project-list-content > *,
	.iso-container .bg-on .blog-content > *,
	.iso-grid .bg-on .blog-content > * {
		padding-top: 10px;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.iso-container .bg-on .project-list-content > :last-child,
	.iso-grid .bg-on .project-list-content > :last-child,
	.iso-container .bg-on .blog-content > :last-child,
	.iso-grid .bg-on .blog-content > :last-child {
		margin-bottom: 10px;
	}
	.post.bg-on .alignleft,
	.post.bg-on .alignnone,
	.bg-on .blog-media > p,
	.bg-on .project-list-media > p,
	.post.bg-on ul.royalSlider.alignnone,
	.description-under-image .post.bg-on ul.royalSlider.alignnone {
		margin-bottom: 0;
	}
	.bg-on .blog-media,
	.bg-on .project-list-media
	{
		padding: 25px 25px 0;
	}
	.bg-on.fullwidth-img .blog-media,
	.bg-on.fullwidth-img .project-list-media {
		padding: 0;
	}

	.bg-on .blog-content,
	.bg-on .blog-media {
		position: relative;
		z-index: 9;
	}
		.bg-on.post .alignnone {
			margin-top: 0;
		}

/* #Template: List
================================================== */
.layout-list .post {
	padding-top: 44px;
	margin-top: 19px;
}
.layout-list .articles-list .post:last-child {
	margin-bottom: -25px;
}
.layout-list .articles-list .post.bg-on:last-child {
	margin-bottom: 0;
}
.layout-list .post:first-child {
	border: none;
	padding-top: 0;
	margin-top: 0;
}
.blog .post.bg-on,
.portfolio .post.bg-on {
	border-top: none;
}

	.layout-list .blog-content,
	.layout-list .blog-media,
	.layout-list .project-list-content,
	.layout-list .project-list-media {
		display: block;
		float: left;
		width: 100%;
	}
	.layout-list article.no-img .blog-content {
		width: 100% !important;
	}

/* #Checkerboard order
================================================== */
.project-even .alignleft,
.project-even ul.royalSlider.alignleft {
	float: right;
	margin-right: 0;
	margin-left: 30px;
}

/* #Background under projects
================================================== */
.layout-list .post.bg-on {
	padding: 25px 25px 0px;
	margin: 0 0 20px;
}
.layout-list .bg-on .blog-media,
.layout-list .bg-on .blog-content,
.layout-list .bg-on .project-list-media,
.layout-list .bg-on .project-list-content {
	display: block;
	float: left;
	width: 100%;
	padding: 0;
}

.layout-list .bg-on .blog-content,
.layout-list .bg-on .project-list-content {
	padding-bottom: 10px;
}
	/* #Post slider
	================================================== */
	.layout-list .post-slider {
		margin-right: 30px; 
	}
	.layout-list .project-even .post-slider {
		margin-right: 0;
		margin-left: 30px;
	}
	.layout-list .media-wide .post-slider,
	.layout-list .media-wide.project-even .post-slider {
		margin-right: 0;
		margin-left: 0;
	}

	/* #Post Images
	================================================== */
	.post .alignleft,
	.description-under-image .post .alignnone,
	.description-under-image .post .slider-masonry.alignnone,
	.blog.layout-list .post.bg-on .slider-masonry.alignnone,
	.description-under-image .post .photoSlider {
		margin-bottom: 20px;
	}

	.description-under-image .post .buttons-on-img .slider-masonry.alignnone,
	.description-under-image .bg-on.post .alignnone {
		margin-bottom: 0;
	}
	.project-list-media .alignleft {
		width: 100%;
	}
	.blog-media .alignleft {
		float: none;
	}
	.blog.layout-list .post .alignleft,
	.blog.layout-list .post .alignnone,
	.blog.layout-list .post .post-slider {
		margin-bottom: 25px;
	}


	.format-quote .block-style-widget {
		margin: 0 0 15px;
		padding: 25px 30px 15px;
	}
	.format-quote.bg-on .block-style-widget,
	.bg-on .format-aside-content,
	.bg-on .format-link-content {
		margin-bottom: 10px;
	}

/* #Blog
================================================== */
.layout-masonry .blog-content.wf-td,
.layout-masonry .blog-media.wf-td,
.iso-grid .blog-content.wf-td,
.iso-grid .blog-media.wf-td,
.media-wide .blog-content.wf-td,
.media-wide .blog-media.wf-td,
.iso-container .blog-media.wf-td, 
.iso-container .blog-content.wf-td,
.shortcode-blog-posts .wf-td {
	display: block;
}

.blog-media {
	position: relative;
	overflow: hidden;
	z-index: 9;
}
	/*Fancy date*/

	.fancy-date a {
		//.blog-media & {
			position: absolute;

			.flex-display(@display: flex);

			.align-items(@align: center);
			top: 10px;
			right: 10px;
			z-index: 30;
			
			
			.circle-fancy-style & {
				.flex-flow( column nowrap);
				.justify-content(@justify: center);
				.static-border-radius;
				padding: 0 8px;
				min-width: 63px;
				min-height: 63px;
			}
			.vertical-fancy-style & {
				.flex-flow( column nowrap);
				min-height: 80px;
				min-width: 42px;
				padding: 2px 0;
			}
			.horizontal-fancy-style & {
				padding: 2px 2px 1px 4px;
			}

			.box-sizing (border-box);
			text-decoration: none;
			background: #ffffff;
			& * {
		   	 color: #222222;
		   	}
		   	& .entry-year,
		   	& .entry-date:after {
		   		.circle-fancy-style & {
		   			display: none;
		   		}
		   	}
			& .entry-month,
			& .entry-date {
				position: relative;
				&:after {
					position: absolute;
					
					
					.circle-fancy-style & {
						left: 0;
						bottom: -2px;
						width: 100%;
					}
					.vertical-fancy-style & {
						left: 50%;
						bottom: -2px;
						width: 14px;
						margin-left: -7px;
					}
					.horizontal-fancy-style & {
						top: 50%;
						margin-top: -2px;
						right: 0;
						width: 4px;
						height: 4px;
						.static-border-radius;

					}
					height: 2px;
					content: "";
				}
		}
		.layout-list article.project-odd & {
			top: 10px;
			right: auto;
			left: 10px;
		}
		.layout-list article.project-even & {
			top: 10px;
			left: auto;
			right: 10px;
		}
		
	}
	.bg-on:not(.fullwidth-img) .fancy-date a {
		top: 35px;
		right: 35px;
	}
		.entry-month,
		.entry-year {
			.fancy-date & {
				font: bold 11px / 19px Arial, Verdana, sans-serif;
				.circle-fancy-style & {
					text-transform: uppercase;
				}
				.vertical-fancy-style & {
					font: 700 12px/22px Arial;
					padding: 1px;
				}
				.horizontal-fancy-style & {
					padding: 0 6px 0 5px;
					text-transform: none;
					font: bold 12px / 22px Arial, Verdana, sans-serif;
				}
			}
		}
		.entry-month {
			.circle-fancy-style .fancy-date &,
			.vertical-fancy-style .fancy-date & {
				margin-bottom: 2px;
			}
			.horizontal-fancy-style .fancy-date & {
				padding: 0 9px 0 5px;
			}
		}
		.entry-date {
			.fancy-date & {
				font: bold 24px / 29px Arial, Verdana, sans-serif;
				.vertical-fancy-style & {
					font: 700 22px/28px Arial;
					margin-bottom: 3px;
					padding: 2px;
				}
				.horizontal-fancy-style & {
					padding: 0 9px 0 5px;
					font: bold 12px / 22px Arial, Verdana, sans-serif;
				}
			}
		}
	
/* #Portfolio
================================================== */
.post .project-media {
	margin-bottom: 20px;
	line-height: 0;
}
.project-media,
.project-content {
	.box-sizing (border-box);
}
	.project-media img {
		max-width: 100%;
	}
/* #Gallery
================================================== */
.dt-format-gallery a,
.dt-format-gallery .rollover-video {
	.box-sizing (border-box);
}

/* #Loading indicator
================================================== */
.dt-posts-preload {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
	.dt-posts-preload .dt-posts-preload-activity {
		position: fixed;
		display: block;
		z-index: 2000;
		top: 50%;
		left: 50%;
		margin: -25px 0 0 -25px;
		width: 50px;
		height: 50px;
		.static-border-radius;
	}


		.dt-posts-preload .dt-posts-preload-activity:before {
			width: 32px;
			height: 32px;
			margin: -16px 0 0 -16px;
			border: 3px solid #fff;
			border-right-color: rgba(0, 0, 0, 0) !important;
			border-left-color: rgba(0, 0, 0, 0) !important;
			-webkit-animation: dt-posts-loader-rotation 1s linear infinite;
			animation: dt-posts-loader-rotation 1s linear infinite;
			content: '';
		}


@-webkit-keyframes dt-posts-loader-rotation {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(359deg); }
}
@keyframes dt-posts-loader-rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}