//GRID PORTFOLIO
.outer_extra_class {
    .vc_gitem-zone-mini {
        position: absolute !important;
        background: linear-gradient(180deg, rgba(236, 119, 171, 0) 10%, rgba(25, 25, 25, 0.11) 60%, rgba(35, 35, 35, 0.28) 100%);
    }
    .vc_gitem-row-position-middle {
        top: auto !important;
        bottom: 30px;
        padding-left: 30px;
    }
    .vc_gitem-row-position-bottom {
        bottom: 20px !important;
        padding-left: 30px;
    }
    .uk-width-auto {
        width: auto !important;
    }
}
///// V2 BEGINS
.version2 {
	::selection{
		background-color: #7fbfff;
		color: #fff;
	}

	#music_player{
		height: 72px;
	    position: fixed;
	    bottom: 0px;
	    left: 0px;
	    right: 0px;
	    background-color: transparent;
	    background: none;
	    z-index: 9990;
	    box-shadow: none;
	    border-top: 1px solid rgba(251, 251, 251, 0.35);
	    &:before {
	    	content: "";
	    	display: flex;
	    	height: 71px;
	    	position: fixed;
	    	width: 100%;
	    	bottom: 0px;
	    	left: 0px;
	    	right: 0px;
	    	overflow: hidden;
	    	z-index: -1;
	    	background-color: rgba(193, 193, 193, 0.32);
	    	box-shadow: inset -20px -17px 40px 40px rgba(123, 123, 123, 0.22);
	    	-webkit-backdrop-filter: blur(20px);
	    	backdrop-filter: blur(20px);
	    }
		table, th, td {
		    border: none;
		    border-color: transparent;
		}
		audio{
			opacity: 0;
		}
		.ms-table{
			width: 100%;

			& > tr > td,
			& > tbody > tr > td{
				vertical-align: middle;
				height: 66px;
				text-align: left;
				padding: 0px;
			}

			/* play, pause, backward, forward */
			.ms-buttons{
				width: 180px;
				line-height: 66px;

				@media screen and (max-width: 1199px){
					width: 152px;
				}

				a{
					position: relative;
					display: inline-block;
					width: 20px;
					height: 34px;
					float: left;
					.transition();

					& + a{
						margin-left: 30px;
					}

					svg{
						display: inline-block;
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translateX(-50%) translateY(-50%);
						   -moz-transform: translateX(-50%) translateY(-50%);
								transform: translateX(-50%) translateY(-50%);
						path{
							fill: #fff;
						}
					}
				}
				.ms-play{
					svg{
						width: 20px;
						height: 26px;
					}
				}
				.ms-prev, .ms-next{
					opacity: 0.8;

					&:hover{
						opacity: 1;
					}

					svg{
						width: 20px;
						height: 14px;
					}
				}
				.ms-next{
					
				}
			}


			/* progress bar */
			.ms-wrap{
				width: 480px;
				position: relative;
				border-right: 0px !important;

				& > .mejs-offscreen{
					display: none;
				}

				@media screen and (max-width: 1199px){
					width: auto;
					text-align: center;
				}
				@media screen and (max-width: 767px){
					display: none;
				}
			}


			/* playlist, volume, repeat, shuffle */
			.ms-controls{
				@media screen and (max-width: 1199px){
					width: 152px;
				}
				@media screen and (max-width: 767px){
					text-align: right;
				}
				.ms-entry-controls{
					position: relative;
					line-height: 0px;
					.ec-item{
						display: inline-block;
						line-height: 0px;
						& + .ec-item{
							margin-left: 5px;
						}
						& > a{
							display: inline-block;
							width: 30px;
							height: 30px;
							line-height: 30px;
							text-align: center;
							position: relative;

							svg{
								width: 24px;
								height: 16px;
								position: absolute;
								top: 50%;
								left: 50%;
								-webkit-transform: translateX(-50%) translateY(-50%);
								   -moz-transform: translateX(-50%) translateY(-50%);
										transform: translateX(-50%) translateY(-50%);
								path{
									fill: rgba(255,255,255,1);
								}
							}

							&.active{
								svg path{
									fill: @brand-color;
								}
							}
						}

						/* Volumn Control */
						&.ec-volume{
							position: relative;
							.ec-volume-control{
								position: absolute;
								bottom: 25px;
								left: -6px;
								width: 38px;
								height: 146px;
								visibility: hidden;
								opacity: 0;
								.transition();

								&::before{
									content: '';
									position: absolute;
									top: -2px;
									left: 0px;
									width: 100%;
									height: 119px;
									background-color: rgba(62, 62, 62, 0.47);
									border-top-left-radius: 5px;
									border-top-right-radius: 5px;
									@media screen and (max-width: 1199px){
										height: 123px;
									}
								}

								.ec-vol-el{
									width: 2px;
									height: 94px;
									position: absolute;
									top: 13px;
									left: 50%;
									background-color: rgba(255,255,255,1);
									margin-left: -1px;

									.ui-slider-range{
										position: absolute;
									    bottom: 0px;
									    left: 0px;
									    width: 100%;
									    background: @brand-color;
									}
									.ui-slider-handle{
										width: 10px;
										height: 10px;
										border-radius: 50%;
										background-color: @brand-color;
										position: absolute;
									    left: -4px;
									    margin-bottom: -5px;
									    &:focus{
									    	outline: none;
									    }
									}
								}
							}
							&:hover{
								.ec-volume-control{
									visibility: visible;
									opacity: 1;
								}
							}
						}

						/* Playlist */
						&.ec-playlist{
							position: relative;
							text-align: left;
							.ec-playlist-control{
								position: absolute;
								width: 324px;
								height: 453px;
								left: -240px;
								bottom: 25px;
								opacity: 0;
								visibility: hidden;
								.transition();

								@media screen and (max-width: 1199px){
									left: auto;
									right: 0px;
								}

								&::before{
									content: '';
									background-color: rgba(0, 0, 0, 0.70);
									position: absolute;
									bottom: 27px;
									top: 0px;
									left: 0px;
									right: 0px;
									border-top-left-radius: 5px;
									border-top-right-radius: 5px;

									@media screen and (max-width: 1199px){
										bottom: 23px;
									}
								}

								.pl-head{
									display: block;
									position: relative;
									overflow: hidden;
									padding-left: 40px;
									padding-right: 40px;
									padding-top: 30px;
									padding-bottom: 20px;
									h5{
										font-family: @font-title;
										font-size: 18px;
										font-weight: normal;
										color: #fff;
										letter-spacing: 0px;
										text-transform: uppercase;
										float: left;
										margin: 0px;
										line-height: 1em;
									}
									.ms-control-shuffle{
										display: inline-block;
										float: right;
										position: relative;
										top: 1px;
										svg{
											width: 24px;
											height: 16px;
											path{
												fill: rgba(255,255,255,1);
											}
										}
										&.active{
											svg path{
												fill: @brand-color;
											}
										}
									}
								}
								.pl-list-container{
								    max-height: 348px;
								    overflow: auto;
								    position: relative;
								    &::-webkit-scrollbar{ display: none; }
								}

								.pl-list{
									width: 100%;
									position: relative;

									tr{
										border-top: 1px solid rgba(255,255,255,0.07);
										.transition();

										td{
											color: #fff;
											vertical-align: middle;
											a{
												color: #fff;
											}

											&.td-num{
												width: 86px;
												text-align: center;
												border-right: 0px !important;
											}

											&.td-title{
												padding-top: 10px;
												padding-bottom: 10px;
												text-align: left;
												& > a{
													margin-right: 40px;
													font-size: 14px;
													line-height: 1.3em;
													display: inline-block;
												}
												.pl-item-title{
													margin-right: 5px;
													font-family: @font-title;
													font-weight: normal;
													letter-spacing: 0px;
												}
												.pl-item-duration{
													opacity: 0.2;
													font-family: @font-text;
													font-weight: 500;
													letter-spacing: 0px;
												}
												.pl-item-artist{
													display: block;
													opacity: 0.2;
													font-family: @font-text;
													font-weight: 500;
													letter-spacing: 0.3px;
												}
											}

											span.number{
												position: relative;
												overflow: hidden;
												display: inline-block;
												width: 25px;
												height: 25px;

												&::before{
													content: attr(data-value);
													font-size: 14px;
													font-family: @font-title;
													font-weight: normal;
													color: rgba(255,255,255,0.2);
													line-height: 1em;
													position: absolute;
													top: 50%;
													left: 50%;
													-webkit-transform: translateX(-50%) translateY(-50%);
													   -moz-transform: translateX(-50%) translateY(-50%);
															transform: translateX(-50%) translateY(-50%);
													.transition();
												}
												&::after{
													content: '\f04b';
													font-family: Fontawesome;
													font-size: 18px;
													color: @brand-color;
													line-height: 1em;
													position: absolute;
													top: 150%;
													left: 50%;
													visibility: hidden;
													opacity: 0;
													-webkit-transform: translateX(-50%) translateY(-50%);
													   -moz-transform: translateX(-50%) translateY(-50%);
															transform: translateX(-50%) translateY(-50%);
													.transition();
												}

												&.playing{
													&::before{
														top: 0%;
														visibility: hidden;
														opacity: 0;
													}
													&::after{
														top: 50%;
														visibility: visible;
														opacity: 1;
													}
												}
											}
										}

										&:hover{
											background-color: @brand-color;
											td.td-num{
												span.number{
													&::before{
														color: rgba(255,255,255,0.5);
													}
													&::after{
														color: #fff;
													}
												}
											}
											.td-title{
												.pl-item-artist{
													opacity: 0.5;
												}
												.pl-item-duration{
													opacity: 0.5;
												}
											}
										}
									}
								}
							}

							&:hover{
								.ec-playlist-control{
									opacity: 1;
									visibility: visible;
								}
							}
						}
					}
				}
			}


			/* now playing */
			.ms-nowplaying{
				width: 280px;
				position: relative;

				/* responsive for now playing box */
				@media screen and (max-width: 1199px){
					display: none;
				}

				.np-thumb{
					display: inline-block;
					width: 66px;
					height: 66px;
					margin-top: 3px;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center top;
				}
				.np-meta{
					position: absolute;
					top: 50%;
					left: 80px;
					right: 25px;
					line-height: 1.3em;
					margin-top: -2px;
					.translateY();

					.np-title{
						font-family: @font-title;
					    font-size: 14px;
					    font-weight: 300;
					    letter-spacing: 1px;
					    color: #ffffff;
					    margin-right: 5px;
					    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
					}
					.np-artist{
						font-family: @font-text;
						font-size: 12px;
						font-weight: 300;
						letter-spacing: 1px;
						color: rgb(255, 255, 255);
						text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
					}
				}
				.ms-add-fav{
				    width: 15px;
				    height: 14px;
				    line-height: 14px;
				    position: absolute;
				    top: 50%;
				    right: 0px;
				    .translateY();
					svg{
						width: 15px;
						height: 14px;
						path{
							fill: rgba(255, 255, 255, 0.25);
							transition: all 0.5s ease;
						}
					}
					&.active{
						svg path{
							fill: #fff;
							transition: all 0.5s ease;
						}
					}
				}
			}
		}
		
	}


	/* MediaElement MS Skin */
	.msplayer-skin.mejs-container{
		display: inline-block;
		background: none;
		.mejs-offscreen{
			clip: auto;
			clip-path: none;
		}
		.mejs-controls{
			background: none;
		}
		.mejs-controls .mejs-time{
			font-size: 14px;
			font-family: @font-text;
			font-weight: 500;
			color: rgba(255,255,255,1);
			width: 44px;
		}
		.mejs-time-total.mejs-time-slider{
			&:focus{
				outline: none;
			}
		}
		/* Total rail */
		.mejs-controls .mejs-time-rail .mejs-time-total{
			background: none;
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 0px;
				width: 100%;
				height: 2px;
				margin-top: -1px;
				background-color: rgba(255,255,255,0.5);
			}
		}
		/* Current rail */
		.mejs-controls .mejs-time-rail .mejs-time-current{
			background: none;

			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 0px;
				width: 100%;
				height: 2px;
				margin-top: -1px;
				background-image: linear-gradient(135deg, @color-ancient1, @color-ancient2) !important;
			}
			&::after{
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				margin-top: -5px;
				right: 0px;
				margin-right: -5px;
				opacity: 0;
				visibility: hidden;
				.transition();
			}
		}
		/* Loaded rail */
		.mejs-controls .mejs-time-rail .mejs-time-loaded{
			background: none;
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 0px;
				width: 100%;
				height: 2px;
				margin-top: -1px;
				background-color: rgba(255,255,255,1);
			}
		}
		.mejs-controls .mejs-time-rail .mejs-time-float{
			display: none !important;
		}
		.mejs-controls .mejs-time-rail{
			&:hover{
				.mejs-time-current{
					&::after{
						visibility: visible;
						opacity: 1;
					}
				}
			}
		}

	}

	//Footer alternate bg 
	.footer-alternate-bg {
		z-index: 1;
		background: @footer-bg;
		min-height: @footer-min-height;
	}
	#sineCanvas {
		z-index: 2;
	}
	#sineCanvas2 {
		z-index: 3;
	}
	#sineCanvas3 {
		z-index: 7;
	  	opacity: 0.7;
		}
	#sineCanvas4 {
		z-index: 5;
    	opacity: 0.7;
	}
	#sineCanvas5 {
		z-index: 4;
    	opacity: 0.7;
	}
	#sineCanvas6 {
		z-index: 3;
    	opacity: 0.7;
	}
	#sineCanvas7 {
		z-index: 2;
    	opacity: 0.2;
	}
	.post-navigation {
		.pagination {
			li {
				.page-numbers {
					display: -ms-flexbox;
				    display: -webkit-flex;
				    display: flex;
				    -ms-flex-pack: center;
			        -webkit-justify-content: center;
			        justify-content: center;
			        -ms-flex-align: center;
			        -webkit-align-items: center;
			        align-items: center;
				}
			}
		}
	}
	.post-navigation .pagination > li > a, .post-navigation .pagination > li > span {
		padding: 0px !important;
		border-radius: 50%;
		width: 35px;
		height: 35px;
		margin-right: 10px;
		line-height: 0px !important;
		border: none;
		color: #171717
	}
	.post-navigation .pagination > li > a:focus, .post-navigation .pagination > li > a:hover, .post-navigation .pagination > li > span:focus, .post-navigation .pagination > li > span:hover {
		background-image: linear-gradient(135deg, @color-ancient1, @color-ancient2) !important;
		background-color: transparent !important;
		transition: all .3s;
		color: #fff;
	}
	span.page-numbers.current {
		color: #ffffff !important;
		background-color: transparent !important;
		background-image: linear-gradient(135deg, @color-ancient1, @color-ancient2) !important;
	}
	.uk-box-shadow-large {
		box-shadow: 0px 1px 25px rgba(0,0,0,.16);
	}
	.sidebar {
		padding-left: 0px !important;
	}
	//Animated SVG text vector play button
	.header-menu-left {
		.site-branding {
			display: table-caption !important;
		}
	}
	.header-fashion, .header-news, .header-only-burger-menu, .header-welcome, .header-shop, .header-food, .header-menu-left, .vertical-menu{
		.control__button {
			visibility: visible;
			position: relative;
			top: 5px;
			left: 4px;
			width: 27px;
			height: 27px;
			transition: all 0.3s !important;
			border-radius: 500px;
			vertical-align: middle;
			display: -ms-inline-flexbox;
			display: -webkit-inline-flex;
			display: inline-flex;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-transition: .1s ease-in-out;
			transition: .1s ease-in-out;
			-webkit-transition-property: color,background-color;
			transition-property: color,background-color;
			background: linear-gradient(291deg, @color-ancient2, @color-ancient1, @color-ancient2, @color-ancient1);
			background-size: 800% 800%;
			-webkit-animation: AnimatedGradient 15s ease infinite;
			-moz-animation: AnimatedGradient 15s ease infinite;
			animation: AnimatedGradient 15s ease infinite;
		}
	}
	.header-creative {
		.control__button {
			-webkit-flex: none;
			-ms-flex: none;
			flex: none;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			margin-bottom: 28px;
			position: relative;
			cursor: pointer;
			margin-left: 20px;
			z-index: 999;
			padding: 0;
			border: 0;
			opacity: 1;
			background: none;
			-webkit-transition: opacity 0.3s;
			transition: opacity 0.3s;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			&:after {
				content: '';
				top: -7px;
				left: -9px;
				width: 31px;
				// border: 1px solid rgba(255, 255, 255, 0.38);
				z-index: -1;
				border-radius: 50%;
				height: 31px;
				position: absolute;
				background: linear-gradient(90deg, @color-ancient2, @color-ancient1, @color-ancient2, @color-ancient1);
				background-size: 500% 500%;
				// box-shadow: rgba(247, 247, 247, 0.31) 0px 0px 9px 1px;
				box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px 1px;
				-webkit-animation: AnimatedGradient 15s ease infinite;
				-moz-animation: AnimatedGradient 15s ease infinite;
				-webkit-transition: opacity 0.3s;
				transition: opacity 0.3s;
				animation: AnimatedGradient 15s ease infinite;
			}
		}
	}
	.control__button--active {
		pointer-events: none;
		opacity: 0;
	}
	.control__button:focus,
	.control__button:active {
		outline: none;
	}
	////POST
	.category-block {
		.post.first.text-bigger.hover-dark.blog-loop {
			border-radius: 10px;
		    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
		    padding-bottom: 50px;
		    .entry-media {
		    	margin-bottom: 0px;
		    	border-top-left-radius: 10px;
		    	border-top-right-radius: 10px;
		    }
		    .meta {
		    	padding-left: 50px;
		    	padding-right: 50px;
		    	margin-bottom: 40px;
		    	padding-top: 40px;
		    }
		    h4 {
		    	padding-left: 50px;
		    	padding-right: 50px;
		    	margin-top: 20px;
		    	line-height: 33px;
		    	margin-bottom: 20px;
		    	font-size: 25px;
		    	font-family: @font-text !important;
		    }
		    p {
		    	font-family: @font-text;
		    	padding-right: 50px;
		    	padding-left: 50px;
		    	margin-top: 40px;
		    }
		    .category-more {
		    	margin-right: 50px;
		    	margin-left: 50px;
		    	box-sizing: border-box;
		    	line-height: 0px !important;
		    	padding: 20px 40px !important;
		    	text-transform: uppercase;
		    	background-color: @color-ancient1 !important;
		    	color: #fff !important;
		    	letter-spacing: 1px !important;
		    	font-size: 12px !important;
		    	line-height: 12px;
		    	border: none !important;
		    	background-image: linear-gradient(135deg, @color-ancient1, @color-ancient2) !important;
		    	box-shadow: 0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12) !important;
		    	border-radius: 500px !important;
		    	font-weight: 600 !important;
		    	transition: all 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
		    	overflow: visible;
		    	vertical-align: middle;
		    	display: inline-block;
		    	text-align: center;
		    	img {
		    		display: none;
		    		visibility: hidden;
		    	}
		    }
		}
	}
	/// MAILCHIMP SUB FORM
	.mc4wp-form {
		.uk-input {
			box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.08);
			background: #fff !important;
			border-radius: 500px;
			text-indent: 20px;
			padding-left: 0px !important;
			font-style: normal !important;
			font-weight: 300;
		}
		input[type=submit] {
			font-style: normal;
		    line-height: 13px;
		    padding: 15px 38px !important;
		    font-size: 12px !important;
		}
	} 

	/// Animated background 
	.animatedgradientbackground {
	    background: linear-gradient(291deg, @color-ancient2, @color-ancient1, @color-ancient2, @color-ancient1);
	    background-size: 800% 800%;
	    -webkit-animation: AnimatedGradient 15s ease infinite;
	    -moz-animation: AnimatedGradient 15s ease infinite;
	    animation: AnimatedGradient 15s ease infinite;

	    @-webkit-keyframes AnimatedGradient {
	        0%{background-position:1% 0%}
	        50%{background-position:99% 100%}
	        100%{background-position:1% 0%}
	    }
	    @-moz-keyframes AnimatedGradient {
	        0%{background-position:1% 0%}
	        50%{background-position:99% 100%}
	        100%{background-position:1% 0%}
	    }
	    @keyframes AnimatedGradient { 
	        0%{background-position:1% 0%}
	        50%{background-position:99% 100%}
	        100%{background-position:1% 0%}
	    }
	}
	///search 
	.search_form {
		border: none !important;
		padding: 0px 0px !important;
		input {
			box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.08);
			background: #fff !important;
			border-radius: 500px;
			text-indent: 20px;
			padding-left: 0px !important;
			font-style: normal !important;
			font-weight: 300;
			border-bottom: none;
			height: 42px;
			padding: 7px;
			font-size: 10px;
			font-family: Roboto;
			text-transform: uppercase;
		}
		button {
			padding: 21px 24px !important;
			line-height: 0px !important;
			font-size: 12px !important;
		}
	}
	.push-menu {
		.widget {
			.search_form {
				border: none !important;
				input {
					font-size: 11px !important;
				}
				i {
					font-size: 18px !important;
				}
			}
		}
	}

	///
	#footer {
		min-height: @footer-min-height;
		padding: 30px 0 !important;
		box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.08);
		background: transparent !important;
		z-index: 999;
		.widget-title {
			font-weight: 500;
		}
		.footer-row {
			margin-top: 30px !important;
			margin-bottom: 30px !important;
			-ms-flex-align: flex-start;
			-webkit-align-items: flex-start;
			align-items: flex-start;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			text-align: left!important;
			font-weight: 300;
			.uk-logo {
				font-weight: 700;
				color: @footer-color !important;
				margin-bottom: 0px;
			}
		}
	}
	/// card testimonial
	.card-testimonial-style {
		padding-left: 40px;
		padding-right: 40px;
		// .swiper-slide:nth-child(odd) {
		// 	padding-bottom: 50px;
		// 	padding-top: 20px;
		// 	padding-left: 50px;
		// }
		// .swiper-slide:nth-child(even) {
		// 	padding-bottom: 50px;
		// 	padding-top: 20px;
		// 	padding-right: 50px;
		// }
		.swiper-pagination-bullet-active {
			-moz-bacground: -moz-linear-gradient(left, @color-ancient2 0%, @color-ancient1 100%);
			-webkit-background: -webkit-linear-gradient(left, @color-ancient2 0%, @color-ancient1 100%);
			background: linear-gradient(to right, @color-ancient2 0%, @color-ancient1 100%);
		}
	}
	//carousel slider 
	.travel-item-boxed{
		position: relative;
		overflow: hidden;

		a.entry-link{
			display: block;
			position: relative;
			cursor: ew-resize;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center top;
			-webkit-transform: scale(1);
			   -moz-transform: scale(1);
					transform: scale(1);

			.transition();
			-webkit-transition-duration: 0.35s;
			   -moz-transition-duration: 0.35s;
					transition-duration: 0.35s;

			&::before{
				content: '';
				display: none;
				visibility: hidden;
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				height: 100px;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.74+100 */
				background: -moz-linear-gradient(top,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#bd000000',GradientType=0 ); /* IE6-9 */
			}

			&::after{
				content: '';
				position: absolute;
				bottom: 0px;
				left: 0px;
				right: 0px;
				height: 100%;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.74+100 */
				background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.74) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.74) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.74) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#bd000000',GradientType=0 ); /* IE6-9 */
			}
		}

		.img-spacer{
			width: 100%;
		}

		.price{
			font-family: @font-title;
			font-weight: bold;
			color: #fff;
			top: 50px;
			left: 60px;
			position: absolute;
		}

		.entry-info{
			position: absolute;
			left: 60px;
			right: 60px;
			bottom: 50px;

			&::before{
				content: '';
				display: none;
				visibility: hidden;
				width: 19px;
				height: 27px;
				position: absolute;
				top: 0px;
				left: -27px;
				background-image: url("@{img-path}images/pin-bg.png");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center top;
			}

			h3{
				font-size: 24px;
				font-weight: 300;
				font-family: @font-title;
				margin: 0px;
				letter-spacing: 0.7px;

				a{
					color: #fff;
				}
			}

			.desc{
				font-size: 14px;
				line-height: 1.4;
				font-family: @font-title;
				font-weight: normal;
				color: #d2d2d2;
				margin-top: 5px;
			}
		}


		&:hover{

			a.entry-link{
				-webkit-transform: scale(1.1);
				   -moz-transform: scale(1.1);
						transform: scale(1.1);
			}
			&::after{
				content: '';
				position: absolute;
				bottom: 0px;
				left: 0px;
				right: 0px;
				height: 100%;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.74+100 */
				background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			}
		}
	}
	//footer 
	.footer-overlay {
		opacity: 1 !important;
	}
	///menu
	.push-menu {
		.pm-container {
			.pm-wrap {
				.close-menu {
					margin-top: 30px;
				}
			}
		}
	}
	//comment
	.comment-list {
		padding: 0 0 0 0px !important;
	}

	//title
	.entry-title-wrap{
	    .entry-big-text{
	    	background: linear-gradient(268deg, #c644fc 20%, #5856d6 100%);
	    	-webkit-background-clip: text;
	    	-webkit-text-fill-color: transparent;
		}
	}
	/// Comments
	#comment {
		border-radius: 5px !important;
	}

	/// submit button
	#submit {
		padding: 20px 50px !important;
		width: auto !important;
	    background-color: @color-ancient2 !important;
	    color: #fff !important;
	    letter-spacing: 1px !important;
	    font-size: 12px !important;
	    line-height: 12px;
	    border: none !important;
	    background-image: linear-gradient(135deg, @color-ancient2, @color-ancient1) !important;
	    box-shadow: 0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12) !important;
	    border-radius: 500px !important;
	    font-weight: 600 !important;
	    transition: all 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	    &:hover {
	        transition: all .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1) !important;
	        background-color: @color-ancient2 !important;
	        color: #fff !important;
	        border-color: transparent !important;
	        background-image: linear-gradient(135deg, @color-ancient2, @color-ancient1) !important;
	        box-shadow: 0 14px 26px -12px fade(@color-ancient1, 43%), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px fade(@color-ancient1, 50%) !important;
	        
	    }
	}
}


