a, p, h1, h2, h3, h4, h5, body {
  color: #fff;
  text-decoration: none;
  margin: 0;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.2em;
  font-weight: normal; }

@font-face {
  font-family: "Editor Extrabold";
  src: url("../fonts/Editor-Extrabold.woff2") format("woff2"), url("../fonts/Editor-Extrabold.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
h1, h2, h3, a, p {
  font-family: 'Editor-Extrabold', serif;
  font-family: "urw-antiqua";
  font-family: "Editor Extrabold";
  color: #fff; 
  letter-spacing: -0.05em;
}

h4 {
	font-family: 'inter', sans-serif;
    font-size: 0.85vw;
}

p.center {
	text-align: center;
	font-size: 1.1vw;
    line-height: 1.4em;
}
p span {
	display: block;
	color: #FFF028;
}

body, html {
  overflow: hidden; }

body { margin: 0; border: 0; }

html {
    background-color: #0D001C;
/*    background-color: red;*/
}

body {
	width: 100%;
	height: 100%;
	position: fixed;
}

.rive-canvas {
	position: absolute;
    left: 50%;
    top: 50%;
    width: 105%; 
    transform: translate3d(-50%, -50%, 0);
    transform-origin: 0 0;
}

.envelope-btn {
	position: absolute;
	left: 50%; top: 50%;
	width: 37vw; height: 23vw;
/*	background-color: red;*/
	transform: translate3d(-50%, -50%, 0);
}

.envelope-btn:hover {
	cursor: pointer;
}

.envelope-btn.inactive {
	display: none;
}

canvas {
	width: 100%; height: 100%;
}

.not-shown {
	opacity: 0;
	transform: translateY(50%);
	transition: 1.9s cubic-bezier(.47,0,0,1);
}

.not-shown.shown {
	opacity: 1;
	transform: translateY(0%);
}

.delay-2 {
	transition-delay: 0.5s;
}
.delay-3 {
	transition-delay: 0.8s;
}
.delay-4 {
	transition-delay: 1.1s;
}

.buttons {
	position: absolute;
    top: 0;
    width: 100%;
    font-family: sans-serif;
    left: 0;
    height: 100%;
	
}

.buttons a {
	color: #181818 !important;
	text-align: center;
	border: 1px solid #181818;
	text-decoration: none;
}

.t-l {
	position: absolute;
	left: 2.4vw; top: 2.4vw;
}

.t-r {
	position: absolute;
	right: 2vw; top: 2vw;
}

.b-c {
	position: absolute;
	bottom: 2.4vw;
	left: 0; width: 100%;
/*	padding-bottom: 4vw;*/
}

.logo {
	width: 4.3vw; height: 4.3vw;
}

.carousel-container {
	position: absolute;
    bottom: 2.8vw;
    left: 2vw;
}
.carousel {
	position: absolute;
	top: 0;
	left: 0;
	width: 5vw;
	height: 2vw;
	transform: translate3d(0%, -50%, 0);
}

.play-sig {
	position: absolute;
	top: 2vw;
    left: -1vw;
	width: 10vw; height: 6vw;
}

@media only screen and (max-width: 900px) {
    .rive-canvas {
	    width: 205%;
  	} 
  	.logo {
	    width: 12vw;
	    height: 12vw;
	}
	p.center {
		font-size: 2.5vw;
	}
	.b-c {
	    position: absolute;
	    bottom: 13vw;
	    left: 10%;
	    width: 80%;
	}
	h4 {
	    font-size: 2.15vw;
	}
	.t-l {
		top: 4.5vw; left: 4.5vw;	
	}
	.t-r {
		top: 3.5vw;
		right: 3.5vw;
	}
	.play-sig {
		width: 23vw;
		top: 4.5vw;
	    height: 14vw;
	}
	.carousel-container {
		left: 50%;
		bottom: 7vw;

	}
	.carousel {
	    width: 10vw;
	    height: 4vw;
	    transform: translate3d(-50%, -50%, 0);
	}
  }