// --------------------------------------------------------------------------------------------
// BANERS
// --------------------------------------------------------------------------------------------

.promo-banner {
	position: relative;
	margin-bottom: 30px;
	overflow: hidden;

	.wrapper-content-baner {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index:2;
	}

	.banner-inner {
		position: absolute;
		top:0;
		left:0;
		right: 0;
		padding: 20px;
		z-index:1;

		h1, h2, h3, h4, h5, h6 {
			margin-bottom: 20px;
			line-height: 1.3;
		}

		p {
			margin-bottom: 20px;

			&:last-child,
			&:first-child {
				margin-bottom:0;
			}
		}

		.btn {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	&.increased-padding {
		
		.banner-inner {
			padding: 6%;
		}
	}

	// ------------------------------------------
	// VERTICAL ALIGN MIDDLE
	// ------------------------------------------

	&.vertical-alignment-middle {

		.banner-inner {
			top: 50%;
			transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);

		}
	}

	// ------------------------------------------
	// VERTICAL ALIGN BOTTOM
	// ------------------------------------------

	&.vertical-alignment-bottom {

		.banner-inner {
			top: 100%;
			transform: translateY(-100%);
			-ms-transform: translateY(-100%);
			-webkit-transform: translateY(-100%);
		}
	}

	// ------------------------------------------
	// HOVER EFFECT 1
	// ------------------------------------------

	&.hover-1 {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		.main-wrapp-img {
			margin:-1px;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;

			.banner-image {
				-webkit-transition: all .6s;
				transition: all .6s;
			}
		}
	
		&:hover > .main-wrapp-img .banner-image {
			transform: scale(1.1);
			-ms-transform: scale(1.1);
			-webkit-transform: scale(1.1);
		}
	}

	// ------------------------------------------
	// HOVER EFFECT 2
	// ------------------------------------------

	&.hover-2 {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		.main-wrapp-img {
			margin:-1px;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;

			.banner-image {
				-webkit-transition:all 1s;
				transition:all 1s;
			}
		}

		.banner-inner {
			padding: 30px;
		}
		
		&.color-scheme-dark {

			.wrapper-content-baner {

				&:after,
				&:before {
					border-color:rgba(0, 0, 0, 0.5);
				}
			}
		}

		.wrapper-content-baner {

			&:before,
			&:after {
				position: absolute;
				top: 20px;
				right: 20px;
				bottom: 20px;
				left: 20px;
				content: '';
				opacity: 0;
				-webkit-transition: opacity .45s, -webkit-transform .45s;
				transition: opacity .45s, transform .45s;
			}

			&:after {
				border-right: 1px solid rgba(255, 255, 255, 0.5);
				border-left: 1px solid rgba(255, 255, 255, 0.5);
				-webkit-transform: scale(1, 0);
				-ms-transform: scale(1, 0);
				transform: scale(1, 0);
			}

			&:before {
				border-top: 1px solid rgba(255, 255, 255, 0.5);
				border-bottom: 1px solid rgba(255, 255, 255, 0.5);
				-webkit-transform: scale(0, 1);
				-ms-transform: scale(0, 1);
				transform: scale(0, 1);
			}
		}
	
		&:hover > .main-wrapp-img .banner-image {
			transform: scale(1.1);
			-ms-transform: scale(1.1);
			-webkit-transform: scale(1.1);
		}

		&:hover > .wrapper-content-baner:after,
		&:hover > .wrapper-content-baner:before {
			opacity: 1;
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
		}
	}

	// ------------------------------------------
	// HOVER EFFECT 2
	// ------------------------------------------

	&.hover-3 {

		.main-wrapp-img {

			.banner-image {
				-webkit-transition:all .3s;
				transition:all .3s;
			}
		}

		.banner-inner {
			visibility: hidden;
			opacity: 0;

			-webkit-transition:all .3s;
			transition:all .3s;
		}

		&.vertical-alignment-bottom {

			.banner-image {
				margin-bottom:-20px;
			}

			.banner-inner {
				top:110%;
			}

			&:hover {

				.banner-image {
					-webkit-transform: translateY(-20px);
					-ms-transform: translateY(-20px);
					transform: translateY(-20px);
				}

				> .wrapper-content-baner .banner-inner {
					top: 100%;
				}
			}
		}

		&.vertical-alignment-middle {

			.banner-image {
				margin-bottom:-20px;
			}

			.banner-inner {
				top:55%;
			}

			&:hover {

				.banner-image {
					-webkit-transform: translateY(-20px);
					-ms-transform: translateY(-20px);
					transform: translateY(-20px);
				}

				> .wrapper-content-baner .banner-inner {
					top: 50%;
				}
			}

		}

		&.vertical-alignment-top {

			.banner-image {
				margin-top:-20px;
			}

			.banner-inner {
				top:-20%;
			}

			&:hover {

				.banner-image {
					-webkit-transform: translateY(20px);
					-ms-transform: translateY(20px);
					transform: translateY(20px);
				}

				> .wrapper-content-baner .banner-inner {
					top: 0%;
				}
			}
		}
	
		&:hover > .wrapper-content-baner .banner-inner {
			visibility: visible;
			opacity: 1;
		}
	}

	// ------------------------------------------
	// STYLE BANER 1
	// ------------------------------------------

	&.banner-1 {

		.banner-inner {
			background: rgba(0,0,0,.5);
		}

		&.color-scheme-dark {

			.banner-inner {
				background: rgba(255,255,255,.5);
			}
		}

		&.hover-2 {
		
			.banner-inner {
				padding: 15px;
				margin: 0 25px;
			}

			&.vertical-alignment-bottom {

				.banner-inner {
					margin-top: -25px;
				}
			}

			&.vertical-alignment-top {

				.banner-inner {
					margin-top: 25px;
				}
			}
		}
	}

	// ------------------------------------------
	// STYLE BANER 2
	// ------------------------------------------

	&.banner-2 {
		background-color: #000000;

		.banner-image {
			opacity: 0.7;
		}

		&.color-scheme-dark {
			background-color: #ffffff;
		}

		&.hover-1,
		&.hover-2,
		&.hover-3 {

			&:hover {

				.banner-image {
					opacity: 0.4;
				}
			}
		}
	}

	// ------------------------------------------
	// STYLE BANER 3,4
	// ------------------------------------------

	&.banner-3,
	&.banner-4 {

	.banner-inner {
		padding: 30px;
	}

	&.color-scheme-dark {

		.wrapper-content-baner {

			&:after {
				border-color:rgba(0, 0, 0, 0.5);
			}
		}
	}
		
	.wrapper-content-baner {

		&:after {
			position: absolute;
			top: 20px;
			right: 20px;
			bottom: 20px;
			left: 20px;
			content: '';
			border:1px solid rgba(255, 255, 255, 0.5);
		}
	}

	&.hover-2 {

		.wrapper-content-baner {
				
			&:after {
				opacity:1;
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}

			&:before {
				display:none;
			}
		}

		&:hover > .wrapper-content-baner:after {
			opacity: 1;
		}
	}
	}

	// ------------------------------------------
	// STYLE BANER 4
	// ------------------------------------------

	&.banner-4 {

		background-color: #000000;

		.banner-image {
			opacity: 0.6;
		}

		&.color-scheme-dark {
			background-color: #ffffff;

			.banner-image {
				opacity: 0.7;
			}
		}
	}

	// ------------------------------------------
	// STYLE BANER 5
	// ------------------------------------------

	&.banner-5 {

		.wrapper-content-baner {
			width:auto;
			height:auto;
			top:20px;
			bottom:20px;
			left:20px;
			right:20px;
			background-color: rgba(0, 0, 0, 0.6);
		}

		&.color-scheme-dark {

			.wrapper-content-baner {
				background-color:rgba(255, 255, 255, 0.8);
			}
		}
	}
}


// ------------------------------------------
// BANNER CAROUSEL
// ------------------------------------------

.banners-carousel-wrapper {
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 30px;

	.owl-item {
		padding-left: 15px;
		padding-right: 15px;
	}
}