:root {
  --dark:   #393B41;
  --blue:   #408092;
  --gray:   #5d5d5d;
  --light:  #FFFFFF;
  --city:   #313131;
}

/* fonts */
@font-face {
  font-family: 'CircularStd';
  src: url('../fonts/CircularStd-Black.eot');
  src: url('../fonts/CircularStd-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-Black.woff') format('woff'), url('../fonts/CircularStd-Black.ttf') format('truetype'), url('../fonts/CircularStd-Black.svg#bcc26993292869431e54c666aafa8fcd') format('svg');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'CircularStd';
  src: url('../fonts/CircularStd-BlackItalic.eot');
  src: url('../fonts/CircularStd-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-BlackItalic.woff') format('woff'), url('../fonts/CircularStd-BlackItalic.ttf') format('truetype'), url('../fonts/CircularStd-BlackItalic.svg#bcc26993292869431e54c666aafa8fcd') format('svg');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'CircularStd';
  src: url('../fonts/CircularStd-Medium.eot');
  src: url('../fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-Medium.woff') format('woff'), url('../fonts/CircularStd-Medium.ttf') format('truetype'), url('../fonts/CircularStd-Medium.svg#bcc26993292869431e54c666aafa8fcd') format('svg');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'CircularStd';
  src: url('../fonts/CircularStd-MediumItalic.eot');
  src: url('../fonts/CircularStd-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-MediumItalic.woff') format('woff'), url('../fonts/CircularStd-MediumItalic.ttf') format('truetype'), url('../fonts/CircularStd-MediumItalic.svg#bcc26993292869431e54c666aafa8fcd') format('svg');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'CircularStd';
  src: url('../fonts/CircularStd-Book.eot');
  src: url('../fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-Book.woff') format('woff'), url('../fonts/CircularStd-Book.ttf') format('truetype'), url('../fonts/CircularStd-Book.svg#bcc26993292869431e54c666aafa8fcd') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'CircularStd';
  src: url('../fonts/CircularStd-BookItalic.eot');
  src: url('../fonts/CircularStd-BookItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-BookItalic.woff') format('woff'), url('../fonts/CircularStd-BookItalic.ttf') format('truetype'), url('../fonts/CircularStd-BookItalic.svg#bcc26993292869431e54c666aafa8fcd') format('svg');
  font-weight: 400;
  font-style: italic;
}


/* reset */

*,
*::before,w
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
video {
  display: block;
  max-width: 100%;
}

video::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}


/* logo */

.oesp {
  display: inline-block;
  position: relative;
  top: 0.19em;
  font-family: OESP;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.oesp-capital {
  font-size: 1.2em;
}

.oesp-estadao:before {
  content: '\f000';
}

.oesp-estadao-symbol:before {
  content: '\f001';
}

.oesp-estadao-logotype:before {
  content: '\f002';
}


/* structure */

html,
body,
.story,
.story-wrapper {
  position: relative;
  height: 100%;
  background: var(--city);
}

body {
  background: var(--city);
  font-family: 'CircularStd' , sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--light);
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* text-rendering: auto; */
  /* -webkit-font-smoothing: antialiased; */
  /* -moz-osx-font-smoothing: grayscale; */
}

.story-container,
.swiper-container,
.story-slide,
.story-gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.story-gradient {
  background: linear-gradient( rgba(57, 59, 65, 0), var(--dark) );
  mix-blend-mode: multiply;
  opacity: .9;
  top: auto;
  height: 50%;
}

.story-gradient.light {
  opacity: .7
}

.story-slide,
.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.story-slide {
  opacity: 0;
  background: var(--city);
  transition: all .4s;
}

.story-slide.dark {
  background: var(--dark);
}

.story-slide.map img {
  max-width: 640px;
  left: 50%;
  transform: translateX(-50%);
}

