@keyframes nav-fill {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}



.html_banner_img_control {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	overflow-x:hidden;
}


.html_banner_img_control_viewport {
	position: relative;
	width: 100%;
	height: 100%;
}

.html_banner_img_control_track {
	padding: 0;
	margin: 0;
	list-style: none;
}

.html_banner_img_control_img {
	position: absolute;
	display: flex;
/*	padding: 2rem 4rem;*/
	padding:2rem 1rem;
	top: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transition: opacity 1s linear;
}

.html_banner_img_control_img_content {
	z-index: 5;
}

.html_banner_img_control_img.showing {
	opacity: 1;
}


.html_banner_img_control_viewport button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: none;
	outline: none;
}

	.html_banner_img_control_viewport button:nth-child(1) {
		left: 0;
	}

	.html_banner_img_control_viewport button:nth-child(2)::before,
	.html_banner_img_control_viewport button:last-child::before {
		color: white;
		font-size: 6rem;
		cursor:pointer;
	}

	.html_banner_img_control_viewport button:nth-child(2)::before {
		content: '\2039';
	}

	.html_banner_img_control_viewport button:last-child::before {
		content: '\203A';
	}

	.html_banner_img_control_viewport button:last-child {
		right: 0;
	}

.html_banner_img_control_nav {
	position: absolute;
	padding: 0 4rem;
	bottom: 0;
	height: 2.65rem;
	width: 100%;
}

.html_banner_img_control_indicators {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}

.html_banner_img_control_nav_indicator {
	/*width: 4rem;*/
	padding: 0;
	flex-grow:1;
	margin: 0 1.5rem;
	max-width:8rem;
}

	.html_banner_img_control_nav_indicator button {
		position: relative;
		border: none;
		width: 100%;
		padding: 0;
		outline: none;
		height:.33rem;
		border-radius: 6px;
		cursor:pointer;
		background-color:rgba(255,255,255,.33);
	}

		.html_banner_img_control_nav_indicator button:active {
			border: none;
		}

		.html_banner_img_control_nav_indicator button span {
			display: block;
			height: .33rem;
			width: 0;
			border-radius: 6px;
			background-color: white;
			cursor:pointer;
		}

	.html_banner_img_control_nav_indicator.showing button span {
		animation: nav-fill .75s forwards;
	}

@media screen and (min-width:900px) {
	.html_banner_img_control_img {
		/*background-position:left;*/
		padding:2rem 4rem;
	}
}