@import url("https://use.typekit.net/vkg7pxg.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
:root {
	--blue: rgb(0, 176, 240);
}
html {
	background-color: black;
	transition: height 100ms;
}
body {
	-webkit-transition: 1s opacity;
	   -moz-transition: 1s opacity;
		-ms-transition: 1s opacity;
		 -o-transition: 1s opacity;
			transition: 1s opacity;
	opacity: 0;
	color: white;
	background-color: black;
	font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
	overflow: hidden;
}
body.ready {
	opacity: 1;
}
.mh-100 {
	min-height: 100% !important;
}
.h-80 {
	height: 80%;
}
.h-10 {
	height: 10%;
}
.site {
	position: relative;
	user-select: none;
}
.house-font {
	font-family: "house-of-cards", serif;
	font-weight: 700;
	font-style: normal;
	color: var(--blue);
}
.btn {
	font-family: "house-of-cards", serif;
	font-weight: 700;
	font-style: normal;
	padding: 3px 15px;
	background-color: var(--blue);
	border: medium none !important;
	border-radius: 50px;
	outline: none !important;
	box-shadow: none !important;
	color: black !important;
	position: relative;
	-webkit-transition: 0.6s background;
	   -moz-transition: 0.6s background;
		-ms-transition: 0.6s background;
		 -o-transition: 0.6s background;
			transition: 0.6s background;
}
span.btn {
	position: relative;
	margin-top: -3px;
}
span.house-font {
	margin-right: 10px;
}
.btn:hover {
	background-color: white;
}
.btn > * {
	margin: 0;
	padding: 0;
	color: black !important;
}
.logo {
	width: 100%;
	max-width: 230px;
	height: auto;
}
.videos-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}
.videos-container > * {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		 -o-transform: translateX(-50%);
			transform: translateX(-50%);
	height: 100%;
	width: auto;
}
.vid > * {
	height: 100%;
	width: auto;
}
.vid::after {
	content: '';
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#messages {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: block;
}
#messages::-webkit-scrollbar {
  display: none;
}
.msg {
	width: 100%;
	-webkit-transition: 0.25s opacity linear 0.15s, 0.2s transform ease-out 0.15s;
	   -moz-transition: 0.25s opacity linear 0.15s, 0.2s transform ease-out 0.15s;
		-ms-transition: 0.25s opacity linear 0.15s, 0.2s transform ease-out 0.15s;
		 -o-transition: 0.25s opacity linear 0.15s, 0.2s transform ease-out 0.15s;
			transition: 0.25s opacity linear 0.15s, 0.2s transform ease-out 0.15s;
	opacity: 0;
}
.msg > p {
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	display: inline-block;
	position: relative;
	padding: 15px;
	text-rendering: optimizeLegibility;
}
.chauncey.msg {
	text-align: left;
	text-transform: lowercase;
	-webkit-transform: translateX(-5%);
	   -moz-transform: translateX(-5%);
		-ms-transform: translateX(-5%);
		 -o-transform: translateX(-5%);
			transform: translateX(-5%);
}
.user.msg {
	text-align: right;
	-webkit-transform: translateX(5%);
	   -moz-transform: translateX(5%);
		-ms-transform: translateX(5%);
		 -o-transform: translateX(5%);
			transform: translateX(5%);
}
.user.msg.show, .chauncey.msg.show {
	opacity: 1;
	-webkit-transform: translateX(0%);
	   -moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
			transform: translateX(0%);
}
.msg > p::after {
	content: 'Chauncey';
	font-size: 15px;
	line-height: 15px;
	position: absolute;
	bottom: -20px;
	left: 15px;
	text-align: right;
	font-family: "house-of-cards", serif;
	font-weight: 700;
	font-style: normal;
	text-transform: capitalize;
}
.user.msg > p::after {
	content: 'You';
	left: auto;
	right: 15px;
}
.message-field {
	align-content: flex-end;
	padding-bottom: 30px;
}
.site::after {
	content: '';
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	position: fixed;
	top: 10%;
	left: 0;
	width: 100%;
	height: 70px;
	pointer-events: none;
	-webkit-transition: 1s opacity;
	   -moz-transition: 1s opacity;
		-ms-transition: 1s opacity;
		 -o-transition: 1s opacity;
			transition: 1s opacity;
	opacity: 0;
}
body.overflowing .site::after {
	opacity: 1;
}
#pull-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	pointer-events: none;
	user-select: none;
	-webkit-transition: 1s opacity;
	   -moz-transition: 1s opacity;
		-ms-transition: 1s opacity;
		 -o-transition: 1s opacity;
			transition: 1s opacity;
}
body.entered #pull-container {
	opacity: 0;
	pointer-events: none;
}
#pull-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100px;
	width: 40vw;
	margin: -50px 0px 0px calc(-40vw + 50px);
}
#pull-wrapper::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 3px dotted rgba(255, 255, 255, 0.3); 
}
#pull-arrow {
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 100%;
}
#pull-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  width: 20%;
  height: 0.5px;
  border-bottom: 3px dotted rgba(255, 255, 255, 0.3);
  left: 35px;
}
#pull-arrow::after {
	content: '';
	position: absolute;
	top: 33px;
	width: 34px;
	height: 34px;
	border-right: 3px dotted rgba(255, 255, 255, 0.3);
	border-bottom: 3px dotted rgba(255, 255, 255, 0.3);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 20%;
}
#pull {
	width: 100px;
	height: 100px;
	cursor: pointer;
	position: relative;
	pointer-events: auto;
}
#pull .puller {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
	pointer-events: none;
}
.pull-logo, .pull-instruction {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50vw;
	max-width: 400px;
	pointer-events: none;
	margin-top: -200px;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		 -o-transform: translateX(-50%);
			transform: translateX(-50%);
}
.pull-instruction {
	margin-top: 100px;
}
.ask-field, .ask-field:focus {
	border-radius: 0;
	outline: none;
	border: medium none;
	box-shadow: none !important;
	border-bottom: 2px solid white;
	color: white !important;
	padding: 0px 0px 5px 0px;
	background-color: transparent !important;
}
.ask-field-group {
	position: relative;
	float: left;
	width: calc(100% - 140px);
	margin-top: -6px;
}
.ask-field-group i {
	position: absolute;
	width: 1px;
	height: 82%;
	background-color: white;
	left: 0px;
	top: 0px;
	opacity: 1;
	-webkit-animation: 1s blink step-end infinite;
	   -moz-animation: 1s blink step-end infinite;
		-ms-animation: 1s blink step-end infinite;
		 -o-animation: 1s blink step-end infinite;
			animation: 1s blink step-end infinite;
}
.ask-field:focus + i {
	display: none;
}
@keyframes blink {
  from, to {
	background-color: transparent;
  }
  50% {
	background-color: white;
  }
}

