@import "https://use.typekit.net/ymp3mnm.css";

html {
	--sequel-banner-height: 260px;
	--sequel-banner-bkg: #000;
	--sequel-splash-bkg: #000;
}
@media screen and (min-width: 1024px) {
	html {
		--sequel-banner-height: 260px;
	}
}


#sequel-banner,
#sequel-banner h2,
#sequel-banner p {
  font-family: 'nitti-grotesk', sans-serif;
  font-weight: 500;
}

#sequel-splash h1,
#sequel-splash h2 {
  color: #fff;
  font-family: 'zuume', sans-serif;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 0.02em;
  line-height: 100%;
}
#sequel-banner strong,
#sequel-splash strong {
	color: #e18f35;
	font-weight: inherit;
}

#sequel-banner p {
	font-size: 16px;
	line-height: 120%;
	margin: 0;
}
#sequel-banner .subhead {
	font-size: 18px;
	line-height: 110%;
}
#sequel-splash p {
  color: #fff;
  font-family: 'nitti-grotesk', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 120%;
  margin: 0;
}
#sequel-splash .subhead {
  font-family: 'nitti-grotesk', sans-serif;
  font-weight: 500;
  font-size: 18px;
}
#sequel-splash .sequel-arrow-button {
  font-family: 'nitti-grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
	#sequel-splash .subhead,
	#sequel-banner .subhead {
		font-size: 20px;
	}
	#sequel-splash h1 {
		font-size: 60px;
}
	#sequel-splash .sequel-arrow-button {
		margin-top: 20px;
	}
}
@media screen and (min-width: 1024px) {
	#sequel-splash .subhead {
		font-size: 22px;
	}
}
@media screen and (min-width: 1120px) {
	#sequel-banner p {
		font-size: 18px;
	}
	#sequel-banner .subhead {
		font-size: 22px;
	}
	#sequel-splash h1 {
		font-size: 72px;
	}
}

body.sequel-banner-show {
	transition: all .3s ease-in-out;
	padding-top: var(--sequel-banner-height, 120px)
}

body.sequel-banner-show.sequel-hide {
	padding-top: 0;
}

#sequel-banner {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30000;
	background: var(--sequel-banner-bkg);
}
#sequel-banner * {
	box-sizing: border-box;
}

#sequel-banner {
	background:
  linear-gradient(
    to right,

    transparent 0 calc(50%),
    rgba(12, 62, 113, 0.59) calc(50%) calc(50% + 6px),
    transparent calc(50% + 6px) calc(50% + 20px),

    rgba(12, 62, 113, 0.59) calc(50% + 20px) calc(50% + 26px),
    transparent calc(50% + 26px) calc(50% + 40px),

    rgba(12, 62, 113, 0.59) calc(50% + 40px) calc(50% + 46px),
    transparent calc(50% + 46px) calc(50% + 60px),

    rgba(12, 62, 113, 0.59) calc(50% + 60px) calc(50% + 66px),
    transparent calc(50% + 66px) calc(50% + 80px),

    rgba(12, 62, 113, 0.59) calc(50% + 80px) calc(50% + 86px),
    transparent calc(50% + 86px) calc(50% + 100px),

    rgba(12, 62, 113, 0.59) calc(50% + 100px) calc(50% + 106px),
    transparent calc(50% + 106px) calc(50% + 120px),

    rgba(12, 62, 113, 0.59) calc(50% + 120px) calc(50% + 126px),
    transparent calc(50% + 126px) calc(50% + 140px),

    rgba(12, 62, 113, 0.59) calc(50% + 140px) calc(50% + 146px),
    transparent calc(50% + 146px) calc(50% + 160px),

    rgba(12, 62, 113, 0.59) calc(50% + 160px) calc(50% + 166px),
    transparent calc(50% + 166px) calc(50% + 180px),

    rgba(12, 62, 113, 0.59) calc(50% + 180px) calc(50% + 186px),
    transparent calc(50% + 186px) calc(50% + 200px),

    rgba(12, 62, 113, 0.59) calc(50% + 200px) calc(50% + 206px),

    transparent calc(50% + 206px)
  ),
  var(--sequel-banner-bkg);
}

