div.post-offset {
	margin: 0;
	padding: 0;

	article, 
	.portfolio-item {
		margin: 0;
	}
}

.blog-grid {
	width: 100%;
	float: left;
	position: relative;
	overflow: hidden;

	header {
		white-space: nowrap;

		.tags {
			width: 100%;
			white-space: normal;
			padding: 15px 20px 0;
			vertical-align: top;
			position: relative;
			display: inline-block;
		}

		.tags:nth-child(2) {
			left: -100%;
		}

		img, .slider, iframe {
			width: 100%;
			display: inline-block;
			transition: opacity .3s ease-in-out;
			vertical-align: top;
		}

		iframe {
			min-height: 250px;
		}

		.slider {
			overflow: hidden;
			
			.owl-nav {
				display: none;
			}

			.owl-dots {
				width: 15px;
				height: auto;
				position: absolute;
				top: 15px;
				right: 15px;
			}

			.owl-dot {
				color: #fff;
				margin: 0 0 5px 0;
				display: block;
				float: left;
				z-index: 200;
			}
		}
	}

	.tags {
		margin-bottom: 20px;

		a {
			color: #fff;

			&:hover {
				background-color: transparent;
				color: $color_brand;
			}
		}
	}

	.content {
		padding: 15px 0 5px;
	}

	h3 {
		font-size: 20px;
		line-height: 1.5;
		margin: 0;
	}

	footer {
		margin-top: 0px;
		font-size: $font_caption-size;
		text-transform: uppercase;

		.author {
			margin-right: 5px;
			font-weight: 500;
		}	

		.data {
			margin-left: 5px;
		}
		.data, strong {
			color: $color_dark-gray;
			transition: color .3s ease-in-out;
		}
	}

	.plus {
		font-size: 36px;
		line-height: 0;
		margin-top: 12px;
		display: inline-block;
		transition: .1s ease-in-out; 
		transition-property: transform;

		&, &:before {
			line-height: .6;
		}
	}

	&:hover {
		header {
			img {
				opacity: .8;
			}
		}

		h3 a {
			color: $color_brand;
		}

		.plus {
			color: inherit;
			transform: rotateZ(-45deg);
		}
	}

	&.no-preview {
		footer {
			margin-top: 10px;
		}
	}

	&.quote {
		header {
			.tags {
				left: 0;
				padding-left: 0;
			}

			blockquote {
				padding: 0 30px;
				margin: 0;
				margin-bottom: 15px;
				line-height: 1.4;
				quotes: "" "";
				white-space: normal;

				&:after {
					content: '';
					background: $color_border;
					width: 1px;
					height: calc(100% - 10px);
					position: absolute;
					top: 5px;
					left: 0;
				}

				&:before {
					content: '';
					background: $color_border;
					width: 100%;
					height: 1px;
					position: absolute;
					left: 0;
					bottom: -15px;
				}

				cite {
					position: relative;
					text-align: left;
					display: block;
					margin: 5px 0 0 0;
					text-align: left;
					font-weight: 600;
					font-size: $font_caption-size;
					text-transform: uppercase;
				}
			}
		}
	}

	&.grid-1 {
		margin-bottom: 45px;

		.tags {
			margin-bottom: 0;
		}

		header .tags:nth-child(1) {
			padding-left: 0;
		}

		&.boxed header .tags {
			padding-left: 20px;
		}

		.content {
			padding-bottom: 0;
		}
	}

	&.boxed {
		background: #f8f8f8;

		.content {
			padding: 30px 30px 0;
		}

		footer {
			padding: 5px 25px 20px;
		}

		&.quote {
			blockquote {
				margin: 15px 25px;

				&:before {
					width: calc( 100% + 50px );
					left: -25px;
				}
			}
		}
	}

	@media screen and (min-width: 769px){
		&.grid-2 {
			margin-bottom: 30px;

			header {
				width: 400px;
				float: left;
				display: block;
			}

			.content {
				display: block;
				padding: 0 0 0 430px;
			}

			h3 {
				margin-top: -5px;
				display: inline-block;
			}

			.plus {
				margin-top: 20px;
			}

			&.boxed {
				.content {
					padding: 20px 25px 0 430px;
				}
				
				h3 {
					margin-top: 0;
				}

				footer{
					padding:0;
				}
			}
		}
	}


	&.grid-3 {
		position: relative;
		overflow: hidden;
		transition: .2s ease-in-out;
		transition-property: background, color;
		margin-bottom: 30px;

		header {
			background-size: cover;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;

			img {
				display: block;
			}
		}

		.overlay {
			z-index: 2;
			opacity: .85;
		}

		.content {
			background: #f7f7f7;
			width: 100%;
			min-height: 400px;
			padding: 25px;
			position: relative;
			z-index: 3;
		}

		footer {
			width: 100%;
			position: absolute;
			bottom: 25px;
		}

		.plus {
			position: absolute;
			top: -18px;
			right: 56px;
		}

		.content, p {
			transition: inherit;
		}

		&:hover {
			.content {
				background: transparent;
				color: #fff;
			}

			.tags a {
				background: transparent;
				border-color: #fff;
				color: #fff;
			}

			h3, h3 a, p, .plus {
				color: #fff;
			}

			.plus {
				transform: rotateZ(-45deg);
			}

			footer {
				strong, .data {
					color: rgba(#fff,.6);
				}
			}
		}
	}


	&.grid-4 {
		transition: background .2s ease-in-out;
		padding: 25px 30px 20px;
		margin-bottom: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);

		.content {
			padding: 0;
		}

		.plus {
			margin-top: 20px;
		}

		&:hover {
			background: #f7f7f7;

			.tags a {
				background: transparent;
				color: $color_brand;
			}
		}
	}
	

	@media screen and (min-width: 769px){
		&.grid-5 {
			width: 100%;
			padding-left: 50px;
			margin-bottom: 45px;

			header {
				width: calc(50% - 30px);
				position: relative;
				float: left;

				img {
					width: 100%;
				}
			}

			.content {
				min-height: 150px;
				padding: 0 0 0 50%;
			}

			h3 {
				font-size: 22px;
				margin-top: 0;
				display: block;
				clear: none;
			}


			footer {
				margin-left: 0px;
				margin-top: 0px;
				height: 50px;
				line-height: 50px;
				padding: 0 0;
				left: 0px;
				top: 0px;
				text-align: right;
				position: absolute;
				transform-origin: 100% 0;
				transform: translateX(-100%) rotateZ(-90deg);
			}

			&.offset {
				width: 85%;
			}

			&.right {
				padding-left: 0;
				padding-right: 50px;

				header {
					float: right;
				}

				.content {
					padding: 0 50% 0 0;
				}

				footer {
					left: auto;
					right: 0;
					transform: rotateZ(-90deg) translateY(-100%);
				}
			}

			&.boxed {
				background: #f7f7f7;
				padding-left: 50px;

				footer {
					padding: 0 20px;
				}

				.content {
					padding: 25px 30px 15px 50%;
				}

				&.right {
					padding-left: 0;
					padding-right: 50px;

					.content {
						padding-right: 50%;
						padding-left: 30px;
					}
				}
			}
		}
	}
	@media screen and (max-width: 768px) {
		margin-bottom: 30px;
		
		&.grid-5 {
			margin-bottom: 25px;
			
			footer {
				line-height: 50px;
				padding-top: 0;
				padding-bottom: 0;
			}
		}
	}
}


