/* Elements */

body {
  background-attachment: fixed;
  background-image: url('../graphics/hero_piledstone.jpg');
  background-size: cover;
}

section {
  background-color: white;
}

footer {
  background-color: rgb(116, 182, 182);
}

aside {
  background-color: white;
}

/* Header */
body > header div div {
  height: 50vh;
  margin-top: 50vh;
}

body > header .pane-opaque {
  background-color: rgba(255, 255, 255, .75);
}

body > header .pane-padded {
  padding: 1rem 0 2rem;
}

header h1 {
  color: darkcyan;
}

header h1 span {
  display: block;
  font-family: Muli, sans-serif;
  font-size: 7.5vw;
  font-variant: small-caps;
  font-weight: 300;
  margin-bottom: -2rem;
}

header h1 b {
  font-family: "Dancing Script", sans-serif;
  font-size: 10vw;
  font-weight: 700;
}

header nav {
  position: absolute;
  width: 100%;
  bottom: 1rem;
}

/* Callout */
#callout {
  background: url(../graphics/callout.png) no-repeat center center scroll;
}

#callout h1 {
  font-family: "Dancing Script", sans-serif;
}

/* Services */
#services h2 {
  font-family: Muli, sans-serif;
  font-variant: small-caps;
}

/* Portfolio */
#portfolio h2 {
  color: darkcyan;
  font-family: Muli, sans-serif;
  font-variant: small-caps;
}

/* Gallery */
.featherlight:last-of-type {
  background-color: rgba(8, 56, 56, 0.75);
}

.featherlight .featherlight-close-icon:focus {
  outline: none !important;
}

/* Feel */
.decal {
  border-radius: 50%;
}

span.decal {
  border: .5rem solid;
  display: block;
  margin: 1rem auto 2rem;
  padding: .5rem;
  position: relative;
  width: 12rem;
}

img.decal {
  width: 100%;
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  span.decal {
    width: 16rem;
  }
}