#sequel-banner .sequel-banner-inner {
	display: flex;
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 40px;
	color: #fff;
	line-height: 115.385%;
	transition: all .3s ease-in-out;
	overflow: hidden;
	flex-wrap: wrap;
	position: relative;
	box-sizing: border-box;
}

@media screen and (min-width: 440px) {
	#sequel-banner .sequel-banner-inner {
	}
}
@media screen and (min-width: 540px) {
	#sequel-banner .sequel-banner-inner {
	}
}
@media screen and (min-width: 768px) {
	#sequel-banner .sequel-banner-inner {
		padding: 24px 72px 24px 40px;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
}
@media screen and (min-width: 1140px) {
	#sequel-banner .sequel-banner-inner {
		padding: 24px 126px 24px 40px;
	}
}

#sequel-banner .sequel-banner-text {
	margin-bottom: 20px;
	position: relative
}

@media screen and (min-width: 768px) {
	#sequel-banner .sequel-banner-text {
		margin-right: 32px;
		margin-bottom: 0;
		flex: 0 1 min(50%, 640px);
	}
}
#sequel-banner .sequel-banner-cta {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 20px;
}
@media screen and (min-width: 1120px) {
	#sequel-banner .sequel-banner-cta {
		flex-direction: row;
		align-items: center;
		flex: 0 1 min(45%, 445px);
	}
}

#sequel-banner #sequel-banner-close {
	color: #fff;
	background: rgba(0, 0, 0, 0);
	border: none;
	width: 24px;
	height: 24px;
	cursor: pointer;
	position: absolute;
	right: 16px;
	top: 8px;
	padding: 0
}

@media screen and (min-width: 768px) {
	#sequel-banner #sequel-banner-close {
		width: 32px;
		height: 32px;
		right: 24px;
		top: 50%;
		transform: translateY(-50%)
	}
}
@media screen and (min-width: 1140px) {
	#sequel-banner #sequel-banner-close {
		width: 40px;
		height: 40px;
		right: 40px;
	}
}
#sequel-banner #sequel-banner-close svg {
	transition: transform .2s ease-in;
	width: 100%;
	height: auto;
}

#sequel-banner #sequel-banner-close:hover svg,
#sequel-banner #sequel-banner-close:focus svg {
	transform: rotate(90deg)
}

.sequel-arrow-button {
	display: inline-flex;
	padding: 10px 12px 10px 10px;
	align-items: center;
	border-radius: 0;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	color: #000;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	position: relative;
	z-index: 1;
	cursor: pointer;
}
.sequel-arrow-button--arrow {
	display: inline-block;
	width: 36px;
	height: max(12px, 1lh);
	overflow: hidden;
	position: relative;
}
.sequel-arrow-button svg {
	position: absolute;
	color: #b05933;
	right: 0;
	top: calc(50% - 6px);
  	transition: transform 0.35s cubic-bezier(.6,0,.2,1);
}
.sequel-arrow-button:hover {
	color: #000 !important;
}
.sequel-arrow-button:hover svg:first-of-type,
.sequel-arrow-button:focus svg:first-of-type {
	transform: translate(30px);
}
.sequel-arrow-button svg:last-of-type {
	transform: translate(-60px);
}
.sequel-arrow-button:hover svg:last-of-type,
.sequel-arrow-button:focus svg:last-of-type {
	transform: translate(0);
}
.sequel-arrow-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f7f3ea;
	z-index: -1;
	transform: scale(1);
	transform-origin: center;
	transition: background-color .35s cubic-bezier(.6,0,.2,1),transform .2s cubic-bezier(.25,.46,.45,.94);
}
.sequel-arrow-button:hover::before,
.sequel-arrow-button:focus::before {
	background-color: #eae5dc;
	transform: scale(.95);
}
@media (prefers-reduced-motion: reduce) {
	.sequel-arrow-button:before {
		transform: scale(1) !important;
		transition-property: background-color;
	}
	.sequel-arrow-button svg {
		transform: translate(0) !important;
	}
}