/* Modal NEW*
------------------------------------ */
.uk-modal-close-outside {
    top: -6px;
    right: -3px;
    -webkit-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    color: #fff;
    background-color: @color-ancient1;
    border-radius: 50%;
}
.uk-modal-body {
	padding: 0px;
}
/* Progress bar NEW*
------------------------------------ */
.con-progress {

	.uk-progress::-webkit-progress-value{
	  background: linear-gradient(291deg, @color-ancient1 0%, @color-ancient2 100%);
	  border-radius: 500px !important;
	  transition: width 1s ease;
	}
	.uk-progress::-moz-progress-bar {
	  border-radius: 500px !important;
	  transition: width 1s ease;
	}
	.uk-progress {
	    width: 100%;
	    border: 0;
	    height: 8px;
	    overflow: hidden;
	    transition: width 1s ease;
	}
	.uk-progress-revolution {
	    height: 3px;
	}
	.uk-progress-revolution::-webkit-progress-value{
	  background-color: #fff;
	}
	progress[value]::-webkit-progress-bar {
	  background-color: #eee;
	  -webkit-box-shadow: inset 0px 0px 10px 1px rgba(227,227,227,1);
	  -moz-box-shadow: inset 0px 0px 10px 1px rgba(227,227,227,1);
	  box-shadow: inset 0px 0px 10px 1px rgba(227,227,227,1);
	}
	progress::-webkit-progress-bar {
	    border-radius: 500px !important;
	}
	progress::-webkit-progress-value {
	    border-radius: 500px !important;

	}
}
/* Service card NEW*
------------------------------------ */
.service-card {
	border-radius: 5px;
	z-index: 0;
	transition: all .3s ease-in-out;
	background-color: #fff;
	button {
		&:hover {
			background-color: transparent;
		}
	}
	.service-card-image {
		right: -40px;
		position: absolute;
		bottom: 50px;
		width: 100px;
		height: 100px;
		transition: all .3s ease-in-out;
	}
	&:hover {
		-webkit-box-shadow: 0px 0px 96px 9px rgba(224,224,224,1);
		-moz-box-shadow: 0px 0px 96px 9px rgba(224,224,224,1);
		box-shadow: 0px 0px 96px 9px rgba(224,224,224,1);
		.service-card-image {
			right: -35px;
			transition: all .3s ease-in-out;
		}
	}
	p {
		line-height: 2;
		width: 90%;
		color: #696969;
	}
	.uk-card-title {
		line-height: 1.4;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 1px;
		color: #171717;
	}
	.uk-card-footer {
		padding: 0px 40px;
		padding-bottom: 40px;
	}

}
.service-card, .service-card-testimonial {
	.service-card-testimonial-image {
		position: absolute;
		border-radius: 50px;
		top: -35px;
		left: 30px;
		p {
			width: 100%;
			color: #72777B;
		}
		img {
			border-radius: 50%;
			height: 75px;
			width: 75px;
			-webkit-box-shadow: 0px 6px 20px 2px #e0e0e0;
			-moz-box-shadow: 0px 6px 20px 2px #e0e0e0;
			box-shadow: 0px 6px 20px 2px #e0e0e0;
		}
	}
}
.service-card-testimonial {
	overflow: visible;
	.testimonial_job {
		color: #87898c;
		font-size: 14px;
	}
	.quote_mark {
		transition: all .3s ease-in-out;
		position: absolute;
		top: 15px;
		left: auto;
		right: 15px;
		opacity: .2;
	}
	img {
		transition: all .3s ease-in-out;	
	}
	&:hover {
		.quote_mark {
			opacity: 1;
			color: @color-ancient1;
			transition: all .3s ease-in-out;
		}
		img {
			margin-top: -5px;
			transition: all .3s ease-in-out;
			-webkit-box-shadow: 0px 6px 20px 5px #e0e0e0;
			-moz-box-shadow: 0px 6px 20px 5px #e0e0e0;
			box-shadow: 0px 6px 20px 5px #e0e0e0;
		}
	}
}
.service-card-team {
	img {
		height: 100% !important;
		width: 100% !important;
	}
	.uk-position-relative {
	    margin-top: -16%;
	    left: 28%;
	    width: 70%;
	    margin-bottom: 24px;
	    @media (max-width: 640px) {
      		left: 0px;
      		width: 100%;
        }
	}
	.uk-card {
		background-color: #fff;
		border-radius: 5px;
		border-top: 5px solid transparent;
		-moz-border-image: -moz-linear-gradient(left, @color-ancient2 0%, @color-ancient1 100%);
		-webkit-border-image: -webkit-linear-gradient(left, @color-ancient2 0%, @color-ancient1 100%);
		border-image: linear-gradient(to right, @color-ancient2 0%, @color-ancient1 100%);
		border-image-slice: 1;
	}
	.uk-card-body {
		padding: 70px;
	    @media (max-width: 768px) {
      		padding: 15px;
        }
	}
	.uk-card-title {
		font-size: 24px;
		line-height: 28px;
		color: #171717;
		font-weight: 600;
	}
}
.card-team-style {
	.swiper-pagination {
		width: 29%;
		margin: 0;
		position: absolute;
		bottom: 28%;
		left: 1%;
	    @media (max-width: 640px) {
      		width: 100%;
      		margin: 0;
      		position: absolute;
      		bottom: 20px;
      		left: 0px;
        }
		.swiper-pagination-bullet {
			background: #484848;
		}
		.swiper-pagination-bullet-active {
			-moz-bacground: -moz-linear-gradient(left, @color-ancient2 0%, @color-ancient1 100%);
			-webkit-background: -webkit-linear-gradient(left, @color-ancient2 0%, @color-ancient1 100%);
			background: linear-gradient(to right, @color-ancient2 0%, @color-ancient1 100%);
		}
	}
}

