.grid-row {
	margin: 0;
	padding: 0;
}

/* Grid */
.grid {
	margin: 10px 0;
	padding-left: 0;
	padding-bottom: 17px;
	border-bottom: solid 1px darken(@background, 6%);
	@media screen and (max-width: 768px) {
			border-bottom: none;
		}
	&:nth-last-child(2) {
			border: none;
		}
	
	.featured-thumb {
		border-top: @accent solid 3px;
		overflow: hidden;
		.transition(0.3s all ease);
		padding: 0;
		@media screen and (max-width: 768px) {
			img {
				width: 100%;
			}
		}
		img {
			.transition(0.4s all ease);
		}
        a:hover{
        }
		a:hover:after{
				content: '\f062';
				font-family: FontAwesome;
				position: absolute;
				top: 46%;
				left: 46%;
				right: 0;
				bottom: 0;
				font-size: 24px;
				color: fade(@onaccent,70%);
                .transition(0.4s all ease);
		}
		&:hover {
			img {
				.transition(0.4s all ease);
				-moz-filter: brightness(0.9);
				-webkit-filter: brightness(0.9);
				filter: brightness(0.9);
			}
		}
	}
	.out-thumb {
		@media screen and (max-width: 768px) {
			padding: 10px 3px;
		}
		h3 {
			margin: 5px 0;
			margin-top: 1px;
			font-weight: normal; 
			font-size: 19px;
			a {
				color: darken(@content,25%); 
				padding-bottom: 2px;
				&:before {
					height: 1px;
					background: darken(@content,25%);
					width: 98%;
					left: 1%;
				}
			}
			
		}
		.postedon {
			font-size: 12px;
			color: lighten(@content, 10%);
			font-weight: 300;
			margin-bottom: 5px;
			a {
				color: lighten(@content, 15%);
				text-decoration: underline;
				&:hover {
					color: @accent;
				}
				
			}
		}
		.entry-excerpt {
			
			color: @content;
			line-height: 1.6em;
			font-weight:400;
		}
	}
	.readmore {
		display: block;
		clear: both;
	}
	.hvr-underline-from-center:before {
				height: 1px;
				background: @accent;
			}
}

.grid_2_column {
	padding: 0;
	border-bottom: none;
	.out-thumb {
		padding: 12px 0;
		
	}
	@media screen and (max-width: 768px) {
		padding-right: 0px;
	}
	
	@media screen and (min-width: 768px) {
		&:nth-of-type(even) {	
			padding-left: 10px;
		}
		&:nth-of-type(odd) {	
			padding-right: 10px;
			clear: left;
		}
	}
	
}

.grid_3_column {
	padding: 0 10px;
	@media screen and (min-width: 768px) {
		&:nth-of-type(odd) {	
			padding-right: 10px;
			clear: none;
		}
		&:nth-of-type(3n+1) {
			clear: left;
		}
	}
}
.grid_4_column {
	@media screen and (min-width: 768px) {
		&:nth-of-type(odd) {	
			padding-right: 10px;
			clear: none;
		}
		&:nth-of-type(3n+1) {
			clear: none;
		}
	}
	@media screen and (max-width: 991px) {
		&:nth-of-type(odd) { 
			clear: left;
		}
	}
}