@charset "UTF-8";


/* =================================== */
/* Fixes for pages with sub nav dropdown
/* Comment out if not needed
/* =================================== */

/* h1 {
	margin-top: -88px !important;
	font-size: 2.0em;
	font-weight: normal;
	font-style: normal;
}
H2 {
	font-size: 1.7em;
	font-weight: normal;
	font-style: normal;
}
.nav-structure-a {
	margin-top: 35px !important;
}
ul.toggle-content {
	background-color: #fff;
}
ul.toggle-content li {
	margin-bottom: 0 !important;
}
#main .main-contents .nav-structure-a ul.toggle-content li a {
	color: #000;
	text-decoration: none;
}
#main .main-contents .nav-structure-a ul.toggle-content li a:hover {
	color: #a20b1a;
}


@media screen and (max-width: 767px) {
	h1 {
		margin-top: 0px !important;
		width: 100%;
	}
} */

/* =================================== */
/* KC custom styles
/* =================================== */

.banner-new-6 {
	height: 486px; /* height: 33vw; */
	overflow: hidden;
	position: relative;
/* 	background-attachment: fixed; */
	background-size:cover !important;
	background-position: 50% -130px;
	background-repeat: no-repeat;
	transition: 0s linear;
    transition-property: background-position;

	flex: 1;
  display: flex !important;
  flex-direction: column;
}
.above-txt {
	flex-grow: 1;
	
}
.banner-new-6 .section-inner {
	padding-bottom: 15px !important;
	/* padding-top: 11em !important; */
	flex: 1;
	display: flex !important;
	flex-direction: column;
	width: 100%;
}
.banner-txt {
	position: relative;
	width: 50%;
	z-index: 999;
    height: auto;
	/* background: #eee; */
}

.banner-txt h1 {
	font-size: 2.2em;
	width: 70%;
	position: relative;
	left: -300px;
	opacity: 0;
	animation: slide 1.5s 0.5s forwards ease-in-out, fade 2s 1.5s forwards ease-out;

}
.banner-txt .subtext {
color: #7f7f7e;
position: relative;
	left: -300px;
	opacity: 0;
	animation: slide 1.5s 0.8s forwards ease-in-out, fade 2s 1.5s forwards ease-out;

}
.banner-mask {
	height: 486px; /* height: 33vw; */
	width: 100%;
	 background-size: calc(486px * 5); /* (986 / 4771 * 100vw) calc(33vw * 5) */
	/* (img-height / img-width * container-width)  4771 x 986 */
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	top: 0;
	/* background-size: 105.8%; */
	background-color: rgba(252, 252, 252, 0.01);
            animation: fadeIt 5s ease-in-out;
}
@keyframes fade {
	0% {  opacity: 0; }
	100% { opacity: 1; }
}
@keyframes slide {
	0% { left: -300px;}
	100% { left: 0px;}
}
@keyframes nofade {
	0% {  opacity: 1; }
	100% { opacity: 1; }
}
@keyframes noslide {
	0% { left: 0px;}
	100% { left: 0px;}
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  100% { background-color: rgba(252, 252, 252, 0.01); }
}


@media screen and (min-width : 1450px) {


}

@media screen and (max-width : 1150px) {
	

}
@media screen and (max-width : 992px) {
	.banner-new-6 {
		height: 33vw; 
	}	
	.banner-mask {
		height: 33vw; 
		background-size: calc(33vw * 5); /* (986 / 4771 * 100vw) calc(33vw * 5) */
	}
	.banner-txt .subtext {
		display: none;
	}
	.banner-txt h1 {
		width: 70%;
		font-size: 2.6em;
		font-weight: normal;
	}
	.banner-new-6 .section-inner {
		margin: 0;
	}	
}
@media screen and (max-width : 850px) {

	
}
@media screen and (max-width : 768px) {
	
	.banner-new-6 .section-inner {
		padding-bottom: 0px !important;
	}
	.banner-new-6 {
		height: auto;
		background-size:100% !important;
	}
	.banner-txt {
		width: 100%;
	}
	.banner-txt h1 {
	width: 100%;
	padding-top: 100px;
	text-shadow: 0px 9px 10px white;
	animation: noslide 1.5s 0s forwards ease-in-out, nofade 2s 0s forwards ease-out;
	}
	.banner-txt .subtext {
		display: block;
		animation: noslide 1.5s 0s forwards ease-in-out, nofade 2s 0s forwards ease-out;
	}
	.banner-mask {
	height: 650px;
	background-image:linear-gradient(rgba(255,255,255,0.00) 0%, #ffffff 41.39%) !important ;
	}
}
@media screen and (max-width : 580px) {
	
}
@media screen and (max-width : 480px) {
	.banner-new-6 {
		height: auto;
		background-size:140% !important;
	}
	.banner-txt {
		width: 100%;
	}
	.banner-txt h1 {
	width: 100%;
	text-shadow: 0px 9px 10px white;
	}
	.banner-mask {
	height: 650px;
	background-image:linear-gradient(rgba(255,255,255,0.00) 0%, #ffffff 41.39%) !important ;
	}
}
@media screen and (max-width : 380px) {

}