.qode-news-holder{
	position: relative;
	width: 100%;

	.qode-news-list-inner-holder{
		opacity: 1;
		@include qodeTransition(opacity .2s ease-out .1s);
	}

	/***** Columns - begin *****/

	$gallery_columns_number: ('1', '2', '3', '4', '5', '6');
		
	@for $i from 0 to length($gallery_columns_number) {
		&.qode-news-columns-#{nth($gallery_columns_number,$i+1)} {
			
			.qode-news-item {
				width: 100% / ($i+1);
			}
		}
	}

	/***** Columns - end *****/
	
	/***** Columns Space - begin *****/
	
	$columns_space_label: ('no', 'tiny', 'small', 'normal', 'big');
	$columns_space: (0, 5, 10, 15, 23);
	
	@for $i from 0 to length($columns_space_label) {
		&.qode-nl-#{nth($columns_space_label,$i+1)}-space {
			$item_space: nth($columns_space, $i+1);
			$item_bottom_margin: $item_space * 2;
			
			.qode-news-list-inner-holder {
				@if($item_space == 0) {
					margin: 0;
				} @else {
					margin: -#{$item_space}px;
				}
			}
			
			.qode-news-item{
				padding: #{$item_space}px;
			}
		}
	}
	
	/***** Columns Space - end *****/

	/****** Block Layout - start *****/

	.qode-news-block-part-featured,
	.qode-news-block-part-non-featured{
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;

		.qode-news-item{
			width: 100%;
		}
	}

	&.qode-news-block-pp-two-half{
		.qode-news-block-part-featured,
		.qode-news-block-part-non-featured{
			width: 50%;
		}
	}

	&.qode-news-block-pp-two-third-one-third{
		.qode-news-block-part-featured{
			width: 66.67%;
		}
		.qode-news-block-part-non-featured{
			width: 33.33%;
		}
	}

	&.qode-news-block-pp-one-third-two-third{
		.qode-news-block-part-featured{
			width: 33.33%;
		}
		.qode-news-block-part-non-featured{
			width: 66.67%;
		}
	}
	
	&.qode-news-block-pp-three-fourths-one-fourth{
		.qode-news-block-part-featured{
			width: 75%;
		}
		.qode-news-block-part-non-featured{
			width: 25%;
		}
	}


	/****** Block Layout - end *****/

	.qode-news-item{
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		position: relative;

		.qode-news-item-inner{
			position: relative;
		}
	}

	.qode-post-image{
		img{
			vertical-align: middle;
		}
	}

	.qode-ni-info{
		> div{
			display: inline-block;
			vertical-align: middle;

			&:not(:last-child):after{
				content: '/';
				padding-left: 3px;
			}
		}
	}

	.qode-news-image-info-holder-left{
		position: absolute;
		top: 0px;
		left: 0px;
	}

	.qode-news-image-info-holder-right{
		position: absolute;
		top: 7px;
		right: 12px;

		> div{
			display: inline-block;
			vertical-align: middle;
			color: #fff;

			a,
			.qode-social-share-dropdown-opener,
			.qode-social-share-dropdown-opener .social_share{
				color: inherit;
				font-size: 20px;
			}
		}
	}

	.qode-post-info-category{
		position: relative;
		display: inline-block;

		a{
			display: inline-block;
			margin: 0 5px 10px;
			vertical-align: middle;
			color: #fff;
			font-size: 12px;
			letter-spacing: 1px;
			text-transform: uppercase;

			span{
				background-color: $first-main-color;
				display: block;
				line-height: 26px;
				padding: 0 10px;
				position: relative;
			}
		}
	}

	.qode-post-info-date{
		a{
			font-size: 16px;
			color: #545454;

			i{
				color: #c6c6c6;
				font-size: 17px;
				margin-right: 5px;
				position: relative;
				top: 3px;
			}
		}
	}

	/****** Sliders start ******/

	.qode-owl-slider {
		width: auto;

		.qode-news-item {
			width: 100%;
		}
	}

}

.qode-post-info-hot-trending{
	font-size: 0;

	.qode-blog-single-standard .qode-post-image &{
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 3px 7px 3px 0;
	}

	.qode-post-info-trending,
	.qode-post-info-hot{
		display: inline-block;
		vertical-align: middle;

		.qode-news-ht-icon{
			display: inline-block;
			vertical-align: middle;
			width: 20px;
			height: 27px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 12px 16px;
		}
	}

	.qode-news-trending{
		background-color: $first-main-color;
		background-image: url('../img/trending.svg');
	}

	.qode-news-hot{
		background-color: #000;
		background-image: url('../img/hot.svg');
	}
}

