.banner-shortcode-wrap {
	background-color: @white;
	// Style 1
	&.style_1 {
		margin-top: 15px;
		margin-bottom: 15px;
		.banner-content {
			position: relative;
			overflow: hidden;
			&.title_top {
				.banner-title{
					top: 18px;	
				}
				.overlay-bg{
					top: 15px;
				}		
			}
			&.title_bottom {
				.banner-title{
					bottom: 18px;	
				}
				.overlay-bg{
					bottom: 15px;
				}		
			}
			.banner-title {
				position: absolute;
				left: 30px;
				z-index: 2;
				font-size: 36px;
				text-transform: uppercase;
				margin: 0;
				color: @white;
				.transition( all 0.5s ease-in-out);
				@media (min-width:768px) and (max-width:991px){
					font-size: 24px;
				}
			}
			.overlay-bg{
				opacity: 0.8;
				width: 40px;
				height: 50px;
				position: absolute;
				left: 20px;
				.transition( all 0.5s ease-in-out );
				@media (min-width:768px) and (max-width:991px){
					height: 35px;
				}
			}
			img{
				@media (max-width:767px){
					height: auto;
					width: 100%;
				}
			}
		}
		&:hover{
			.banner-content{
				&.title_bottom{
					.overlay-bg{
						bottom: 0;
						top: auto;
						left: 0;
					}
					.banner-title{
						bottom: 50%;
						top: auto;
						.translate(-50%,50%);
					}
				}
				.overlay-bg{
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
				}
				.banner-title{
					left: 50%;
					top: 50%;
					.translate(-50%,-50%);
					bottom: auto;
				}
			}
		}
		@media(max-width:767px){
			margin-top: 15px;
			margin-bottom: 15px;
		}
	}
	// Style 2
	&.style_2 {
		.banner-content {
			position: relative;
			margin: 15px 0; 
			overflow: hidden;
			.banner-price {
				z-index: 2;
				position: absolute;
				top: 50%;
				left: 50%;
				.transform(translate(-50%,-50%));
				height: 100px;
				width: 100px;
				border-radius: 100%;
				background-color: @primary_color;
				line-height: 100px;
				font-size: 36px;
				color: lighten(@black, 40%);
				text-align: center;
				.transition( all 0.2s ease);
				@media (max-width:320px){
					height: 50px;
					width: 50px;
					line-height: 50px;
					font-size: 18px;
				}
			}
			.banner-title-wrap {
				position: absolute;
				width: 50%;
				height: 100%;
				.rgba-bg-color(@black, 0.75);
				.transition( all 0.3s ease);
				.banner-title-content{
					padding-left: 30px;
					width: 100%;
					position: absolute;
					top: 50%;
					.translateY(-50%);
					.banner-sub-title{
						font-size: 18px;
						text-transform: uppercase;
						color: @white;
						margin-bottom: 5px;
						font-weight: 300;
					}
					.banner-title{
						font-size: 50px;
						text-transform: uppercase;
						color: @white;
						line-height: 1;
						width: 50%;
						@media (max-width:320px){
							font-size: 24px;
						}
					}
					@media (min-width:768px) and (max-width:991px){
						.banner-title{
							font-size: 30px;
						}
					}
				}
				&.title_left {
					left: 0;
				}
				&.title_right {
					right: 0;
					.banner-title-content{
						padding-left: 80px;
						@media (min-width:768px) and (max-width:991px){
							padding-left: 50px;
						}
						@media (max-width:320px){
							padding-left: 30px;
						}
					}
				}
			}
			.banner-hover {
				position: absolute;
				top: 50%;
				left: 50%;
				.translate( -50%, -50%);
				opacity: 0;
				.transition( all 0.45s ease );
				.banner-hover-title{
					font-size: 36px;
					font-weight: bold;
					color: @white;
					text-transform: uppercase;
					text-align: center;
					margin-bottom: 5px;
					@media (max-width:320px){
						font-size: 18px;
					}
				}
				.banner-hover-sub-title{
					font-size: 50px;
					color: @white;
					text-transform: uppercase;
					white-space: nowrap;
					font-weight: 300;
					line-height: 1.2;
					padding: 0 15px;
					@media (max-width:320px){
						font-size: 36px;
					}
				}
			}
			&:hover {
				.banner-title-wrap{
					width: 100%;
					.banner-title-content{
						opacity: 0;
						visibility: hidden;
					}
				}
				.banner-price {
					opacity: 0;
				}
				.banner-hover {
					opacity: 1;
				}
			}
		}
		@media (max-width:767px){
			
		}
	}
	// Style 3
	&.style_3 {
		.banner-content {
			position: relative;
			overflow: hidden;
			z-index: 1;
			.banner-overlay {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				&:before{
					content: '';
					height: 100%;
					width: 25%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: fade(@white, 50%);
					z-index: 1;
					.transition( all 0.7s ease-in-out);
				}
				&:after{
					content: '';
					height: 100%;
					width: 25%;
					position: absolute;
					top: 0;
					left: 25%;
					background-color: fade(@white, 50%);
					z-index: 1;
					.transition( all 0.7s ease-in-out);
				}
				.banner-title-wrap {
					&:before{
						content: '';
						height: 100%;
						width: 25%;
						position: absolute;
						top: 0;
						left: 50%;
						background-color: fade(@white, 50%);
						z-index: 1;
						.transition( all 0.7s ease-in-out);
						}
					&:after{
						content: '';
						height: 100%;
						width: 25%;
						position: absolute;
						top: 0;
						left: 75%;
						background-color: fade(@white, 50%);
						z-index: 1;
						.transition( all 0.7s ease-in-out);
					}
					.banner-title {
						font-size: 70px;
					    text-transform: uppercase;
					    text-align: center;
					    position: absolute;
					    top: 50%;
					    left: 50%;
					    margin: 5px;
					    .translate(-50%,-50%);
					    border: 4px solid transparent;
					    outline: 1px solid @white;
					    padding: 10px 40px;
					    mix-blend-mode: lighten;
					    font-weight: 300;
					    z-index: 2;
					    @media (max-width:1919px){
					    	font-size: 50px;
					    }
					    @media (min-width:768px) and (max-width:991px){
					    	font-size: 24px;
					    }
					    @media (max-width:479px){
					    	font-size: 28px;
					    }
					    &:first-word{
					    	font-size: 100px;
					    }
					    &:before{
					    	z-index: -1;
					    	content: '';
					    	position: absolute;
					    	top: 0;
					    	left: 0;
					    	width: 100%;
					    	height: 100%;
					    	background-color: @white;
					    }
					}
				}
			}
			&:hover{
				.banner-overlay{
					&:before{
						top: 100%;
					}
					&:after{
						top: -100%;
					}
					.banner-title-wrap{
						&:before{
							top: 100%;
						}
						&:after{
							top: -100%;
						}
					}
				}
			}
			 @media (max-width:767px){
		    	margin: 15px 0;
		    }
		}
		&.effect_2{
			.banner-content {
				img{
					@media (max-width:767px){
				    	width: 100%;
				    }
				}
				.banner-overlay {
					&:before{
						height: 25%;
						width: 100%;
						top: 0;
						left: 0;
						
					}
					&:after{
						height: 25%;
						width: 100%;
						top: 25%;
						left: 0;
						
					}
					.banner-title-wrap {
						&:before{
							height: 25%;
							width: 100%;
							top: 50%;
							left: 0;
							
							}
						&:after{
							height: 25%;
							width: 100%;
							top: 75%;
							left: 0;
							
						}
						.banner-title {
							line-height: 0.8;
							font-weight: bold;
							span{
								font-size: 36px;
							}
							@media (min-width:768px) and (max-width:991px){
								font-size: 36px !important;
								span{
									font-size: 24px;
								}
							}
							@media (max-width:479px){
								font-size: 36px !important;
								span{
									font-size: 24px;
								}
							}
						}
					}
				}
				&:hover{
					.banner-overlay{
						&:before{
							left: 100%;
						}
						&:after{
							left:  -100%;
						}
						.banner-title-wrap{
							&:before{
								left:  100%;
							}
							&:after{
								left: -100%;
							}
						}
					}
				}
			}
		}
		&.effect_3{
			.banner-content {
				.banner-overlay {
					&:before{
						height: 25%;
						width: 100%;
						top: 0;
						left: 0;
					}
					&:after{
						height: 25%;
						width: 100%;
						top: 25%;
						left: 0;
					}
					.banner-title-wrap {
						&:before{
							height: 25%;
							width: 100%;
							top: 50%;
							right: 0;
							left: auto;
							}
						&:after{
							height: 25%;
							width: 100%;
							top: 75%;
							right: 0;
							left: auto;
						}
						.banner-title {
							line-height: 0.8;
							font-weight: bold;
							span{
								font-size: 36px;
							}
							@media (min-width:768px) and (max-width:991px){
								font-size: 36px !important;
								span{
									font-size: 24px;
								}
							}
							@media (max-width:479px){
								font-size: 36px !important;
								span{
									font-size: 24px;
								}
							}
						}
					}
				}
				&:hover{
					.banner-overlay{
						&:before{
							width: 0;
							opacity: 0
						}
						&:after{
							width: 0;
							opacity: 0
						}
						.banner-title-wrap{
							&:before{
								width: 0;
								opacity: 0
							}
							&:after{
								width: 0;
								opacity: 0
							}
						}
					}
				}
			}
		}
	}
	// Style 4
	&.style_4 {
		.banner-content {
			position: relative;
			overflow: hidden;
			&:before{
				opacity: 0;
				content: '';
				background-color: fade(@black, 30%);
				position: absolute;;
				height: 100%;
				width: 100%;
				z-index: 1;
				top: 0;
				left: 0%;
				.transition( all 0.35s ease-in-out);
			}
			.banner-label-outer {
				position: absolute;
				top: 30px;
				left: 0;
				z-index: 2;
				span{
					position: relative;
					background-color: @white;
					color: lighten(@black, 40%);
					font-size: 18px;
					text-transform: uppercase;
					padding-left: 30px;
					padding-right: 20px;
					line-height: 50px;
					display: block;
					&:before{
						content: '';
						position: absolute;
						top: 0;
						left: 100%;
						width: 0;
						height: 0;
						border-top: 25px solid @white;
						border-right: 15px solid transparent;
					}
					&:after{
						content: '';
						position: absolute;
						bottom: 0;
						left: 100%;
						width: 0;
						height: 0;
						border-bottom: 25px solid @white;
						border-right: 15px solid transparent;
					}
				}
				@media (min-width:768px) and (max-width:991px){
					top: 10px;
				}
			}
			img{
				.transition( all 0.8s ease-in-out);
			}
			.banner-content-title {
				position: absolute;
				bottom: 30px;
				left: 30px;
				z-index: 2;
				white-space: nowrap;
				.banner-title{
					position: relative;
					margin: 10px 15px;
					z-index: 2;
					color: @white;
					font-size: 24px;
					text-transform: uppercase;
				}
				.overlay-bg{
					position: absolute;
					height: 100%;
					width: 40px;
					top: 0;
					left: 0;
					.transition( all 0.35s ease-in-out);
				}
				@media (min-width:768px) and (max-width:991px){
					bottom: 10px;
					left: 0;
					.banner-title{
						font-size: 18px;
					}
				}
				@media (max-width:479px){
					left: 0;	
					.banner-title{
						font-size: 18px;
					}
				}
			}
			&:hover{
				.banner-content-title{
					.overlay-bg{
						width: 100%;
					}
				}
				&:before{
					opacity: 1;
				}
				img{
					.scale(1.3);
				}
			}
			@media (max-width:767px){
				margin: 15px 0;
			}
		}
	}
	// Style 5
	&.style_5 {
		text-align: center;
		.banner-content {
			border: 1px solid transparent;
			position: relative;
			overflow: hidden;
			.transition( all 0.35s ease-in-out);
			a{
				&:before{
					opacity: 0;
					content: '\f0c1';
					height: 50px;
					width: 50px;
					background-color: fade(@black, 35%);
					line-height: 50px;
					border-radius: 100%;
					position: absolute;
					top: 40%;
					left: 50%;
					font-size: 18px;
					color: @white;
					text-align: center;
					.translate(-50%,-40%);
					font-family:FontAwesome;
					.transition( all 0.35s ease-in-out);
				}
				img{
					@media (max-width:767px){
				    	width: 100%;
				    }
				}
			}
			.banner-title {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				opacity: 1;
				color: @white;
				text-transform: uppercase;
				margin-bottom: 40px;
			}
			.banner-hover {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: -100px;
				opacity: 0;
				background-color: @white;
				.transition( all 0.5s ease-in-out);
				.banner-hover-title {
					color: @secondary_color;
					text-transform: uppercase;
					margin-bottom: 0;
					margin-top: 15px;
				}
				.banner-hover-sub-title{
					margin-bottom: 10px;
					color: fade(@secondary_color, 50%);
					.transition( all 0.35s ease-in-out);
					&:hover{
						color: @primary_color;
					}
				}
			}
		}
		&:hover {
			.banner-content {
				border: 1px solid @border_color;
				padding: 10px;
				a{
					&:before{
						opacity: 1;
					}
				}
				.banner-title {
					opacity: 0;
				}
				.banner-hover {
					opacity: 1;
					bottom: 0;
				}
			}
		}
	}
	// Style 6
	&.style_6 {
		text-align: center;
		.banner-content {
			border: 1px solid @border_color;
			padding: 10px;
			position: relative;
			overflow: hidden;
			.transition( all 0.35s ease-in-out);
			a{
				
			}
			.outer-banner-img{
				position: relative;
				overflow: hidden;
				&:before{
					opacity: 0;
					position: absolute;
					z-index: 1;
					opacity: 0;
					content: '';
					height: 100%;
					width: 100%;
					top: 0;
					left: 100%;
					background-color: fade(@black, 20%);
					.transition( all 0.7s ease-in-out);
				}
				&:after{
					opacity: 0;
					position: absolute;
					z-index: 1;
					opacity: 0;
					content: '';
					top: 0;
					left: -100%;
					height: 100%;
					width: 100%;
					background-color: fade(@black, 20%);
					.transition( all 0.7s ease-in-out);
				}
				.banner-img{
					&:before{
						opacity: 0;
						z-index: 2;
						content: '';
						position: absolute;
						left: 30%;
						top: 50%;
						.translate(-50%,-50%);
						width: 60px;
						height: 1px;
						background-color: @white;
						.transition( all 0.35s ease-in-out);
					}
					&:after{
						opacity: 0;
						z-index: 2;
						content: '';
						position: absolute;
						left: 50%;
						top: 30%;
						.translate(-50%,-50%);
						height: 60px;
						width: 1px;
						background-color: @white;
						.transition( all 0.35s ease-in-out);
					}
				}
			}
			.banner-title {
				margin: 0;
				position: relative;
				width: 100%;
				opacity: 1;
				color: lighten(@black, 50%);
				text-transform: uppercase;
				background-color: @white;
				padding: 30px 0 20px 0px;
				line-height: 1;
				font-size: 36px;
				.transition( all 0.35s ease-in-out);
				@media (min-width:768px) and (max-width:991px){
					font-size: 30px !important;
				}
				@media  (max-width:479px){
					font-size: 30px !important;
				}
			}
		}
		&:hover {
			.banner-content {
				a{
				}
				.outer-banner-img{
					&:before,&:after{
						opacity: 1;
						left: 0;
					}
					.banner-img{
						&:before,&:after{
							opacity: 1;
							top: 50%;
							left: 50%;
						}
					}
				}
				.banner-title {
					color: @secondary_color;
				}
				.banner-hover {
					opacity: 1;
					bottom: 0;
				}
			}
		}
	}
	// Style 7
	&.style_7 {
		position: relative;
		text-align: center;
		overflow: hidden;
		&:hover {
			.banner-content {
				.banner-title {

				}
				img {

				}
				.banner-overlay {

				}
			}
		}
		.banner-content {
			.banner-details {
				position: absolute;
				top: 50%;
				left: 50%;
				.translate(-50%,-50%);
				.banner-star{
					i{
						display:inline-block;
						color: @white;
						position: relative;
						padding: 0 7px;
						&:nth-child(2){
							top: -12px;
						}
					}
				}
				.banner-sub-title{
					color: @white;
					text-transform: uppercase;
					font-size: 24px;
					font-weight: normal;
					position: relative;
					&:before{
						content: '';
						position: absolute;
						width: 92px;
						height: 1px;
						background-color: @white;
						top: 50%;
						right: 0;
					}
					&:after{
						content: '';
						position: absolute;
						width: 92px;
						height: 1px;
						background-color: @white;
						top: 50%;
						left: 0;
					}
				}
				.banner-title{
					color: @secondary_color;
					font-weight: bold;
					position: relative;
					border: 4px solid transparent;
				    outline: 1px solid @white;
				    padding: 30px 80px;
				    z-index: 2;
				    font-size: 50px;
				    text-transform: uppercase;
				    &:before{
				    	z-index: -1;
					    content: '';
					    position: absolute;
					    top: 0;
					    left: 0;
					    width: 100%;
					    height: 100%;
					    background-color: @white;
				    }
				}
				.banner-description{
					font-size: 18px;
					color: @white;
					text-transform: uppercase;
				}
				a.banner-button{
					display: inline-block;
					padding: 10px 20px;
					background-color: @white;
					text-transform: uppercase;
					color: @secondary_color;
					font-weight: bold;
					.transition(all 0.35s ease);
					&:hover{}

				}
			}

			img {

			}
		}
	}
	// Style 8
	&.style_8 {
		position: relative;
		text-align: center;
		overflow: hidden;
		&:hover {
			.banner-content {
				.banner-title {

				}
				img {

				}
				.banner-overlay {

				}
			}
		}
		.banner-content {
			.banner-details {
				position: absolute;
				top: 50%;
				left: 50%;
				.translate(-50%,-50%);
			}

			img {

			}
		}
	}
	// Style 9
	&.style_9 {
		position: relative;
		text-align: center;
		overflow: hidden;
		&:hover {
			.banner-content {
				.banner-title {

				}
				img {

				}
				.banner-overlay {

				}
			}
		}
		.banner-content {
			.banner-details {
				position: absolute;
				top: 50%;
				left: 50%;
			}

			img {

			}
		}
	}
	// Style 10
	&.style_10 {
		position: relative;
		text-align: center;
		overflow: hidden;
		&:hover {
			.banner-content {
				.banner-title {

				}
				img {

				}
				.banner-overlay {

				}
			}
		}
		.banner-content {
			.banner-details {
				position: absolute;
				top: 50%;
				left: 50%;
			}

			img {

			}
		}
	}
	// Style 11
	&.style_11 {
		position: relative;
		text-align: center;
		overflow: hidden;
		&:hover {
			.banner-content {
				.banner-title {

				}
				img {

				}
				.banner-overlay {

				}
			}
		}
		.banner-content {
			.banner-details {
				position: absolute;
				top: 50%;
				left: 50%;
			}

			img {

			}
		}
	}
	// Style 12
	&.style_12 {
		.banner-content {
			position: relative;
			overflow: hidden;
			cursor: pointer;
			img{
				.transition( all 2s ease );
			}
			.banner-overlay {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 2;
				&:before{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					.transition(all 0.8s ease);
					z-index: 2;
					content: '';
					background-color: fade(@black, 20%);
				}
				.banner-title-wrap {
					.banner-title {
						font-weight: bold;
					    text-transform: uppercase;
					    text-align: center;
					    position: absolute;
					    top: 50%;
					    left: 50%;
					    margin: 5px;
					    color: @white;
					    .translate(-50%,-50%);
					    padding: 10px 30px;
					    z-index: 2;
					    border-top: 1px solid @white;
					    border-bottom: 1px solid @white; 
					    .transition(all 0.5s ease);
					    white-space: nowrap;
					    @media (min-width: 768px) and (max-width:991px){
					    	font-size: 18px !important;
					    }
					}
				}
			}
			&:hover{
				.banner-overlay{
					&:before{
						background-color: fade(@white, 70%);
						.scale(0.9);
					}  
					.banner-title-wrap{
						.banner-title{
							border-color: @secondary_color;
							color: @secondary_color;
						}
					}
				}
				img{
					.scale(1.3);
				}
			}
		}
		&.effect_2{
			padding: 10px;
			border: 1px solid @border_color;
			.transition(all 0.5s ease);
			.banner-content{
				.banner-overlay{
					&:before{
						background-color: fade(@white, 70%);
						opacity: 0;
						.scale(0.7);
					}
					&:after{
						content: '';
						background-color: fade(@black, 30%);
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						.transition(all 0.4s ease);
					}
				}
				&:hover{
					.banner-overlay{
						&:before{
							opacity: 1;
							.scale(1);
						}
						&:after{
							opacity: 0;
						}
					}
				}
			}
		}
		@media (max-width:767px){
	    	margin: 15px 0;
	    }
	}
}