@-moz-keyframes blink {
  from, to {
	background-color: transparent;
  }
  50% {
	background-color: white;
  }
}

@-webkit-keyframes blink {
  from, to {
	background-color: transparent;
  }
  50% {
	background-color: white;
  }
}

@-ms-keyframes blink {
  from, to {
	background-color: transparent;
  }
  50% {
	background-color: white;
  }
}

@-o-keyframes blink {
  from, to {
	background-color: transparent;
  }
  50% {
	background-color: white;
  }
}
#dots {
	height: 0px;
	-webkit-transform: translateY(60px);
	-moz-transform: translateY(60px);
	-ms-transform: translateY(60px);
	-o-transform: translateY(60px);
	transform: translateY(60px);
}
.dotdotdot {
	position: relative;
	width: 120px;
	height: 33.2px;
}
.dotdotdot > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.ddd {
	-webkit-animation: typing 1.5s infinite;
	-webkit-animation-fill-mode: both;
	   -moz-animation: typing 1.5s infinite;
	   -moz-animation-fill-mode: both;
		-ms-animation: typing 1.5s infinite;
		-ms-animation-fill-mode: both;
		 -o-animation: typing 1.5s infinite;
		 -o-animation-fill-mode: both;
			animation: typing 1.5s infinite;
			animation-fill-mode: both;
}
.ddd2 {
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-ms-animation-delay: .2s;
	-o-animation-delay: .2s;
	animation-delay: .2s;
}
.ddd3 {
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	-ms-animation-delay: .4s;
	-o-animation-delay: .4s;
	animation-delay: .4s;
}
@-webkit-keyframes typing {
  0% {
	opacity: .1;
  }
  20% {
	opacity: 1;
  }
  100% {
	opacity: .1;
  }
}
@-moz-keyframes typing {
  0% {
	opacity: .1;
  }
  20% {
	opacity: 1;
  }
  100% {
	opacity: .1;
  }
}
@-ms-keyframes typing {
  0% {
	opacity: .1;
  }
  20% {
	opacity: 1;
  }
  100% {
	opacity: .1;
  }
}
@-o-keyframes typing {
  0% {
	opacity: .1;
  }
  20% {
	opacity: 1;
  }
  100% {
	opacity: .1;
  }
}
@keyframes typing {
  0% {
	opacity: .1;
  }
  20% {
	opacity: 1;
  }
  100% {
	opacity: .1;
  }
}
@media (max-width: 767px) {
	.desktop {
		display: none;
	}
	.mobile {
		display: flex;
	}
	.mobile > div {
		padding-left: 0;
		padding-right: 0;
	}
	.msg {
		padding: 15px 0;
	}
	.msg > p {
		font-size: 0.9rem;
		max-width: 80%;
	}
	.btn {
		font-size: 1rem;
		line-height: 1.2rem;
	}
	#messages {
		height: 35%;
	}
	.message-field {
		height: 55%;
	}
	.logo {
		max-width: 163px;
	}
	.ask-field {
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
}
@media (min-width: 768px) {
	.desktop {
		display: flex;
	}
	.mobile {
		display: none;
	}
	.msg {
		padding: 30px 0;
	}
	.msg > p { /* FIXED CODE 'z' to '}' */
		max-width: 35%;
	}
	.ask-field {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.house-font, .btn {
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
}
@media (max-width: 1199px) {
	#pull-wrapper {
		width: 50vw;
		margin: -50px 0px 0px calc(-50vw + 50px);
	}
}
/* ADDED CODE */
#pull-arrow {
	left: 20%;
}
@media (max-width: 767px) {
	#pull-wrapper {
		height: 70px;
		width: 50vw;
		margin: -35px 0px 0px calc(-50vw + 35px);
	}
	#pull-wrapper::before {
		width: 70px;
		height: 70px;
	}
	#pull-arrow::after {
		top: 23px;
	    width: 24px;
	    height: 24px;
	    left: 28%;
	}
	#pull {
		width: 70px;
		height: 70px;
	}
}
/* END ADDED CODE */