/* Pricetable NEW*
------------------------------------ */
.pricetable {
	border-radius: 5px;
	margin-bottom: 20px;
	margin-top: 20px;
	background: #fff;
	transition: all .3s ease-in-out;
	width: 300px;
		&:hover {
		-webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.07);
		-moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.07);
		box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.07);
		transition: all .3s ease-in-out;
		}
	.uk-badge {
    background: #eee;
    border-radius: 0px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: 700;
    color: #171717;
	}

	.uk-card-body {
		padding: 40px;
	}
	.uk-card-title {
		font-size: 46px;
		line-height: 46px;
		color: #171717;
		font-weight: 300;
	}
	h4 {
		color: #171717;
		font-weight: 400;
		font-size: 34px;
		line-height: 34px;
		font-family: Segoe UI !important;
		span {
			font-size: 17px;
		}
	}
	p {
		line-height: 1.5em;
	}
}


/* Animate Element
------------------------------------ */
.beauty-hover {
	background: none;
    position: relative;
    overflow: hidden;
	&:after {
		content: '';
	    position: absolute;
		width: 100%;
	    height: 100%;
	    bottom: 0;
	    left: 0;
	    background: @color-1;
	    z-index: -1;
	    -webkit-transition: all 0.5s;
	    -moz-transition: all 0.5s;
	    transition: all 0.5s;
	}
	&:hover:after {
		height: 0;
	}
}


