.site-banner {
	position: relative;
	
	.banner-item, .item, .item {
		position: relative;

		img {
			width: 100%;
		}

		.banner-caption {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			justify-content: flex-end;
			align-items: center;
			flex-direction: column;
			bottom: 0;
			background: rgba($black_color, 0.5);
			flex: 1;
			display: flex;
			padding-bottom: 120px;
			text-align: center;
			font-family: $font_secondary;

			.container {
				width: 100%;
			}//.container

			.sub-title {
				color: $white_color;
				font-size: 1.1112em;
				display: block;
				margin-bottom: 20px;
				letter-spacing: 1px;
			}

			.banner-desc {
				font-family: $font_primary;
				color: $white_color;
			}

			.banner-caption-inner {
				max-width: 680px;
				padding-bottom: 112px;
				position: relative;
				margin-left: auto;
				margin-right: auto;

				&:after {
					content: "";
					background-image: url('images/flower-bottom.png');
					background-repeat: no-repeat;
					background-position: bottom;
					background-size: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					width: 100%;
					height: 112px;
				}
			}//.banner-caption-inner

			.title, .banner-title {
				margin: 0 0 30px 0;
				font-weight: 400;
				color: $white_color;
				font-size: 5em;
				line-height: 1em;

				a {
					color: $white_color;

					&:hover {
						opacity: 0.75;
						filter: alpha(opacity=75);
					}
				}

				svg {
					margin-left: auto;
					margin-right: auto;
				}

			}//.title

			.posted-on {
				font-size: 1.6667em;
				line-height: 1.27em;
				color: $white_color;

				a {
					color: $white_color;

					&:hover {
						color: $primary_color;
					}
				}
			}//.posted-on
		}//.banner-caption
	}//.banner-item, .item

	.banner-wrap {
		
		.owl-nav {
			position: absolute;
			bottom: -1px;
			right: 0;
			background: $white_color;
			text-align: center;
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			padding: 10px 0;

			[class*="owl-"] {
				width: 70px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>');
				background-repeat: no-repeat;
				background-size: 13px;
				background-position: center;
				text-indent: 120px;
				overflow: hidden;

				&:hover {
					opacity: 0.75;
					filter: alpha(opacity=75);
				}
			}//[class*="owl-"]

			.owl-next {
				background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>');
			}

			.owl-prev + .owl-next {
				border-left: 1px solid rgba($black-color, 0.1);
			}
		}//.owl-nav

		.owl-dots {
			position: absolute;
			bottom: -1px;
			left: 0;
			padding: 0 20px;
			background: $white_color;
			display: flex;
			flex-wrap: wrap;
			min-height: 70px;
			align-items: center;

			.owl-dot {
				display: inline-block;
				padding: 8px !important;
				line-height: 0;
				height: auto;

				span {
					background: $primary_color;
					width: 12px;
					height: 12px;
					@include border-radius(100%);
					display: inline-block;
					border: 2px solid transparent;
					@include transition(all ease 0.35s);
				}

				&:hover > span, &.active > span {
					background: none;
					border-color: #121212;
				}
			}
		}//.owl-dots
	}//.banner-wrap

	.scroll-down {
		background: none;
		padding: 0;
		border: 2px solid #fff;
		width: 23px;
		height: 39px;
		display: block;
		position: absolute;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9;
		border-radius: 50px;
		cursor: pointer;

		&::before {
			content: "";
			width: 3px;
			height: 3px;
			background: $white_color;
			position: absolute;
			top: 10px;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 100%;
			box-shadow: 0 6px rgba($white_color, 0.5), 0 12px rgba($white_color, 0.2);
		}

		&:hover {
			opacity: 0.75;
			filter: alpha(opacity=75);
		}
	}//.scroll-down

	&.slider-two {
		padding: 30px;

		.banner-item, .item {
			
			.banner-caption {
				justify-content: center;

				.banner-caption-inner {
					padding-top: 140px;
					padding-bottom: 140px;

					&:before {
						content: "";
						background-image: url('images/flower-top.png');
						background-repeat: no-repeat;
						background-position: top;
						// background-size: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						width: 100%;
						height: 112px;
					}
				}//.banner-caption-inner
			}//.banner-caption
		}//.banner-item, .item

		.scroll-down {
			bottom: 50px;
		}
	}//&.slider-two

	&.slider-three {
		
		.banner-desc {
			font-family: $font_primary;
			font-size: 1.3333em;
			color: $white_color;
			line-height: 1.75em;
			margin-top: 10px;
		}//.banner-desc

		.banner-item, .item {

			.banner-countdown {
				display: flex;
				flex: 1;
				flex-wrap: wrap;
				justify-content: center;
				margin: 40px auto 0 auto;
				max-width: 920px;

				.countdown-block {
					min-width: 230px;
					text-align: center;
					padding: 10px;
					display: flex;
					flex: 1;
					flex-direction: column;

					span {
						font-size: 2.6665em;
						font-family: $font_primary;
						font-weight: 700;
						color: $white_color;
						letter-spacing: 1px;
						display: block;
						line-height: 1.25em;
					}

					.countdown-title {
						margin-top: 20px;
						margin-bottom: 0;
						color: $white_color;
						font-weight: 400;
						font-size: 2.6665em;
						letter-spacing: 1px;

						svg {
							margin: 0 auto 15px auto;
						}
					}
				}//.countdown-block
			}//.banner-countdown
		}//.banner-item, .item
	}//&.slider-three

	&.slider-four {
		
		.banner-item, .item {
			
			.banner-caption {
				justify-content: center;
				background-image: url(images/overlay-pattern.png);

				.banner-caption-inner {
					padding-bottom: 0;

					&:after {
						display: none;
					}
			    }//.banner-caption-inner

			    .sub-title {
			    	font-size: 1.6667em;
			    	color: $white_color;
			    	margin-bottom: 20px;
			    	display: block;
			    }

			    .title {
			    	font-size: 4em;

			    	svg {
			    		margin: 25px auto 0 auto;

			    		.a {
			    			stroke: #fff;
			    		}
			    	}
			    }

			    .banner-desc {
			    	font-family: $font_primary;
			    	color: $white_color;
			    	font-size: 0.8888em;
			    	margin-top: 30px;

			    	p {
			    		margin-top: 10px;
			    		margin-bottom: 0;
			    	}

			    	h5 {
			    		margin-top: 10px;
			    		margin-bottom: 0;
			    		color: $white_color;
			    		font-size: 1.25em;
			    	}
				}//.banner-desc
			}//.banner-caption
		}//.banner-item, .item
	}//&.slider-four

	&.video-banner {

		#wp-custom-header {
			position: relative;
			height: 0;
			padding-top: 56.25%;

			&::before {
				content: "";
				background: rgba($black_color, 0.05);
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			iframe, 
			video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.wp-custom-header-video-button {
				position: absolute;
				bottom: 10px;
				right: 10px;
				padding: 0;
				width: 40px;
				height: 40px;
				margin: auto;
				background: none;
				border: none;
				border-radius: 100%;
				box-shadow: none;
				text-indent: 100px;
				overflow: hidden;
				white-space: nowrap;
				z-index: 99;

				&::before {
					content: "";
					background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23fff" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm-16 328c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v160zm112 0c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v160z"></path></svg>');
					background-repeat: no-repeat;
					position: absolute;
					width: 40px;
					height: 40px;
					top: 0;
					left: 0;
					opacity: 0.8;
					filter: alpha(opacity=80);
					-webkit-transition: all ease 0.35s;
					-moz-transition: all ease 0.35s;
					transition: all ease 0.35s;
				}

				&.wp-custom-header-video-pause {

					&::before {
						background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path fill="%23fff" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path></svg>');
					}

				}//&.wp-custom-header-video-pause

				&:hover {
					
					&::before {
						opacity: 1;
						filter: alpha(opacity=100);
					}

				}//&:hover

			}//.wp-custom-header-video-button

		}//#wp-custom-header

	}//&.video-banner

}//.site-banner

