:root {
	--dark: #222427;
	--blue: #408092;
	--gray: #b2c4ce;
	--orange: #f07964;
	--light: #FFFFFF;
	--cyan: #80E6FF;
}


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

body {
	/*    background: #eee;*/
	font-family: Lato, sans-serif;
	font-weight: bold;
	font-size: 16.5px;
	line-height: 1.5;
	color: var(--dark);
	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: white;
	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(-15%);

}

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

.story-block-big video {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100vh;
}


/* swiper blocks */
.swiper-pagination,
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
	width: 100%;
	height: 2px !important;
	left: 0;
	top: 0;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: white !important;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}








.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);
	margin-bottom: 32px;
}

.heading .title {
	font-family: 'Estado Headline', serif;
	font-weight: bold;
	font-size: 61px;
	line-height: 1;
	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 {
	/*margin-top: 250px;*/
	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: .55;
	margin-top: 1em;
	color: var(--light);
}

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

a:link,
a:visited,
a:hover,
a:active {
	color: var(--light);
}

/* audible */

.audible {
	background: rgba(255, 249, 249, 0.41);
	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: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	color: var(--light);
}





/* custom story styles */

.light {
	color: var(--light) !important;
}

.dark {
	color: var(--dark) !important;
}

.orange {
	color: var(--orange) !important;
}

.blue {
	color: var(--blue) !important;
}

.cyan {
	color: var(--cyan) !important;
}

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

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

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


@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);
}


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


/* responsive */

@media (min-height: 668px) {

	.swiper-blocks {
		padding: 0;
	}

}

@media (max-width: 375px) {
	.heading .title {
		font-size: 52px;
		line-height: 1.2;
	}

	.subtitle {
		font-size: 14px;
		margin-top: 0;
	}

	body {
		font-size: 12px !important;
	}

	.numerao {
		font-size: 30px !important;
	}

	.story-block {
		transform: translateY(-45%);
	}

}

@media (max-width: 1366px) {
	.heading .title {
		font-size: 37px;
		line-height: 1.2;
	}

	.subtitle {
		margin-top: 0;
	}

}


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


.numerao {
	font-size: 43px;
	font-family: 'Lato', arial;
	font-weight: 900;
	color: var(--cyan);
}

.sombra {
	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);
}


.swiper-button-prev,
.swiper-button-next {
	color: var(--light) !important;
	top: 50%;
	width: 15px;
	height: 32px;
	margin-top: -22px;
	z-index: 10;
	cursor: pointer;
	background-size: 15px 32px;
	background-position: center;
	background-repeat: no-repeat;
}

.swiper-button-next:focus {
	outline: none !important;
}

.swiper-button-prev:focus {
	outline: none !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity: 0 !important;
}