/* Address
------------------------------------ */
address {
    abbr[title], abbr[data-original-title] {
        position: relative;
        padding-left: 35px;
        display: block;
        border-bottom: none;
        span {
            position: absolute;
            left: 0;
            top: 20px;
            font-size: 16px;
            line-height: 0;
            color: @color-text;
        }
    }
    abbr[title]+abbr[title] {
        border-top: 1px solid;
        border-color: fade(@color-text, 10%);
        margin-top: 10px;
        padding-top: 10px;
    }
    abbr:first-child {
    	span {
    		top: 12px;
    	}
    }
}


/* Element
------------------------------------ */
.simple-tab-space {
	.tab-panel{
		position: relative;
	}
	.tab-content {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		.transition();
		-webkit-transition-duration: 0.5s;
		   -moz-transition-duration: 0.5s;
				transition-duration: 0.5s;
		-webkit-transform: translateY(20px);
		   -moz-transform: translateY(20px);
				transform: translateY(20px);

		&.active {
			-webkit-transition-delay: 0.2s;
			   -moz-transition-delay: 0.2s;
					transition-delay: 0.2s;
			visibility: visible;
			opacity: 1;
			position: relative;
			-webkit-transform: translateY(0px);
			   -moz-transform: translateY(0px);
					transform: translateY(0px);
		}
	}
	.tab-title {
		margin: 20px 0;
		a {
			float:left;
			font-family: @font-title;
			text-transform: uppercase;
			text-decoration: none;
			font-size: 17px;
			line-height: 1;
			color: rgba(0,0,0,.4);
			margin: 10px 0;

			& + a {
				margin-left: 15px;
				padding-left: 15px;
				border-left: 2px solid rgba(0,0,0,.3);
			}

			&.active {
				color: #000;
			}

			i{
				margin-right: 8px;
			}
		}
	}
	@media screen and (max-width: 768px){
		.tab-title {
			a {
				font-size: 12px;
				& + a {
					margin-left: 5px;
					padding-left: 5px;
				}
			}
		}
	}
}


