/** important post container */
.important-post-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.important-post-headlines {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 10px 10px;
  border-bottom: 1px dotted #000;
}

.important-post-headline h2 a {
  width: 100%;
  font-family: neue-haas-grotesk-display, Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1em;
  padding-bottom: 20px;
}

.post-categories {
  display: block;
  font-family: neue-haas-grotesk-text, Helvetica, Arial, sans-serif;
  line-height: 1.1;
  padding-bottom: 10px;
  color: #000;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 14px;
}

.post-categories > a {
  padding-right: 15px;
}

/** used for "Invitados" in the home */
.category-guest-highlight {
  background-color: darkorange;
  color: #fff !important;
  font-weight: bolder;
  padding: 3px 10px;
  border-radius: 3px;
}

/** For posts with category "Promo" */
.category-promo-highlight {
  background-color: #2b02f2;
  color: #fff !important;
  font-weight: bolder;
  padding: 3px 10px;
  border-radius: 3px;
  width: 71px;
  margin-top:3px;
  margin-bottom:3px;
}

@media screen and (min-width: 0px) and (max-width: 759px) {
  .post-categories {
    padding-top: 10px;
  }
}

.related-post-headline-link {
  font-family: neue-haas-grotesk-text, Helvetica, Arial, sans-serif;
  border-top: 1px dotted #000;
  padding: 5px 0;
  position: relative;
  font-size: 15px;
  line-height: 1.2;
}

.important-post-thumbnail {
  width: calc(50% - 20px);
  padding: 0 0;
  padding-right: 20px;
}

/** NOTE: I'll perform local media queries for every major component so it's easier to maintain the code
 in localized sections */
@media screen and (min-width: 0px) and (max-width: 759px) {
  .important-post-container {
    flex-wrap: wrap;
  }

  .important-post-headlines {
    width: 100%;
  }

  .important-post-thumbnail {
    width: 100%;
    padding: 10px 10px;
  }
}

/** end of important post container styles */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.column-component-container::before, .column-component-container::after,
.row-component-container::before, .row-component-container::after,
.important-post-container::before, .important-post-container::after {
  clear: both;
  box-sizing: content-box;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/** row|column component container */
.titled-container-wrapper, .genesis-block-titled-container-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 20px;
  overflow: hidden;
}

.genesis-block-titled-container-wrapper {
  background-color: #000;
  color:#fff !important;
  padding-left:20px;
}

.titled-container-wrapper > h3, .genesis-block-titled-container-wrapper > h3 {
  font-weight: 900;
  font-size: 34px;
}

.genesis-block-titled-container-wrapper > h3 {
  border-bottom: 1px dotted white;
}

.genesis-block-titled-container-wrapper h4 a,
.genesis-block-titled-container-wrapper h4 a:link,
.genesis-block-titled-container-wrapper h4 a:active,
.genesis-block-titled-container-wrapper h4 a:visited,
.genesis-block-titled-container-wrapper section.row-component-container article.article-box h4 a {
  color: #fff !important;
}

.column-component-container,
.row-component-container {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-right: 20px;
}

