.regiones-featured {
	border-radius: 0 0 0 80%;
	background: #ecf0f1;
}

.regiones-featured__container {
	/* Custom */
	/* z-index only works with element with position other than static (the default is static) */
  position: relative;
	z-index: 3;
	/* border fix, to avoid inner margins overlaps this element */
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.regiones-featured__title-row {
	padding-top: 3.5rem;
	text-align: center;
}

.regiones-featured__line-with-circle::before {
	/* To override default circle color. */
	border-color: #fff !important;
}

.regiones-featured__content-row {
	padding-top: 3rem;
}

.regiones-featured__item {
	position: relative;
	padding-bottom: 3rem;
	display: none;
}

.regiones-featured__item--active {
	display: block;
}

.regiones-featured__item--entry-animation {
	/* @keyframes name | animation-fill-mode | duration | timing-function | delay */
	animation: regiones-featured__item-entry-animation forwards 0.25s ease-in;
}

@keyframes regiones-featured__item-entry-animation {
	from {
		opacity: 0;
		transform: scale(1.3);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.regiones-featured__item--exit-animation {
	/* @keyframes name | animation-fill-mode | duration | timing-function | delay */
	animation: regiones-featured__item-exit-animation forwards 0.25s ease-out;
}

@keyframes regiones-featured__item-exit-animation {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.6);
	}
}

/* Class used to hold meta data */
.regiones-featured__meta-data {
	display: none;
}

.regiones-featured__image {
	position: relative;
  z-index: 1;
	width: 100%;
	height: auto;
}

.regiones-featured__iframe-container {
	position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.regiones-featured__iframe {
	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.regiones-featured__overlay:before {
	content: '';
  z-index: 0;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 64px;
  background-color: #27FB6B;
  transform: translate(25%, -25%);
}

.regiones-featured__overlay:after {
	content: '';
  z-index: 0;
  display: inline-block;
  position: absolute;
  bottom: 45px;
  left: 0;
  width: 199px;
  height: 236px;
  border: 2px solid#39E98A;
  /* background-color: #27FB6B; */
  transform: translate(-12%, 10%);
}

.regiones-featured__overlay-content {
	position: relative;
  z-index: 3;
  padding: 1.25rem 0.8rem;
  width: 100%;
  background-color: #F5F5F5;
  box-shadow: 0px 0px 20px -5px #7f8c8d;
}

.regiones-featured__buttons-container {
	display: flex;
	flex-wrap: wrap;
}

.regiones-featured__upload-button-container {
	/* display: inline-block; */
	padding: 10px 0;
}

.regiones-featured__upload-button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	width: 50px;
	height: 50px;
	color: #11c14a;
	border-radius: 50%;
	box-shadow: 0 5px 30px rgba(99, 255, 196, 0.4), inset 0 0 0 1px #e0f8e5;

	/* Reset button */
	border: 0;
	outline: none;
	padding: 0;
}

.regiones-featured__upload-button:focus {
	outline: none;
}

.regiones-featured__upload-button:active {
	box-shadow: 0 0 4px 0 rgba(99, 255, 196, 0.4), inset 0 0 0 1px #e0f8e5;
}

/* The Modal (background) */
.regiones-featured__modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.regiones-featured__modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
	border: 1px solid #888;
	/* Could be  more or less depending on the screen size. */
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation: 0.4s regiones-featured__animatetop ease-out forwards;
}

/* Modal Header */
.regiones-featured__modal-header {
  padding: 2px 16px;
  background-color: #14cc60;
  color: #fff;
}

.regiones-featured__modal-title {
	margin: 0;
}

/* Modal Body */
.regiones-featured__modal-body {
	padding: 2px 16px;
}

/* Modal Footer */
.regiones-featured__modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@keyframes regiones-featured__animatetop {
  from {
		transform: translate3d(0, -100%, 0);
		opacity: 0
	}
  to {
		transform: translate3d(0, 100px, 0);
		opacity: 1;
	}
}

/* The Close Button */
.regiones-featured__close {
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.regiones-featured__close:hover,
.regiones-featured__close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Read about the text auto sizer causing this title to be bigger on chrome for android
AKA: font boosting
https://www.quirksmode.org/blog/archives/2015/09/a_note_on_weird.html
https://docs.google.com/document/d/1PPcEwAhXJJ1TQShor29KWB17KJJq7UJOM34oHwYP3Zg/edit?pli=1
https://stackoverflow.com/a/15577811/4086981

This is called "font boosting" and is described in some detail in this
WebKit bug. There's currently no way to disable it.
https://bugs.webkit.org/show_bug.cgi?id=84186
*/
.regiones-featured__the-category {
	margin-bottom: 0;
	
	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.regiones-featured__the-category--theme-fonts {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
}

.regiones-featured__the-title {
	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.regiones-featured__the-title--theme-fonts {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
}

.regiones-featured__overlay-description {
	padding-left: 2.5rem;
}

.regiones-featured__the-content {
	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

/* This violates the BEM methodology but it is required since I cant know
which child elements will have this element since it is user generated. */
.regiones-featured__the-content * {
	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.regiones-featured__the-content--theme-fonts {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 400;
}

.regiones-featured__button-container {
	/* z-index only works with element with position other than static (the default is static) */
  position: relative;
	z-index: 2;
	/* border fix, to avoid inner margins overlaps this element */
	border-top: 1px transparent solid;
	border-bottom: 1px solid transparent;
}

.regiones-featured__button-row {
	padding-bottom: 6rem;
  margin-top: 4rem;
}

.regiones-featured__button-col {
	text-align: center;
	padding-left: 3rem;
	padding-right: 3rem;
}

.regiones-featured__region-button {
	/* .btn */
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	padding: 0.375rem 0.75rem;

	/* customs */
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 1rem;
	border-radius: 3rem;
  background-color: transparent;
  border: solid 1px #c7c3c3;  
  padding-bottom: 0.25rem;
}

.regiones-featured__region-button--theme-fonts {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
}

.regiones-featured__region-button:hover {
	background-color: #14cc60;
  color: #fff;
  border-color: transparent;
}

.regiones-featured__nav-tab--active {
    background-color: #14cc60;
    color: #fff;
    border-color: transparent;
}

.regiones-featured__region-button:active,
.regiones-featured__region-button:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 255, 55, 0.25);
}

@media (max-width: 1199.98px) {

	.regiones-featured__overlay-description {
		padding-left: 0;
	}
}

@media (max-width: 991.98px) {

	.regiones-featured__image {
    width: 100%;
	}

	.regiones-featured__overlay {
		position: relative;
		width: 100%;
	}

	.regiones-featured__overlay:before {
		display: none;
	}

	.regiones-featured__overlay-description {
		padding-left: 0;
	}

	.regiones-featured__button-row {
    margin-top: 0rem;
  }
}

@media (max-width: 575.98px) {
	.regiones-featured__overlay:after {
		position: relative;
		display: none;
	}
}