/* Element information
------------------------------------ */
.tt-el-info{
	position: relative;
	display: inline-block;
	margin-top: 20px;

	h4{
		font-size: 28px;
		font-family: @font-title;
		font-weight: bold;
		letter-spacing: 0px;
		line-height: 1em;
		margin: 0px;
		padding: 0px;
		color: @color-title;
	}

	p{
		margin: 0px;
		padding: 0px;
		font-family: @font-title;
		font-weight: bold;
		font-size: 12px;
		letter-spacing: 0px;
		text-transform: uppercase;
		color: fade(@color-title, 75%);
		line-height: 1em;
		margin-top: 5px;
	}
	&.inline-style {
		margin-top: 0;
		h4, p {
			display: inline-block;
			margin: 0;
		}
		h4+p{
			margin-left: 5px;
		}
	}
	&+.tt-el-info {
		margin-left: 15px;
		@media screen and (max-width:376px) {
			margin-left: 0;
		}
	}

}


/* Placeholder & Ads
------------------------------------ */
.ads-placeholder{
	width: 100%;
	padding: 90px 0;
	background-color: rgba(0,0,0,.1);
	color: rgba(0,0,0,.3);
	text-align: center;
	font-size: 36px;
	line-height: 36px;
	font-family: @font-title;
	text-transform: uppercase;
	&.small {
		text-transform: none;
		font-size: 18px;
	}
}


/* Border line
------------------------------------ */
.border-line {
    border-top: 2px solid rgba(0,0,0,.2);
    margin: 20px 0;
}
.border-line-1 {
    border-top: 1px solid rgba(0,0,0,.2);
    margin: 20px 0;
}




