.office-links {
  padding: 0;
  list-style-type: none;
}

.office-links li {
  display: inline;
  padding: 0 .5em 0 .7em;
  border-left: 1px solid #333;
}

.office-links li:first-child {
  padding-left: 0;
  border-left: none;
}


.box1 a,
.box2 a,
.box3 a,
.box4 a {
  background-size:cover;
  background-position:top right;
  background-repeat:no-repeat;
  width:100%;
  display:block;
  position:relative;
  text-decoration: none;
}

.hero {
  background-image: url("./Images/academic_affairs.jpg");
}

.box1 a {
  background-image: url("#");
  background-color: #7CA6C0;
  border-bottom: 8px solid #7CA6C0;
}

.box2 a {
  background-image: url("#");
  background-color: #C76C14;
  border-bottom: 8px solid #C76C14;
}

.box3 a {
  background-image: url("#");
  background-color: #849E2A;
  border-bottom: 8px solid #849E2A;
}

.box4 a {
  background-image: url("#");
  background-color: #FFD100;
  border-bottom: 8px solid #FFD100;
}


.box1 a .caption,
.box2 a .caption,
.box3 a .caption,
.box4 a .caption {
  text-shadow: 2px 2px 5px #000;
}