@charset "utf-8";

:root {
	/*--font-title: "Darker Grotesque", sans-serif;*/
}

.film{
  display: block;
  font-weight: 700;
  color: var(--second-color);
  padding: 8px 0 0;
  transition: var(--transition);

  &:hover{
    color: #000;
  }
}
.film:before{
  content: "\2015  ";
  color: inherit;
}
.programs-nav{
  position: fixed;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;

  a{
    position: relative;
    color: initial;
    padding: 0px 10px 4px 10px;
    margin: 4px;
    border: 1px solid currentColor;
    background: #fff;
    display: block;
    border-radius: 10px;
    opacity: .3;
    font-size: 80%;
    transition: all .5s ease;

    span{
      font-weight: 700;
    }
  }
}

.programs-nav a:focus,
.programs-nav a:hover{
  opacity: 1;
}
.programs-nav a.active{
  opacity: 1;
  border-color: #000;
  background: #000;
  color: #fff;
}
.anchor {
  display: block;
  position: relative;
  scroll-margin-top: 100px;
  visibility: hidden;
}
.btn {
  font-size: 1.5rem;
  color: #fff;
  padding: .4rem 1rem .6rem;
  border-radius: 12px;
  border: 2.5px solid var(--second-color);
  background: var(--second-color);
  transition: all .3s ease-in-out;

  &:hover{
    color: var(--second-color);
    background: #fff;
    border-color:  var(--second-color);
  }
}
.programas{

  & h1{
      font-weight: 700;
      line-height: 1;
      text-wrap: balance;
      margin: 0;

      & span{
        font-weight: 300;
      }
    }

    p small {
      font-size: .75em;
    }

  & .primeirOlhar_filmes{
    line-height: 1;

    & li{
      margin-bottom: 1rem;
    }

    & h2{
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 0;
    }
  }
}

  @media screen and (max-width: 768px) {
    .programs-nav{
      display: none;
    }
  }