/* General post block
------------------------------------ */
.post {
	position: relative;
	h4 {
		text-transform: uppercase;
		font-size: 14px;
		font-family: @font-title;
		font-weight: 700;
		line-height: 18px;
		color: #000;
		
		margin:0;
		margin-bottom: 10px;
	}
	.image {
		position: relative;
		background-position: center top;
		background-size: cover;
		margin-bottom: 20px;
		background-color: rgba(0,0,0,.05);
		img {
			width: 100%;
			height: auto;
		}
		
		// Medium size / default
		.video-player {
			width: 44px;
			height: 44px;
			text-align: center;
			color: #fff;
			background-color: #000;
			border: 2px solid #fff;
			border-radius: 50%;
			position: absolute;
			transform: translateY(50%);
			bottom: 0;
			right: 25px;
			z-index: 800;
			.transition();
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				margin-top: -6px;
			    border-left: solid 9px #fff;
			    border-top: solid 6px transparent;
			    border-bottom: solid 6px transparent;
			    margin-left: -3px;
			}
			&:hover {
				background-color: #333;
			}
		}
		.video-player-small {
			width: 28px;
			height: 28px;
			&:after {
				margin-top: -4px;
			    border-left: solid 6px #fff;
			    border-top: solid 4px transparent;
			    border-bottom: solid 4px transparent;
			    margin-left: -2px;
			}
		}
		.video-player-large {
				width: 68px;
				height: 68px;
				border-width: 3px;
				&:after {
					margin-top: -9px;
				    border-left: solid 14px #fff;
				    border-top: solid 10px transparent;
				    border-bottom: solid 10px transparent;
				    margin-left: -4px;
				}
		}
		.video-player-inside {
				left: 15px;
				bottom: 15px;
				transform: none;
		}
		.video-player-center {
				left: 50%;
				top: 50%;
				bottom: auto;
				transform: translate(-50%, -50%);
		}
	}
	
	.image-thumb,.clearfix img {
		float:left;
		width: 80px;
		height: 80px;
		margin-right: 20px;
		margin-bottom: 10px;
	}
	.image-small {
		float:left;
		width: 44px;
		height: 44px;
		margin-right: 20px;			
	}
	.image-medium {
		height: 135px;
	}
	.image-large {
		height: 435px;
	}

	.video-frame {
		&:hover {
			cursor: pointer;
		}
	}

	p, h4, img {
		&:last-child {
			margin-bottom: 0;
		}
	}



	&.cart-hover {
		position: relative;
		.post-title {
			position: absolute;
			bottom: 15px;
			left: 20px;
			right: 10px;
			z-index: 810;
			font-size: 18px;
			line-height: 20px;
			.transition();
			a {
				color: #f9f9f9;
				&:hover {
					color: #fff;
				}
			}
		}
		&:hover {
			.post-title {
				bottom: 25px;
			}
		}
	}
}


/* Meta
------------------------------------ */
.meta {
	line-height: 1;
	font-size: 12px;
	margin-bottom: 10px;
	.author {
		color:#000;
	}
	.date {
		color: rgba(0,0,0,.7);
	}
	span+span {
		margin-left: 8px;
	}
	&.inline-meta {
		line-height: 44px;
		margin-bottom: 20px;
		img {
			margin-right: 20px;
		}
	}
	&.small-meta {
		line-height: 36px;
		margin-bottom: 15px;
		font-size: 14px;
		.image,.image-thumb {
			width: 36px;
			height: 36px;
			margin-right: 15px;
		}
	}

	/* Meta circle treasure
	------------------------------------ */
	&.bullet-style {
		position: relative;
		padding-left: 25px;
		&:before {
			content: '';
		    display: block;
		    border: 2px solid @brand-color;
		    width: 12px;
		    height: 12px;
		    border-radius: 50%;
		    position: absolute;
		    left: 0;
		    top: 3px;
		}
	}
}


/* Regular label
------------------------------------ */
.label {
	padding: 8px 15px;
	margin-right: 10px;
	color: #fff;
	&:hover {
		color: #fff;
	}
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
	border-radius:0;
	font-family: @font-title;
}


/* Trending
------------------------------------ */
.trending {
	h4 {
		font-size: 16px;
		position: relative;
		z-index: 1;
	}
	.image {
		height: 100px;
		margin-bottom: 28px;
	}
	.fancy-number {
	    position: absolute;
	    right: 0;
	    top: 99px;
	    font-size: 148px;
	    font-family: @font-title;
	    font-weight: bold;
	    color: fade(@brand-color, 10%);
	    line-height: 105px;
	    letter-spacing: -13px;
	}
	.post {
		position: relative;
		margin-bottom: 30px;
		min-height: 205px;
		&.no-image {
			min-height: 105px;
			.fancy-number {
		    	top: 0;
		    }
		}
	}
}


/* More link
------------------------------------ */
.category-more {
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	text-transform: none;
	color: #000;
	.transition();
	img {
		margin-left: 10px;
	}
	&:hover {
		text-decoration: none;
		opacity: 0.7;
		color: #000;
	}
	&.text-right {
		position: absolute;
	    z-index: 1;
	    right: 0;
	    margin-left: 15px;
	    top: 30px;
	    @media screen and (max-width: 768px) {
			top: 45px;
		}
	}
}
.title-block, .title-middle, .category-block, .page-content {
	.category-more img {
		height: 16px;
	}
}


/* Pagination
------------------------------------ */
.pagination-next-prev {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 30px;
	.arrow-link {
		margin: 0 18px;
		position: relative;
		background-image: none;  
		img {
			height: 20px;
		}
	}
	&.bordered {
		position: relative;
		overflow: hidden;
		&:before {
			content: '';
			position: absolute;
			height: 2px;
			background: rgba(0,0,0,.2);
			width: 50%;
			left: 0;
			top: 50%;
			-webkit-transform: translateX(-60px);
			   -moz-transform: translateX(-60px);
					transform: translateX(-60px);

		}
		&:after {
			content: '';
			position: absolute;
			height: 2px;
			background: rgba(0,0,0,.2);
			width: 50%;
			right: 0;
			top: 50%;
			-webkit-transform: translateX(60px);
			   -moz-transform: translateX(60px);
					transform: translateX(60px);
		}
	}
}