.norebro-recent-posts-sc {

	.grid-1,
	.grid-5 {
		margin-bottom: 15px;
	}

	.grid-2 {
		margin-bottom: 0;
	}

}


/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.blog-grid {
	.gallery {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin-bottom: 20px !important;

		.gallery-item {
			display: inline-block;
			margin: 0px 5px 5px 0px;
			margin-top: 0px !important;
			text-align: center;
			vertical-align: top;
			width: 100%;
			position: relative;

			img {
				border: none !important;
			    @include animate();
			}

			.gallery-caption {
				position: absolute;
				background: rgba(#fff, .8);
				padding: 3px 10px;
				transform: translateY(-100%);
				width: 100%;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    width: 100%;
			    white-space: nowrap;
			    @include animate();
			    opacity: 0;
			    font-size: .8em;
			    font-weight: normal;
			}

			&:hover {
				.gallery-caption {
					opacity: 1;
				}	

				img {
					opacity: .8;
				}
			}
		}

		&.gallery-columns-3 {
			.gallery-item {
				max-width: calc((100% - 5px * 2) / 3);

				&:nth-of-type(3n+3),
				&:last-of-type {
					margin-right: 0;	
				}
		 	}
		}
	}

	&:hover {
		> header img {
			opacity: 1;
		}
	}
}