* {
  //transition: ease 0.25s;
}
p {

}
body {
  font-family: var(--font-family-principal);
  font-weight: var(--font-style-normal);
  font-size: 14px;
  line-height: 20px;

  section {
    &.hero {
      height: 100vh;
      display: flex;
      justify-content: center;
      overflow: hidden;
      position: relative;

      @include respond-above(sm) {
        height: 0;
        padding-bottom: 56.25%;
      }

      video, img {
        @include respond-above(sm) {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
        }
      }

      .content {
        align-items: flex-end;
        height: 100%;

        div {
          max-width: 100%;

          @include respond-above(sm) {
            max-width: 55%;
          }

          h1 {
            position: relative;
            z-index: 11;
          }

          h4 {
            position: relative;
            padding-top: 12px;
            z-index: 11;
          }
        }
      }

    }

    &.serie {
      //height: 100vh;
      display: flex;
      justify-content: center;
      overflow: hidden;
      position: relative;

      //@include respond-above(sm) {
        height: 0;
        padding-bottom: 56.25%;
      //}

      iframe {
        border: 0;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
      }

      .content {
        align-items: flex-end;
        height: 100%;

        div {
          max-width: 100%;

          @include respond-above(sm) {
            max-width: 55%;
          }

          h1 {
            position: relative;
            z-index: 11;
          }

          h4 {
            position: relative;
            padding-top: 12px;
            z-index: 11;
          }
        }
      }

    }

    &.btns {
      width: 100%;
      background: var(--color-azul);
      font-size: 20px;
      //padding: 20px;
      //display: flex;
      //flex-wrap: wrap;
      //justify-content: center;

      > div {
        position: relative;

        &:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,.5);
          top: 0;
          left: 0;
          z-index: 0;
        }

        .cont-btn {
          position: relative;
          z-index: 1;
          text-align: center;
          color: var(--font-color);

          h2, p, a {
            opacity: 0;
          }

          p {
            font-size: 1.6rem;
            line-height: 1;
            font-weight: var(--font-weight-medium);
            margin: 15px 0;
          }
        }
      }
      .menu {
        background-image: url('../../img/menu-bg.jpeg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .reservas {
        background-image: url('../../img/reservas-bg.jpeg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    }
    &.serie {
      //height: 100vh;
      //display: flex;
      //justify-content: center;
      //overflow: hidden;
      //

      img {
        width: auto;
        height: 100%;
      }
    }
  }

  .title-miniserie {
    //background-image: url('img/miniserie-titulo-bg.jpeg');
    //background-repeat: no-repeat;
    //background-size: cover;
    //display: flex;
    //flex-wrap: wrap;
    //justify-content: center;
    //align-items: center;
    //height: 100vh;
    background-color: black;
    position: relative;
    z-index: 1;
    padding: 50px 0;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.5);
      top: 0;
      left: 0;
      z-index: 0;
    }
    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100px;
      background: -moz-linear-gradient(#000, rgba(0,0,0,0));
      background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
      background: linear-gradient(#000, rgba(0,0,0,0));
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
      bottom: -100px;
    }

    h2, p {
      text-align: center;
      z-index: 1;
      position: relative;
      color: var(--font-color);
      opacity: 0;
    }
    p {
      font-size: 1.6rem;
      line-height: 1;
      font-weight: var(--font-weight-medium);
      margin: 15px 0;
    }

  }

  .container {
    width: 100%;

    .content {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      position: relative;

      @include respond-above(sm) {
        //max-width: 1088px;
        //justify-content: unset;
      }

      &.titulo {
        justify-content: center;
        padding: 100px 0 50px;
        background: url('../../img/menupage-bg.jpeg') no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;

        @include respond-above(sm) {
          padding: 150px 0;
        }

        &:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,.5);
          top: 0;
          left: 0;
          z-index: 0;
        }

        h1 {
          text-transform: uppercase;
          font-weight: var(--font-weight-medium);
          z-index: 1;
        }
      }
    }

    header.content {
      position: fixed;
      width: 100%;
      padding: 10px 20px 10px 10px;
      align-items: center;
      z-index: 99999;
      //background: rgba(0,0,0,.5);
      background: -moz-linear-gradient(#000, rgba(0,0,0,0));
      background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
      background: linear-gradient(#000, rgba(0,0,0,0));
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );

      transition: ease .25s;
      //border-bottom: solid thin white;

      @include respond-above(sm) {
        padding: 10px 30px 10px 10px;
      }

      &.sticky {
        //background: rgba(255,255,255,.9);
        //
        //a {
        //  color: black;
        //}
        //
        //.burger {
        //  span, span:after, span:before {
        //    background: black;
        //  }
        //}
      }

      .cont-logo-menu {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;

        @include respond-above(sm) {
          width: unset;
        }
      }
    }
    footer.content {
      padding: 10px 20px 10px 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.logo {
  text-transform: uppercase;
  color: var(--color-azul-principal);
  text-align: center;
  display: table;
  width: 70px;

  @include respond-above(sm) {
    width: 90px;
  }
}


.hide {
  height: 0;
  max-height: 0;
  overflow: hidden;
  transition: ease .25s;

  @include respond-above(lg) {
    height: 100%;
    max-height: 1000px;
  }

  &.open {
    height: 100%;
    max-height: 1000px;
  }
}

h2 {
  text-transform: uppercase;
  color: var(--font-color);
  font-weight: var(--font-weight-bold);
}
.btn {
  border: solid thin var(--font-color);
  padding: 5px 10px;
  display: table;
  margin: 25px auto 0;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  font-size: 1.8rem;
  transition: ease .25s;

  &:hover {
    background-color: var(--font-color);
    color: black;
  }
}
