/*General CSS*/
.hero-wrapper img {
	width: 100%;
	height: 100%;
	margin: 0px;
}
/* End General CSS*/

/*Full width CSS*/

.hero-full {
	padding: 0;
  margin: 0;
  position: relative;
}
.hero-full .field--type-image {
    float: left;
    margin: 0;
}
.hero-full .hero-content {
	display: none;
}
.hero-full .hero-image img {
	width: 100%;
	flex: 100%;
	max-width: 100%;
}
.hero-full .hero-button {
	position: absolute;
	bottom: 21px;
	left: 15%;
	background-color: #FFE41E;
	border: none;
	padding: 10px 15px;
}
.hero-full .hero-button a {
	color: #000;
	text-transform: capitalize;
	font-size: 15px;
	font-weight: 500;
	
}
.hero-full .hero-button:hover {
	background-color: #fff;
}

/*End Full width CSS*/


/*Overlap CSS*/
.hero-overlap .hero-text {
	display: none;
}
.hero-overlap .hero-type {
	color: #FFE41E;
	text-transform: uppercase;
	font-size: 0.65em;
	font-weight: bold;
	padding-bottom: 10px;
}
.hero-overlap .hero-header {
	font-size: 2.5em;
	line-height: 1.2;
	padding-bottom: 20px;
}
.hero-overlap .hero-link {
	background-color: #FFE41E;
	width: fit-content;
	padding: 10px;
}
.hero-overlap .hero-link a {
	text-decoration: none;
	color: #502d0e;
}
.hero-overlap .hero-content-inner {
	background-color: #502d0e;
	color: #ffffff;
}
 @media screen and (min-width: 768px) {
 	.hero-overlap .hero-content {
 		float: left;
 		width: 30%;
 		order: 1;
 		padding: 2%;
 	}
 	.hero-overlap .hero-content-inner {
 		padding: 8%;
 		position: relative;
 		left: 25%;
 		top: 25%;
 	}
 	.hero-overlap .hero-image {
 		float: right;
 		width: 70%;
 		order: 2;
 	}
 	 	.hero-overlap .hero-image img {
	min-height: 500px;
}
 }
 
  @media screen and (max-width: 767px) {
  .hero-overlap .hero-content {
  	width: 100%;
  	margin-left: 5%;
  	margin-right: 5%;
  }
  .hero-overlap .hero-content-inner {
 		padding: 8%;
 		position: relative;
 		bottom: 20%;
 	}
  }
/*End Overlap CSS*/

/*Image Right CSS*/
.hero-image-right .hero-type {
	display: none;
}
.hero-image-right .hero-header {
	color: #502d0e;
	font-size: 2.5em;
	padding-bottom: 10px;
}
.hero-image-right .hero-text {
	padding-bottom: 40px;
}
.hero-image-right .hero-link {
	background-color: #FFE41E;
	width: fit-content;
	padding: 10px;
}
.hero-image-right .hero-link a {
	text-decoration: none;
	color: #502d0e;
}

 @media screen and (min-width: 768px) {
 	.hero-image-right .hero-content {
 		float: left;
 		width: 55%;
 		order: 1;
 		padding: 8%;
 	}
 	.hero-image-right .hero-image {
 		float: right;
 		width: 45%;
 		order: 2;
 	}
 	.hero-image-right .hero-image img {
	min-height: 500px;
}
 }
/*End Image Right CSS*/