.story-slide::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  max-height: 216px;
  opacity: .5;
  transition: opacity .4s;
  background: linear-gradient(
    to bottom,
    hsl(0, 0%, 0%) 0%,
    hsla(0, 0%, 0%, 0.987) 8.1%,
    hsla(0, 0%, 0%, 0.951) 15.5%,
    hsla(0, 0%, 0%, 0.896) 22.5%,
    hsla(0, 0%, 0%, 0.825) 29%,
    hsla(0, 0%, 0%, 0.741) 35.3%,
    hsla(0, 0%, 0%, 0.648) 41.2%,
    hsla(0, 0%, 0%, 0.55) 47.1%,
    hsla(0, 0%, 0%, 0.45) 52.9%,
    hsla(0, 0%, 0%, 0.352) 58.8%,
    hsla(0, 0%, 0%, 0.259) 64.7%,
    hsla(0, 0%, 0%, 0.175) 71%,
    hsla(0, 0%, 0%, 0.104) 77.5%,
    hsla(0, 0%, 0%, 0.049) 84.5%,
    hsla(0, 0%, 0%, 0.013) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

.story-slide.transparent::after {
  content: none;
}

.story-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: all .4s, object-position .4s;
}

.story-background.cover {
  object-fit: cover;
}

.story-background.contain {
  object-fit: contain;
  border-radius: 8px;
  width: 80vw;
  height: 80vw;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  max-height: 300px;
}

.story-background.contain.vertical {
  width: calc(65vh * 0.5625);
  height: 65vh;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  max-height: none;
  max-width: none;
  overflow: hidden;
}

.story-background.center {
  object-position: 50% 50%;
}

.story-background.top {
  object-position: 50% 0%;
}

.story-background.right {
  object-position: 100% 50%;
}

.story-background.bottom {
  object-position: 50% 100%;
}

.story-background.left {
  object-position: 0% 50%;
}

.media-container {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .story-background.contain {
    max-width: 450px;
    max-height: 450px;
  }
}


/* story block */

.story-block {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: calc( 100% - 48px);
  max-width: 480px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateY( -25% );
}

.story-block video {
  transform: scale(1.01);
}


/* swiper blocks */

.swiper-blocks {
  position: absolute;
  top: 80px;
  right: 32px;
  bottom: 64px;
  left: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  opacity: 0;
  transition: all .6s;
}

.swiper-slide-active .swiper-blocks {
  opacity: 1;
}

.story[data-touchmove="true"] .swiper-slide-active .swiper-blocks {
  opacity: .33;
}

.swiper-blocks.spaced {
  justify-content: space-between;
}

.swiper-blocks.top {
  justify-content: flex-start;
}

.swiper-blocks.center {
  justify-content: center;
}

.swiper-blocks.center .swiper-block,
.swiper-block:not(:first-child):not(:last-child) {
  min-height: initial;
}

.swiper-blocks.bottom {
  justify-content: flex-end;
}

.swiper-block {
  /* 21px (font-size) × 1.5 (line-height) × 4 lines */
  /* min-height: 126px; */
  max-width: 311px;
}

/* heading */

.kicker,
.heading .date {
  color: var(--light);
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kicker.dark {
  color: var(--gray);
}

.heading .title {
  color: var(--light);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0.2em 0 0;
  transition: font-size .4s;
}


/* quote */

.quote {
  position: relative;
}

.quote::before {
  content: '“';
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translate( -50%, -100% );
  font-family: 'Estado Headline', serif;
  font-weight: bold;
  font-size: 64px;
  line-height: .666;
  color: var(--light);
}

.quote .author::before {
  content: '—';
  display: block;
  opacity: .25;
  margin-top: 1em;
}

.quote .author,
.quote .role {
  font-size: 14px;
  /* line-height: 1.5; */
  letter-spacing: .2em;
  text-transform: uppercase;
}

.quote .role {
  color: var(--light);
}


/* buttons */

button,
p.button,
a.button {
  background-color: transparent;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: var(--light);
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  padding: 8px 16px;
  text-transform: uppercase;
  text-decoration: none;
  user-select: none;
}

a {
  text-decoration: none;
  color: var(--light);
}

i.material-icons {
  font-size: 0.8em;
}


/* audible */

.audible {
  background: rgba( 0, 0, 0, .25 );
  position: fixed;
  bottom: 16px;
  left: 16px;
  height: 56px;
  width: 56px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .4s;
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
}

.audible.hidden {
  opacity: 0;
  pointer-events: none;
}

.audible i {
  font-size: 32px;
  display: block;
}

.audible i:last-child {
  display: none;
}

.audible[data-muted="false"] i:last-child {
  display: block;
}

.audible[data-muted="false"] i:first-child {
  display: none;
}

/* credits */

.credits p:first-child {
  font-size: 12px;
  font-weight: 400;
  opacity: .75;
  line-height: 1.4;
}

.credits .disclaimer {
  margin-top: 32px;
  font-size: 12px;
  font-weight: 400;
  opacity: .333;
  line-height: 1.5;
  max-width: 200px;
  margin: 32px auto 0;
}

/* animations */

@keyframes grow {
  0%   { transform: scale( 1   ); }
  100% { transform: scale( 1.1 ); }
}

.story-slide-active .story-background.grow,
.story-slide-near   .story-background.grow {
  animation-name: grow;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
}

@keyframes translate-right {
  0%   { object-position:   0% 50%; }
  100% { object-position: 100% 50%; }
}

.story-slide-active .story-background.translate-right,
.story-slide-near   .story-background.translate-right {
  animation-name: translate-right;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
}

@keyframes translate-left {
  0%   { object-position: 100% 50%; }
  100% { object-position:   0% 50%; }
}

.story-slide-active .story-background.translate-left,
.story-slide-near   .story-background.translate-left {
  animation-name: translate-left;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
}


/* header */

.header-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-height: 24px;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 24px;
  z-index: 1;
  transition: max-height 1s;
  user-select: none;
}


}

