@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

.topo {
  padding-bottom: 20px;
  background-color: #000;
  background-image:
    linear-gradient(to bottom, transparent 70%, #000),
    url(../images/professores.png?202205251730),
    url(../images/bg.jpg?202205251730);
  background-position:
    bottom,
    bottom 100px right,
    top right;
  background-size:
    cover, 900px, 100%;
  background-repeat: no-repeat;
}




.topo header {
  padding: 32px 0;
}

.topo header img {
  width: 216px;
  height: 50px;
}

#chamada {
  color: #fff;
}

#chamada .info-live span.live {
  font-family: 'Mulish', sans-serif;
  letter-spacing: 2px;
  font-size: .65rem;
  padding: 5px 11px 4px;
  background-color: #2d2d2d;
  border-radius: 3px;
}

#chamada .info-live span.live i {
  font-size: .5rem;
  animation: blink 1s linear infinite;
}

#chamada .info-live span.horario {
  font-family: 'Mulish', sans-serif;
  font-size: .9rem;
  letter-spacing: 5px;
  font-weight: 500;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}


@keyframes flicker {

  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 30px #00FFFA;
  }

  20%, 24%, 55% {
    text-shadow: none;
  }
}

.neon {
  animation: flicker 1.5s infinite alternate;
}

#chamada h1, #chamada span.subtitle {
  font-family: 'Lato', sans-serif;
}

#chamada h1 {
  font-size: 80px;
  font-weight: 900;
  color: #00FFFA;
  line-height: 60px;
  text-shadow: 0 0 30px #00FFFA;
}

#chamada span.subtitle {
  font-size: 17px;
  font-weight: 700;
  color: #000;
  background-color: #00FFFA;
  letter-spacing: 9.5px;
  box-shadow: 0 0 30px #00FFFA;
  width: fit-content;
}

#chamada h1 .fonte-menor {
  font-size: 40px;
}

#chamada h2, #chamada p {
  font-family: 'Source Sans Pro', sans-serif;
}

#chamada h2 {
  font-size: 22px;
  font-weight: 400;
  max-width: 510px;
}

#chamada p {
  font-size: 20px;
  font-weight: 600;
  color: #00FFFA;
}



@media (min-width: 768px) and (max-width: 1199.98px) {
  #chamada h2, #chamada span.subtitle {
    margin: 0 auto;
  }
}




@media (max-width: 398.98px) {
  #chamada .info-live span.horario {
    font-size: .75rem;
  }
}

@media (max-width: 370.98px) {
  #chamada .info-live span.horario {
    letter-spacing: 2.5px;
  }
}

@media (max-width: 484.98px) {
  .topo header {
    padding: 16px 0;
  }

  .topo header img {
    width: 150px;
    height: 31.59px;
  }

  #chamada .info-live {
    margin: .7rem 0 !important;
  }

}

@media (max-width: 355.98px) {
  #chamada h1 {
    font-size: 46px;
  }

  #chamada span.subtitle {
    letter-spacing: 4.25px;
  }
}

@media (min-width: 356px) and (max-width: 554.98px) {
  #chamada h1 {
    font-size: 52px;
  }

  #chamada span.subtitle {
    letter-spacing: 6.25px;
  }
}

@media (max-width: 554.98px) {
  #chamada h1 {
    line-height: 40px;
  }

  #chamada h1 .fonte-menor {
    font-size: 26px;
  }

  #chamada span.subtitle {
    font-size: 11px;
  }

  #chamada h2 {
    font-size: 16px;
  }

  #chamada p {
    font-size: 18px;
  }
}

@media (max-width: 1199.98px) {
  .topo {
    background-image: url(../images/bg.jpg?202205251730);
    background-position: top right;
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .topo {
    background-size: cover, 800px, 100%;
  }
}

@media (min-width: 1920.98px) {
  .topo {
    background-position:
      bottom,
      75% 80%,
      top right;
  }
}