@charset "utf-8";
/* CSS Document */
.banner_area{ overflow: hidden;}
.flexslider { width: 100%; margin: 0 auto; box-shadow: none; border: 0px; overflow: hidden; border-radius: 0px;}
.flexslider li { position: relative;}
.flexslider li .meta {
	position: absolute;
	top: 35%;
	left: 10%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.flexslider li h1 {
	padding: 0px;
	margin: 0px;
	line-height: 72px;
	font-size: 72px;
	font-weight: 900;
	color: var(--green);
}

.flexslider li h2 { 
	font-size: 40px;
	font-weight: 900;
	color: var(--red);
}
.flexslider li h2 span{ display: block; color: #57440b; font-size: 28px;}
.flexslider li .icon_link {
	display: flex;
	flex-direction: row;
	margin-top: 60px;
}

.flexslider li h1,
.flexslider li h2,
.flexslider li .icon_link .banner_more,
.flexslider li .icon_link .join_us {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft;
	

}
.flexslider li .icon_link .join_us{ color: #fff;}
.flexslider li.flex-active-slide .meta h1,
.flexslider li.flex-active-slide .meta h2,
.flexslider li.flex-active-slide .meta .icon_link .banner_more,
.flexslider li.flex-active-slide .meta .icon_link .join_us {
		-webkit-animation-delay: .8s;
		animation-delay: .8s;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
}

.flexslider li.flex-active-slide .meta h2 {
		-webkit-animation-delay: .5s;
		animation-delay: .5s;
}

.flexslider li.flex-active-slide .meta .icon_link .banner_more {
		-webkit-animation-delay: .6s;
		animation-delay: .6s;
}

.flexslider li.flex-active-slide .meta .icon_link .join_us {
		-webkit-animation-delay: .8s;
		animation-delay: .8s;
}
/****/

.banner_more, .join_us{ width: 175px; text-align: center; box-shadow: -5px 5px 0px #ae987347; margin-right: 25px;}
.banner_more a, .join_us a{ text-decoration: none; display: block; font-size: 28px; font-weight: 900; color: #fff; line-height: 47px;}
.banner_more a{ background-color: var(--green);}
.banner_more a:hover{ background-color: #01622b;}
.join_us a{ background-color: var(--gold);}
.join_us a:hover{ background-color: #7A3D08;}
/****/
.flex-direction-nav {
	position: absolute;
	width: 90px;
	top: inherit;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
	right: 0px;
	bottom: 60px;
}

.flex-direction-nav a {
	text-decoration: none;
	display: block;
	width: 30px;
	height: 30px;
	background-color: var(--green);
	margin: 0;
	position: absolute;
	z-index: 10;
	opacity: 0.8;
	overflow: hidden;
	cursor: pointer;
	color: #fff;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
}

.flex-direction-nav .flex-prev {
		text-align: left;
		left: 0;
}

.flex-direction-nav .flex-next {
		text-align: right;
		right:0;
}

.flexslider:hover .flex-prev {
		left: 0px;
}

.flexslider:hover .flex-next {
		right: 0;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
		opacity: 1;
}

.flex-direction-nav a:before {
	color: #fff;
	font-family: bootstrap-icons !important;
	content: '\F284';
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 0;
	padding: 2px;
	font-size: 19px;
	line-height: 27px;
}

.flex-direction-nav a.flex-next:before {
	font-family: bootstrap-icons !important;
	content: '\F285';
}


/****/
@-webkit-keyframes fadeInLeft {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(-400%, 0, 0);
				transform: translate3d(-400%, 0, 0);
		}
		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@keyframes fadeInLeft {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}
		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@-webkit-keyframes fadeOutLeft {
		0% {
				opacity: 1;
		}
		100% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}
}

@keyframes fadeOutLeft {
		0% {
				opacity: 1;
		}
		100% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}
}
/****/


/****/
@media all and (max-width: 1536px) {
	.flexslider li h1{ font-size: 300%;}
	.flexslider li h2{ font-size: 150%;}
	.flexslider li h2 span{ font-size: 100%;}
}
@media all and (max-width: 1024px) {
	.banner_area{ margin-top: 90px;}
	.flexslider li .meta{ top: 15%; left: 6%;}
	.flexslider li .icon_link{ margin-top: 30px;}
	
}

@media all and (max-width: 991px) {
	.flexslider li .meta{ left: 5%;}
	.banner_area { margin-top: 50px;}
}
 @media screen and (max-width: 576px) {
	 .flexslider li .meta{top: 20%;}
	 .flexslider li h1 { font-size: 200%;}
	 .flexslider li h2 { font-size: 100%;}
	  .flexslider li h2 span { font-size: 90%;}
	 .flexslider li .icon_link{margin-top: 30px;}
	 .banner_more a, .join_us a{font-size: 20px; font-weight: 700; line-height: 40px;}
	 .banner_more, .join_us{ max-width: 120px;}
}
@media all and (max-width: 540px) {
}
@media all and (max-width: 430px) {
	.flexslider li .meta { top: 28%;}
	.flexslider li .icon_link { margin-top: 0px;}
	.flex-direction-nav{bottom: 40px;}
	.flexslider li h1 { font-size: 150%; line-height: 30px;}
	.banner_more a, .join_us a{ font-size: 16px; line-height: 28px; font-weight: 700;}
	.banner_more, .join_us { max-width: 85px; }
	.flex-direction-nav{ margin-right: 10px;}
}

@media all and (max-width: 360px) {
	.flexslider li h1 { font-size: 150%; font-weight: 600;}
	 .flexslider li h2 { font-size: 90%;  font-weight: 600; margin: 5px 0px;}
	  .flexslider li h2 span { font-size: 80%;  font-weight: 600;}
	
}
@media all and (max-width: 280px) {
	.banner_area { overflow: hidden;}
	.flexslider li .meta{top: 8%;}
	 .flexslider li h1 { font-size: 100%;}
	 .flexslider li h2 { font-size: 90%; margin: 0px auto;}
	  .flexslider li h2 span { font-size: 80%;}
}

 