/**
 * Saratoga styles
 */

.content-body {
  background-color: #f4f4f4;
  padding-top: 0;
}

.card {
  background-color: white;
}

.package {
  padding: 15px;
}

.package > * {
  margin-top: 10px;
}

.package > :first-child {
  margin-top: 0;
}

.content-body > .embed-infographic {
  margin: 0;
}


/**
 * Splash
 */

.content-body .splash {
  margin-top: 0;
  padding-top: 15px;
  max-width: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-body .splash * {
  color: white;
}

.splash > * {
	margin: 15px 0;
}

.p-intro {
  max-width: 600px;
	padding: 0 15px;
	box-sizing: content-box;
}

.p-intro p {
  font: 400 14px/1.5em "McClatchy Sans";
  text-align: center;
	margin: 10px 15px;
}

.p-intro .influencer-question {
	font: 500 20px/1.2em "McClatchy Sans";
}

/**
 * Grid
 */

.content-body .embed-infographic .grid {
  max-width: 600px;
  padding: 15px;
}

.grid .card {
  margin: 30px 0;
  box-shadow: 0px 0px 2px #999;
}

@supports( display: grid ) {
  .content-body .embed-infographic .grid {
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px;
  }

  .grid .card {
    margin: 0;
  }
}

/**
 * Bio
 */

.content-body .h2 {
  font-size: 22px;
  font-weight: 400;
}

.i-quote {
  border: 1px solid black;
  margin: 30px 0 30px;
  position: relative;
  align-self: stretch;
}

.i-quote:before {
  display: block;
  content: "\201C";
  font: 60px/1em "Georgia";
  width: 60px;
  height: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: #333;
}

.package p {
  font: 16px/1.5em "McClatchy Serif", serif;
}

.package .i-title {
  font: 400 12px/1.5em "McClatchy Sans", sans-serif;
  color: #707070;
}

/**
 * Logo
 */

@keyframes fadein {
  from { opacity: 0; }
  50% { opacity: 0; }
  to { opacity: 1; }
}

#p-logo {
  position: relative;
  width: 90%;
}

#p-logo #map {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  animation: fadein 4s ease;
}

#p-logo svg {
  position: relative;
}

#p-logo #the {
  animation: fadein 1s ease;
}

#p-logo #series {
  animation: fadein 3s ease;
}

#p-logo #influencer {
  animation: fadein 2s ease;
}