@import url("https://use.typekit.net/xbe6int.css");

:root {
	--duration: .25s;
	--borderopacity: .35;
	--bezier1: cubic-bezier(0.19, 1, 0.22, 1);
	--air: 6rem;
	--color1: #fff;
	--color2: #444;
	--color3: #c71a03;
	--color4: #f02d00;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
input,
textarea,
select {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

ol,
ul {
	list-style: none;
}

blockquote {
	quotes: none;
}

blockquote:before,
blockquote:after {
	content: '';
	content: none;
}

a {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

object {
	cursor: pointer;
}

.clear {
	display: block;
	clear: both;
	width: 100%;
	height: 0;
	zoom: 1;
}

.relative {
	position: relative;
}

.text--left {
	text-align: left;
}

.text--center {
	text-align: center;
}

.text--right {
	text-align: right;
}

.text--uppercase {
	text-transform: uppercase;
}

.padded {
	padding: var(--air);
}

.padded--left {
	padding-left: var(--air);
}

.padded--right {
	padding-right: var(--air);
}

.bg--color1 {
	background-color: var(--color1);
	position: relative;
	z-index: 2;
}

.bg--color4 {
	background-color: var(--color4);
}

img {
	display: block;
	pointer-events: none;
	max-width: 100%;
	margin: 0;
}

img.loadable {
	transition: opacity calc(var(--duration) * 2) ease-out, transform calc(var(--duration) * 8) var(--bezier1);
	opacity: 0;
	transform: scale(.5);
}

img.loadable.loaded {
	opacity: 1;
	transform: none;
}

svg {
	display: block;
	width: 100%;
}

* {
	box-sizing: border-box;
	outline: none;
}

.maxwidth {
	width: 100%;
	max-width: 120rem;
	margin-left: auto;
	margin-right: auto;
}

.maxwidth2 {
	width: 100%;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}

.maxwidth3 {
	width: 100%;
	max-width: 55rem;
	margin-left: auto;
	margin-right: auto;
}

body.has--popup,
body.has--popup2,
body.processing {
	overflow: hidden;
}

html {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}

body {
	font-family: 'ff-market-web', cursive;
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1.5;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
	-webkit-overscroll-behavior: none;
	background-color: var(--color1);
	color: var(--color2);
	overflow: hidden;
	height: 100vh;
}

body.intro {
	height: auto;
	overflow: auto;
}

button {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	line-height: 1.2;
}

h2 {
	font-size: 200%;
	margin-bottom: 1em;
}

.texts > .in > .inn > * + *,
.textos > * + * {
	margin-top: .7em;
}

.textos a {
	color: var(--color4);
}

body.desktop .textos a:hover {
	text-decoration: underline;
}

#hero {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: var(--color3);
	overflow: hidden;
	transition: opacity calc(var(--duration) * 4) ease-out;
	z-index: 0;
}

body.revealing #hero {
	opacity: 0;
}

#hero > .in {
	position: relative;
	width: 100vw;
	height: 100vh;
	transition: filter calc(var(--duration) * 4) ease-out, opacity calc(var(--duration) * 4) ease-out;
}

body.intro #hero > .in {
	filter: blur(10px);
	opacity: .3;
}

#hero .img {
	display: block;
	position: absolute;
	width: 25%;
	z-index: 2;
	border-radius: 10px;
	overflow: hidden;
}

#hero img {
	display: block;
	width: 100%;
	object-fit: contain;
}

#hero .img:nth-of-type(1) {
	left: 5vw;
	bottom: 15vh;
}

#hero .img:nth-of-type(2) {
	left: 50%;
	top: 50%;
	width: 45%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

#hero .img:nth-of-type(3) {
	right: 5vw;
	top: 15vh;
}

#intro,
#tamos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	z-index: 1000;
	color: var(--color1);
	text-align: center;
	overflow: scroll;
	pointer-events: none;
	transition: transform calc(var(--duration) * 4) ease-out, opacity calc(var(--duration) * 4) ease-out;
}

#tamos {
	height: 100vh;
	position: absolute;
	overflow: hidden;
	z-index: -1;
	transition: transform calc(var(--duration) * 8) ease-out, opacity calc(var(--duration) * 4) ease-out;
}

.hold {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: transform calc(var(--duration) * 8) ease-out, opacity calc(var(--duration) * 4) ease-out;
}

body.revealed .hold {
	opacity: 1;
	height: auto;
}

body:not(.revealed) .hold {
	margin-bottom: 0 !important;
}

body.revealed #tamos {
	opacity: 1;
	position: relative;
	transform: none;
	z-index: auto;
	pointer-events: auto;
}

#intro {
	opacity: 0;
	position: relative;
	visibility: hidden;
}

body.intro #intro {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

#intro > .in {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform calc(var(--duration) * 4) ease-out, opacity calc(var(--duration) * 4) ease-out;
}

#intro > .in > .inn {
	padding: var(--air) var(--air) 0;
	transition: transform calc(var(--duration) * 4) ease-out, opacity calc(var(--duration) * 4) ease-out;
}

