/* Slide "Hora e clima". Tamanhos em em: 1em = 1% do menor lado da tela (definido pelo tv-info.js). */
.tvi {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1; text-align: center;
  -webkit-font-smoothing: antialiased;
}
.tvi-conteudo { width: 100%; padding: 0 4em; box-sizing: border-box; }
.tvi-mensagem { font-size: 5.5em; font-weight: 600; opacity: .9; margin-bottom: .6em; }
.tvi-hora { font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tvi-hm { font-size: 34em; }
.tvi-seg { font-size: 12em; opacity: .75; vertical-align: top; margin-left: .1em; display: inline-block; margin-top: .35em; }
.tvi-data { font-size: 6.5em; font-weight: 500; margin-top: .35em; opacity: .92; }

.tvi-clima {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  margin-top: 5em;
}
.tvi-icone { width: 18em; height: 18em; -webkit-flex-shrink: 0; flex-shrink: 0; }
.tvi-icone svg { width: 100%; height: 100%; display: block; }
.tvi-temp { font-size: 20em; font-weight: 700; margin: 0 .12em 0 .08em; font-variant-numeric: tabular-nums; }
.tvi-detalhes { text-align: left; }
.tvi-descricao { font-size: 5.5em; font-weight: 600; margin-bottom: .35em; }
.tvi-linha { font-size: 4.4em; opacity: .9; margin-bottom: .35em; white-space: pre; }
.tvi-cidade { font-size: 3.8em; opacity: .75; }

/* Tela em pé: tudo empilhado e hora um pouco menor para caber na largura. */
.tvi-retrato .tvi-hm { font-size: 26em; }
.tvi-retrato .tvi-seg { font-size: 9em; }
.tvi-retrato .tvi-data { font-size: 6em; }
.tvi-retrato .tvi-clima { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; margin-top: 8em; }
.tvi-retrato .tvi-icone { width: 24em; height: 24em; }
.tvi-retrato .tvi-temp { font-size: 24em; margin: .05em 0 .1em; }
.tvi-retrato .tvi-detalhes { text-align: center; }