:root {
	--color-black: #232323;

	--color-light-rgb: 193, 125, 255;
	--color-light: #c17dff;

	--color-mid-rgb: 94, 67, 172;
	--color-mid: #5e43ac;

	--color-dark-rgb: 60, 43, 141;
	--color-dark: #3c2b8d;
}

#hero {
	background-color: black;
	position: relative;
}

#hero .container {
	height: 100vh;
	display: flex;
	align-items: center;
	width: 100% !important;
	max-width: 1300px !important;
}

#hero h1 {
	font-size: 50px;
	line-height: 60px;
	max-width: 700px;
	color: white;
}

#hero img {
	margin-bottom: 0px;
}

#hero h3 {
	color: white;
}

#hero .site-download-icons {
	margin-top: 100px;
}

#hero .text {
	max-width: 1000px;
	color: white;
	opacity: 0.5;
	text-align: center;
	position: absolute;
	bottom: 10px;
}

.site-store-icons figure,
.site-download-icons figure {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	padding-left: 2.8125rem rem;
	line-height: 4.825rem;
}

.sub-title {
	letter-spacing: 5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--color-mid);
}

.sub-title.white {
	color: white;
}

h2 {
	max-width: 700px;
	margin: auto;
	font-size: 2.75rem;
	line-height: 4.125rem !important;
	font-weight: 500;
	margin-bottom: 3rem;
}

#problem img {
	max-width: 100px;
}

#problem .sub-heading {
	color: var(--color-mid);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
}

#problem .problem img {
	transition: all 0.3s ease;
}

#problem .problem:hover img {
	transform: scale(1.1);
	filter: hue-rotate(30deg);
}

#problem h3 {
	margin-bottom: 5px;
}

#solution h1:after {
	margin: unset;
}

#solution img {
	max-width: 500px;
	margin-top: 5rem;
}

#solution .text-left {
	margin-top: -5rem;
}

.d-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* .video-container .bg {
  filter: blur(5px);
} */
.video-container {
	padding: 0;
	border-radius: 10px;
	box-shadow: 0 5px 30px -15px black;
	background: #e9e9e9;
	position: relative;
}

.modal-dialog {
	width: 100%;
	max-width: 1000px;
	border: none;
}

.modal-dialog button.close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 1000;
	color: white;
	opacity: 0.8;
	font-size: 20px;
}

.video-container .play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
}

video {
	max-width: 100%;
	max-height: 100%;
}

#video a {
	display: block;
	margin-top: -280px;
	z-index: 1;
	position: absolute;
	width: 95%;
	right: 15px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1100px;
}

#video {
	padding-top: 0;
	padding-bottom: 380px;
}

#solution {
	padding-bottom: 400px;
}

#product-features .product-feature img {
	height: 8rem;
	width: 8rem;
}

#product-features .product-feature {
	transition: all 0.3s ease;
}

#product-features .product-feature:hover {
	transform: translateY(-7%);
}

.col-lg-3.col-md-6 {
	margin-bottom: 30px;
}

.col-lg-4.col-md-6 {
	margin-bottom: 30px;
}

.section-black {
	background: black;
}

#team .sub-heading {
	color: var(--color-dark);
}

#team img {
	height: 280px;
	width: 280px;
	border-radius: 50%;
}

#team h3 {
	color: var(--color-mid);
}

#team ul {
	padding: 0;
}

#team li {
	text-align: center;
	list-style: none;
	color: rgb(100, 100, 100);
	font-size: 0.9rem;
}

#challenges span {
	font-size: 80px;
	font-weight: 600;
}

#ecosystem {
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(./../img/deck/bg9.JPG);

	background-size: cover;
	background-attachment: fixed;
}

#ecosystem img {
	max-width: 1500px;
	margin: 2rem auto 0;
}

canvas {
	display: block;
	margin: 0 3rem;
	transition: all 0.3s ease;
	width: 350px;
	height: 350px;
}

canvas:hover {
	transform: scale(1.02);
}

.chart-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin-top: 1rem;
}

.chart-flag {
	width: 70px;
	margin: 1rem auto;
}

.chart-flag img {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
}

.chart-legend {
	margin-top: 10px;
	text-align: center;
}
.legend-item {
	display: inline-block;
	margin-right: 10px;
}
.legend-color {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 5px;
}
.percentage-label {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}

#addressable-market .graph {
	padding: 2rem;
}

#addressable-market .col {
	align-items: center;
	justify-content: center;
	margin-bottom: 4rem;
}

#addressable-market .text * {
	text-align: left;
}

