/* Site-wide */
html,
body {
  height: 100%;
}

.layout,
.white-background-layout {
  min-height: 100vh;
  position: relative;
}

.layout .container,
.white-background-layout .container {
  padding-bottom: 90px;
}

body {
  background-attachment: fixed;
  background-position: top center;
  background-size: 100%;
  font-family: 'Quicksand', sans-serif;
}

.background-default {
  background-color: var(--brown);
  background-image: url("/assets/background_desktop_default-8fdeb72b.jpg");
}

.background-tapestry-blue {
  background-color: var(--blue-dk);
  background-image: url("/assets/background_desktop_tapestry_blue-0617ebb8.jpg");
}

.background-tapestry-gold {
  background-color: var(--gold);
  background-image: url("/assets/background_desktop_tapestry_gold-5bfd5223.jpg");
}

.background-tapestry-purple {
  background-color: var(--blue-dk);
  background-image: url("/assets/background_desktop_purple-90b9f496.jpg");
}

.background-gold {
  background-color: var(--gold);
  background-image: url("/assets/background_desktop_gold-2dcf7756.jpg");
}

.background-fall {
  background-color: var(--beige);
  background-image: url("/assets/background_desktop_fall-8adff275.jpg");
}

.background-december {
  background-color: var(--brown);
  background-image: url("/assets/background_desktop_december-e8b8d84e.jpg");
}

.background-spring {
  background-color: var(--blue-lt);
  background-image: url("/assets/background_desktop_spring-2e5c85b0.jpg");
}

.background-velvet {
  background-color: var(--teal);
  background-image: url("/assets/background_desktop_velvet-f7d78d58.jpg");
}

a:focus {
  outline: 0;
}

.spacer {
  height: 50px;
}

.submit-spacer {
  margin: 20px 0;
}

.right {
  float: right;
}

.hidden {
  display: none;
}

footer {
  background-color: var(--transparent-black);
  bottom: 0;
  clear: both;
  color: var(--gray);
  height: 90px;
  overflow: auto;
  padding: 20px 45px;
  position: absolute;
  width: 100%;
}

footer span {
  display: inline-block;
  float: right;
}


/* Media Queries */
@media only screen and (max-width: 768px) {
  body {
    background-size: 1000px;
  }

  .background {
    background-image: url("/assets/background_mobile_default-b26f4415.jpg");
  }

  .navbar-inverse .navbar-brand {
    font-size: 1em;
  }

  .spreads-index .sitename {
    font-size: 4em;
    line-height: 100%;
    margin-bottom: .25em;
  }

  .spreads-index .tagline {
    font-family: var(--script);
    font-size: 3.5em;
    line-height: 100%;
  }
}