/*--------------------------------------------------------------
14.0 Blog
--------------------------------------------------------------*/

.byline,
.updated:not(.published) {
	display: none;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.hentry {
	position: relative;
	margin-bottom: 60px;

	.post-content {

		p {
			font-size: 15px;
			margin-bottom: 15px;
		}

		.read.more {
			font-size: 15px;

			&::before {
				top: 3px;
			}
		}

		blockquote {

			p {
				font-size: 112%;
			}
		}
	}
}

body.search .post.type-post {
	margin-bottom: 0px;
	padding: 20px 0px;
	background-color: transparent;
}

.single-post .post.type-post {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}

.post-inner {

	// Meta Data
	.post-meta-data {
		position: relative;
		padding: 17px 0;
		font-weight: bold;
		border-style: dashed;
		border-width: 0 0 1px 0;
		border-color: #dedede;

		span.round-divider {
			display: inline-block;
			width: 4px;
			height: 4px;
			margin: 3px 15px;
			background-color: #dedede;
			border-radius: 50%;	
		}

		a {
			position: relative;
			color: $text-color;

			&:hover {
				color: $dark-color;
			}
		}
	}

	// Blog Post Title
	.post-title {
		margin: 20px 0 15px 0;
		
		a {
			color: $dark-color;
			text-decoration: none;
			
			&:hover {
				color: $primary-color;
			}
		}
	}

	.post-left-meta {
		float: left;
		padding-right: 20px;
		width: 100px;

		.box {
			position: relative;
			padding: 15px 10px;
			margin-bottom: 20px;
			border: 2px solid #e6e6e6;
			border-radius: 1px;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			border-radius: 1px;

			&::before {
				position: absolute;
				content: "";
				bottom: -3px;
				left: 35px;
				width: 7px;
				height: 7px;
				background-color: $white-color;
				transform: rotate(-45deg);
				z-index: 2;
			}

			&::after {
				top: 100%;
				left: 50%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(136, 183, 213, 0);
				border-top-color: #e6e6e6;
				border-width: 8px;
				margin-left: -8px;
			}

			&.date {

				span {
					display: block;
				}

				.day {
					font-size: 24px;
					line-height: 24px;
					color: #a2c046;
				}

				.month {
					padding: 2px 0;
					font-size: 18px;
					font-weight: bold;
					line-height: 18px;
					text-transform: uppercase;
				}

				.year {
					letter-spacing: 1px;
				}
			}
		}

		.stickylabel {
			font-size: 13px;

			.fa {
				font-size: 20px;
				margin-bottom: 3px;
			}
		}
	}

	.post-content {
		margin-left: 100px;
	}
}

.single {

	.post-title {
		font-size: 36px;
		margin: 30px 0;
	}

	.post-content {
		margin-bottom: 50px;
	}

	.post-content {
		margin-left: 0;
	}
}

/* Blog Grid Layout */
.blog-grid {
	display: inline-block;
	margin-bottom: 30px;
	
	.post-inner {
		float: left;
		padding: 0 15px;
	}

	@media(min-width: $screen-md) {
		
		.hentry {
			margin-bottom: 0;
		}
		
		&[data-columns="2"] .post-inner { 
			width: 50%;
		}
		
		&[data-columns="3"] .post-inner {
			width: 33.333%;
		}
		
		&[data-columns="4"] .post-inner {
			width: 25%;
		}
	}

	.post-item {

		.title {
			font-size: 22px;
		}

		.post-meta-data {
			padding: 15px 33px;

			span.round-divider {
				margin: 3px 10px;
			}
		}

		.sticky .post-meta-data {
			padding: 15px 30px;
		}

		p {

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		&.news {
			border: 1px solid #f2f2f2;
		}
	}
}

/* Share Buttons Blog Single */
.social-sharing-buttons {
	display: inline-block;
	margin-bottom: 50px;
	
	span {
		position: relative;
		float: left;
		margin-right: 12px;
		width: 50px;
		height: 50px;
		font-size: 18px;
		text-align: center;
		line-height: 45px;
		border: 2px solid #f2f2f2;
		
		&::after,
		&::before {
			left: 100%;
			top: 50%;
			border: solid transparent;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}

		&::after {
			border-color: rgba(136, 183, 213, 0);
			border-left-color: $white-color;
			border-width: 5px;
			margin-top: -5px;
		}

		&::before {
			border-color: rgba(194, 225, 245, 0);
			border-left-color: $light-gray-color;
			border-width: 8px;
			margin-top: -8px;
		}
	}

	a {
		float: left;
		height: 50px;
		padding: 0 17.5px;
		text-align: center;
		line-height: 50px;
		margin-right: 5px;
		color: $white-color;
		font-weight: bold;
		text-decoration: none;
		background-color: rgba(0,0,0,0.3);
		border-radius: 1px;
		
		.fa {
			position: relative;
			width: 15px;
			top: 2px;
			font-size: 20px;
		}

		&:hover {
			color: $white-color;
	    	background-color: rgba(0,0,0,0.5);
	    }
		
		&.facebook {
	    	background: rgba(59,89,152,0.7);

	    	&:hover {
	    		background: rgba(59,89,152,1);
	    	}
	    }

	    &.twitter {
	    	background: rgba(0,172,237,0.7);
		
			&:hover {
		    	background: rgba(0,172,237,1);
		    }
		}

		&.gplus {
	    	background: rgba(221,75,57,0.7);
		
			&:hover {
		    	background: rgba(221,75,57,1);
		    }
		}

		&.linkedin {
	    	background: rgba(0,123,182,0.7);

		    &:hover {
		    	background: rgba(0,123,182,1);
		    }
		}
	}
}