html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  margin: 0;
}
/* Logo */
.header {
  background: #247201;
}
#fg-logo {
  text-indent: -9999px;
  margin: 0 auto;
  width: 287px;
  height: 52px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
  #fg-logo {
    background-size: 287px 52px;
  }
}
/* Demo CSS */
body {
  font-family: 'Open Sans',sans-serif;
  color: #222;
  margin: 0 auto;
  padding: 0 30px;
  max-width: 728px;
  background-color:#fafafa;
}

.top,
.bottom {
  text-align: center;
  border: solid black;
  border-width: 1px 0;
  padding: 1em;
  width: 100%;
  max-width: 540px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.top.is-sticky::after{
  content: " << is-sticky >>";
}
.bottom.is-sticky::after{
  content: " << is-sticky >>";
}

.top {
  top: 0;
}
.bottom {
  bottom: 0;
}
#top-a {
  top: 32px;
}
#bottom-b {
  bottom: 16px;
}

/* Demo Colors */
#top-a,
#bottom-a {
  background-color: #f00;
  background-color: rgba(255,0,0,.6);
}
#top-b,
#bottom-b {
  background-color: #0f0;
  background-color: rgba(0,255,0,.6);
}
.container {
  background-color: #333;
  color:#fff;
}