body.revealing #intro > .in > .inn {
	opacity: 0;
}

#reveal {
	margin-bottom: var(--air);
	text-align: center;
	transition: transform calc(var(--duration) * 16) ease-out, opacity calc(var(--duration) * 8) calc(var(--duration) * 8) ease-out;
}

body.revealing #reveal {
	transform: translateY(-150%) scale(2.5);
	opacity: 0;
}

body.revealing {
	pointer-events: none !important;
}

#reveal {
	margin-top: 2em;
}

#reveal img {
	display: block;
	width: 15rem;
	animation: pop calc(var(--duration) * 8) forwards infinite;
}

@keyframes pop {

	15%,
	45% {
		transform: scale(1.1);
	}

	0%,
	30%,
	60%,
	100% {
		transform: scale(1);
	}
}

@keyframes vibra {

	0%,
	100% {
		transform: translate(-10%, 10%);
	}

	20% {
		transform: translate(15%, -5%);
	}

	40% {
		transform: translate(5%, 5%);
	}

	60% {
		transform: translate(-5%, 12%);
	}

	80% {
		transform: translate(0%, 3%);
	}
}

body.revealing #reveal img {
	animation: vibra calc(var(--duration) * 2) alternate infinite;
}

#tamos svg {
	margin-top: 0;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

#tamos .wait {
	opacity: 0;
	margin-top: 2em;
	transform: translateY(150%) rotate(17deg);
	transition: transform calc(var(--duration) * 4) calc(var(--duration) * 8) var(--bezier1), opacity calc(var(--duration) * 2) calc(var(--duration) * 8) ease-out;
}

body.revealed #tamos .wait {
	opacity: 1;
	transform: none;
}

p.big {
	font-size: 125%;
	font-weight: 700;
}

.list {
	border-top: 1px solid #ccc;
	padding-top: var(--air);
	padding-bottom: var(--air);
}

footer.list {
	display: none;
}

body.revealed footer.list {
	display: block;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 0;
	background: var(--color3);
	color: var(--color1);
	opacity: 0;
}

.codes {
	overflow: scroll;
	margin-top: 1em;
	font-family: arial, sans-serif;
	text-align: center;
	color: var(--color4);
}

.codigo {
	display: block;
	white-space: nowrap;
	padding: .5em;
	border: 2px solid #ccc;
	border-radius: 10px;
}

.codigo + .codigo {
	margin-top: .5em;
}

.list .img {
	float: left;
	width: 30%;
	border-radius: 10px;
	overflow: hidden;
}

.list .imgg {
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	background: #eee;
	position: relative;
}

.list .img img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform calc(var(--duration) * 3) var(--bezier1);
}

body.desktop .list .img:hover img {
	transform: scale(1.07);
}

.list .txt {
	float: right;
	padding-left: 30px;
	width: 70%;
}

.list li:nth-of-type(even) .img {
	float: right;
}

.list li:nth-of-type(even) .txt {
	float: left;
	padding-left: 0;
	padding-right: 30px;
}

.list .txt h3 {
	padding-bottom: .3em;
	border-bottom: 1px solid #ccc;
	margin-bottom: .3em;
}

.list .txt h3 a {
	display: block;
	color: var(--color4);
}

.list .vermas {
	text-align: right;
	margin-top: 1em;
	font-size: 75%;
}

.list .vermas a {
	display: inline-block;
	padding: .3em .5em;
	border-radius: 5px;
	background: var(--color4);
	color: var(--color1);
	white-space: nowrap;
	transition: background calc(var(--duration) * 1) ease-out;
}

body.desktop .list .vermas a:hover {
	background: var(--color2);
	color: var(--color1);
}

body.desktop .list .txt h3 a:hover {
	text-decoration: underline;
}

.list li + li {
	margin-top: var(--air);
	border-top: 1px solid #ccc;
	padding-top: var(--air);
}

@media all and (orientation: portrait) {

	#hero .img {
		width: 40%;
	}

	#hero .img:nth-of-type(2) {
		width: 70%;
	}

	.list .img,
	.list li:nth-of-type(even) .img {
		float: none;
		width: 70%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.list .txt,
	.list li:nth-of-type(even) .txt {
		width: 100%;
		float: none;
		padding-left: 0;
		padding-right: 0;
		padding-top: 1em;
	}

	.list .vermas {
		text-align: center;
	}

}

@media all and (max-width: 800px) {

	.padded {
		padding: var(--air) calc(var(--air) * .5);
	}

	.padded--left {
		padding-left: calc(var(--air) * .5);
	}

	.padded--right {
		padding-right: calc(var(--air) * .5);
	}

	#intro > .in > .inn {
		padding: var(--air) calc(var(--air) * .5) 0;
	}

	.codigo {
		font-size: 85%;
	}

	h2 {
		font-size: 150%;
	}
}

@media all and (max-width: 600px) {

	.codigo {
		font-size: 1.8rem;
	}
}