/* Required height of parents of the Full Page Intro and Intro itself */
html,
body,
.view {
	height: 100%;
}

html,
body,
header,
.view {
	height: 100%;
}

.custfont {
	font-family: custfont-pro, sans-serif !important;
}
.custfont-condensed {
	font-family: custfont-pro-condensed, sans-serif !important;
}
.custfont-extra-condensed {
	font-family: custfont-pro-extra-condensed, sans-serif !important;
}
.custfont-semi-condensed {
	font-family: custfont-pro-semi-condensed, sans-seri !important;
}
.custfont-wide {
	font-family: custfont-pro-wide, sans-serif !important;
}

.custfont-st-italic {
	font-style: italic !important;
}
.custfont-st-regular {
	font-style: normal !important;
}

.custfont-sz-larger {
	font-size: larger !important;
}

.custfont-thin {
	font-weight: 100 !important;
}
.custfont-extra-light {
	font-weight: 200 !important;
}
.custfont-light {
	font-weight: 300 !important;
}
.custfont-regular {
	font-weight: 400 !important;
}
.custfont-medium {
	font-weight: 500 !important;
}
.custfont-semi-bold {
	font-weight: 600 !important;
}
.custfont-bold {
	font-weight: 700 !important;
}
.custfont-black {
	font-weight: 800 !important;
}
.custfont-ultra-black {
	font-weight: 900 !important;
}

.custfont-w-1 {
	font-weight: 100 !important;
}
.custfont-w-2 {
	font-weight: 200 !important;
}
.custfont-w-3 {
	font-weight: 300 !important;
}
.custfont-w-4 {
	font-weight: 400 !important;
}
.custfont-w-5 {
	font-weight: 500 !important;
}
.custfont-w-6 {
	font-weight: 600 !important;
}
.custfont-w-7 {
	font-weight: 700 !important;
}
.custfont-w-8 {
	font-weight: 800 !important;
}
.custfont-w-9 {
	font-weight: 900 !important;
}

.drift-intro {
	width: 100% !important;
}
html {
	scroll-behavior: smooth;
}

@media (max-width: 559px) {
	html,
	body,
	header,
	.view {
		height: 1000px;
	}
	.drift-intro {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (min-width: 560px) and (max-width: 740px) {
	html,
	body,
	header,
	.view {
		height: 700px;
	}
	.drift-intro {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 740px) and (max-width: 850px) {
	html,
	body,
	header,
	.view {
		height: 600px;
	}
	.drift-intro {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (min-width: 850px) and (max-width: 1200px) {
	.drift-intro {
		padding-left: 50px;
		padding-right: 50px;
	}
}

@media (min-width: 800px) and (max-width: 850px) {
	.navbar:not(.top-nav-collapse) {
		/* background: #3b0c09 !important; */
		background: linear-gradient(
			90deg,
			#ba2268 3%,
			#64125c 20%,
			#260432 26%,
			#2b063e 47%,
			#21042e 56%,
			#21032b 60%,
			#15041e 74%,
			#2f0534 82%,
			#26031e 89%,
			#10021f 100%
		) !important;
	}
}

/* Navbar animation */
.navbar {
	border-radius: 5px !important;
	background: linear-gradient(
		90deg,
		#ba2268 3%,
		#64125c 20%,
		#260432 26%,
		#2b063e 47%,
		#21042e 56%,
		#21032b 60%,
		#15041e 74%,
		#2f0534 82%,
		#26031e 89%,
		#10021f 100%
	) !important;
	transition: all 0.3s linear !important;
}

.top-nav-collapse {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin: 0px !important;
	border-radius: 0px !important;
	background: linear-gradient(
		90deg,
		#ba2268 3%,
		#64125c 20%,
		#260432 26%,
		#2b063e 47%,
		#21042e 56%,
		#21032b 60%,
		#15041e 74%,
		#2f0534 82%,
		#26031e 89%,
		#10021f 100%
	) !important;
}

@media only screen and (max-width: 991px) {
	.navbar,
	.top-nav-collapse {
		background: #21032b !important;
	}
}

/* Adding color to the Navbar on mobile */
@media only screen and (max-width: 768px) {
	.navbar {
		background-color: #3b0c09;
	}
}

/* Footer color for sake of consistency with Navbar */
.page-footer {
	background-color: #3b0c09;
}

#time-counter {
	font-size: 5rem;
}

.navbar .nav-item:not(:last-child) {
	margin-right: 35px;
}

.dropdown-toggle::after {
	color: #9e215b;
	transition: transform 0.15s linear;
}

.show.dropdown .dropdown-toggle::after {
	transform: translateY(3px);
}

.dropdown-menu {
	color: #fff;
	opacity: 0.95;
	transition: all 0.15s linear;
	background-color: #15041e;
}

.dropdown-item {
	color: #30d8ff !important;
	font-weight: 500 !important;
}

.dropdown-item:hover {
	background-color: #15041e !important;
}

.dropdown-item.active {
	background-color: #4b00ad !important;
}

.modal-content {
	background-image: linear-gradient(to bottom right, rgb(77, 3, 3), rgb(6, 16, 39));
}

#browse-games {
	padding-top: 20px;
	padding-bottom: 20px;
}

.carousel-item {
	background: no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.carousel .carousel-indicators li {
	width: 2.5rem;
	height: 0.5rem;
	cursor: pointer;
	border-radius: 0% !important;
}

.wow {
	visibility: hidden;
}

.border-top {
	border-top: 5px solid #33b5e5 !important;
	border-top-left-radius: 0.25rem !important;
	border-top-right-radius: 0.25rem !important;
}

.avatar-img {
	width: 250px;
	height: 250px;
}

.no-icon {
	width: 16px;
	height: 100%;
	display: inline-block;
	overflow: hidden;
}