@include media(xl) {
	.site-banner {
		.banner-item, .item {
			img {
				height: 750px;
				object-fit: cover;
			}

			.banner-caption {

				.title {
					font-size: 4em;
				}//.title
			}//.banner-caption
		}//.banner-item, .item
	}//.site-banner
}//@include media(xl)

@include media(sm) {
	.site-banner {
		.banner-item, .item {
			img {
				height: 550px;
			}

			.banner-caption {

				.title {
					font-size: 3.1111em;
				}//.title
			}//.banner-caption
		}//.banner-item, .item

		&.slider-three {

			.banner-desc {
				font-size: 1em;
			}//.banner-desc

			.banner-caption {
				padding-bottom: 70px;

				.banner-caption-inner {
					padding-bottom: 85px;
				}//.banner-caption-inner
			}//.banner-caption
			
			.banner-item, .item {
				
				img {
					height: 600px;
				}


				.banner-countdown {
					margin-top: 20px;

					.countdown-block {
						min-width: 25%;

						span {
							font-size: 1.6667em;
						}

						.countdown-title {
							font-size: 1.6667em;
						}//.countdown-title
					}//.countdown-block
				}//.banner-countdown
			}//.banner-item, .item
		}//&.slider-three
	}//.site-banner
}//@include media(sm)

