/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #B67C2D;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

/* ==========================================================================
    There's a problem, feathers, iron
    Bargain buildings, weights and pulleys
    Feathers hit the ground before the weight can leave the air
    Buy the sky and sell the sky and tell the sky and tell the sky..
   ========================================================================== */

.wrapper {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.wrapper figure {
  margin: 0;
  padding: 0;
}

header h1 {
  padding: 0.2em 0;
  margin: 0;
  font-size: 1.4rem;
  font-weight: normal;
  text-align: center;
  background-color: #B67C2D;
  color: #FFF;
}

header .img {
  margin: 0;
}

header .img img {
  max-width: 100%;
}

.wrapper section {
  margin: 0 auto 3em;
  padding: 0 1em;
}

.btn-box p {
    text-align: center;
    font-size: 0.9em;
}
.btn-cont {
    max-width: 500px;
    margin: 20px auto;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
}
.dl-img a{
    max-width: 120px;
    width: 48%;
}
.dl-img a:first-child {
    margin-right: 10px;
}
.dl-img a img {
    width: 100%;
}
.cm-phase {
    text-align: center;
    color: #888;
    border-bottom: 1px solid #888;
}

section section {
  margin: 0;
  padding: 0;
}

section.video figure {
  padding: 0 0 56.25%;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
}

section.video figure iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

section.video h2 {
  text-align: center;
  font-weight: normal;
  font-family: serif;
  font-size: 1.78rem;
}

section.video .tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
}

section.video .tabs li {
  width: 33.3333%;
  list-style-type: none;
  background-color: #EFEFEF;
  text-align: center;
  font-size: 0.8rem;
}

section.video .tabs li a {
  padding: 0.7em 0;
  display: block;
  text-decoration: none;
  color: #B67C2D;
  z-index: 0;
  position: relative;
}

section.video .tabs li:hover,
section.video .tabs li.selected {
  background-color: #B67C2D;
}

section.video .tabs li:hover a,
section.video .tabs li.selected a {
  color: white;
}

section.video .tabs li:hover a:after,
section.video .tabs li.selected a:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  margin-top: -7px;
  margin-left: -13px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 17px 13px 0 13px;
  border-color: #B67C2D transparent transparent transparent;
  z-index: 1;
}

section.video .content {
  margin-bottom: 1em;
  position: relative;
  min-height: 10rem;
  margin-bottom: 2rem;
}

section.video .content p {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  font-size: 0.92rem;
  line-height: 1.92rem;
  text-align: justify;
}

.wrapper .btn {
  border: 1px solid #B67C2D;
  line-height: 48px;
  width: 64%;
  max-width: 480px;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  color: #B67C2D;
  border-radius: 24px;
}

.wrapper .btn:hover {
  color: white;
  background-color: #B67C2D;
}

.wrapper .btn-cm {
  color: white;
  background-color: #464646;
  border-color: #464646;
  margin: 3rem auto;
}

.wrapper .btn-cm:hover {
  color: #464646;
  background-color: white;
  border-color: #464646;
}

section.story-cast {
  background-image: url(../../img/cm/nao-back.png);
  background-size: cover;
  padding: 2.8rem 0;
}

section.story-cast h2,
section.story-cast h3 {
  text-align: center;
  font-weight: normal;
  font-family: serif;
  font-size: 2.18rem;
  letter-spacing: 0.2rem;
}

section.story-cast h3 {
  font-size: 1.78rem;
  color: #222;
}

section.story p {
  color: #464646;
  text-align: center;
  font-size: 1rem;
  line-height: 2.8rem;
}

section.cast figure {
  margin-bottom: 2.32rem;
}

section.cast img {
  width: 100%;
}

section.cast p {
  text-align: center;
  color: #464646;
  line-height: 1.92rem;
  letter-spacing: 0.24rem;
}

section.cast .name b {
  font-weight: normal;
  font-size: 2.74rem;
  font-family: serif;
  letter-spacing: 0;
}

section.cast .name span {
  font-family: serif;
}

section.cast .comment {
  letter-spacing: 0.1rem;
  max-width: 642px;
  margin: 0 auto;
  text-align: justify;
}

section.video.interview h2,
section.video.interview h3 {
  text-align: center;
  font-weight: normal;
  font-family: serif;
  font-size: 2.18rem;
  letter-spacing: 0.2rem;
}

section.video.interview h3 {
  margin-top: 1rem;
  font-size: 1.38rem;
}

section.making-photo h2,
section.making-photo h3 {
  text-align: center;
  font-weight: normal;
  font-family: serif;
  font-size: 2.18rem;
  letter-spacing: 0.2rem;
}

section.making-photo h3 {
  font-size: 1.78rem;
  color: #222;
}

section.making-photo section {
  padding: 0;
  margin-bottom: 0;
}

section.making-photo .photos {
  width: 100%;
  min-height: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0;
}

section.making-photo .photos li {
  list-style-type: none;
  width: 49%;
  margin-bottom: 2%;
}

section.making-photo .photos li a {
  display: block;
}

section.making-photo .photos li a img {
  width: 100%;
  transition: 0.1s all;
}

section.making-photo .photos li a:hover img {
  opacity: 0.7;
}

#statement {
  text-align: center;
  padding: 0 0 60px;
}

#statement p {
    font-size: 1.2rem;
    line-height: 2.5rem;
}

#statement p.share {
    font-size: 1.8rem;
    margin: 2em auto 1em;
}

@media only screen and (min-width: 800px) {

  .wrapper section {
    padding: 1em 3em;
    margin-top: 4em;
  }

  section.video h2 {
    margin-top: 2em;
  }

  section.video .tabs {
    margin: 0 0 2rem;
  }

}