/* CSS just to do with the footer and lower nav areas */

/* lower nav stuff */
#lowernav-container {
  background: #3D3935;
  margin: 0 -9999rem;
  padding: 0.25rem 9999rem;
  color: #fff;
}

#lowernav-container a {
  color: #fff;
}

/* footer stuff */
footer.page-footer > .bottom-bar {
  background:#FF8200;
  color: #fff;
  text-align: center;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  padding: 0px 5px;
  font-weight: bold;
}

footer.page-footer > .bottom-bar a {
  color: #fff;
}

footer.page-footer > .bottom-bar .bottom-bar-wide {
  height: 60px;
}

.bottom-bar-wide > .bottom-bar-part {
  width: 33%;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 0px 5px 5px;
  border-radius: 20%;
  box-sizing: content-box;
}

.fa:hover {
  opacity: 0.7;
  text-decoration: none;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

/* Override the bottom bar as fixed once the height or width of the screen is enough */
@media (min-height: 512px) {
  footer.page-footer > .bottom-bar {
    position: fixed;
  }

  .bottom-bar-spacer-wide {
    display: block;
  }

}

@media (max-height: 511px), (max-width: 592px) {
  footer.page-footer > .bottom-bar {
    position: static;
  }

  .bottom-bar-spacer-wide, .bottom-bar-spacer-narrow {
    display: none !important;
  }

}