/* ==========================================================================
   CUSTOM CSS
   ========================================================================== */
.hero { height:auto; max-height:none; padding-bottom:100px; }
.hero__bg-container { z-index:0; }
.hero__table { position:relative; z-index:1; }

.header__logo__img { height:60px; }
.hero { padding-top:102px; }
.hero__cell { vertical-align:top; }
.hero__title, .hero__subtitle { text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25); }
.hero__title { margin:0 auto 10px; }
.hero__subtitle { margin:0 auto 10px; }
.hero__img { margin-top:0; height:380px; }

@media (min-width: 48em){
  .header__wrapper, .header__wrapper.is-active { padding:0; }
  .header__logo { padding:1rem 2rem; border-radius:0 0 2rem; }
  .header__logo__img { height:80px; }
  .hero { padding-top:82px; }
  .hero__title { margin:0 auto 24px; }
  .hero__subtitle { margin:0 auto 20px; }
  .hero__img { margin-top:0; height:460px; }
  .grid__col>.area:last-child { margin-bottom:0 !important; }
}

.grid__col>.area:last-child { margin-bottom:2rem !important; }
.area { position:relative; }
.area .proximamente { position:absolute; bottom:100%; left:50%; transform:translate(-50%,-10px); color:#FFF; background:#F03; padding:5px 15px; border-radius:20px; }
.area__icon { width:74px; }
.area__timeline__list__icon { width:80px; }

.howuse__number { border-radius:50%; }

@media (max-width:320px){
  .header__logo { padding:10px 1rem; }
  .header__logo__img { height:50px; }
  .hero { padding-top:82px; }
  .hero__title { font-size:2rem; margin:0 auto; }
  .hero__subtitle { font-size:1.2rem; }
  .hero__img { height:320px; }
}
.close { opacity:1 !important; }
.close .close__title { color:#FFF; text-shadow:none; }