#addressable-market .right * {
	text-align: right;
}

#addressable-market .img-container {
	height: 100%;
}

#addressable-market .img-container img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#gaming-population {
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./../img/deck/bg7.jpg);
	background-size: cover;
	background-attachment: fixed;
}

#roadmap {
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(./../img/deck/bg13.jpg);
	background-size: cover;
	background-attachment: fixed;
}

#tables {
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./../img/deck/bg10.jpg);
	background-size: cover;
	background-attachment: fixed;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(249, 249, 249, 0.1);
}

.table-striped td,
.table-striped th:not(:first-of-type) {
	text-align: center;
}

.table-striped:last-of-type {
	border: none 2px white;
	border-bottom-style: solid;
}

#marketing .text * {
	text-align: left;
}

#marketing .text p {
	margin-bottom: 3rem;
}

#marketing img {
	max-width: 500px;
	max-height: 500px;
	object-fit: contain;
}

.deck-2 #marketing .app-download-icons * {
	color: white !important;
}

#business-model {
	background-color: #f5f5f5;
}

#business-model table {
	margin: 0 auto;
	width: 100%;
	max-width: 1500px;
}

#business-model table * {
	text-align: left;
}

#business-model td {
	padding: 1.2rem;
	width: 20%;
	transition: all 0.1s ease;
	border: solid 5px var(--color-mid);
}

#business-model td * {
	transition: all 0.1s ease;
}

#business-model td:hover {
	background-color: var(--color-mid);
}

#business-model td:hover * {
	color: white;
}

#business-model h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-mid);
	margin: 0;
	margin-bottom: 1rem;
	text-align: center;
}

#business-model ul,
#business-model ol {
	padding: 0;
}

#business-model li {
	list-style-position: inside;
	font-size: 0.9rem;
	margin-bottom: 0.3rem;
}

#years-timeline {
	background: linear-gradient(86deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(./../img/deck/bg11.jpg);
	background-size: cover;
	background-attachment: fixed;
}

#years-timeline .timeline {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
#years-timeline .timeline::after {
	content: "";
	position: absolute;
	width: 6px;
	background-color: white;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

/* Container around content */
#years-timeline .year-container {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
	transition: all 0.3s ease;
}

#years-timeline .year-container * {
	color: #333;
}

/* The circles on the timeline */
#years-timeline .year-container::after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	right: -13px;
	background-color: white;
	border: 4px solid var(--color-mid);
	top: 15px;
	border-radius: 50%;
	z-index: 1;
	transition: all 0.3s ease;
}

/* Place the container to the left */
#years-timeline .left {
	left: 0;
}

/* Place the container to the right */
#years-timeline .right {
	left: 50%;
}

/* Add arrows to the left container (pointing right) */
#years-timeline .left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid white;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent white;
}

#years-timeline .left:hover {
	transform: translateX(-5%);
}

#years-timeline .right:hover {
	transform: translateX(5%);
}

#years-timeline .left:hover::after {
	transform: translateX(100%);
	z-index: 100;
}

#years-timeline .right:hover::after {
	transform: translateX(-100%);
	z-index: 100;
}

/* Add arrows to the right container (pointing left) */
#years-timeline .right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
#years-timeline .right::after {
	left: -12px;
}

/* The actual content */
#years-timeline .content {
	padding: 20px 30px;
	background-color: white;
	position: relative;
	border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}

	/* Full-width containers */
	.container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.container::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.left::after,
	.right::after {
		left: 15px;
	}

	/* Make all right containers behave like the left ones */
	.right {
		left: 0%;
	}
}

#challenges .col {
	height: 500px;
}

#challenges .text {
	display: flex;
	align-items: center;
}

#challenges ul {
	padding: 0;
}

#challenges li {
	text-align: left;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

#challenges img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#donation {
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(./../img/deck/bg12.jpg);
	background-size: cover;
	background-attachment: fixed;
}

#donation img {
	max-width: 500px;
	object-fit: contain;
}

#donation p {
	font-size: 1.2rem;
	line-height: 2rem;
	max-width: 1100px;
	margin: 1rem auto;
}

footer {
	background-color: var(--color-dark) !important;
}

footer * {
	color: white !important;
	font-weight: 600;
	font-size: 1rem;
}

#hero .site-download-icons {
	margin-top: 1rem;
	text-align: left;
}

#hero .site-download-icons a {
	margin: 0.5rem;
	margin-left: 0;
	width: 270px;
}

#hero .site-store-icons figure,
#hero .site-download-icons figure {
	margin-top: -5px;
}