/*====== fonts ======*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@700&family=Poppins:wght@400;500;600;700&display=swap');

.mi {
	font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
	max-width: 1em; overflow: hidden; /*to prevent text-flash before icon is loaded*/
}

:root {
	--bgColor: #111;
	--darkBlue: #123;
	--pink: #f0f;
	--bgGradient: linear-gradient(30deg, #ff3d3d 0%, #ff0f6f 50%, #f0f 100%);
	--logoGradient: linear-gradient(30deg, #ffdb01 0%, #ff851f 30%, #ff3d3d 52%, #ff0f6f 70%, #f0f 100%);
	--pulseGradient: linear-gradient(210deg, #00eaff 0%, #0080ff 25%, #8000ff 50%, #e619e6 75%, #f00 100%);
	--pulseXGradient: linear-gradient(210deg, #0f9 0%, #0f5 100%);
	--bodyWidth: 1000px;
	--pageRadius: 100px;
}

/*====== general ======*/
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--bgColor); color: #fff;
	font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.5;
	margin: 0; text-align: center;

	-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; /*touch-action: manipulation;*/
	user-select: none; -webkit-user-select: none; cursor: default;
	overflow-x: hidden;
}
.selectable {
	user-select: text; -webkit-user-select: text; cursor: text;
}
::selection {
	color: var(--pink); background: #fffe;
}
::-webkit-scrollbar {width: 5px;} ::-webkit-scrollbar-track {background: transparent;} ::-webkit-scrollbar-thumb {background: #fff2;} ::-webkit-scrollbar-thumb:hover {background: #fff2;}

a {
	text-decoration: none; color: var(--pink); transition: all 0.1s;
}
.textLink {
	color: #fff; text-decoration: underline; font-weight: 500;
}

h1 {
	font-family: "Jost"; font-size: 32px; margin-top: 0; margin-bottom: 15px;
}
.pageTitleOuter {
	margin-top: 80px; margin-bottom: -10px;
}
.pageTitleOuter > h1 {
	font-size: 58px; text-align: center; margin-bottom: 0;
}

iframe {
	border: 0 none; border-radius: 15px; box-shadow: 0 25px 50px #000;
}

/*====== buttons ======*/
.btn {
	position: relative; display: inline-block;
	font-family: "Jost"; font-size: 16px; line-height: normal; letter-spacing: .1em; text-transform: uppercase;
	background-color: #eee; color: var(--darkBlue);
	padding: 11px 22px 11px 22px;
	clip-path: polygon( /*29.4% * height -> 45px * 0.294 = 13.2px, rounded to 12/14px*/
		12px 1.5px, 14px 0,
		calc(100% - 14px) 0, calc(100% - 12px) 1.5px,
		100% 48%, 100% 52%,
		calc(100% - 12px) calc(100% - 1.5px), calc(100% - 14px) 100%,
		14px 100%, 12px calc(100% - 1.5px),
		0 52%, 0 48%
	);
}
.btnColored {
	background: var(--logoGradient); color: #fff; filter: saturate(.9);
	text-shadow: 0 1px 3px #0002;
}
.btn > span {
	position: relative; float: left;
	font-size: 1.45em; margin: 0 6px 0 -1px;
}

/*====== layout ======*/
.fl {
	position: relative; float: left;
}
.hr {
	position: relative; display: inline-block; width: 100%;
}
.section {
	padding: 80px 0;
	background-size: cover; background-position: center center; background-repeat: no-repeat;
	/*hexagonal wings at the top left & right corner*/
	clip-path: polygon(
		0 0,
		calc(var(--pageRadius)*2*0.294 - 3px) calc(var(--pageRadius) - 4px),
		calc(var(--pageRadius)*2*0.294 + 3px) var(--pageRadius),
		calc(100% - var(--pageRadius)*2*0.294 - 3px) var(--pageRadius),
		calc(100% - var(--pageRadius)*2*0.294 + 3px) calc(var(--pageRadius) - 4px),
		100% 0, 100% 100%, 0 100%
	); padding-top: calc(var(--pageRadius) + 80px) !important; margin-top: calc(var(--pageRadius) * -1);
}
/*see jQuery in footer.html*/
.sectionCP {
	clip-path: none !important;
}
.sectionFlat {
	padding-top: 140px !important; padding-bottom: 40px;
}
.fixedBG {
	background: var(--bgImage); background-repeat: no-repeat; background-position: center center; background-size: cover;
	background-attachment: fixed;
}
.pageOuter {
	width: var(--bodyWidth); text-align: left;
}

.hexGrid {
	display: grid; grid-gap: 50px;
	grid-template-columns: repeat(3, 1fr);
}
.hexGrid > div {
	background: var(--bgGradient); border-radius: 8px; padding: 20px; box-shadow: 0 25px 50px #000a;
}
.hexGrid > div > .hr {
	margin-bottom: 12px; font-family: 'Jost'; font-size: 22px;
}
.hexGrid > div > .hr > .mi {
	position: relative; float: left; font-size: 40px; opacity: .8; margin: 12px 12px 0 0;
}
.hexGridLight > div {
	background: none; box-shadow: none; padding: 20px 0 0 0;
}
.hexGridLight > div > .hr > .mi {
	margin: -3px 8px 0 0; color: var(--pink);
}
.imgGrid {
	margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 185px; grid-gap: 50px;
}
.imgGrid > div, .imgGrid > a {
	background-position: center center; background-size: cover; border-radius: 8px; box-shadow: 0 5px 25px #0005; transition: all .1s;
}

.infoBtn {
	margin-bottom: 20px; margin-right: 30px; text-transform: none; letter-spacing: normal; font-size: 20px;
}
.infoDiv {
	display: none; position: fixed; top: 50%; left: 50%; width: 550px; transform: translate(-50%, -50%); z-index: 2100;
	background-color: var(--darkBlue); border-radius: 8px; padding: 50px 80px; text-align: left; box-shadow: 0 25px 50px #000; overflow: hidden;
}
#infoDivText {
	z-index: 2101; position: relative;
}
#infoDivTitle > .mi {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 800px; color: var(--pink); opacity: .1; z-index: 2099;
}
.blackBG {
	display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #1117; z-index: 2000; transition: none;
}

/*====== bullet lists with custom icons (.mi) ======*/
.list {
	width: 100%;
}
.list > div {
	position: relative; float: left; width: 100%;
}
.list div:not(:last-child) {
	margin-bottom: 18px;
}
.list > div > .mi {
	position: relative; float: left; font-size: 30px; margin-top: -4px; margin-right: 10px; opacity: .6;
}

/*====== video player ======*/
.video-js {
	border-radius: 8px; overflow: hidden;
	cursor: pointer;
	font-family: "Poppins" !important; font-weight: 500 !important;
}
.vjs-poster {
	transition: transform .2s;
}
.video-js.vjs-ended .vjs-poster {display: block;}
.video-js.vjs-ended .vjs-control-bar {display: none;}
.vjs-control-bar {
	background-color: var(--darkBlue) !important;
}
.vjs-big-play-button, .vjs-picture-in-picture-control, .vjs-load-progress {
	display: none !important;
}


@media not all and (pointer:coarse) {
	.btn:hover {transform: scale(1.05); background-color: #fff;}
	.btnColored:hover {filter: saturate(1);}
	.textLink:hover {text-decoration: none;}
	.vjs-poster:hover {transform: scale(1.02);}
	.imgGrid > a:hover {transform: scale(1.04);}
	[tt]:hover:after {visibility: visible; opacity: 1;}
}

/*====== accordion ======*/
.accordion > h1 {margin-top: 10px;}
.accordion > h1:first-child {margin-top: 0;}

.accordion > div {
	cursor: pointer; position: relative; float: left; width: calc(100% - 50px); background-color: #ccc; color: var(--darkBlue); padding: 12px 25px; margin-bottom: 20px; font-family: 'Jost'; text-transform: none; letter-spacing: normal; font-size: 20px; transition: all .1s;
}
.accordion > div > div {
	font-family: 'Poppins'; font-weight: 600; font-size: 16px; margin-top: 10px; display: none;
}
.accordion .textLink {
	color: #000;
}

@media not all and (pointer:coarse) {
	.accordion > div:hover {transform: scale(1.01); background-color: #eee;}
}

.accordionExpanded {
	cursor: default !important; background-color: #fff !important; transform: none !important; border-radius: 8px; clip-path: none;
}


/*====== repsonsive ======*/
@media (max-width: 1150px) {
	:root {--pageRadius: 50px;}
	.sectionFlat {padding-top: 90px !important;}
}

@media (max-width: 1050px) {
	:root {--bodyWidth: 800px;}
	.leftCol:not(.fomoCalcOuter), .rightCol:not(.fomoCalcOuter) {width: 100% !important;}
	.rightCol:not(.fomoCalcOuter) {margin-top: 50px;}
}

@media (max-width: 820px) {
	:root {--bodyWidth: 80%;}
	::-webkit-scrollbar {width: 0;}
	.imgGrid {grid-gap: 30px;}
	.getStartedGrid {grid-template-columns: repeat(2, 1fr) !important; grid-gap: 30px;}
	.fixedBG {background-attachment: initial;}
}
@media (max-width: 820px), (max-height: 830px) {
	.infoDiv {width: calc(100% - 100px - 50px); top: 120px; max-height: calc(100% - 250px); transform: none; left: 25px; padding: 30px 50px; overflow-y: auto;}
	#infoDivTitle > .mi {display: none;}
}

@media (max-width: 600px) {
	.imgGrid {grid-template-columns: repeat(2, 1fr);}
	.imgGrid > div, .imgGrid > a {grid-area: initial !important;}
}

@media (max-width: 450px) {
	:root {--bodyWidth: 90%; --pageRadius: 20px;}
	.section {padding: 50px 0 35px 0 !important;}
	.sectionFlat {padding: 50px 0 15px 0 !important;}
	.pageTitle {font-size: 30px !important;}
	.imgGrid {grid-template-columns: 1fr;}
	.infoDiv {width: calc(100% - 40px - 50px); top: 100px; max-height: calc(100% - 100px - 25px - 40px); padding: 20px 20px;}
	.getStartedGrid {grid-template-columns: 1fr !important;}
}