/* Personalizações para diferentes dimensões */
:root {
  --tamanho-titulo: 3.5vw;
  --tamanho-deAte: 2vw;
  --tamanho-data: 2.5vw;
  --tamanho-legenda: 2vw;
}

@media only screen and (max-width: 400px) {
  :root {
    --tamanho-titulo: 3.5vw;
    --tamanho-deAte: 2vw;
    --tamanho-data: 2.5vw;
    --tamanho-legenda: 2.6vw;
  }
  #footer {
    padding-right: 20vw;
  }
}

/*Fonte*/
@font-face {
  font-family: 'title';
  src: url('../docs/Fontes/Kabrio-Alternate-Bold-Italic-trial.ttf');
}

@font-face {
  font-family: 'subtitle';
  src: url('../docs/Fontes/Kabrio-Alternate-Bold-trial.ttf');
}

@font-face {
  font-family: 'numberText';
  src: url('../docs/Fontes/Mohave-Bold.otf');
}

@font-face {
  font-family: 'text';
  src: url('../docs/Fontes/Kabrio-Alternate-Book-trial.ttf');
}

/* Common */
body {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: row;
}

.row {
  flex-direction: row;
}

.hide {
  display: none !important;
}

/* General */
#content {
  width: 100%;
  height: 38vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  z-index: -20;
}

#header {
  flex: 1.9;
  display: flex;
  padding-top: 3vw;
}

#counter {
  flex: 3;
}

#footer {
  flex: 1.1;
}

/* HEADER */
#header .title {
  font-family: title;
  z-index: 2;
  text-align: left;
  font-size: var(--tamanho-titulo);
}

#header .subtitle {
  font-family: text;
  z-index: 2;
  padding-left: 2vw;
  font-size: var(--tamanho-deAte);
}

#header .boxDate {
  color: white;
  border-radius: 5vh;
  z-index: 2;
  padding: 0vh 1.5vw;
  height: auto;
  font-family: 'Open Sans', sans-serif;
  margin-right: 1vw;
  font-size: var(--tamanho-data);
}

/* COUNTER */
#counter {
  display: flex;
  justify-content: left;
  align-items: left;
  position: absolute;
  padding-top: 5.5vw;
}

.container2 {
  padding-left: 7vw;
}

.container-total {
  width: 100%;
  justify-content: center !important;
}

.container-total .divField {
  width: 7.5vw;
}

#counter .divField {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.7vw;
}
#counter .fieldThousand {
  margin-right: 2.5vw;
}
#counter .field {
  font-size: 16vw;
  font-family: numberText;
}

/* FOOTER */
#footer {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

#footer span {
  font-family: text;
  line-height: 1;
  font-size: var(--tamanho-legenda);
}