#banner {
	height: 100%;

	ul {
		height: 100%;

		li {
			position: relative;
			//height:945px;
			height: 100%;
			width: 100%;
			overflow: hidden;

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: url(../img/layout/banner-mask.png) repeat-x left
					bottom;
				pointer-events: none;
			}

			.text {
				position: relative;
				z-index: 2;
				height: 100%;
				color: #fff;

				.wrapper {
					position: absolute;
					top: 50%;
					left: 100px;
					transform: translateY(-50%);
					max-width: 48.22%;
					padding-right: 50px;
				}

				span {
					display: inline-block;
					font-size: 20px;
					text-transform: uppercase;
					letter-spacing: 2px;
					margin-bottom: 10px;
					transform: translateX(-1000px);
					opacity: 0;
					transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.07)
						200ms;
				}

				h2 {
					font-size: 50px;
					line-height: 70px;
					font-weight: 700;
					transform: translateX(-1000px);
					opacity: 0;
					transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.07)
						450ms;
				}

				.link {
					transform: translateX(-1000px);
					opacity: 0;
					transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.07)
						700ms;
				}
			}

			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				min-width: 100%;
				width: auto;
				max-width: none;
				height: auto;
				min-height: 100%;
			}
		}

		.active {
			.text {
				span {
					transform: translateX(0);
					opacity: 1;
				}

				h2 {
					transform: translateX(0);
					opacity: 1;
				}

				.link {
					transform: translateX(0);
					opacity: 1;
				}
			}
		}
	}

	.owl-stage-outer,
	.owl-stage,
	.owl-item {
		height: 100%;
	}

	.owl-dots {
		position: absolute;
		top: 50%;
		left: 25px;
		transform: translateY(-50%);

		.owl-dot {
			display: block;
			width: 48px;
			height: 48px;
			border-radius: 100%;
			position: relative;
			background: transparent;
			transition: all 300ms ease-out;
			margin: 15px 0;

			&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 21%;
				height: 21%;
				border-radius: 100%;
				transform: translate(-50%, -50%);
				background: #fff;
			}

			&.active {
				background: rgba(255, 255, 255, 0.5);
			}
		}
	}
}

@media screen and (min-width: 1540px) {
	#banner ul li .text .wrapper {
		left: 50px;
	}
}
