/*

	Project variables

*/
@keyframes enterLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100vw, 0, 0px); }
  100% {
    opacity: 1; } }

@keyframes enterRight {
  0% {
    opacity: 0;
    transform: translate3d(100vw, 0, 0px); }
  100% {
    opacity: 1; } }

@keyframes enterBottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 100vh, 0px); }
  100% {
    opacity: 1; } }

@keyframes blinkArrows {
  0% {
    height: 10px; }
  50% {
    height: 15px; } }

header {
  background-color: #fff;
  padding: 20px 20px 10px; }
  header .nav {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px; }
    header .nav .back {
      display: flex;
      align-items: center;
      font-family: 'rubik-medium';
      font-size: 14px;
      font-weight: 300;
      color: #cccccc; }
      header .nav .back:before {
        content: " ";
        background: url("../../assets/timeline/ui/back.svg") center center no-repeat;
        width: 7px;
        height: 15px;
        display: inline-block;
        margin-right: 6px; }
    header .nav .translate {
      display: flex; }
      header .nav .translate button {
        color: #f48024;
        opacity: .5;
        font-family: rubik-medium;
        font-size: 14px; }
        header .nav .translate button#lang-pt:after {
          content: "/";
          opacity: .5;
          margin: 0 3px; }
      header .nav .translate .active {
        opacity: 1;
        pointer-events: none; }
  header .title {
    color: #f48024;
    font-size: calc(1.25vw + 16px);
    font-family: roboto-bold;
    margin: 0 0 10px; }
    header .title:after {
      content: '-';
      display: block;
      color: #533019;
      height: 10px; }
  header .filters {
    display: flex;
    justify-content: space-between; }
    @media (min-width: 700px) {
      header .filters {
        margin: 20px 0 0; } }
    header .filters .search {
      display: flex;
      justify-content: space-between;
      width: calc(100vw - 160px); }
      @media (min-width: 700px) {
        header .filters .search {
          width: calc(40vw);
          max-width: 500px; } }
      header .filters .search pt, header .filters .search en {
        width: calc(100% - 50px); }
      header .filters .search input {
        outline: none;
        width: calc(100%);
        height: 20px;
        font-size: 14px;
        font-family: lora-italic;
        padding: 5px 0;
        border-bottom: 1px solid #ccc; }
      header .filters .search button {
        width: 23px;
        margin: 0 0 0 20px;
        background: url("../../assets/timeline/ui/search.svg") center center no-repeat; }
    header .filters .menu {
      display: flex;
      flex-direction: column;
      background-color: #f48024;
      position: absolute;
      right: 20px;
      z-index: 3;
      height: 30px;
      overflow: hidden;
      transition: all .4s ease; }
      header .filters .menu.desktop {
        display: none; }
      header .filters .menu.mobile {
        display: flex; }
      @media (min-width: 700px) {
        header .filters .menu {
          flex-direction: row;
          background-color: #fff; }
          header .filters .menu.desktop {
            display: flex; }
          header .filters .menu.mobile {
            display: none; } }
      header .filters .menu.open {
        height: 140px !important; }
        header .filters .menu.open .icon {
          transform: rotate(180deg); }
      header .filters .menu li {
        padding: 5px 10px; }
        @media (min-width: 700px) {
          header .filters .menu li {
            padding: 5px 0 5px 20px; } }
        @media (min-width: 700px) {
          header .filters .menu li:first-child {
            padding: 5px 0; } }
        header .filters .menu li.remove {
          display: none; }
        @media (min-width: 700px) {
          header .filters .menu li.filter {
            display: none; } }
        header .filters .menu li.filter button {
          display: flex;
          justify-content: space-between;
          align-items: center; }
          header .filters .menu li.filter button .icon {
            transition: transform .4s ease;
            width: 13px;
            height: 13px;
            background: url("../../assets/timeline/ui/seta.svg") center center no-repeat; }
      header .filters .menu .filtro, header .filters .menu .filtro-popular, header .filters .menu button {
        color: #fff;
        width: 100%;
        display: inline;
        max-width: 85px;
        text-align: left;
        line-height: 1.5em;
        font-size: calc(0.125vw + 11.6px);
        text-transform: uppercase;
        font-family: rubik-medium; }
        @media (min-width: 700px) {
          header .filters .menu .filtro, header .filters .menu .filtro-popular, header .filters .menu button {
            max-width: 100%;
            color: #533019; } }
        header .filters .menu .filtro.active, header .filters .menu .filtro-popular.active, header .filters .menu button.active {
          color: #b8510c; }
      header .filters .menu .filtro-popular {
        display: flex; }
        header .filters .menu .filtro-popular.active {
          color: #f48024; }
          header .filters .menu .filtro-popular.active:after {
            background: url(../../assets/ui/x.svg) no-repeat center right; }
        header .filters .menu .filtro-popular .subfiltro {
          color: #b8510c;
          display: none; }
          @media (min-width: 700px) {
            header .filters .menu .filtro-popular .subfiltro {
              display: inline-block; } }
          header .filters .menu .filtro-popular .subfiltro.active:before {
            display: inline;
            content: ' / ';
            color: #f48024; }

.submenu-container {
  max-height: 290px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 12px auto; }
  @media (max-width: 600px) {
    .submenu-container {
      display: block;
      max-height: initial; } }
  @media (max-width: 600px) {
    .submenu-container .filtro {
      text-transform: inherit;
      font-weight: normal;
      border-bottom: 1px solid #f48024;
      width: 100%;
      text-align: left;
      padding: 10px 0; } }

.submenu-popular {
  height: 0;
  margin: auto;
  position: absolute;
  background-color: #efb872;
  z-index: 2;
  overflow-y: scroll;
  transition: height .5s;
  left: 0; }
  @media (min-width: 600px) {
    .submenu-popular {
      width: 100%; } }
  .submenu-popular button {
    font-size: 14px;
    border: none;
    background: none;
    outline: none;
    margin: 5px 0 20px;
    text-align: left;
    font-family: lora-regular; }

.hide {
  height: 0;
  overflow: hidden; }

.show {
  height: 290px;
  padding: 20px;
  height: calc(100vh - 177px); }
  @media (min-width: 390px) {
    .show {
      height: calc(100vh - 120px); } }

#loading {
  position: absolute;
  width: 100%;
  height: 430px; }

.ruler {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  padding: 30px 20px 20px;
  z-index: 1;
  font-family: rubik-medium;
  max-width: 1000px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently not supported by any browser */ }
  @media (min-width: 1000px) {
    .ruler {
      margin: 20px auto 0;
      width: calc(100% - 40px); } }
  .ruler .before, .ruler .next {
    height: calc(2.08333vw + 23.33333px);
    width: calc(2.08333vw + 23.33333px);
    max-height: 40px;
    max-width: 40px;
    outline: none;
    border: none;
    border-radius: 0;
    background-color: #f48126;
    position: relative; }
    .ruler .before svg, .ruler .next svg {
      height: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(90deg); }
      .ruler .before svg polygon, .ruler .next svg polygon {
        fill: #fff; }
  .ruler .next svg {
    transform: translate(-50%, -50%) rotate(-90deg); }
  .ruler .regua {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    width: calc(100% - 90px); }
    .ruler .regua .hit-regua {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translate(-50%); }
      .ruler .regua .hit-regua:before {
        content: "";
        position: absolute;
        border-bottom: dotted 1px #f48024;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .ruler .regua .marker {
      height: 100px;
      top: -20px;
      text-align: center;
      position: absolute;
      transition: left .3s;
      z-index: 3; }
      .ruler .regua .marker .ano {
        color: #f48126;
        font-size: calc(0.625vw + 11px); }
    .ruler .regua .ghost-marker {
      transition: left .3s;
      z-index: 2;
      height: 40px;
      width: 30px;
      bottom: 10px;
      position: absolute; }
      .ruler .regua .ghost-marker:before {
        content: "";
        position: absolute;
        width: 2px;
        background: #f48126;
        height: 15px;
        left: 50%;
        top: 14px;
        transform: translateX(-50%); }
    .ruler .regua .numero {
      color: #543019;
      font-size: calc(0.28409vw + 9.09091px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      width: 30px; }
      .ruler .regua .numero:before {
        height: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        background-color: #f48024;
        content: "";
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%); }

.container {
  background-size: cover; }
  .container .cards {
    display: flex;
    max-width: 1000px;
    top: 0%;
    left: 0%;
    width: 100%;
    height: calc(38.23529vw + 217.64706px);
    max-height: 500px;
    z-index: 1;
    position: relative;
    overflow: hidden; }
    @media (min-width: 1100px) {
      .container .cards {
        left: 50%;
        transform: translate(-50%, 0%); } }
    .container .cards .card {
      border-radius: 5px;
      position: absolute;
      top: 50%;
      overflow: hidden;
      font-family: lora-regular;
      left: 20px;
      height: calc(31.25vw + 180px);
      width: calc(25vw + 120px);
      max-width: 320px;
      max-height: 430px; }
      .container .cards .card .ano {
        color: #fff;
        font-size: calc(1.25vw + 26px);
        text-align: right;
        font-family: roboto-bold; }
      .container .cards .card .nome {
        color: #fff;
        font-size: calc(0.625vw + 12px);
        overflow: hidden;
        position: relative;
        line-height: 1.2em;
        top: -5px;
        font-family: rubik-medium; }
      .container .cards .card .image {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        height: 65%;
        width: 100%;
        position: absolute; }
      .container .cards .card .header {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 2;
        padding: 10px;
        width: calc(100% - 20px);
        height: 30%; }
      .container .cards .card .opacity {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        z-index: 1;
        opacity: 1 !important; }
      .container .cards .card.compositor {
        background: linear-gradient(to right, #f8a231, #f16d2d); }
        .container .cards .card.compositor .image {
          top: 0; }
        .container .cards .card.compositor .header {
          bottom: 0;
          height: calc(100% - 20px); }
          .container .cards .card.compositor .header .nome {
            position: absolute;
            display: flex;
            align-items: flex-end;
            top: auto;
            bottom: 20px;
            width: calc(100% - 40px);
            line-height: 18px; }
          .container .cards .card.compositor .header .ano {
            position: absolute;
            right: 10px; }
      .container .cards .card.efemeride {
        background: linear-gradient(to right, #33bdec, #0d68af); }
        .container .cards .card.efemeride .image {
          top: 0; }
        .container .cards .card.efemeride .header {
          bottom: 0;
          height: calc(100% - 20px); }
          .container .cards .card.efemeride .header .nome {
            position: absolute;
            display: flex;
            align-items: flex-end;
            top: auto;
            bottom: 20px;
            width: calc(100% - 40px); }
          .container .cards .card.efemeride .header .ano {
            position: absolute;
            right: 10px; }
      .container .cards .card.grupo {
        background: linear-gradient(to right, #aa1185, #721870); }
      .container .cards .card.tema {
        background: linear-gradient(to right, #83be4a, #129a52); }
        .container .cards .card.tema .image {
          bottom: 0; }
        .container .cards .card.tema .header {
          top: 0; }

.container-biografia {
  background: rgba(245, 244, 236, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s;
  position: fixed;
  top: 0px;
  z-index: 999;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll; }
  @media (min-width: 1000px) {
    .container-biografia {
      overflow: hidden; } }
  .container-biografia.show {
    visibility: visible;
    opacity: 1;
    padding: 0; }
  .container-biografia .container-close {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 999; }
    .container-biografia .container-close .close {
      width: calc(1.5625vw + 10px);
      height: calc(1.5625vw + 10px);
      margin: 0 0 0 20px;
      background: url("../../assets/timeline/ui/x.svg") center center no-repeat; }
  .container-biografia .cards-biografia {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding: 0 20px 20px;
    top: 140px; }
    @media (min-width: 1000px) {
      .container-biografia .cards-biografia {
        flex-direction: row;
        top: 50%;
        transform: translateY(-50%); } }
    .container-biografia .cards-biografia.history .card-biografia .nascimento .compositor {
      display: none !important; }
    .container-biografia .cards-biografia .card {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: -1px 3px 14px -2px rgba(0, 0, 0, 0.75);
      height: auto;
      margin: 0 calc(1.47059vw + -4.70588px) 20px 0;
      padding: calc(1.47059vw + 15.29412px);
      font-family: lora-regular; }
      @media (min-width: 1000px) {
        .container-biografia .cards-biografia .card {
          height: 310px;
          margin-bottom: 0; } }
      .container-biografia .cards-biografia .card .ano, .container-biografia .cards-biografia .card .nome {
        font-size: calc(2.5vw + 11px);
        font-weight: bold;
        line-height: 1.1;
        font-family: rubik-medium; }
      .container-biografia .cards-biografia .card .ano {
        font-family: roboto-bold; }
      .container-biografia .cards-biografia .card .titulo {
        color: #000;
        font-size: 18px;
        margin-top: 10px;
        line-height: 1.1; }
      .container-biografia .cards-biografia .card .texto {
        color: #000;
        font-size: calc(-0.29412vw + 16.94118px);
        line-height: 1.5em;
        margin: 0;
        padding-top: 20px; }
      .container-biografia .cards-biografia .card.card-biografia {
        width: auto; }
        @media (min-width: 1000px) {
          .container-biografia .cards-biografia .card.card-biografia {
            max-width: 530px; } }
        .container-biografia .cards-biografia .card.card-biografia .nascimento {
          margin: 10px 0; }
        .container-biografia .cards-biografia .card.card-biografia .nascimento.hide, .container-biografia .cards-biografia .card.card-biografia .falecimento.hide {
          display: none; }
        .container-biografia .cards-biografia .card.card-biografia .nascimento .label, .container-biografia .cards-biografia .card.card-biografia .falecimento .label {
          color: #f48024; }
          .container-biografia .cards-biografia .card.card-biografia .nascimento .label span.compositor, .container-biografia .cards-biografia .card.card-biografia .falecimento .label span.compositor {
            display: inherit; }
          .container-biografia .cards-biografia .card.card-biografia .nascimento .label:after, .container-biografia .cards-biografia .card.card-biografia .falecimento .label:after {
            content: ' ';
            display: inline; }
        .container-biografia .cards-biografia .card.card-biografia .nascimento .info, .container-biografia .cards-biografia .card.card-biografia .falecimento .info {
          display: inline; }
        .container-biografia .cards-biografia .card.card-biografia .label span {
          display: none; }
      .container-biografia .cards-biografia .card.card-video {
        display: block;
        width: auto; }
        @media (min-width: 1000px) {
          .container-biografia .cards-biografia .card.card-video {
            width: 355px; } }
        .container-biografia .cards-biografia .card.card-video .video {
          border: none;
          height: 200px;
          width: 100%;
          margin: 20px auto 0; }
      .container-biografia .cards-biografia .card.card-texto {
        width: auto; }
        @media (min-width: 1000px) {
          .container-biografia .cards-biografia .card.card-texto {
            width: 340px; } }
  .container-biografia .card-clone {
    position: fixed;
    left: 0;
    transform: none !important;
    background-color: red;
    width: 100%;
    padding: 20px; }
    .container-biografia .card-clone .ano {
      color: #fff;
      font-size: calc(1.25vw + 26px);
      font-family: roboto-bold;
      margin: 0 0 10px; }
    .container-biografia .card-clone .nome {
      color: #fff;
      font-size: calc(0.625vw + 12px);
      width: calc(100vw - 70px);
      line-height: 1.2em;
      font-family: rubik-medium; }
    .container-biografia .card-clone.compositor {
      background: linear-gradient(to right, #f8a231, #f16d2d); }
    .container-biografia .card-clone.efemeride {
      background: linear-gradient(to right, #33bdec, #0d68af); }
    .container-biografia .card-clone.grupo {
      background: linear-gradient(to right, #aa1185, #721870); }
    .container-biografia .card-clone.tema {
      background: linear-gradient(to right, #83be4a, #129a52); }
  .container-biografia .drag {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    width: 1000px;
    bottom: 80px; }
    @media (min-width: 1000px) {
      .container-biografia .drag {
        display: block; } }
    .container-biografia .drag .marker {
      background-color: #f48024;
      height: 10px;
      margin-top: 15px;
      position: absolute;
      width: 135px;
      cursor: pointer; }
    .container-biografia .drag:before {
      content: '';
      position: absolute;
      top: 19px;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #f48024; }

.content {
  min-height: calc(100vh);
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: #fef9f1; }

footer {
  background-color: #fff;
  width: 100%; }

/*# sourceMappingURL=timeline.css.map */