/*
 * @package MatrixAddons
 * @subpackage trainify
 * @since 1.0.0
 */
.trainify_block_posts_widget{
	.tff-block-posts-wrapper{
		display:none;
		&.tab-active{
			display:block;
		}
	}
	.tff-primary-block-wrap {
		float: left;
		width: calc(50% - 15px);
		margin-right:15px; 
		
		
		.tff-post-content{
			padding:5px;
			background:#fff;
		}

		@media screen and (max-width:768px){
			width:100%;
			margin-right:0;
			margin-bottom:30px;
			float:none;
		}

	}
	.tff-secondary-block-wrap {
		float: right;
		width: calc(50% - 15px);
		margin-left:15px; 

		.tff-single-post{
			background:#fff;
		}

		@media screen and (max-width:768px){
			width:100%;
			margin-left:0;
			float:none;
		}
	}
	.tff-post-thumb{
		&.no_thumbnail{
			a{
				display:block;
				padding-top:60%;
				background-color:#f3f3f3;
			}
		}
	}
	.layout2 {
		.tff-primary-block-wrap {
			margin-left: -3%;
			width: 103%;
			margin-bottom: 10px;

			@media screen and (max-width:640px){
				    width: 100%;
				    margin-left: 0;
				    margin-right: 0;
				    padding-bottom: 10px;
				    margin-bottom: 10px;
			}

			.tff-single-post {
				display: inline-block;
				float: none;
				margin-left: 3%;
				margin-right: -4px;
				vertical-align: top;
				width: 47%;
				border-bottom:1px solid #e1e1e1;
				padding-bottom:10px;
				margin-bottom:10px;

				@media screen and (max-width:640px){
					width:100%;
					margin-left:0;
    				margin-right: 0;
				}



			}
		}
		.tff-secondary-block-wrap {
			margin-left: -3%;
			width: 103%;

			@media screen and (max-width:640px){
					width: 100%;
				    margin-left: 0;
				    margin-right: 0;
				    padding-bottom: 10px;
				    margin-bottom: 10px;
			}

			.tff-single-post {
				display: inline-block;
				float: none;
				margin-left: 3%;
				margin-right: -4px;
				vertical-align: top;
				width: 47%;
				&:nth-child(4) {
					border-bottom: 1px solid #e1e1e1;
					padding-bottom: 12px;
				}

				@media screen and (max-width:600px){
					width:100%;
					margin-left:0;
    				margin-right: 0;
    				margin-bottom:10px;
    				padding-bottom:10px;
				}
			}
		}
	}
	.layout3{
		.tff-primary-block-wrap {
			position: relative;
			width: 100%;
			.tff-single-post {

				.tff-post-thumb + .tff-post-content {
					bottom: 0;
					left: 0;
					padding: 20px;
					position: absolute;
					width: 100%;
					background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)) repeat scroll 0 0;

					.tff-post-title a{
						color:$white_color;
					}
				}
				.tff-post-title {
					line-height: 26px;
					margin: 5px 0;
					a {
						font-size: 20px;
						color: #3d3d3d;
						text-transform: capitalize;
						&:hover {
							color: $primary_color;
						}
					}
				}
			}
			.tff-post-meta {
				span {
					color: $white_color3;
					a {
						color: $white_color3;
					}
				}
			}
		}
		.tff-secondary-block-wrap {
			margin-top: 20px;
			width: 102%;
			margin-left: -2%;
			.tff-single-post {
				border: medium none;
				float: left;
				margin-bottom: 0;
				margin-left: 2%;
				padding: 0;
				width: 31.33%;
				.tff-post-thumb {
					float: none;
					width: 100%;
				}
				.tff-post-content {
					float: none;
					width: 100%;
					margin-top: 10px;
				}

				@media screen and (max-width:640px){
					width:98%;
					margin-bottom:10px;

					&:last-child{
						margin-bottom:0;
					}
				}
			}
		}
	}
	.layout4{
		.alternate-block-inner{
			nackground:#fff;
		}
	}
}

.hmrcls-wdgt-preloader{
    min-height: 500px;
    text-align: center;
    &.hidden{
    	display:none;
    }
    .helper {
	    height: 500px;
	    display: inline-block;
	    vertical-align: middle;
	}
}

/*========================================================================================================
----------------------------------------- Blog Style - Layout 5 -----------------------------------------
========================================================================================================*/

.block-posts-blog{
	width:33.33%;
	float:left;
	padding: 0 10px 15px;

	@media screen and (max-width:768px){
		width:100%;
		padding-left:0;
		padding-right:0;
	}
}
.blog-thumb-wrapper{
	overflow:hidden;
	img{
		width:100%;
		transition:.5s transform;
		&:hover{
			transform: scale(1.2)
		}
	}
}
.blog-post-style{
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.blog-post-title{
	margin-bottom:0px;
}
.blog-post-content{
	padding: 10px 15px 0;
	background-color:#fff;
}

.blog-post-excerpt{
	padding-bottom:1px;
}
/*========================================================================================================
-------------------------------------- Alternative Grid - Layout 4 ---------------------------------------
========================================================================================================*/

.trainify-alternative-block{
	width:33.33%;
	float:left;

	@media ( max-width:768px ){
		width:100%;
	}

	&:after{
		content:"";
		clear:both;
		display:block;
	}
	&:nth-child(2n+2){
		.alternate-block-inner{
			width:100%;
			display:table;

				@media ( max-width:768px ){
					display:block;
				}
		}
		.alternate-block-thumb{
			display: table-footer-group;

			@media( max-width:768px ){
				display: block;
			}
		}
		.alternative-post-content{
			display:table-header-group;

			@media( max-width:768px ){
				display: block;
			}
		}
	}
}

.alternate-block-thumb{
	font-size:0px;
	overflow:hidden;
	a{
		display:block;
		padding-top:100%;
		background-color:#dedede;
		background-size:cover;
		background-position:center center;
		&:hover{
			
		}
	}
}

.alternate-content-inner{
	display:block;
	padding-top:100%;
	position:relative;
	border:1px solid #f3f3f3;

	@media( max-width:768px ){
		padding-top:0;
	}

	.tff-post-meta{
		margin-bottom:10px;
	}
}

.alternate-center-part{
	top:50%;
	left:0;
	right:0;
	width:100%;
	padding:15px;
	max-height:100%;
	position:absolute;
	overflow:hidden;
	transform:translateY(-50%);


	@media( max-width:768px ){
		position:static;
		transform:translateY(0);
		top:0;
		padding:20px;
	}
}

.alt-grid-post-title{
	font-size: 20px;
	letter-spacing: 1px;
	margin: 0 0 10px;
}

.tff-block-wrapper.layout1{
	background-color:#fff;
}