/* News slider
------------------------------------ */
.ms-tabs-template .ms-tabs-vertical-template {
	max-width: 1170px;
}
.news-slider {
	margin-bottom: 20px;

	.ms-inner-controls-cont, .ms-container {
		margin:0;
	}
	.ms-tabs {
		.ms-thumb-frame {
			background-color: #fff;
			text-shadow: none;
		}
		.ms-thumb {
			padding: 0;
		}
	}
	.ms-thumb {
		position: relative;
		.image {
			height: 180px;
			background-size: cover;
			position: relative;
			margin-bottom: 0;
		}
		.meta {
			float:left;
			background-color: #fff;
			padding: 15px 15px 5px 0;
	    	z-index: 900;
	    	position: relative;
	    	margin-bottom: 0;
		}
		h4 {
			float:left;
			margin-bottom: 0;
			font-weight: bold;
		}
	}
	.thumb-meta {
	    background-color: #fff;
	    width: 220px;
	    z-index: 800;
	    position: absolute;
	    left: 0;
	    bottom: -2px;
	}
	.box {
	    left: -3px;
	    width: 60%;
	    bottom: -3px;
	    background: #fff;
	    padding: 35px 30px 3px 4px;
	    p, h4, .meta {
	    	float:left;
	    }
	    .meta {
	    	font-size: 16px;
	    }
	    h4 {
	    	text-transform: uppercase;
	    	font-size: 24px;
	    	@media screen and (max-width: 768px) {
	    		a {font-size: 18px;}
	    	}
	    	font-weight: bold;
	    	font-family: @font-title;
	    	color: #000;
	    }
	    p {
	    	margin: 0;
	    	font-family: @font-second;
	    	color: rgba(0,0,0,.7);
	    	font-size: 18px;
	    	line-height: 24px;
	    }
	}
	.ms-view {
		background-color: #fff;
	}
	.ms-tabs.ms-dir-v.ms-align-right .ms-thumb-ol {
		top: 12px;
		width: 0;
		z-index: 600;
		border: none;
	}
	.ms-tabs.ms-dir-v.ms-align-right .ms-thumb-frame-selected .ms-thumb-ol {
	    width: 100%;
	    height: 5px;
	    background: @brand-color;
	    left: 0;
	    top: 12px;
	}
	.ms-thumb-frame-selected {
		.image {
			color: #fff;
			.transition();
		}
	}
	&.photo-news-slider {
		.ms-thumb {
			.transition();
			.image {
				height: 130px;
				color: #fff;
			}
			.meta {
				margin-top: -20px;
				padding: 10px 15px 2px 0;
			}
			h4 {
				margin-top: 5px;
			}
		}
		.ms-thumb-frame-selected {
			.image {
				
				&:before {
					content: '';
					position: absolute;
					z-index: 56;
					top: 50%;
					left: 80px;
				    margin-top: -9px;
				    border-left: solid 12px #fff;
				    border-top: solid 9px transparent;
				    border-bottom: solid 9px transparent;
				}
				&:after {
					content:'SELECTED';
					position: absolute;
					line-height: 130px;
					text-align: center;
					top:0;
					left: 0;
					bottom: 0;
					right: 0;
					background-color: rgba(0,0,0,.5);
					z-index: 55;
				}
			}
		}
	}

	&:not(.news-slider-hover){
		.ms-thumb-list.ms-dir-v{
			margin-right: -10px;
		}
	}

	&.news-slider-hover {
		.ms-thumb-list {
			right: 120px !important;
			width: 260px !important;
			&.ms-dir-v {
				height: 80%;
				margin-top: 10%;
				max-height: 400px;
			}
		}

		.ms-tabs.ms-dir-v .ms-thumb-frame {
			margin-left: 0;
		}
		.ms-thumb-frame {
			width: 260px !important;
			background-color: transparent;
			border: none;
			border-bottom: 2px solid rgba(255,255,255,.6);
		}
		.thumb-meta {
			background-color: transparent;
			position: relative;
			width: auto;
		}
		.ms-thumb .meta {
			background-color: transparent;
		}
		.box {
			left: 65px;
		    width: 60%;
		    max-width: 640px;
		    bottom: 65px;
		    background: none;
		    padding: 0;
		    color: #fff;
		    h4 {
		    	font-size: 36px;
		    	font-weight: 400;
		    }
		}
		h4 {
			font-size: 18px;
		}
	    h4, h4 a, .meta span, p {
	    	color: #fff;
	    }
		.ms-tabs.ms-dir-v.ms-align-right .ms-thumb-frame-selected .ms-thumb-ol {
		    width: 100%;
		    height: 2px;
		    left: 0;
		    top: auto;
		    bottom: -2px;
		}
		.slide-pattern {
			background: rgba(0,0,0,.3);
			width: 100%;
			height: 100%;
			z-index: 8;
			-webkit-transform: translateZ(0.4px);
			-moz-transform: translateZ(0.4px);
			-ms-transform: translateZ(0.4px);
			-o-transform: translateZ(0.4px);
			transform: translateZ(0.4px);
			position: absolute;
			top: 0;
			&.tint {
				background: url("@{img-path}images/news-slider-tint.png") no-repeat;
				background-size: cover;
			}
		}

	}
	@media screen and (max-width: 640px){
		.box {
			background-color:rgba(255,255,255,.5);
			padding: 10px 20px !important;
			width: 100%;
			box-sizing: border-box;
			.meta, p{ 
				display:none;
			}
		}
		margin-bottom:30px;
	}
}


/* Gallery slider
------------------------------------ */
.gallery-slider {

	margin-bottom: 40px;
	.ms-thumb-list.ms-dir-h {
		padding-top: 20px;
	}
	.ms-thumb {
		position: relative;
		.image {
			height: 60px;
			background-size: cover;
			position: relative;
			margin-bottom: 0;
		}
	}
	.ms-tabs {
		.ms-thumb {
			padding: 0;
		}
		.ms-thumb-frame {
		    background: none;
		    text-shadow: none;
		    border: none;
		    opacity: 0.3;
		    margin-top: 0;
		    &.ms-thumb-frame-selected {
		    	opacity: 1;
		    }
		    .ms-thumb-ol {
		    	border:none;
		    }
		}
	}

	.ms-layer {
		font-family: @font-title;
		font-weight: 700;
		color: #fff;
		a {
			color: #fff;
			&:hover {
				color: rgba(255,255,255,.9);
			}
		}
		text-transform: uppercase;
		font-size: 24px;
		bottom: 25px;
		left: 30px;
		span {
			font-size: 70%;
			font-weight: 400;
		}
	}

	.slide-pattern {
		background: rgba(0,0,0,.3);
		width: 100%;
		height: 100%;
		z-index: 8;
		position: absolute;
		top: 0;
		background-position: center top;
		&.tint {
			background: url("@{img-path}images/gallery-slider-tint.png") repeat-x;
			background-position: center bottom;
		}
	}

	&.movie-slider {
		.slide-pattern {
			background-position: center bottom;
		}
	}
	.ms-sbar.ms-dir-h{
		background-color: rgba(0,0,0,.3);
		left: 0;
		right: 0;
		height: 2px;
	}

	.image-copyright {
		font-size: 12px;
		font-family: @font-text;
		font-style: italic;
		color: rgba(0,0,0,.4);
	}

}


/* Fullscreen & Fullwidth section
------------------------------------ */
.fullscreen-section{
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
	min-height: 400px;

	& > .overlay{
		position: absolute;
		background-color: #000;
		opacity: 0.7;
		top: 0px;
		right: 0px;
		left: 0px;
		bottom: 0px;
		z-index: 0;
	}
}
.fullwidth-section {
	min-height: 200px;
	background-size: cover;
}


/* Twitter share able
------------------------------------ */
.twitter-shareable {
	padding: 0 3px;
	background: #f0f0f0;
	&:after {
		content: "\f099";
		font-family: FontAwesome;
		margin-left: 5px;
		color: #000;
	}
	&:hover {
		cursor: pointer;
		background: #efefef;
	}
}






