:root {
  --main-radius: 5px;
  --main-padding: 5px;
  --content-padding: 40px;
}

body {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans Pro', sans-serif;
}

p {
  color: #383838;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

.container {
  display: grid;
  height: 100vh;
  /*min-height: 100vh;*/
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.1fr .4fr 2fr 0.4fr;
  grid-template-areas:
    "nav nav"
    "titlebar titlebar"
    "content1 content2"
    "footer footer";
  /*grid-gap: 0.2rem;*/
  text-align: center;
}

nav {
  background: #b6dab6;
  grid-area: nav;
  padding-top: 20px;
}

#titlebar {
  background: #fafafa;
  grid-area: titlebar;
  padding: 10px 0 20px 0;
}

#content1 {
  background: #b6dab6;
  grid-area: content1;
  padding: var(--content-padding);
}

#content2 {
  background: #b6dab6;
  grid-area: content2;
  padding: var(--content-padding);
}

footer {
  background: #aeb8ae;  /* #c0cfc0 */
  grid-area: footer;
  padding-top: var(--main-padding);
}

.overview-blk {
  padding: 20px 40px;
  background-color: #d1e6d1;
  text-align: left;
}
.overview-blk > figure {
  margin: 0 auto 20px auto;
  max-width: 104px;
  max-height: 104px;
}
.overview-blk > figure > img {
  width: 100%;
}

.main-title {
  color: #525252; /* #383838 */
  font-family: 'Nunito', sans-serif;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: .05em;
}

.sub-title {
  color: #525252;
  font-family: 'Nunito', sans-serif;
  font-size: 28px;
  font-weight: 200;
  text-transform: lowercase;
}

.section-header {
  color: #525252;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  line-height: 22px;
  text-transform: uppercase;
}

/.snd-section {
}
.sound-item {
  display: inline-flex;
  margin-top: 10px;
}
.sound-item img {
  width: 46px;
  height: 46px;
  margin: 0px 6px 6px 0;
  cursor: pointer;
}
.sound-item a {
  margin: 0px 6px 6px 6px;
}
.snd-name {
  padding: 0 10px 10px 10px;
  text-align: left;
  min-width: 150px;
  color: #787878;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
}
.snd-desc {
  padding: 0 10px 10px 10px;
  text-align: left;
  color: #787878;
  font-family: 'Source Sans Pro', sans-serif;
}

.txt-footer {
  padding-top: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

.txt-copyright {
  padding: 10px 0 32px 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
}


/*
---------------------------------------------
  custom sound player
---------------------------------------------
*/
.player-container {
  display: inline-block;
  margin-bottom: 0;
  padding: 0;
  width: 328px;
  height: 140px;
}

.player-container-noshow { /* for use on home page */
  padding: 0;
}


/*
---------------------------------------------
  media queries
---------------------------------------------
*/
@media only screen and (max-width: 1200px) {
  .sound-item {
    display: block;
    margin-top: 20px;
  }
  .snd-name {
    padding: 0 10px 10px 0;
  }
  .snd-desc {
    padding: 0 10px 10px 0;
  }
}

@media only screen and (max-width: 900px) {  /* 550 */
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 0.8fr 2.2fr 2.2fr 1fr;
    grid-template-areas:
      "nav"
      "titlebar"
      "content1"
      "content2"
      "footer";
  }
  #content1 {
    padding: 14px;
  }
  #content2 {
    padding: 14px;
  }
}