.btn.disabled,
.btn:disabled {
	background-color: var(--blue) !important;
}

.liquid-video {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
video {
	xpointer-events: none;
	object-fit: cover;
}
.hidden-video {
	display: none;
}
body.easteregg #video-ball.hidden-video {
	display: block;
}
#video-looping {
	
}
.showing-type-Soldout {
	pointer-events: none;
	opacity: 0.5;
}


#main > .row {
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	opacity: 0;
}
body.chat #main > .row {
	opacity: 1;
}


#intro-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
	display: none;
}
body.loading-intro #intro-spinner {
	display: inline-block !important;
}

[onclick] {
	cursor: pointer;
}

.ball-btn-container > * {
	height: 100%;
	width: auto;
	pointer-events: none;
}
#ball-btn {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute !important;
	top: 73.5%;
	left: 39.4%;
	margin: -50px 0 0 -50px;
	cursor: pointer;
	pointer-events: all;
}
.blip {
	border-color: var(--blue) !important;
}
#easteregg-spinner {
	top: 27%;
	position: absolute;
	left: 50%;
	margin: -8px 0 0 -8px;
	opacity: 0.5;
	display: none;
}
body.easteregg-waiting #easteregg-spinner {
	display: inline-block !important;
}
body.easteregg-waiting #ball-btn,
body.easteregg #ball-btn {
	pointer-events: none;
}
body.easteregg #ball-btn {
	display: none !important;
}


#video-intro {
	background-color: black;
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
}
body.chat #video-intro {
	opacity: 0;
}
body.shake .videos-container {
	-webkit-animation: shake 0.1s linear infinite;
	        animation: shake 0.1s linear infinite;
	-webkit-filter: blur(6px);
	        filter: blur(6px);
}
@-webkit-keyframes shake {
 0% { -webkit-transform: skew(0deg, 0deg) translateX(0); transform: skew(0deg, 0deg) translateX(0) }
 25% { -webkit-transform: skew(-10deg, 0deg) translateX(100px); transform: skew(-10deg, 0deg) translateX(100px) }
 50% { -webkit-transform: skew(10deg, -10deg) translateX(-100px); transform: skew(10deg, -10deg) translateX(-100px) }
 75% { -webkit-transform: skew(-10deg, 0deg) translateX(100px); transform: skew(-10deg, 0deg) translateX(100px) }
 100% { -webkit-transform: skew(0deg, 0deg) translateX(0); transform: skew(0deg, 0deg) translateX(0) }
}
@keyframes shake {
 0% { -webkit-transform: skew(0deg, 0deg) translateX(0); transform: skew(0deg, 0deg) translateX(0) }
 25% { -webkit-transform: skew(-10deg, 0deg) translateX(100px); transform: skew(-10deg, 0deg) translateX(100px) }
 50% { -webkit-transform: skew(10deg, -10deg) translateX(-100px); transform: skew(10deg, -10deg) translateX(-100px) }
 75% { -webkit-transform: skew(-10deg, 0deg) translateX(100px); transform: skew(-10deg, 0deg) translateX(100px) }
 100% { -webkit-transform: skew(0deg, 0deg) translateX(0); transform: skew(0deg, 0deg) translateX(0) }
}











.mute-toggle {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mute-toggle input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  -khtml-appearance: none;
}
.mute-toggle-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 3rem;
  width: 3rem;
  border-radius: 1rem;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.15);
  background-size: 75%;
  background-position: center center;
}
.mute-toggle-icon,
.mute-toggle:hover input ~ .mute-toggle-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-volume-up-fill' viewBox='0 0 16 16'%3E%3Cpath d='M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z'/%3E%3Cpath d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/%3E%3Cpath d='M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/%3E%3C/svg%3E");
}
.mute-toggle input:checked ~ .mute-toggle-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-volume-mute' viewBox='0 0 16 16'%3E%3Cpath d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06M6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
}




.mute-toggle {
	position: fixed;
	bottom: 3rem;
	left: 1rem;
}
body.chat .mute-toggle {
	bottom: 8.5rem;
}
@media (min-width: 768px) {
	.mute-toggle,
	body.chat .mute-toggle {
		bottom: 3rem;
	}
}
@media (max-width: 575px) {
	.mobile #share-mobile,
	.mobile .buy-tickets-btn {
		white-space: nowrap;
		font-size: 0.85rem;
	}
}