// Footer section
// (specific to this architecture)

#footer {
  margin-top: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  padding: 0 20%;
  overflow: hidden;
  height: 60px;
  @include flex;
  flex-direction: row;
  align-items: center;
}

#footer::after {
  content: ""; /* empty but necessary */
  position: absolute;
  background-image: linear-gradient(to bottom, #575757 0, #3d3d3d 100%);
  background-repeat: repeat-x;
  box-shadow: 0px -2px 10px 0px #656565;
  height: 84px;
  left: -50vw;
  width: 150vw;
  z-index: -1;
  margin: 0;
}

.footer-navbar {
  flex: 1;
  @include flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

.footer-navbar a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  margin: 0 14px;
  font-size: 14px;
}

.footer-navbar a:hover {
  color: #a6a6a6;
}

footer .social-logo {
  height: 26px;
  width: 36px;
  margin: 0 8px;
}

footer .social-logo a {
  font-size: 24px;
  padding: 0 12px;
  margin: 0;
}

footer .logo-ot {
  margin-right: 20px
}