/* ==========================================================================
   #Self Hosted Video styles - begin
   ========================================================================== */
.qode-news-holder {
	.qode-news-audio-holder,
	.qode-self-hosted-video-holder {

		.mejs-overlay-play,
		.mejs-poster {
			height: 100% !important; /*!important because of the inline style*/
			width: 100% !important; /*!important because of the inline style*/
		}

		.mejs-overlay-button {
			position: absolute;
			top: 50%;
			left: 50%;
			height: 44px;
			width: 44px;
			line-height: 44px;
			margin: 0 !important;
			@include qodeTransform(translate(-50%, -50%));
			background-color: transparent;
			background-image: none;
			border-radius: 50%;
			text-align: center;
			border: 7px solid #fff;

			&:before {
				position: relative;
				z-index: 20;
				content: '\45';
				color: #fff;
				font-size: 30px;
				font-family: 'ElegantIcons';
			}
		}

		.mejs-poster {
			max-width: 100%;
			max-height: 100%;
			background-size: cover;
		}

		.qode-video-wrap {
			opacity: 0;
			@include qodeTransition(opacity .2s);

			&.qode-video-ratio-set {
				opacity: 1;

				.mejs-container {
					width: 100% !important;
					height: 100% !important;
				}
			}
		}

		.mejs-controls {
			background-color: #222;
			height: 30px;

			> div {
				list-style-type: none;
				background-image: none;
				display: block;
				float: left;
				margin: 0;
				padding: 0;
				width: 30px;
				height: 30px !important;
				font-size: 11px;
				line-height: 11px;
				font-family: Helvetica, Arial;
				border: 0;
			}
			.mejs-button button {
				cursor: pointer;
				display: block;
				font-size: 0;
				line-height: 0;
				text-decoration: none;
				margin: 7px 5px;
				padding: 0;
				position: absolute;
				height: 16px;
				width: 16px;
				border: 0;
				background-color: transparent;
				background-image: url('../../../../../wp-includes/js/mediaelement/controls.svg');
				background-repeat: no-repeat;
				background-position: 0 0;

			}

			.mejs-pause button {
				background-position: 0 -16px;
			}

			.mejs-time span {
				color: #fff;
				font-size: 11px;
				line-height: 32px;
			}

			.mejs-time-rail > span {
				margin: 11px 15px;
			}

			.mejs-time-rail .mejs-time-current {
				background-color: $first-main-color;
			}

			.mejs-time-rail .mejs-time-float{
				color: #fff;
			}

			.mejs-volume-button {
				button {
					background-position: -16px -16px;
					margin: 7px 5px 7px 8px;
				}

				.mejs-volume-slider {
					display: none;
					height: 115px;
					width: 25px;
					background: url(../../../../../wp-includes/js/mediaelement/background.png);
					background: rgba(50, 50, 50, .7);
					-webkit-border-radius: 0;
					-moz-border-radius: 0;
					border-radius: 0;
					top: -115px;
					left: 0;
					z-index: 1;
					position: absolute;
					margin: 0;

					.mejs-volume-total {
						position: absolute;
						left: 11px;
						top: 8px;
						width: 2px;
						height: 100px;
						background: rgba(255, 255, 255, .5);
						margin: 0;
					}

					.mejs-volume-current {
						position: absolute;
						left: 11px;
						top: 8px;
						width: 2px;
						height: 100px;
						background: rgba(255, 255, 255, .9);
						margin: 0;
					}
					.mejs-volume-handle {
						position: absolute;
						left: 4px;
						top: -3px;
						width: 16px;
						height: 6px;
						background: rgba(255, 255, 255, .9);
						cursor: N-resize;
						border-radius: 1px;
						margin: 0;
					}

				}
			}

			.mejs-horizontal-volume-slider{
				.mejs-horizontal-volume-total{
					width: 23px;
					top: 11px;
				}

				.mejs-horizontal-volume-current{
					top: 11px;
				}
			}

			.mejs-unmute button {
				background-position: -16px 0;
			}

			.mejs-fullscreen-button button {
				background-position: -32px 0;
			}

		}
	}
}

/* ==========================================================================
   #Self Hosted Video styles - end
   ========================================================================== */