h1.college-name-mid {
  display: none;
}

@media screen and (max-width:960px) {
  div.logo {
    float: none;
  }

  div.logo-container > div > a:nth-child(2) > img {
    margin: auto;
    margin-top: 10px;
  }

  /* Hide the text with "|" */
  h1.college-name {
    display: none;
  }

  /* Display the text without "|" at center */
  h1.college-name-mid {
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 10px;
    font-size: 22px;
    padding-top: 10px;
  }

  div.logo-container > a.college-name {
    text-align: center
  }

  div.logo img {
    height: auto !important;
    width: 300px !important;
  }
}