html {
  height: 100%;
}
body {
  min-height: 100%;
}
.parent {
  display: grid;
  grid-template-columns: 0.5fr 4fr 0.7fr 4fr 0.4fr 6fr 0.5fr;
  width: 100%;

  grid-template-rows: 0fr 0.5fr 0.1fr 0.4fr 0.4fr 0.4fr 0.4fr 0.2fr;

  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div0 {
  grid-area: 2 / 2 / 3 / 7;
}
.div200 {
  grid-area: 2 / 6 / 3 / 7;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div300 {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.div1 {
  grid-area: 4 / 2 / 5 / 3;
}
.div2 {
  grid-area: 4 / 4 / 5 / 5;
}
.div4 {
  grid-area: 5 / 2 / 6 / 3;
}
.div5 {
  grid-area: 6 / 2 / 7 / 3;
}
.div6 {
  grid-area: 7 / 2 / 8 / 3;
}
.div7 {
  grid-area: 5 / 4 / 6 / 5;
}
.div8 {
  grid-area: 6 / 4 / 7 / 5;
}
.div9 {
  grid-area: 7 / 4 / 8 / 5;
}

.div100 {
  grid-area: 4 / 6 / 8 / 7;
}

#timetotal {
  font-size: 5vw;
}

.tituloformato {
  font-size: 3vw;
}

.sectorformato {
  display: table-cell;
  vertical-align: middle;
  align-items: center;

  height: 100%;
}

.actividadActual {
  text-align: center;
  margin: auto;
  /*overflow: hidden;*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: nowrap;
  overflow: hidden;

  @media (min-width: 1024px) {
    font-size: 2vw; 
    line-height: 1.4;
    height: 10em;
  }

  @media (min-width: 1440px) {
    font-size: 2vw; 
    line-height: 1.5;
    height: 10em;
  }

  @media (min-width: 1920px) {
    font-size: 2vw;
    line-height: 1.6;
    height: 10em;
  }

  @media (min-width: 2560px) {
    font-size: 2vw; 
    line-height: 1.7;
    height: 10em;
  }

  @media (min-width: 3840px) {
    font-size: 2vw;
    line-height: 1.8;
    height: 10em;
  }
}

.actividadEstado {

  display: table-cell;
  vertical-align: middle;
  align-items: center;

  padding-top: 1%;
  padding-bottom: 1%;

  @media only screen and (min-width: 1024px) {
    font-size: 4vw;
    line-height: 1;
    height: 1vw;
    padding-top: 1%;
    padding-bottom: 1%;
  }

  @media only screen and (min-width: 1920px) {
    font-size: 4vw;
    line-height: 1;
    height: 1.5vw;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
  }

  @media only screen and (min-width: 2560px) {
    font-size: 4vw;
    line-height: 1;
    height: 1.8vw;
    padding-top: 1.8%;
    padding-bottom: 1.8%;
  }

  @media only screen and (min-width: 3840px) {
    font-size: 4vw;
    line-height: 1;
    height: 2vw;
    padding-top: 2%;
    padding-bottom: 2%;
  }
}

.titulo {
  display: table-cell;
  width: calc(100vw - 1px);
  height: calc(100vh - 1px);
  vertical-align: middle;
  overflow: hidden;

  padding-top: 1%;
  padding-bottom: 1%;

  @media only screen and (min-width: 1024px) {
    font-size: 2vw;
    line-height: 1em;
    height: 4em;
    padding-top: 1%;
    padding-bottom: 1%;
  }

  @media only screen and (min-width: 1920px) {
    font-size: 2vw;
    line-height: 1em;
    height: 4.5em;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
  }

  @media only screen and (min-width: 2560px) {
    font-size: 2vw;
    line-height: 1em;
    height: 5em;
    padding-top: 2%;
    padding-bottom: 2%;
  }

  @media only screen and (min-width: 3840px) {
    font-size: 2vw;
    line-height: 1em;
    height: 4em; 
    padding-top: 2%;
    padding-bottom: 2%;
  }
}

.titulop {
  padding: 1em 0 0 0;

  @media only screen and (min-width: 1024px) {
    font-size: 3vw;
  }

  @media only screen and (min-width: 1920px) {
    font-size: 3vw;
  }

  @media only screen and (min-width: 2560px) {
    font-size: 3vw;
  }

  @media only screen and (min-width: 3840px) {
    font-size: 3vw;
  }
}