body {
	min-height: 100vh;
	margin: 0
}

.sequel-noscroll {
	overflow: hidden !important
}

.sequel-hide#sequel-splash {
	display: none
}

#sequel-splash {
	box-sizing: border-box;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20000;
	background: rgba(27, 30, 33, .45);
	transition: all .25s ease;
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
	padding: 10px
}


#sequel-splash .sequel-modal-content {
	padding: 0 0 0 20px;
	border-radius: 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: min(340px, 100% - 20px);
	height: min(522px, 100% - 40px);
	max-width: 970px;
	overflow: hidden;
	box-sizing: border-box;
}
#sequel-splash .sequel-modal-content {
  background:
    linear-gradient(
      to right,
	  transparent 0 12px,
      rgba(12, 62, 113, 0.59) 12px 20px,
      transparent 20px 32px,
      rgba(12, 62, 113, 0.59) 32px 40px,
      transparent 40px 52px,
      rgba(12, 62, 113, 0.59) 52px 60px,
      transparent 60px 72px,
      rgba(12, 62, 113, 0.59) 72px 80px,
      transparent 80px
    ),
    var(--sequel-splash-bkg);
}

@media screen and (min-width: 768px) {
	#sequel-splash .sequel-modal-content {
		padding-left: 60px;
		min-height: 522px;
		max-height: calc(100vh - 144px);
		width: 100%;
		flex-wrap: nowrap;
		gap: 40px;
	}
}

#sequel-splash .sequel-modal-col-left {
	padding: 40px 20px 30px 0;
	box-sizing: content-box;
}

@media screen and (min-width: 768px) {
	#sequel-splash .sequel-modal-col-left {
		flex: 0 0 50%;
		padding: 80px 20px 50px 0;
	}
}

#sequel-splash .sequel-modal-col-right {
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	position: relative;
}
@media screen and (max-width: 767px) {
	#sequel-splash .sequel-modal-col-right {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	#sequel-splash .sequel-modal-col-right {
		flex: 0 0 50%;
	}
}

#sequel-splash .sequel-modal-col-right picture,
#sequel-splash .sequel-modal-col-right img {
	border-radius: 0;
	width: 100%;
	height: 100%;
}
#sequel-splash .sequel-modal-col-right img {
	object-fit: cover;
}

#sequel-splash #sequel-splash-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0);
	border: none;
	width: 24px;
	height: 24px;
	cursor: pointer;
	padding: 0;
	z-index: 10;
}
@media screen and (min-width: 768px) {
	#sequel-splash #sequel-splash-close {
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
	}
}

#sequel-splash #sequel-splash-close svg {
	color: #fff;
	transition: transform .2s ease-in;
	width: 100%;
	height: auto;
}

#sequel-splash #sequel-splash-close:hover svg,
#sequel-splash #sequel-splash-close:focus svg {
	transform: rotate(90deg)
}

#sequel-splash #modalTitle {
	position: relative;
	width: 100%;
	max-width: 395px;
	margin: 0;
}

#sequel-splash #modalDescription .subhead {
	margin: 10px 0 36px
}

@media screen and (min-width: 768px) {
	#sequel-splash #modalDescription .subhead {
		margin-bottom: 58px;
	}
}

#sequel-splash .sequel-modal-circles {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 3;
	animation: sequelModalAnimationShow 1s ease-in
}

@-webkit-keyframes sequelModalAnimationShow {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes sequelModalAnimationShow {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.sequel-noscroll #sequel-splash {
	display: flex
}