* { box-sizing: border-box; }
html, body {
  margin:0;
  font-family: arial;
  font-size: .9rem;
}

.rowContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1px;
  background-color:#fff;
}
.colContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 1px;
  background-color:#fff;
}
.redCo  {
  color: #d9222a;
}
.redBg  {
  color: #fff;
  background-color: #d9222a;
}
.greyCo  {
  color: #000;
}
.greyBg  {
  color: #000;
  background-color: #ddd;
}
.col  { 
  padding:1px;
}


/* Create four equal columns that sits next to each other */

.item {
  width: 100%;
  margin: 1px 0;
  padding: 4px;
  
}


@media only screen and (max-width:8000px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { flex: 20%; max-width: 20%; flex-direction:row; padding: 8px 8px; } .col_lo{ flex: 15%; max-width: 15%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 45%; max-width: 45%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 15%; max-width: 15%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 45%; max-width: 45%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width:1600px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { flex: 20%; max-width: 20%; flex-direction:row; padding: 8px 8px; } .col_lo{ flex: 15%; max-width: 15%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 45%; max-width: 45%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 15%; max-width: 15%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 45%; max-width: 45%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width:1400px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { flex: 15%; max-width: 15%; flex-direction:row; padding: 8px 8px; } .col_lo{ flex: 15%; max-width: 15%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 55%; max-width: 55%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 15%; max-width: 15%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 55%; max-width: 55%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width:1300px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { flex: 10%; max-width: 10%; flex-direction:row; padding: 8px 8px; } .col_lo{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 60%; max-width: 60%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 60%; max-width: 60%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width:1200px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { flex: 10%; max-width: 10%; flex-direction:row; padding: 8px 8px; } .col_lo{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 60%; max-width: 60%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 60%; max-width: 60%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width:1100px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { flex: 10%; max-width: 10%; flex-direction:row; padding: 8px 8px; } .col_lo{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 60%; max-width: 60%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 60%; max-width: 60%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width:1000px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { display:none;                                                    } .col_lo{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 80%; max-width: 80%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex: 20%; max-width: 20%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex: 80%; max-width: 80%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width: 750px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { display:none;                                                    } .col_lo{ flex: 30%; max-width: 30%; flex-direction:row;    padding: 8px 4px;} .col_ti{ flex: 70%; max-width: 70%; flex-direction:row;    padding: 8px 4px;} .col_me{ flex:100%; max-width:100%; flex-direction:row;    padding: 8px 4px;} .col_co{ flex:100%; max-width:100%; flex-direction:row;    padding: 8px 4px;} }
@media only screen and (max-width: 600px) { .rowContainer{ flex-direction: column; } .colContainer{ flex-direction: column; } .col_sl, .col_sr { display:none;                                                    } .col_lo{ flex:100%; max-width:100%; flex-direction:column; padding: 8px 4px;} .col_ti{ flex:100%; max-width:100%; flex-direction:column; padding: 8px 4px;} .col_me{ flex:100%; max-width:100%; flex-direction:column; padding: 8px 4px;} .col_co{ flex:100%; max-width:100%; flex-direction:column; padding: 8px 4px;} }
                                                                                                                   
@media only screen and (max-width:8000px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:3840px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1920px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1600px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1400px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1300px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1200px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1100px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width:1000px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width: 750px) { .rowContainer{ flex-direction: row   ; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex: 8.3333%; max-width: 8.3333%; flex-direction:row;    } .col02{ flex: 16.6666%; max-width: 16.6666%; flex-direction:row;    } .col03{ flex: 25%; max-width: 25%; flex-direction:row;    } .col04{ flex: 33.3333%; max-width: 33.3333%; flex-direction:row;    } .col05{ flex: 41.6666%; max-width: 41.6666%; flex-direction:row;    } .col06{ flex: 50%; max-width: 50%; flex-direction:row;    } .col07{ flex: 58.3333%; max-width: 58.3333%; flex-direction:row;    } .col08{ flex: 66.6666%; max-width: 66.6666%; flex-direction:row;    } .col09{ flex: 75%; max-width: 75%; flex-direction:row;    } .col10{ flex: 83.3333%; max-width: 83.3333%; flex-direction:row;    } .col11{ flex: 91.6666%; max-width:91.6666%; flex-direction:row;    } .col12{ flex:100%; max-width:100%; flex-direction:row;    }  }
@media only screen and (max-width: 600px) { .rowContainer{ flex-direction: column; } .colContainer{ flex-direction: column; } .col00{ display:none; } .col01{ flex:    100%; max-width:    100%; flex-direction:column; } .col02{ flex:     100%; max-width:     100%; flex-direction:column; } .col03{ flex:100%; max-width:100%; flex-direction:column; } .col04{ flex:     100%; max-width:     100%; flex-direction:column; } .col05{ flex:     100%; max-width:     100%; flex-direction:column; } .col06{ flex:100%; max-width:100%; flex-direction:column; } .col07{ flex:     100%; max-width:     100%; flex-direction:column; } .col08{ flex:     100%; max-width:     100%; flex-direction:column; } .col09{ flex:100%; max-width:100%; flex-direction:column; } .col10{ flex:     100%; max-width:     100%; flex-direction:column; } .col11{ flex:     100%; max-width:    100%; flex-direction:column; } .col12{ flex:100%; max-width:100%; flex-direction:column; }  }