.hero-background {
	position: relative;
	max-height: 650px;
	height: 400px; /* Start with the smallest, most restrictive height for mobile (xs) */
	overflow: hidden;
  background-size: cover;
  background-position: center center;
}

.hero-captions {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	width: 80%; /* Start with the WIDEST width for mobile (xs) */
	color: #fff !important;
	z-index: 2;

}
.captions-bg {
	/*background: #00000073;*/
	/*background: #3F3D56; /* deep blue */ 
	background: #002776E9;
	/*background: #3F3D56E9;*/
	padding: 1.5rem;
}
.hero-captions .details {
	font-weight: 600;
	margin-bottom: 15px;
	color: #FFF5E1; /* cream */
	/*color: #30CFCF; /* turquoise */*/
}
.hero-captions .theme {
	font-weight: 800;
	/*color: #FFF5E1;*/
	color: #F7DF1E; /* bright yellow */
}
 /*#009C3B - Brazil Green*/

.division-line {
	border-top: 1px solid #E1A100/*#FFF5E1*/;
	margin-top:12px;
	padding-top: 15px;
}
.extra-add {
	font-weight: 600;
}
.hero-buttons {
	margin-top: 1.1rem;
}
.hero-buttons a {
	padding: 0.6rem 1.2rem;
	display: inline-block;
	border-radius:20px;
}
.hero-buttons a:link {
	color: #FFF5E1;
	text-decoration: none;
	font-weight: 500;
}
.hero-buttons a:visited {
	color: #FFF5E1;
}
.hero-buttons a:hover {
	color: #F7DF1E;
}
.red-button {
	margin-right: 1.5rem;
	background: #B7410E; 
}
.green-button {
	background: #228B22;
}
/*.hero-buttons > :first-child {
	margin-right: 1.5rem;
	background: #B7410E; 
} /*#8B0000*/

/*.hero-buttons > :nth-child(2) {
	background: #228B22;
}
*/



/* Replace .your-outer-div with the actual class or ID */
/* Base/Mobile (xs) - < 576px */
/* I'm using mobile first */

/* Small devices (sm) - minimum 576px */
@media (min-width: 576px) {
  .hero-background {
    height: 400px;
  }
}

/* Medium devices (md) - minimum 768px */
@media (min-width: 768px) {
  .hero-background {
    height: 500px;
  }
  .hero-captions {
  	width: 75%;
  	padding-bottom: 2rem;
  }
}

/* Large devices (lg) - minimum 992px */
@media (min-width: 992px) {
  .hero-background {
    height: 600px;
  }
  .hero-captions {
  	width: 60%;
  }
}