@media screen and (max-width: 899px) {
	
	.site-banner {

		&.video-banner {

			#wp-custom-header {
				height: auto;
				padding-top: 0;
			}//#wp-custom-header

		}//.video-banner

	}//.site-banner

}

@include media(xs) {
	.site-banner {

		.banner-wrap {
			
			.owl-nav {
				padding: 0;
				right: 10px;
				bottom: 10px;

				[class*="owl-"] {
					width: 36px;
					height: 36px;
					background-size: 10px;
			    }//[class*="owl-"]

			    .owl-prev + .owl-next {
			    	border-left-color: $black_color;
			    }
			}//.owl-nav
		}//.banner-wrap
		
		.banner-item, .item {

			.banner-caption {
				
				.container {
					max-width: 100%;
				}
				
				.banner-caption-inner {
					padding-bottom: 20%;
				}//.banner-caption-inner

				.title, 
				.banner-title {
					font-size: 2.2223em;
				}
			}//.banner-caption
		}//.banner-item, .item

		&.slider-two {
			padding: 15px;

			.banner-item, .item {

				.banner-caption {

					.banner-caption-inner {
						padding-bottom: 55px;
						padding-top: 55px;
					}//.banner-caption-inner
				}//.banner-caption
		    }//.banner-item, .item

		    .scroll-down {
		    	bottom: 30px;
		    }
		}//&.slider-two

		&.slider-three {

			.banner-caption {

				.banner-caption-inner {
					padding-bottom: 0;

					&:after {
						display: none;
					}
				}//.banner-caption-inner
			}//.banner-caption

			.banner-item, .item {

				.banner-countdown {

					.countdown-block {
						min-width: 50%;

						.countdown-title {
							margin-top: 15px;
						}//.countdown-title
					}//.countdown-block
				}//.banner-countdown
			}//.banner-item, .item
		}//&.slider-three

		&.slider-four {
			
			.banner-item, .item {
				
				.banner-caption {
					padding-bottom: 70px;
					
					.sub-title {
						font-size: 1.1112em;
						margin-bottom: 10px;
					}

					.title {
						font-size: 2em;

						svg {
							margin-top: 15px;
						}
					}

					.banner-desc {
						margin-top: 15px;
					}
				}//.banner-caption
			}//.banner-item, .item
		}//&.slider-four
	}//.site-banner
}//@include media(xs)