/* headings */
.heading {
  margin-top: 2.25rem;
  font-size: 2.25rem;
  line-height: 1.125;
  font-weight: 900;
  text-align: center;
  color: #48b5b5;
}
/* glyph */
.heading::after {
  content: '';
  display: block;
  width: 30px;
  height: 10px;
  margin: 2.25rem auto;
  background-image: url('../img/mmc_icons.svg');
  background-position: -80px -200px;
  background-size: 860px 268px;
}
.content .heading-two {
  margin-top: 2.25rem;
  font-size: 1.5rem;
  line-height: 1.125;
  font-weight: 700;
  color: #3d9fc1;
}
.content .heading-three {
  font-size: 1.25rem;
  line-height: 1.125;
  font-weight: 700;
  color: #444;
}
.content .heading-four {
  font-size: 1.0625rem;
  line-height: 1.125;
  font-weight: 700;
  font-style: italic;
  color: #444;
}
/* element immediately following headers */
.content .heading-two + *,
.content .heading-two + .callout + * {
  margin-top: 0.5rem;
}
.content .heading-three + *,
.content .heading-three + .callout + * {
  margin-top: 0.25rem;
}
.content .heading-four + *,
.content .heading-four + .callout + * {
  margin-top: 0.25rem;
}
/* account for floated graphics below headings */
.content .heading-two + .graphic {
  margin-top: 1rem;
}
.graphic + p {
  margin-top: 0.5rem;
}



/* content */
.content {
  margin: 0 auto 2rem;
  max-width: 37.5rem; /* 600px */
}
/* universal top margin */
.content * + * { margin-top: 1rem; }

/* exclude break tags from universal top margin */
.content * + br { margin-top: 0; }

/* exclude .frames from universal top margin */
.content .frame { margin-top: 0; }

.content ul,
.content ol {
  padding-left: 2rem;
}

.content p,
.content li {
  font-size: 1rem;
  line-height: 1.5;
  color: #444444;
}

.content a {
  color: #3d9fc1;
  background-color: transparent;
}

/* gives links some padding for background-color */
.content p a,
.content li a {
  /* display: inline-block; */
  padding: 0 0.25rem 0.125rem;
  margin: 0 -0.25rem -0.125rem;
  background-color: transparent;
}
.content p a:hover,
.content li a:hover {
  background-color: rgba(61, 159, 193, 0.1875);
}

/* tables */
.content table {
  border-spacing: 1px;
  border-color: white;
}
/* zebra striping */
.content tr:nth-of-type(even) {
  background-color: rgba(61, 159, 193, 0.125);
}
.content tr:nth-of-type(odd) {
  background-color: rgba(61, 159, 193, 0.1875);
}
.content th {
  padding: 0.5rem 0.625rem;
  color: white;
  background-color: #3d9fc1;
  /*text-align: left;*/
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.content td {
  padding: 0.375rem 0.625rem;
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: #444444;
}
.content td p {
  font-size: inherit;
  line-height: inherit;
}



/* inline graphics (figure.graphic) */
.graphic {
  position: relative;
  margin-top: 1.375rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
.graphic[data-modal="photo"] {
  cursor: pointer;
}
.graphic img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.graphic figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.66);
}
.graphic p {
  font-size: 0.875rem;
  line-height: 1.25;
  color: white;
}
.graphic .figure-title {
  margin-bottom: 0.25rem;
  font-weight: 700;
  color: #444444;
}
/* remove top margin from image following .figure-title */
.graphic .figure-title + img { margin-top: 0; }

/* graphic size */
.graphic img {
  width: 100%;
  height: auto;
}

/* small graphic images */
.graphic img.small + figcaption {
  display: none;
}

/* thumbnail images */
img.thumb {
  width: 6.3125rem;
  height: 8.1875rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  border: 1px solid #ccc;
}
img.thumb.alignright {
  float: right;
  margin-left: 0.75rem;
}
img.thumb.alignleft {
  float: left;
  margin-right: 0.75rem;
}
/* remove margin and padding of thumbnail link */
.content p a[data-thumbnail-link="true"] {
  margin: 0;
  padding: 0;
}
/* remove the inserted PDF span */
.content p a[data-thumbnail-link="true"] + span[data-link-type="pdf"] {
  display: none;
}

/* thumbnail photos section */
.thumbnail-photos {
  overflow: hidden;
}
.thumbnail-photo {
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.thumbnail-photo .graphic {
  margin-top: 0;
  margin-bottom: 0;
}
.thumbnail-photo .photo-credit {
  margin-top: 0.5rem;
}

/* --- reduce initial caption height --- */
/* truncate caption text to one line */
.graphic[data-modal="photo"] p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* semi-transparent overlay (initially invisible) */
.graphic[data-modal="photo"]::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
}
/* on hover, undo caption text truncation */
.graphic[data-modal="photo"]:hover p {
  overflow: visible;
  white-space: normal;
}
/* on hover, show semi-transparent overlay */
.graphic[data-modal="photo"]:hover::before { opacity: 1; }



