.tabs {
  margin-bottom: 50px; }
  .tabs .button {
    background: #ffcc00;
    color: #333;
    font-size: 16px;
    height: 60px;
    padding: 20px 10px;
    margin-right: 10px;
    text-align: center;
    display: inline-block;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-color: #f0f0f0; }
    .tabs .button.tab-active {
      background: #eaeaea;
      border-color: #dcdbdb;
      color: #000; }
    .tabs .button:hover {
      background: #f0f0f0;
      text-decoration: none; }
  .tabs .menu-expanded {
    display: none;
    padding: 25px;
    position: relative;
    overflow: hidden;
    background: #eaeaea;
    border-color: #dcdbdb;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 0px; }
    .tabs .menu-expanded .button {
      margin-bottom: 10px; }
    .tabs .menu-expanded[for=online-library]:before {
      left: 35%; }
    .tabs .menu-expanded[for=health-campus]:before {
      left: 60%; }
    .tabs .menu-expanded[for=residents]:before {
      left: 85%; }

@media (max-width: 1000px) {
  .tabs .button {
    width: 100%; } }