.middle .social-icons a.icons--link {
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-weight: bold;
  font-size: 18px;
  width: 100%;
  display: inline;
}

.middle .social-icons .icons--link .circle {
  border: 2px solid var(--cutler);
  border-radius: 50%;
  height: 75px;
  width: 75px;
  color: var(--cutler);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.5;
  margin: 0 auto 20px;
  transition: 0.3s;
}

.middle .social-icons a.icons--link:hover .circle {
  background: var(--cutler);
  color: var(--white);
  text-decoration: none;
}

.middle .social-icons a.icons--link:focus .circle {
  background: var(--black);
  border: 2px solid var(--white);
  text-decoration: none;
  color: var(--white);
}

.middle .social-icons a.icons--link:hover,
.middle .social-icons a.icons--link:focus {
  text-decoration: none;
}

.icons {
  list-style: none;
  padding: 0 !important;
}

.icons li {
  text-align: center;
}

/* -----Layout----- */
.mod-page-container .social-icons-wrapper .component-wrapper {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.social-icons-wrapper h2 {
  text-align: center;
  margin-bottom: 30px;
}

.mod-page-container .social-icons-wrapper .component-wrapper h2 {
  padding-top: 0;
  margin-top: 0;
}

.social-icons {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
}

.social-icons li {
    min-width: 105px;
}

.social-icons li .icons--link .circle {
  margin: 0 auto;
}

/* -----Background and Content Colors----- */
.social-icons-wrapper {
  background-color: var(--light-gray);
}

.mod-page-container .social-icons-wrapper {
  background-color: var(--white);
}

/* Light Grey */
.social-icons-wrapper.light-grey {
  background-color: var(--light-gray);
}

.mod-page-container .social-icons-wrapper.light-grey {
  background-color: transparent;
}

/* White */
.social-icons-wrapper.white {
  background-color: var(--white);
}

.mod-page-container .social-icons-wrapper.white {
  background-color: transparent;
}

/* Trillium Off-white */
.social-icons-wrapper.trillium {
  background-color: var(--trillium);
}

.mod-page-container .social-icons-wrapper.trillium {
  background-color: transparent;
}

/* Cutler Green */
.social-icons-wrapper.cutler-green {
  background-color: var(--cutler);
}

.mod-page-container .social-icons-wrapper.cutler-green {
  background-color: transparent;
}

.social-icons-wrapper.cutler-green *,
.mod-page-container .social-icons-wrapper.cutler-green *,
.cutler-green .icons--link .circle.fa-2xl {
  color: var(--white);
}

.social-icons-wrapper.cutler-green .social-icons .icons--link .circle {
  border: 2px solid var(--white);
}

.social-icons-wrapper.cutler-green .social-icons .icons--link:hover .circle {
  background: var(--under-the-elms);
}

/* Under the Elms Green */
.social-icons-wrapper.elms {
  background-color: var(--under-the-elms);
}

.mod-page-container .social-icons-wrapper.elms {
  background-color: transparent;
}

.social-icons-wrapper.elms *,
.mod-page-container .social-icons-wrapper.elms *,
.elms .icons--link .circle.fa-2xl {
  color: var(--white);
}

.social-icons-wrapper.elms .social-icons .icons--link .circle {
  border: 2px solid var(--white);
}

/* Putnam Dark Grey */
.social-icons-wrapper.putnam-grey {
  background-color: var(--putnam);
}

.mod-page-container .social-icons-wrapper.putnam-grey {
  background-color: transparent;
}

.social-icons-wrapper.putnam-grey *,
.mod-page-container .social-icons-wrapper.putnam-grey *, 
.putnam-grey .icons--link .circle.fa-2xl {
  color: var(--white);
}

.social-icons-wrapper.putnam-grey .icons--link .circle {
  border: 2px solid var(--white);
}

/* Sycamore Green */
.social-icons-wrapper.sycamore {
  background-color: var(--sycamore);
}

.mod-page-container .social-icons-wrapper.sycamore {
  background-color: transparent;
}

/* Teal */
.social-icons-wrapper.teal {
  background-color: var(--teal);
}

.mod-page-container .social-icons-wrapper.teal {
  background-color: transparent;
}

.social-icons-wrapper.teal *,
.mod-page-container .social-icons-wrapper.teal *,
.teal .icons--link .circle.fa-2xl {
  color: var(--under-the-elms);
}

.social-icons-wrapper.teal .social-icons .icons--link .circle {
  border: 2px solid var(--under-the-elms);
}