/* callout boxes */
.callout {
  position: relative;
  border-left: 0.5rem solid #3d9fc1;
  padding-left: 0.75rem;
  margin: 1.25rem 0 2rem;
}
.callout .callout-title {
  font-size: 1rem;
  font-weight: 700;
  color: #3d9fc1;
}
.callout .callout-text {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.375;
  color: #777777;
}



/* superscripts, subscripts */
sup {
  vertical-align: baseline;
  position: relative;
  top: -0.375rem;
}
sub {
  vertical-align: baseline;
  position: relative;
  top: 0.375rem;
}



/* footnotes */
hr.footnotes {
  margin: 2rem 0;
  border-style: none;
  border-top: 1px solid #ccc;
}



/* article boxes */
.content .article-box {
  text-align: center;
}
.content .intro-box {
  margin-bottom: 2.25rem;
}
.content .outro-box {
  margin-top: 2.25rem;
}
.content .article-box-heading {
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  color: #fff;
  background-color: #3d9fc1;
}
.content .article-box-text {
  margin-top: 0;
  padding: 1rem 1.25rem;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.125);
}
.content .article-box-section .section-heading {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #3d9fc1;
}
.content .article-box-section .section-heading + p {
  margin-top: 0;
}
.content .article-box-section p {
  line-height: 1.25;
}
/* remove some top margin of .graphic immediately following .article-box */
.content .article-box + .graphic {
  margin-top: 0.375rem;
}



/* tabular data */
.content .tabular {
  margin-top: 0.5rem;
}
/* clear top margin */
.content .entry,
.content .entry-text,
.content .accordion-title,
.content .accordion-info {
  margin-top: 0;
}



/* PDF links (progressively enhanced below) */
a[href*=".pdf"]::after,
span[data-link-type="pdf"] {
  content: '';
  display: inline-block;
  margin: 0 1px -2px 5px;
  width: 24px;
  height: 12px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -60px -242px;
  background-size: 860px 268px;
}
/* if JS is enabled, data attribute is applied, removing pseudo element, */
/* and span is added in its place with click event attached */
a[data-js="enabled"]::after {
  display: none;
}
span[data-link-type="pdf"] {
  cursor: pointer;
}



/* external links */
.content p a[data-link-type="external"]::after {
  content: '';
  display: inline-block;
  margin: 0 1px -2px 5px;
  width: 27px;
  height: 12px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -60px -220px;
  background-size: 860px 268px;
}



/* button links */
.content p a.mmc-button {
  display: inline-block;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 0.1875rem;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  color: white;
  background-color: #3d9fc1;
}
.content p a.mmc-button:hover {
  background-color: #378fad;
}



/* Google Map (div containing iframe) */
.google-map {
  position: relative;
}
.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
/* 2:3 aspect ratio */
.google-map::before {
  content: '';
  display: block;
  padding-top: calc(100% / 3 * 2);
}



@media (min-width: 30em) {
  /* graphic size and positioning */
  .graphic.alignleft {
    float: left;
    margin-right: 2rem;
  }
  .graphic.alignright {
    float: right;
    margin-left: 2rem;
  }
  .graphic.alignleft img,
  .graphic.alignright img {
    width: 17.5rem;
    height: 12.5rem;
  }
  /* small graphic images */
  .graphic img.small {
    width: 10rem;
    height: 7.5rem;
  }

  /* thumbnail photos section */
  .thumbnail-photo .graphic,
  .thumbnail-photo .photo-credit {
    float: left;
    width: calc(50% - 0.5rem);
  }
  .thumbnail-photo .graphic {
    margin-right: 1rem;
  }
  .thumbnail-photo .photo-credit {
    margin-top: 0;
  }

  /* callout size positioning */
  .callout {
    width: 15rem;
  }
  .callout.alignleft {
    float: left;
    margin-right: 2rem;
  }
  .callout.alignright {
    float: right;
    margin-left: 2rem;
  }
  .callout.fullwidth {
    width: 100%;
  }
}

@media (min-width: 50em) {
  .graphic.alignleft {
    left: -2rem;
    margin-right: 0;
  }
  .graphic.alignright {
    right: -2rem;
    margin-left: 0;
  }

  .callout.alignleft {
    left: -2rem;
    margin-right: 0;
  }
  .callout.alignright {
    right: -2rem;
    margin-left: 0;
  }
  .callout.fullwidth {
    left: -2rem;
    width: calc(100% + 4rem);
  }
}