.header-container.transparent::before,
.header-container.dark::before {
  opacity: 0;
}

.header-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1140px;
  height: 55px;
  z-index: 2;
}

.header-brand {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.brand {
  font-size: 56px;
  color: var(--light);
  transition: all .4s;
}

.brand svg {
  height: 24px;
  transform: translateY( -2px );
}

.brand svg .a {
  transition: fill 0.4s ease;
}

.header-container.dark .brand svg .a {
  fill: var(--gray);
}

.header-divider {
  width: 2px;
  height: 24px;
  opacity: .25;
  margin: 0 14px;
  background: var(--light);
  transition: all .4s;
}

/* footer */

.swiper-slide footer,
.story-slide footer {
  display: flex;
  position: absolute;
  bottom: 24px;
  width: 100%;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 0s;
}

.swiper-slide-active footer,
.story-slide-active footer {
  opacity: 1;
  transition-delay: 1s;
}

.swiper-slide footer {
  left: 50%;
  transform: translateX(-50%);
  bottom: -5vh;
}

.swiper-slide footer p,
.story-slide footer p {
  width: 100%;
  font-weight: 400;
  opacity: .5;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.swiper-slide footer p {
  overflow: auto;
  white-space: normal;
}





/* custom story styles */

.light {
  color: var(--light)
}

.dark {
  color: var(--dark)
}

.blue {
  color: var(--blue)
}

.city {
  color: var(--city)
}

.render {
  max-width: 100%;
  transform: translateY( -10% );
  transition: all .4s;
  margin: 0 auto;
}

.render + .swiper-block {
  position: relative;
}

@media (min-width: 480px) {
  .render {
    max-width: 75%;
  }
}

.separator {
  transform: translateY( -32px );
}


@media (max-height: 540px) {

  .station-line {
    height: 96px;
  }

  [data-transition="false"] .story-slide-active .station-line {
    max-height: 96px;
  }

}

.story[data-touchmove="true"] .station-line,
.story[data-transition="true"] .station-line {
  max-height: 0px;
  opacity: 0;
}

.station-line::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--dark);
}

.station-line::after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 2px;
  height: calc( 100% - 8px );
  border-radius: 4px;
  background: var(--dark);
}

.swiper-slide:nth-child(2) .swiper-blocks {
  top: 64px;
}

.story-slide:first-child .media-container {
  transition: all .6s;
}

[data-current="2"] .story-slide:first-child .media-container {
  transform: translate(0, -50%);
  opacity: .5;
}

[data-current="2"] .story-slide:nth-child(3) .story-background {
  transform: translate(0, 50%);
  opacity: .5;
}

[data-current="3"] .story-slide:first-child .media-container {
  transform: translate(0, -100%);
  opacity: .5;
}

[data-current="3"] .story-slide:nth-child(3) .story-background {
  transform: translate(0, 0);
}


/* responsive */

@media (min-height: 668px) {

  .swiper-blocks {
    /* padding: 5vh 0 0; */
  }

}

@media (max-width: 340px) {

  .heading .title {
    font-size: 52px;
  }

}


/* restrain to iPhone (temporary) */

/*
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.story {
  width: 100%;
  height: 100%;
  max-width: 375px;
  max-height: 667px;
  overflow: hidden;
}
*/