:root {
    --dark: #07080a;
    --blue: #408092;
    --gray: #b2c4ce;
    --orange: #FF816B;
    --light: #FFFFFF;
}


/* reset */

*,
*::before,
*::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(--dark);
}

body {
    background: #eee;
    font-family: Lato, sans-serif;
    font-weight: bold;
    font-size: 21px;
    line-height: 1.5;
    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-slide,
.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.story-slide {
    opacity: 0;
    background: #eee;
    transition: all .4s;
}

.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;
}

.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;
}


/* 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: 96px;
    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.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 {
    min-height: 126px;
    /* 21px (font-size) × 1.5 (line-height) × 4 lines */
    max-width: 426px;
}

/* heading */

.heading span {
    display: block;
}

.heading .kicker {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .2em;
    color: var(--light);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35), 1px 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.3);
}

.heading .title {
    font-family: 'Estado Headline', serif;
    font-weight: bold;
    font-size: 64px;
    line-height: 1.2;
    color: var(--light);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: font-size .4s;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35), 1px 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-family: Lato, sans-serif;
    font-weight: bold;
    font-size: 21px;
    line-height: 1.5;
    color: var(--light);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35), 1px 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.3);
}

/* 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(--orange);
}

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

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

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


/* buttons */

a.button {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .2em;
    color: var(--light);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid currentColor;
    padding: 8px 16px;
    user-select: none;
    cursor: pointer;
}


/* 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: 2;
}

.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: 144px;
    top: 0;
    right: 0;
    left: 0;
    padding: 0 24px;
    z-index: 1;
    transition: max-height 1s;
    user-select: none;
}

.header-container::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .33;
    transition: opacity .4s;

    /* Gradient easing https://larsenwork.com/easing-gradients/ */
    /* background: linear-gradient(
    to bottom,
    hsl(200, 49.79%, 46.08%) 0%,
    hsla(200, 49.79%, 46.08%, 0.987) 8.1%,
    hsla(200, 49.79%, 46.08%, 0.951) 15.5%,
    hsla(200, 49.79%, 46.08%, 0.896) 22.5%,
    hsla(200, 49.79%, 46.08%, 0.825) 29%,
    hsla(200, 49.79%, 46.08%, 0.741) 35.3%,
    hsla(200, 49.79%, 46.08%, 0.648) 41.2%,
    hsla(200, 49.79%, 46.08%, 0.55) 47.1%,
    hsla(200, 49.79%, 46.08%, 0.45) 52.9%,
    hsla(200, 49.79%, 46.08%, 0.352) 58.8%,
    hsla(200, 49.79%, 46.08%, 0.259) 64.7%,
    hsla(200, 49.79%, 46.08%, 0.175) 71%,
    hsla(200, 49.79%, 46.08%, 0.104) 77.5%,
    hsla(200, 49.79%, 46.08%, 0.049) 84.5%,
    hsla(200, 49.79%, 46.08%, 0.013) 91.9%,
    hsla(200, 49.79%, 46.08%, 0) 100%
  ); */


    /*
    background: linear-gradient(to bottom,
    hsl(192.59, 38.76%, 40.98%) 0%,
    hsla(192.59, 38.76%, 40.98%, 0.987) 8.1%,
    hsla(192.59, 38.76%, 40.98%, 0.951) 15.5%,
    hsla(192.59, 38.76%, 40.98%, 0.896) 22.5%,
    hsla(192.59, 38.76%, 40.98%, 0.825) 29%,
    hsla(192.59, 38.76%, 40.98%, 0.741) 35.3%,
    hsla(192.59, 38.76%, 40.98%, 0.648) 41.2%,
    hsla(192.59, 38.76%, 40.98%, 0.55) 47.1%,
    hsla(192.59, 38.76%, 40.98%, 0.45) 52.9%,
    hsla(192.59, 38.76%, 40.98%, 0.352) 58.8%,
    hsla(192.59, 38.76%, 40.98%, 0.259) 64.7%,
    hsla(192.59, 38.76%, 40.98%, 0.175) 71%,
    hsla(192.59, 38.76%, 40.98%, 0.104) 77.5%,
    hsla(192.59, 38.76%, 40.98%, 0.049) 84.5%,
    hsla(192.59, 38.76%, 40.98%, 0.013) 91.9%,
    hsla(192.59, 38.76%, 40.98%, 0) 100%);
*/


}

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

.header-container.dark .brand {
    color: var(--dark);
}

.header-container.dark .header-divider {
    background: var(--dark);
}

.header-container.dark .sponsor img.dark {
    opacity: 1;
}

.header-container.dark .sponsor img:not(.dark) {
    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: 32px;
    color: var(--light);
    transition: all .4s;
}

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

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

.sponsor {
    position: relative;
}

.sponsor img {
    height: 32px;
    transition: all .4s;
}

.sponsor img.dark {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

/* footer */

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

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

.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;
}





/* custom story styles */

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

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

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

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

.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%;
    }
}

.oculos {
    width: calc(66.66% - 48px);
    max-width: 240px;
}

.crew {
    max-width: 540px;
    width: 80%;
    margin: 0 auto;
    transform: translateY(-20%);
}

.authors-photo {
    width: 80%;
    margin: 0 auto;
    max-width: 360px;
}

.captain-photo {
    width: 50%;
    margin: 0 auto;
    max-width: 240px;
}

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


@media (max-width: 540px) {

    .house {
        object-fit: contain;
        object-position: 50% 100%;
    }

}

@media (min-width: 540px) {

    .fur-seal .swiper-blocks.top {
        justify-content: flex-end;
    }

    .fur-seal .swiper-blocks .dark {
        color: var(--light);
    }

    .story-slide.fur-seal .story-background {
        object-fit: cover;
        object-position: center;
    }

}

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

/*.station-line {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 144px;
    width: 8px;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: max-height .4s, opacity .3s;
}

[data-transition="false"] .story-slide-active .station-line {
    max-height: 144px;
    opacity: 1;
}*/

@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: 0;
    }

}

@media (max-width: 640px) {


    .heading .kicker {
        font-size: 14px;
        margin-bottom: 16px;
    }

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

    body,
    .subtitle {
        font-size: 16px;
    }

}


/* 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;
}
*/