@media screen and (min-width: 0px) and (max-width: 759px) {
  .row-component-container {
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 760px) and (max-width: 1019px) {
  .row-component-container {
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
}

.column-component-container {
  flex-direction: column;
}

.row-component-container {
  flex-direction: row;
  margin-bottom: 25px;
}

.row-component-container-optional-link-to-more-section {
  padding: 5px 0;
  text-transform: uppercase;
  width: 100%;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 400;
  border-bottom: 1px dotted #000;
}

.article-box {
  display: flex;
  flex-direction: column;
  width: calc(100% - (25px / 2));
  max-height: 500px;
  border-bottom: 1px dotted #000;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-right: 20px;
  clear: both;
}

@media screen and (min-width: 760px) and (max-width: 1019px) {
  .article-box {
    width: 46%;
  }
}

.article-box:last-child {
  margin-right: 0;
}

.article-box img.wp-post-image {
  /**border-bottom:10px solid #000;*/
  align-self: center;
  width: 100%;
  margin-bottom: 10px;
}

@media screen and (min-width: 0px) and (max-width: 759px) {
  /** we use the same size as the H<N> for the title on the link that wraps the
   thumbnail (since we can't add the class using wp's get_the_post_thumbnail(..,array(w,h))
   that function provides a resized image and it's too convenient to not use it.
   On containers we deem lesser due to use of H5 tags for titles (and not H4s)
   we hide the 2nd to N thumbnails */
  a.article-box-thumbnail-5 img.wp-post-image {
    display: none;
  }

  /** this is how we make sure the first one is shown: "section article:first-child" */
  section article:first-child img.wp-post-image {
    display: block;
  }
}

.article-box h3 {
  min-height: 200px;
}

.article-box h4 {
  line-height: 1.19;
}

@media screen and (min-width: 0px) and (max-width: 759px) {
  .article-box h4 {
    max-width: 100%;
  }

  .author {
    display: none;
  }
}

/** end of row|column component container */

/** dbtc_component_mailchimp_signup_form */
.mailchimp-signup-form-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  background-color: #000; /*#feef00;*/
  margin-bottom: 30px;
}

.mailchimp_form {
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  margin-right: 0;
  border-bottom: 1px dotted #000;
  flex-grow: 1;
}

/** mailchimp screwed their css, trying to fix here the missing background color */
.modalContent__content {
 background-color: #fff !important;
}

@media screen and (min-width: 0px) and (max-width: 759px) {
  .mailchimp_form {
    width: 100%;
    flex-direction: column;
    margin: 20px 0;
  }
}

/** image/logo on the left or top */
.mailchimp-figure {
  width: 100%;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: lightgrey;
  background-color: transparent;
  align-content: center;
  align-items: center;
  align-self: flex-end;
  margin-left: 0;
  margin-right: 0;
}

.mailchimp-figure img {
  width: 40%;
  max-width: 250px;
}

.mailchimp-figure small {
  padding: 26px 40px;
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

@media screen and (min-width: 0px) and (max-width: 759px) {
  .mailchimp-figure {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .mailchimp-figure small {
    padding-top: 65px;
  }
}

/** email input field */
.mailchimp-email-field {
  min-width: 328px;
  width: 60%;
  align-self: center;
  border: none;
  border-bottom: 1px solid black;
  margin-bottom: 15px;
  border-radius: 5px;
  background-color: white;
  padding: 3px 5px;
}

.subscribe_button {
  min-width: 328px;
  width: 60%;
  margin-bottom: 30px;
  background-color: #fff;
  color: #000;
  font-weight: 800;
  border: 1px solid #000;
  border-radius: 9px;
  padding: 20px 20px;
  font-size: 20px;
  align-self: center;
}

.subscribe_button {
  background-color: #FFF;
  animation-name: color;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes color {
  0% {
    background-color: #FFF;
  }
  50% {
    background-color: orange;
  }

  100% {
    background-color: #FFF;
  }
}

/** Main menu styles */
.main-navigation a {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: bolder;
}

.header-wrapper ul.sub-menu li a {
  font-size: 17px;
}

a:link,
a:active,
a:visited {
  font-family: neue-haas-grotesk-text, sans-serif;
  text-decoration: none;
  color: #000;
}

a:hover {
  font-family: neue-haas-grotesk-text, sans-serif;
  text-decoration: underline;
  color: #000;
}

.right {
  text-align: right;
}

/** sends last element on a column all the way until the end*/
.flexbottom {
  margin-top: auto;
}

.positiveChange {
  color: #1ecd93
}

.positiveHighlight {
  background-color: rgba(30, 205, 147, 0.2)
}

.negativeChange {
  color: #ff433d;
}

.negativeHighlight {
  background-color: rgba(255, 67, 61, 0.2);
}

.dbtc-footer-container {
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 20px;
  line-height: 50px
}

.dbtc-footer-menu {
  min-width: 350px;
  padding-top: 20px;
  padding-right: 10px
}

.dbtc-footer-menu h5 {
  color: #aaa;
}

easteregg {
  line-height: 1em;
  width: 220px;
  padding: 7px 7px;
  margin-left: auto;
}

/** dotted underline on links in posts, doesn't fully work on style.css */
.post-content .entry-content .has-content-area p a,
.post-content .entry-content .has-content-area a {
  border-bottom: 1px dotted #000 !important;
}

a.dbtc_component_sponsored_button:link,
a.dbtc_component_sponsored_button:visited,
a.dbtc_component_sponsored_button:hover,
a.dbtc_component_sponsored_button:active {
  border-bottom: none !important;
}