/* Tana Slider with Thumbs
------------------------------------ */
.tana-slider-with-thumb{
	position: relative;

	.ts-main-panel{
		width: 100%;

		.swiper-slide{
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;

			.ts-entry-item{
				padding-top: 130px;
				padding-bottom: 130px;
				position: relative;
				overflow: hidden;
				text-align: right;

				@media screen and (max-width: 600px){
					text-align: center;
					padding-top: 80px;
					padding-bottom: 80px;
				}

				&::before{
					content: '';
				    background: rgba(0, 0, 0, 0.3);
				    width: 100%;
				    height: 100%;
				    position: absolute;
				    top: 0;
				    left: 0px;
				    background: url("@{img-path}images/gallery-slider-tint.png") repeat-x;
				    background-position: center bottom;
			    	z-index: 8;
				}

				.label {
				    padding-left: 30px;
				    font-size: 18px;
				    position: absolute;
				    top: 70px;
				    left: 0px;
				    z-index: 10;
				}

				.tse-content{
					width: 360px;
					display: inline-block;
					text-align: left;
					margin-right: 80px;
					position: relative;
					z-index: 10;

					@media screen and (max-width: 600px){
						width: 80%;
						margin: 0px;
					}

					.rate{
						font-size: 18px;
						letter-spacing: 3px;
						margin-bottom: 5px;

						i{
							color: #fff;

							&.color-1{
								color: @brand-color;
							}
						}
					}

					.product-price{
						position: relative;
						font-family: @font-text;
						font-weight: 400;
						font-size: 22px;
						letter-spacing: 0px;
						text-transform: none;
						margin-bottom: 20px;
						color: #fff;

						.price{
							display: inline-block;
							font-family: @font-title;
							font-weight: normal;
							background-color: #ffff00;
							color: #000;
							padding: 2px 8px;
						    margin-left: 10px;
						}
					}

					h3{
						font-weight: bold;
						font-family: @font-title;
						font-size: 40px;
    					line-height: 1.26em;
    					letter-spacing: 0.1px;
    					text-transform: uppercase;
    					margin: 0px;
    					margin-bottom: 15px;
    					word-wrap: break-word;

    					a{
    						color: #fff;
    					}
					}

					.meta{
						position: relative;
						display: block;
						margin: 0px;

						span{
							font-size: 16px;
							font-family: @font-text;
							font-weight: 400;
							text-transform: none;
							color: rgba(255,255,255, 0.8);
							letter-spacing: 0px;

							.author{

							}
							.date{

							}
						}

						.circle-chart {
							width: 100px;
							height: 100px;
							position: absolute;
							bottom: 0px;
							right: 0px;

							.circles-text {
								font-size: 26px !important;
								line-height: 0.6em !important;
								color: #fff;

								small{
									color: rgba(255, 255, 255, 0.5);
								}
							}

						}
					}

					.excerpt{
						font-family: @font-second;
						font-size: 16px;
						font-weight: normal;
						text-transform: none;
						line-height: 1.9em;
						color: #fff;
						border-top: 2px solid rgba(255, 255, 255, 0.2);
						margin-top: 30px;
						padding-top: 25px;
					}

					.read-more{
						margin-top: 25px;

						.icon-link{
							color: #fff;
							display: inline-block;
							font-family: @font-title;
							font-weight: normal;
							text-transform: none;
							font-size: 14px;
							letter-spacing: 0.2px;

							img {
								margin-left: 5px;

							}

							&+.icon-link {
								margin-left: 15px;
							}
						}

						a.post-link,
						a.add_to_cart_button,
						a.added_to_cart{
							display: inline-block;
							font-family: @font-title;
							font-size: 14px;
							font-weight: normal;
							letter-spacing: -0.2px;
							color: #fff;
							text-transform: uppercase;
							padding: 0px;
							border: 0px;
							background-color: transparent;
							overflow: hidden;
							margin-right: 15px;
							.transition();

							&:last-child{
								margin-right: 0px;
							}

							&:hover{
								color: @brand-color;
							}

							&.post-link{
								&:before{
									content: '---';
									letter-spacing: -3px;
									margin-right: 10px;
								}
							}
							&.add_to_cart_button{
								&:before{
									content: '+';
									margin-right: 10px;
								}
							}
						}
					}
				}

				// Black text
				&.text-black{
					.tse-content{
						.rate i{
							color: #000;

							&.color-1{
								color: @brand-color;
							}
						}

						.product-price{ color: #000; }

						h3 a{
    						color: #000;
						}

						.meta{
							span{
								color: rgba(0,0,0, 0.8);
							}

							.circle-chart .circles-text{
								color: #000;
								small{
									color: rgba(0,0,0, 0.5);
								}
							}
						}

						.excerpt{
							color: #000;
							border-top: 2px solid rgba(0,0,0, 0.2);
						}

						.read-more{
							.icon-link{
								color: #000;
							}

							a.post-link,
							a.add_to_cart_button,
							a.added_to_cart{
								color: #000;

								&:hover{
									color: @brand-color;
								}
							}
						}
					}
				} // end Black text

			}
		}
	}

	.ts-thumbs-panel{
		margin-top: 30px;
		width: 100%;

		.swiper-slide{
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			opacity: 0.3;
			width: 25%;

			img{
				width: 100%;
			}

			&.swiper-slide-active{
				opacity: 1;
			}
		}
	}

	&.layout-with-chart{
		.ts-main-panel{
			.swiper-slide .ts-entry-item .tse-content h3{
				padding-right: 100px;
			}
		}
	}

	&.layout-product{
		.ts-main-panel .swiper-slide .ts-entry-item .label{
			background-color: #ffff00;
			color: #000;
		}
	}

	.ts-main-wrap{
		position: relative;

		.swiper-button-prev,
		.swiper-button-next{
			width: 30px;
		    background-image: url("@{img-path}vendors/masterslider/skins/default/light-skin-1.png");
		    background-size: 152px;
		    background-position: -89px -26px;
		    height: 40px;
		    cursor: pointer;
		    top: 50%;
		    left: -80px;
		    margin-top: -35px;
		    position: absolute;
		    z-index: 110;

		    @media screen and (max-width: 1300px){
		    	display: none;
		    }

		    &::after {
			    content: "PREVIOUS";
			    font-size: 14px;
			    color: #fff;
			    display: block;
			    margin-top: 35px;
			    .translateX(-100%);
			}

			&.swiper-button-next{
		    	background-position: -89px -103px;
		    	left: auto;
		    	right: -80px;

		    	&::after{
		    		content: "NEXT";
		    		.translateX(0px);
		    	}
		    }
		}
	}

	.swiper-bottom-arrows{
		position: relative;
		display: block;
		height: 20px;
		margin-top: 40px;
		margin-bottom: 40px;

		.sba-left{
			position: absolute;
			width: 50%;
			height: 2px;
			left: 0px;
			top: 50%;
			padding-right: 65px;
			.translateY(-50%);

			&::after{
				content: '';
				height: 2px;
				width: 100%;
				display: block;
				background-color: rgba(255,255,255,0.15);
			}
		}
		.sba-right{
			position: absolute;
			width: 50%;
			height: 2px;
			right: 0px;
			top: 50%;
			padding-left: 65px;
			.translateY(-50%);

			&::after{
				content: '';
				height: 2px;
				width: 100%;
				display: block;
				background-color: rgba(255,255,255,0.15);
			}
		}

		.swiper-button-prev,
		.swiper-button-next{
			background-image: url("@{img-path}vendors/masterslider/skins/default/light-skin-1.png");
			background-size: 123px;
			background-position: -74px -27px;
			width: 24px;
			height: 21px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: 0px;
			.translate(-150%, -50%);

			&.swiper-button-next{
				left: auto;
				right: 50%;
				background-position: -74px -89px;
				.translate(150%, -50%);
			}
		}
	}
	

	&.ms-skin-dark{
		.ts-main-wrap{
			.swiper-button-prev,
			.swiper-button-next{
				background-image: url("@{img-path}images/dark-skin-1.png");
				&::after{
					color: #000;
				}
			}
		}
		.swiper-bottom-arrows{
			.sba-left,
			.sba-right{
				&::after{
					background-color: rgba(0,0,0,0.15);
				}
			}
			.swiper-button-prev,
			.swiper-button-next{
				background-image: url("@{img-path}images/dark-skin-1.png");
			}
		}
	}

	
}

/* retina */
@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	
	.tana-slider-with-thumb{
		.ts-main-wrap{
			.swiper-button-prev,
			.swiper-button-next{
			    background-image: url("@{img-path}vendors/masterslider/skins/default/light-skin-1-retina.png");
			    background-size: 152px;
		    }
		}

		.swiper-bottom-arrows{
			.swiper-button-prev,
			.swiper-button-next{
				background-image: url("@{img-path}vendors/masterslider/skins/default/light-skin-1-retina.png");
			}
		}

		&.ms-skin-dark{
			.ts-main-wrap{
				.swiper-button-prev,
				.swiper-button-next{
					background-image: url("@{img-path}images/dark-skin-1-retina.png");
					background-size: 152px;
				}
			}
			.swiper-bottom-arrows{
				.swiper-button-prev,
				.swiper-button-next{
					background-image: url("@{img-path}images/dark-skin-1-retina.png");
				}
			}
		}
	}
	
}