@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans:400,600|Amatic+SC");
html, body {
  width: 100%;
  padding: 0;
  margin: 0; }
  @media screen and (max-width: 736px) {
    html, body {
      -webkit-overflow-scrolling: touch; } }

.header {
  width: 100%;
  height: 40px;
  background-color: #222222;
  position: fixed;
  z-index: 9999;
  padding: 10px 0; }
  .header .brand {
    width: 200px;
    margin: 0 auto;
    margin-top: 5px; }
    .header .brand img {
      width: 100%; }

.footer {
  width: calc(100% - 60px);
  background-color: #222222;
  color: #f6f3f1;
  display: flex;
  padding: 30px;
  flex-flow: wrap;
  position: relative; }
  .footer::before {
    width: calc(100% - 60px);
    height: 1px;
    content: "";
    position: absolute;
    background-color: #2468b6;
    top: -1px; }
    @media screen and (max-width: 736px) {
      .footer::before {
        width: 80%; } }
  .footer.green {
    background-color: #222222; }
    .footer.green::before {
      background-color: #1b5f37; }
  @media screen and (max-width: 736px) {
    .footer {
      display: block; } }
  .footer .expedient-footer {
    color: #f6f3f1;
    width: 250px;
    word-wrap: break-word;
    margin: 20px 10px; }
    @media screen and (max-width: 736px) {
      .footer .expedient-footer {
        width: 100%; } }
    .footer .expedient-footer h6 {
      font-family: 'Lato', Arial, Helvetica, sans-serif;
      font-weight: bold;
      margin: 0; }
    .footer .expedient-footer .expedient-name {
      font-family: 'Lato', Arial, Helvetica, sans-serif;
      font-size: 14px; }
    .footer .expedient-footer-congratulations {
      color: #f6f3f1;
      width: 40%;
      word-wrap: break-word;
      margin: 0 10px; }
      @media screen and (max-width: 736px) {
        .footer .expedient-footer-congratulations {
          width: 100%; } }
      .footer .expedient-footer-congratulations ul {
        padding-left: 12px; }
        .footer .expedient-footer-congratulations ul li {
          list-style: none;
          position: relative; }
          .footer .expedient-footer-congratulations ul li::before {
            width: 2px;
            height: 2px;
            position: absolute;
            content: "%u2022";
            left: -12px;
            color: #f6f3f1;
            font-size: 7px;
            top: 5px; }
      .footer .expedient-footer-congratulations h6 {
        font-family: 'Lato', Arial, Helvetica, sans-serif;
        font-weight: bold;
        margin: 0; }
      .footer .expedient-footer-congratulations .expedient-name {
        font-family: 'Lato', Arial, Helvetica, sans-serif;
        font-size: 14px; }
  .footer .expedient-footer-brand {
    text-align: center;
    width: 100%;
    padding: 0 20px;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #f6f3f1;
    position: relative;
    height: 100px;
    margin-top: 50px; }
    .footer .expedient-footer-brand img {
      width: 30%; }
    @media screen and (max-width: 736px) {
      .footer .expedient-footer-brand {
        width: 80%;
        margin: 50px auto;
        left: 0;
        top: 0; }
        .footer .expedient-footer-brand img {
          width: 80%; } }
  .footer .start-serie {
    width: 100%;
    margin-top: 40px;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #f6f3f1; }

.home {
  width: 100%; }

.intro-banner {
  width: 100%;
  height: 90vh;
  background-color: #e84b3d;
  position: relative;
  display: flex;
  overflow: hidden; }
  @media screen and (max-width: 736px) {
    .intro-banner {
      display: block;
      overflow: hidden;
      height: 560px; } }
  @media screen and (max-width: 736px) and (orientation: landscape) {
    .intro-banner {
      height: 960px; } }
  .intro-banner .experience {
    position: relative; }
    .intro-banner .experience .close-experience {
      position: absolute;
      z-index: 99;
      right: 0;
      cursor: pointer;
      font-family: 'Bree Serif', Arial, Helvetica, sans-serif;
      color: #ffffff;
      background-color: #e84b3d;
      padding: 10px;
      font-size: 3em;
      line-height: 30px;
      top: 0;
      width: 50px;
      height: 40px;
      text-align: center;
      visibility: hidden;
      opacity: 0;
      transition: all .5s ease-in-out; }
    .intro-banner .experience.hide-experience {
      display: none; }
    .intro-banner .experience.play .close-experience {
      visibility: visible;
      opacity: 1; }
    .intro-banner .experience.play::before {
      display: none; }
    .intro-banner .experience.play .content-video {
      display: none; }
  .intro-banner .first-experience {
    width: 100%;
    height: 100%;
    background-color: #2468b6;
    background-image: url("../img/bg-first-experience.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
    position: relative;
    cursor: pointer; }
    @media screen and (max-width: 736px) {
      .intro-banner .first-experience {
        height: 50%; } }
    .intro-banner .first-experience .video {
      display: none; }
      .intro-banner .first-experience .video.visible {
        display: block; }
        @media screen and (max-width: 736px) {
          .intro-banner .first-experience .video.visible {
            height: 400px; } }
    .intro-banner .first-experience::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background: #000;
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc2553', endColorstr='#083070',GradientType=1 );
      opacity: 0;
      transition: all .3s ease-in-out; }
    .intro-banner .first-experience:hover {
      width: 300%; }
      @media screen and (max-width: 736px) {
        .intro-banner .first-experience:hover {
          width: 100%; } }
      .intro-banner .first-experience:hover::before {
        opacity: .5; }
    .intro-banner .first-experience .content-video {
      position: relative;
      top: 0;
      width: 80%;
      height: 100%;
      margin: 0 auto;
      text-align: center; }
      .intro-banner .first-experience .content-video .selo-mustang {
        width: 400px;
        margin: 0 auto;
        top: 25%;
        position: absolute;
        left: 50%;
        margin-left: -200px; }
        @media screen and (max-width: 736px) {
          .intro-banner .first-experience .content-video .selo-mustang {
            width: 70%;
            position: relative;
            margin: 0 auto;
            left: 0;
            top: 15%; } }
        .intro-banner .first-experience .content-video .selo-mustang img {
          width: 100%; }
  .intro-banner .secound-experience {
    width: 100%;
    height: 100%;
    background-color: #2468b6;
    background-image: url("../img/bg-first-experience.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease-in-out;
    position: relative;
    cursor: pointer; }
    @media screen and (max-width: 736px) {
      .intro-banner .secound-experience {
        height: 50%; } }
    .intro-banner .secound-experience .video {
      display: none; }
      .intro-banner .secound-experience .video.visible {
        display: block; }
        @media screen and (max-width: 736px) {
          .intro-banner .secound-experience .video.visible {
            height: 400px; } }
    .intro-banner .secound-experience::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background: #222222;
      opacity: 0;
      transition: all .3s ease-in-out; }
    .intro-banner .secound-experience:hover {
      width: 300%; }
      @media screen and (max-width: 736px) {
        .intro-banner .secound-experience:hover {
          width: 100%; } }
      .intro-banner .secound-experience:hover::before {
        opacity: .5; }
    .intro-banner .secound-experience .content-video {
      position: relative;
      top: 0;
      width: 80%;
      height: 100%;
      margin: 0 auto;
      text-align: center; }
      .intro-banner .secound-experience .content-video .selo-adventure {
        width: 400px;
        margin: 0 auto;
        top: 25%;
        position: absolute;
        left: 50%;
        margin-left: -200px; }
        @media screen and (max-width: 736px) {
          .intro-banner .secound-experience .content-video .selo-adventure {
            width: 70%;
            position: relative;
            margin: 0 auto;
            left: 0;
            top: 15%; } }
        .intro-banner .secound-experience .content-video .selo-adventure img {
          width: 100%; }

.contents-home {
  width: 80%;
  margin: 0 auto;
  position: relative;
  display: flex;
  background-color: #ffffff;
  top: -50px;
  padding: 15px; }
  @media screen and (max-width: 736px) {
    .contents-home {
      width: 90%; } }
  .contents-home .columns {
    column-width: 410px;
    max-width: 100%;
    column-gap: 15px;
    width: 100%; }
    @media screen and (min-width: 1200px) and (max-width: 1400px) {
      .contents-home .columns {
        column-gap: 5px; } }
    @media screen and (max-width: 1024px) {
      .contents-home .columns {
        column-gap: 5px; } }
    .contents-home .columns .post-item {
      display: block;
      -webkit-column-break-inside: avoid;
      padding: 15px;
      background-color: #f4f4f4;
      margin: 15px 0;
      position: relative; }
      .contents-home .columns .post-item .post-image {
        height: 250px;
        overflow: hidden; }
        .contents-home .columns .post-item .post-image img {
          width: 100%; }
      .contents-home .columns .post-item .post-categorie {
        position: absolute;
        margin-top: -15px; }
        .contents-home .columns .post-item .post-categorie h3 {
          display: inline;
          font-family: 'Bree Serif', Arial, Helvetica, sans-serif;
          color: #222222;
          padding: 5px; }
          .contents-home .columns .post-item .post-categorie h3 a {
            text-decoration: none; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie^="Sa"] {
            background-color: #278857;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie^="Sa"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie^="Aventura"] {
            background-color: #278857;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie^="Aventura"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie^="Fitness"] {
            background-color: #1e91b4;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie^="Fitness"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie="Bichos"] {
            background-color: #3c407a;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie="Bichos"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie="Casa"] {
            background-color: #3c407a;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie="Casa"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie="Moda"] {
            background-color: #b41e1e;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie="Moda"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie^="Comportamento"] {
            background-color: #e99e12;
            color: #222222; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie^="Comportamento"] a {
              color: #222222; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie="Beleza"] {
            background-color: #e93212;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie="Beleza"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie="Gastronomia"] {
            background-color: #563791;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie="Gastronomia"] a {
              color: #ffffff; }
          .contents-home .columns .post-item .post-categorie h3[data-categorie^="Fam"] {
            background-color: #375e91;
            color: #ffffff; }
            .contents-home .columns .post-item .post-categorie h3[data-categorie^="Fam"] a {
              color: #ffffff; }
      .contents-home .columns .post-item .post-title {
        font-family: 'Bree Serif', Arial, Helvetica, sans-serif;
        color: #222222;
        position: relative; }
        .contents-home .columns .post-item .post-title a {
          color: #222222;
          text-decoration: none; }
          .contents-home .columns .post-item .post-title a:hover {
            text-decoration: underline; }
      .contents-home .columns .post-item.main {
        margin-top: 0; }
        .contents-home .columns .post-item.main .post-image {
          height: 600px; }
          .contents-home .columns .post-item.main .post-image img {
            width: auto; }
        .contents-home .columns .post-item.main .post-categorie {
          top: 20px;
          z-index: 2; }
        .contents-home .columns .post-item.main .post-title {
          position: absolute;
          bottom: 10%; }
          .contents-home .columns .post-item.main .post-title h2 {
            display: inline;
            background-color: #ffffff;
            color: #222222;
            font-size: 3em;
            line-height: 70px;
            padding: 5px; }
            .contents-home .columns .post-item.main .post-title h2 a {
              color: #222222;
              text-decoration: none; }
              .contents-home .columns .post-item.main .post-title h2 a:hover {
                text-decoration: underline; }

.post {
  height: 100%; }
  .post .intro-banner {
    width: 100%;
    height: 60vh;
    background-size: cover; }

.contents-post {
  width: 60%;
  margin: 0 auto;
  background-color: #ffffff;
  position: relative;
  top: -80px;
  padding: 30px; }
  @media screen and (max-width: 736px) {
    .contents-post {
      top: 0;
      width: calc(100% - 30px);
      padding: 15px; } }
  .contents-post::before {
    width: 100%;
    height: 8px;
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    background-color: #2468b6; }
  .contents-post h1, .contents-post h2, .contents-post h3, .contents-post h4, .contents-post h5, .contents-post h6 {
    font-family: 'Bree Serif', Arial, Helvetica, sans-serif; }
  .contents-post h1 {
    width: 60%;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
    font-size: 3em; }
    @media screen and (max-width: 736px) {
      .contents-post h1 {
        width: 100%;
        font-size: 1.7em; } }
  .contents-post h4 {
    text-align: center;
    color: #7a7a7a;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .contents-post .h5.mt-20 {
    display: none; }
  .contents-post hr {
    border: none;
    border-bottom: 1px solid #dcdcdc; }
  .contents-post small {
    color: #7d7d7d;
    text-align: center;
    width: 100%;
    display: block;
    font-size: .7em; }
  .contents-post .author-row {
    display: block;
    text-align: center;
    font-size: .7em;
    color: #222222;
    padding: 20px 0; }
  .contents-post figure, .contents-post img {
    width: 100%; }
    @media screen and (max-width: 736px) {
      .contents-post figure, .contents-post img {
        margin: 0; } }
  .contents-post .article-box {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: #4a4a4a;
    width: 90%;
    margin: 0 auto;
    margin-top: 15px;
    line-height: 40px;
    font-size: 1.1em; }
  .contents-post a {
    text-decoration: underline;
    color: #222222; }
  .contents-post .txt-serif.js-article-box.article-box.article-box-capitalize.mt-15 {
    padding: 16px 5%; }
  .contents-post .d-block {
    font-size: 12px; }
  .contents-post .img-mobile-full {
    width: 50%;
    margin: 0 auto;
    padding: 0 30px; }
    @media screen and (max-width: 736px) {
      .contents-post .img-mobile-full {
        width: auto;
        margin: 0 auto;
        padding: 0; } }
    .contents-post .img-mobile-full figcaption {
      line-height: normal; }
  .contents-post .lenged-with-icon .d-block {
    padding: 0;
    transform: rotate(-90deg);
    text-indent: inherit;
    bottom: 120px;
    right: 60%; }
    .contents-post .lenged-with-icon .d-block.h6 {
      line-height: normal; }
    @media screen and (max-width: 736px) {
      .contents-post .lenged-with-icon .d-block {
        bottom: 0;
        right: 20%;
        top: 0; } }

small.txt-no-serif {
  font-size: 80%;
  position: absolute;
  bottom: -20px;
  text-align: center;
  width: 100%;
  font-size: 12px;
  color: #616161; }
  @media screen and (max-width: 736px) {
    small.txt-no-serif {
      top: 93px;
      bottom: auto; } }

.ads {
  margin: 0px auto;
  width: 100%;
  padding-top: 110px;
  text-align: center; }
  .ads .banner {
    width: 728px;
    height: 90px;
    background-color: #e84b3d;
    margin: 0 auto; }
    @media screen and (max-width: 736px) {
      .ads .banner {
        width: 80%;
        margin: 0 auto; } }

.top-header {
  padding-top: 40px;
  height: 240px; }
  .top-header .brand-especial {
    width: 100px;
    margin: 0 auto; }
    .top-header .brand-especial img {
      width: 100%; }
  .top-header .header-brand-text {
    height: 40px;
    font-family: 'Amatic SC', Arial, Helvetica, sans-serif;
    font-size: 2em;
    text-align: center;
    font-weight: bold; }
  .top-header.post {
    padding-top: 40px;
    height: 300px;
    background-image: url("../img/doodles.jpg");
    margin-top: 30px; }
    @media screen and (max-width: 736px) {
      .top-header.post {
        height: 300px; } }

.page {
  transition: all .3s ease-in-out; }
  .page.menu-actived {
    padding-left: 300px; }

.menu {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #2468b6;
  z-index: 999;
  top: 0;
  padding: 0;
  margin: 0;
  border-right: 1px solid #ffffff;
  left: -100%;
  transition: all .3s ease-in-out;
  visibility: hidden;
  display: flex;
  opacity: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
  .menu.active {
    width: 100%;
    height: 100%;
    left: 0;
    visibility: visible;
    opacity: 1; }
  .menu .brand-menu {
    width: 15%;
    position: fixed;
    top: 50%;
    margin-top: -175px;
    height: 350px;
    border-right: 1px solid #fff; }
    @media screen and (max-width: 736px) {
      .menu .brand-menu {
        width: 25%;
        height: 150px; } }
    .menu .brand-menu img {
      width: 100%; }
  .menu .list-notice {
    width: calc(90% - 15px);
    padding-top: 80px;
    padding-left: 30%; }
    .menu .list-notice ul {
      margin: 0;
      padding: 0;
      list-style: none; }
      .menu .list-notice ul li {
        width: 100%;
        color: #ffffff;
        font-family: 'Bree Serif', Arial, Helvetica, sans-serif; }
        .menu .list-notice ul li:first-child {
          font-size: 2em; }
        .menu .list-notice ul li a {
          color: #ffffff;
          text-decoration: none; }

.call-menu {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 15px;
  background-image: url("../img/ico-menu.svg");
  background-repeat: no-repeat;
  top: 8px;
  cursor: pointer; }