.cms-element-header{
	.cms-element-subtitle{
		font-size: 20px;
		color: $light_black;
		padding: 0 0 15px 0;
	}
	&.layout-1{
		margin-bottom: 50px;
		.cms-element-header-title{
			h1{
				line-height: 65px;
			}
		}
	}
	&.layout-2,
	&.layout-3{
		margin-bottom: 100px;
		.cms-element-header-title{
			h1{
				line-height: 48px;
				.first-word{ display:block;}
			}
		}
	}
}


.cms-grid-wraper {
	.cms-grid{
		.cms-grid-item{
			margin-bottom: 30px;
			.cms-grid-title{
				+ .cms-grid-content{ padding-top: 10px;}
			}
			.cms-grid-media{ 
				margin-bottom: 18px;
				img{ width: 100%;}
			}
			.cms-grid-link{ margin-top: 17px;}
			.cms-meta{
				a{
					color: $link_color_hover;
					&:hover{
						color: $link_color;
					}
				}
			}
		}
	}
	/* Portfolio  Layout */
	&.cms-grid-portfolio{
		.cms-grid-item{
			margin-bottom: 0;
			&.big-item{
				@media( min-width: 768px){
					width: 50%;
				}
			}
			&.first-item{
				@media( min-width: 768px){
					width: 66.666666%;
				}
			}
			&.second-item{
				@media( min-width: 768px){
					width: 33.333%;
				}
			}
			.cms-grid-media{ margin-bottom: 0;}
		}
	}

	/* Blog layout */
	&.cms-grid-blog{
		.cms-grid-title{ margin: 0;}
		/* Style for meta in Element */
		.cms-meta{
	      > span{ 
	        position: relative;
	        &:after{
	          content: "/";
	          display: inline-block;
	          padding: 0 7px;
	        }

	        &:last-child{
	          &:after{
	            display: none;
	          }
	        }

	        a{
	        	color: $link_color_hover;
	        	&:hover{
	        		color: $link_color;
	        	}
	        }
	      }
	    }
	}
	/* Blog Layout 2 */
	&.cms-grid-blog2{
		.cms-grid-item{
			> div {
				margin: 0;
				> div {
					padding: 0 30px;
				}
			}
			.cms-grid-media{
				position: relative;
				overflow: hidden;
				margin-bottom: 30px;
				.cms-number{
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: rgba(0,0,0,0.2);
					font-size: 150px;
					font-weight: 700;
					color: $white;
					.cms-number-inner{
						width: 100%;
						left: 0;
						line-height: normal;
						@include vertical-align('absolute');
						@include opacity(0.7);
						
					}
				}
			}
			.cms-grid-title{
				a{
					display: block;
					font-size: 36px;
					line-height: 36px;
					span{
						display:block;
					}
				}
			}
			@media (min-width: 768px){
				.cms-vertical-align{
					@include vertical-align('absolute');
					&.position-right{
						right: 0;
					}
				}
			}

			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	/* Team Layout */
	&.cms-grid-team{
		.cms-grid-item{
			.cms-grid-media{
				display: inline-block;
				margin-bottom: 15px;
				position: relative;
				max-width: 180px;
				
				@include css3-prefix('border-radius','50%');
				@include transition();
				img{
					@include css3-prefix('border-radius','50%');
					@include transition();
				}

				&:after{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border: 2px solid transparent;
					@include css3-prefix('border-radius','50%');
					@include transition();
				}
			}
			.cms-grid-team-position{ margin: -3px 0 6px 0; text-transform: capitalize;}
			.cms-grid-team-social a{
				font-size: 16px;
				margin-right: 5px;
				color: #ccc;
				&:last-child{ margin-right: 0;}
				&:hover{
					color: $link_color;
				}
			}

			&:hover,
			&:active,
			&:focus{
				.cms-grid-media{
					&:after{
						border-color: $primary_color;
						@include css3-prefix('transform','scale(1.1)');
					}
					img{
						//@include css3-prefix('transform','scale(1.2)');
					}
				}
			}
		}
	}

	/* Client Layout */
	&.cms-grid-client{
		@include transition();
		.cms-grid{
			.cms-grid-item{
				margin-bottom: 0;
			}
		}
		&:hover,
		&:focus,
		&:active{
			@include transition();
			.cms-client-logo{
				@include opacity(0.25);
				@include transition();
				&:hover,
				&:focus,
				&:active{
					@include opacity(1);
				}
			}
		}

		&.row-space{
			.cms-grid{
				.cms-grid-item{
					margin-bottom: 62px;
				}
			}
		}
	}

	/* Portfolio related item */
	&.cms-grid-porelated{
		.cms-grid{
			.cms-grid-item{
				margin-bottom: 0;
				.cms-grid-title{
					padding-bottom: 8px;
				}
				.cms-grid-category{
					margin-top: -5px;
					a{
						color: $meta_color;
						&:hover{
							color: $link_color;
						}
					}
				}
			}
		}
	}
	/* Popup Layout */
	&.template-cms_grid--popup{
		.cms-grid{
			.cms-grid-item{
				position: relative;
				margin-bottom: 0;
				height: 100%;
				.flex-column{
					height: 100%;

					.cms-grid-popup-content{
						margin-top: -50px;
						@include vertical-align('relative');
					}
				}
				&.has-image{
					/* @media (min-width: 768px){
						display: flex;	
						display: -webkit-flex;
						> .flex-column {
							display: flex;
							display: -webkit-flex;
							.cms-grid-popup-content{
								width: 100%;
								display: block;
								position: relative;

								> div {
									@include vertical-align('absolute');
									.cms-grid-title{
										padding-top: 0;
									}
								}
							}
						}
					} */
				}
				@media (max-width: 480px){
					.cms-grid-popup-content{
						.cms-grid-title{
							word-wrap: break-word;
						}
					}
				}
				.cms-grid-title{
					line-height: 58px;
					display: table-caption;
					word-spacing: break
				}
				.cms-portfolio-popup{
					position: absolute;
				}
			}
		}
	}
	/* Menu (Woo Product) layout 
	 * @since 1.2.0
	*/
	&.template-cms_grid--menu{
		.cms-grid-item{
			margin-bottom: 40px;
			.cms-grid-title + .cms-grid-content{
				padding-top: 5px;
			}
			.cms-grid-price{
				padding-top: 3px;
				.price{
					font-size: 12px;
					line-height: 15px;
				}
			}
		}
	}

	/*CMS Grid Masonry*/
	.cms-grid-filter{}
	&.cms-grid-masonry {
		.cms-grid-content{ margin-bottom: 30px;}
		.cms-grid-title{ color: #fff; font-size: 18px; text-transform: uppercase;  margin-bottom: 0; padding-bottom: 0 !important;}
		.cms-grid-categories a{ color: #fff; font-size: 14px; font-style: italic;}

		&.template-cms_grid--portfolio-masonry{
			.cms-grid-content{ margin-bottom: 0px;} 
		}

		&.template-cms_grid--masonry{
			.cms-grid-content{ margin-bottom: 0px;}
			.cms-grid-masonry{
				.cms-grid-item{
					//margin-bottom: 0;
					img{width: 100%;}
				}
				
				@media (min-width: 768px){
					.cms-grid-item-masonry{
						width: 25% ;
						&:nth-child(3),
						&:nth-child(4),
						&:nth-child(7),
						&:nth-child(10),
						&:nth-child(13),
						&:nth-child(16),
						&:nth-child(19),
						&:nth-child(24){
							width:50%;
						}
					}
				}
			}
		}
		&.template-cms_grid--masonry3{
			
			.cms-grid-masonry{
				margin: 0 0 0 -15px;
				
				.cms-grid-item{
					margin-bottom: 0;
					img{width: 100%;}
					.cms-grid-content{ margin: 0 0 15px 15px;}
				}
				
				@media (min-width: 768px){
					.cms-grid-item-masonry{
						width: 33.33% ;
						&:nth-child(2),
						&:nth-child(3),
						&:nth-child(6),
						&:nth-child(7),
						&:nth-child(9),
						&:nth-child(10),
						&:nth-child(12),
						&:nth-child(13){
							width:66.66%;
						}
					}
				}
			}
		}
	}
}


/**================================================
*	     ALL STYLE FOR CMS SINGLE FANCYBOX 		  *
================================================**/
.cms-fancy-box-single {
	.fancy-box-icon{
		width: 100px;
		margin-bottom: 25px;
		.fancy-box-icon-inner{
			background: transparent;
			height: 133px;
			max-width: 100px;
			line-height: 133px;
			font-size: 50px;
			text-align: center;
			border:$main_border;
			@include transition();
		}

		&.pull-left{
			+ .fancy-box-content-wrap{
				&.has-icon-image{
					padding-left: 130px;	
				}
			}
		}
		&.pull-right{
			+ .fancy-box-content-wrap{
				&.has-icon-image{
					padding-right: 130px;	
				}
			}
		}
		&.pull-center{
			margin: 0 auto 25px;
		}
	}
	.fancy-box-content-wrap{
		.fancy-box-content{
			margin-top: 15px;
			p{
				padding: 0;
				margin: 0;
			}
		}
		.cms-fancyboxes-foot{ 
			margin-top: 10px;
			a{
				color: $primary_color;
			}
		}
	}
	
	/* Hover state */
	&:hover{
		.fancy-box-icon-inner{
			background: $primary_color;
			border-color: $primary_color;
			color: $white;
			img{
				-webkit-filter: brightness(0) invert(1);
  				filter: brightness(0) invert(1);
			}
		}
	}

	/* Layout Overlay */
	&.cms-fancybox-single-overlay{
		.fancy-box-image{
			position: relative;
			overflow: hidden;
			img{ 
				width: 100%;
				@include transition();
			}
			.fancy-box-content-wrap {
				.fancy-box-icon-inner{ border: 0; height: auto; max-width: inherit; line-height: inherit; display: inline-block; padding: 10px 15px;}
				h2 { font-size: 32px;  margin-bottom: 5px;}
				.fancy-box-content{ font-size: 20px;}
				.overlay-content{
					*{
						color: $white;
					}
					h2{color: $white;}
				}
			}
		}
		/* item no image */
		.fancy-box-content-wrap.no-image{
			.fancy-box-icon{
				width: 50px;
				padding-top: 10px;
				color: $primary_color;
				.fancy-box-icon-inner{ border: 0; height: auto; max-width: inherit; line-height: inherit; display: inline-block; padding:0;}
				.fancy-box-content{ font-size: 20px;}
			}
			.fancy-box-content{
				padding-left: 65px;
				margin: 0;
				font-size: 16px;
			}
		}
		&:hover{
			.fancy-box-image{
				img{
					@include css3-prefix('transform','scale(1.3)');
				}
			}
			.fancy-box-content-wrap.no-image{
				.fancy-box-icon-inner{
					background: transparent;
					color: $primary_color;
				}
			}
		}
		&.cms-fancybox-single-overlay2{
			.fancy-box-content-wrap{
				background-color: rgba(0,0,0,0.7);
				.sub-title{ font-size: 20px; margin-top: -8px;}
				.fancy-box-content{ font-size: inherit;}
				.cms-fancyboxes-foot{
					color: $primary_color;
					a{
						color: $primary_color;
					}
				}
			}
		}	
	}

	/* Layout Service */
	&.cms-fancybox-single-service{
		.cms-fancybox-item{
			margin: 0 -30px;
			.fancy-box-image{
				img{
					width: 100%;
				}
				@media (min-width: 768px){
					padding-right: 25px;
					+ .fancy-box-content-wrap{ padding-left: 25px;}
					&.pull-right{ padding-left: 25px; padding-right: 15px;}
				}
			}
			.fancy-box-content-wrap{
				.fancy-box-content-inner{
					h2{ font-size: 32px; margin-bottom: 10px;}
					.fancy-box-content{
						margin-top: 25px;
					}
				}
				@media (min-width: 768px){
					padding-right: 25px;
				}
			}
			
			@media (min-width: 768px){
				display: flex;	
				display: -webkit-flex;
				> div {
					display: flex;
					display: -webkit-flex;
					.fancy-box-content-inner{
						width: 100%;
						display: block;
						position: relative;

						> div {
							position: absolute;
							top: 50%; 
							@include css3-prefix('transform','translateY(-50%)');
						}
					}
				}
			}
			@media (max-width: 767px){
				.fancy-box-content-inner{
					h2{
						margin-top: 20px;
					}
				}
			}
		}
	}
	/* Layout About */
	&.cms-fancybox-single-about{
		.cms-fancybox-item{
			.fancy-box-image{
				img{
					width: 100%;
				}
			}
			.fancy-box-content-inner{
				h2{ margin-bottom: 10px;}
				.fancy-box-content{
					margin-top: 22px;
				}
			}
			&.has-image{
				@media (min-width: 768px){
					display: flex;	
					display: -webkit-flex;
					> div {
						display: flex;
						display: -webkit-flex;
						.fancy-box-content-inner{
							width: 100%;
							display: block;
							position: relative;

							> div {
								position: absolute;
								top: 50%; 
								@include css3-prefix('transform','translateY(-50%)');
							}
						}
					}
				}
			}
			@media (max-width: 767px){
				.fancy-box-content-inner{
					h2{
						margin-top: 20px;
					}
				}
			}
		}
	}
	/* Layout Shop Process */
	&.shopprocess{
		.cms-fancybox-item{
			display: inline-flex;
			.fancy-box-icon{
				width: auto;
				max-width: 100px;
				margin: 0 10px 0 0;
				.fancy-box-icon-inner{
					width: auto;
					height: auto;
					line-height: normal;
					border: none;
				}

				&.pull-left{
					+ .fancy-box-content-wrap.has-icon-image{
						padding: 15px 0 0 0;
					}
				}
				&.pull-right{
					+ .fancy-box-content-wrap.has-icon-image{
						padding: 15px 0 0 0;
					}
				}
			}
			.fancy-box-content-wrap{
				h6{
					color: #888888;
				}
			}
		}
		&:hover{
			.cms-fancybox-item{
				.fancy-box-icon{
					.fancy-box-icon-inner{
						background: transparent;
						color: $title_color;
					}
				}
			}
		}
	}
	/* Layout OnePage */
	&.onepage{
		.cms-fancybox-item{
			.fancy-box-image{
				img{
					width: 100%;
				}
			}
			.fancy-box-content-inner{
				h1{ margin-bottom: 10px; line-height: 58px; display: table-caption;}
				.fancy-box-content{
					margin-top: 22px;
				}
			}
			&.has-image{
				@media (min-width: 768px){
					display: flex;	
					display: -webkit-flex;
					> div {
						display: flex;
						display: -webkit-flex;
						.fancy-box-content-inner{
							width: 100%;
							display: block;
							position: relative;

							> div {
								position: absolute;
								top: 50%; 
								@include css3-prefix('transform','translateY(-50%)');
							}
						}
					}
				}
			}
			@media (max-width: 767px){
				.fancy-box-content-inner{
					h1{
						margin-top: 20px;
					}
				}
			}
		}
	}
}
/**================================================
*	        ALL STYLE FOR CMS CAROUSEL  		  *
================================================**/
.cms-carousel{
	/* Default */
	.owl-controls{
		.owl-nav{
			> div {
				position: absolute;
				top: 50%;
				left: 0;
				@include css3-prefix('transform','translateY(-50%)');

				&.owl-next{
					right: 0;
					left: auto;
				}
			}
		}
		.owl-dots{
			.owl-dot{
				width: 10px;
				height: 10px;
				display: inline-block;
				background: #ccc;
				margin-right: 10px;
				@include css3-prefix('border-radius','50%');

				&.active{
					background: #000000;
				}
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	/* Testimonial */
	&.cms-carousel-testimonial{
		text-align: center;
		background: url(../images/icon-pink.png) top center no-repeat;
		padding-top: 60px;
		color: #222222;
		.cms-carousel-content-wrapper{
			font-size: 24px;
			line-height: 38px;
		}
		.cms-carousel-title{
			text-transform: none;
			margin-top: 25px;
			color: $primary_color;
			&:before{
				display: inline-block;
				content: "-";
			}
		}
		.owl-controls{
			.owl-dots{
				margin-top: 50px;
				.owl-dot{
					background: #aba8a8;
					&.active{
						background: #888888;
					}
				}
			}
		}

		&.color-white{
			background: url(../images/icon-quote.png) top center no-repeat;
			.owl-controls{
				.owl-dots{
					.owl-dot{
						&.active{
							background: $white;
						}
					}
				}
			}
		}

		&.nav_icon_image{
			.owl-controls{
				.owl-nav{
					i{
						display: none;
					}
					> div {
						width: 71px;
						height: 35px;
						display: block;
						background-image: url(../images/arrow.png);
						background-repeat: no-repeat;
						@include css3-prefix('transition','background-position 300ms linear 0ms');
						&.owl-prev{
							background-position: left top;
							&:hover{
								background-position: right top;
							}
						}
						&.owl-next{
							background-position: right bottom;
							&:hover{
								background-position: left bottom;
							}
						}
					}
				}
			}
		}
	}
}
.carousel {
	.carousel-control{
		width: 50px;
		height: 50px;
		top: 50%;
		@include background-opacity($white,0.6);
		@include css3-prefix('transform','translateY(-50%)');
		@include opacity(1);
		@include text-shadow(0,0,0,transparent);
		span{
			display: block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #222222;
			font-size: 30px;
		}
		&.left{
			left: 30px;
		}
		&.right{
			right: 30px;
		}
		&:hover{
			@include background-opacity($white,0.8);
			@include opacity(1);
		}
	}
}
/**================================================
*	        ALL STYLE FOR CMS PROGRESS BAR 		  *
================================================**/

.cms-progress-body{
	.cms-progress-title{
		margin-bottom: 10px;
	}
	.cms-progress{
		&.progress{
			@include css3-prefix('border-radius','0');
			@include css3-prefix('box-shadow','0 0 0 transparent');
		}
	}
}
/**================================================
*	        ALL STYLE FOR CMS COUNTER			  *
================================================**/
.cms-counter-wraper{
	.cms-counter-body{
		> div{
			padding-top: 22px;
			.cms-counter{
				font-size: 48px;
			}
			.cms-counter-title{
				font-size: 16px;
				color: $white;
			}
			&:after{
				display: block;
				content: "";
				height: 100%;
				border-right: 1px solid rgba(255,255,255,0.4);
				position: absolute;
				top: 0;
				right: 0;
				height: 162px;
				@include css3-prefix('transform','rotate(30deg)');
			}
			&:last-child{
				&:after{
					display: none;
				}
			}
			@media (min-width: 768px and max-width: 970px){
				&:nth-child(2n){
					&:after{
						display: none;
					}
				}
			}
			@media (max-width: 767px){
				&:after{
					display: none;
				}
			}
		}
	}
	&.color-white{
		* {color: $white;}
	}			
}


/**================================================
*	        ALL STYLE FOR CMS QUOTE   	 		  *
================================================**/
blockquote{
	&.cms-quote-style-1{
		font-size: 24px;
		line-height: 39px;
		letter-spacing: 0.5px;
		color: #202020;
		padding: 0 0 0 18px;
		position: relative;
		z-index: 1;
		
		&:before{
			display: inline-block;
			content: "\“";
			font-size: 150px;
			font-style: normal;
			position: absolute;
			top: 21px;
			left: -29px;
			color: #f0e2e2;
			z-index: -1;
		}

		.author{
			text-transform: none;
			margin-top: 20px;
			display: block;
			clear: both;
			font-style: normal;
		}
	}
}

/**================================================
*			 CUSTOM LAYOUT FOR NEWSLETTER		  *
================================================**/
.newsletter-inline {
	.widget.widget_newsletterwidget{
		background-color: transparent;
		padding: 0 !important;
		font-size: normal;
	}
	.tnp-widget{
		form{
			margin-top: 0 !important;
			@media screen and (min-width: 993px){
				margin: 0 -15px;
				div{ 
					display: inline-block;
					padding: 0 0 0 15px; 
					margin: 0;
					width: calc(70% - 5px);
					&:last-child{width: 30%;}
				}
			}
		}
	}
	&.color-white{
		.tnp-widget{
			form{
				input[type='email']{ 
					border-color: #fff; 
					color: #fff; 
					background: transparent;
				}
			}
		}
	}
}
.widget{
	.tnp-widget input[type=text], 
	.tnp-widget input[type=email], 
	.tnp-widget input[type=submit], 
	.tnp-widget select{
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
	}
}

/**
 * @since 2.0
**/
.zk-grid-item{
	padding: 15px;
}