/**
 * Overall theme styles
 */

html, body {
  margin: 0;
  padding: 0;
  background-color: white;
  font-size: 20px;
}

article > * {
  box-sizing: border-box;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

article h1 {
  font-size: 2.5em;
}

article p {
  font-family: "Lyon", Georgia, serif;
}

@media (max-width: 769px) {
  article > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  article h1 {
    font-size: 1.75em;
  }

  article ul, article ol {
    margin-left: 1rem;
  }
}

aside, figure.left, figure.right {
  display: block;
  max-width: 320px;
  padding: 1rem;
  float: left;
}

aside.right, figure.right {
  float: right;
}

@media (max-width: 640px) {
  aside, figure.left, figure.right {
    max-width: 100%;
    float: none !important;
  }

  figure.left figcaption, figure.right figcaption {
    padding-left: 0;
    padding-right: 0;
  }
}

figure {
  max-width: 960px;
  padding-left: 0;
  padding-right: 0;
}

figure img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

figcaption {
  margin-top: 4px;
}

blockquote .quote {
  display: inline;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.25em;
  margin: 0.25em;
  color: #999;
  position: relative;
}

blockquote .quote:before {
  content: open-quote;
  font-size: 2em;
  line-height: 0.1em;
  vertical-align: -0.2em;
  margin-left: -0.5em;
}

blockquote .quote:after {
  content: close-quote;
  font-size: 1.75em;
  line-height: 0;
  vertical-align: -0.3em;
}

/* Video */

.mcclatchy-video-wrapper {
  max-width: 720px;
}

.mcclatchy-embed { 
  position:relative;
  padding:40px 0 56.25%;
  height:0;
  overflow:hidden;
  max-width:100%
}

.mcclatchy-embed iframe { 
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%
}

/* Parallax and fullscreen */

figure.parallax, figure.fullscreen {
  max-width: 100%;
}

figure.parallax figcaption, figure.fullscreen figcaption {
  padding-left: 1rem;
  padding-right: 1rem;
}

app-box {
  height: calc(100vw * .6);
  max-height: 800px;
}

app-box #backgroundFrontLayer {
  position: relative;
  top: -60px;
}

/* Social Media */

social-media a {
  padding: 0.5rem 0.5rem 0 0;
}