@media screen and (min-width: 1020px) {
  #nav ul.school {
    width: 400px;
  }

  #nav ul.school li {
    width: 100% !important;
  }
  #nav ul.school span.set {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;

    background: #091074;
  }

  #nav ul.school span li {
    -webkit-flex: 0 1 46%;
    -ms-flex: 0 1 46%;
    flex: 0 1 46%;

    background: #091074;
    border: 1px solid #ffffff;
  }

  #nav ul.school span:nth-of-type(1) {
    padding-top: 2px;
  }
  #nav ul.school span:nth-of-type(6) {
    padding-top: 2px;
  }
  #nav ul.school span:nth-of-type(7) {
    padding-top: 2px;
  }
  #nav ul.school span:nth-of-type(9) {
    padding-top: 2px;
  }
  #nav ul.school span:nth-of-type(11) {
    padding-top: 2px;
  }
  #nav ul.school span:nth-of-type(12) {
    padding-top: 2px;
  }
  #nav ul.school span:nth-of-type(13) {
    padding-top: 2px;
  }

  #nav ul.school span:nth-of-type(5) {
    padding-bottom: 2px;
  }
  #nav ul.school span:nth-of-type(6) {
    padding-bottom: 2px;
  }
  #nav ul.school span:nth-of-type(8) {
    padding-bottom: 2px;
  }
  #nav ul.school span:nth-of-type(10) {
    padding-bottom: 2px;
  }
  #nav ul.school span:nth-of-type(11) {
    padding-bottom: 2px;
  }
  #nav ul.school span:nth-of-type(12) {
    padding-bottom: 2px;
  }

  #nav ul.school span li:nth-of-type(1) {
    margin: 2px 10px;
    padding: 3px 0px;
  }
  #nav ul.school span li:nth-of-type(2) {
    margin: 2px 0px;
    padding: 3px 0;
  }
}

@media screen and (max-width: 1020px) {
  #nav ul.school.on {
    max-height: 100%;
  }
}