body {
	color: #010101;
	background-color: #000;
	font-family: 'Roboto', sans-serif;
}

a {
	transition: all 220ms ease-in-out;
}

a:hover {
	text-decoration: none;
	color: #dc3545;
}

.hide {
	display: none !important;
}

#loader {
	left: 0;
	line-height: 200px;
	margin-top: -100px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}

.spinner-border {
	border-width: 0.5em;
}

.orange {
	color: #fe853e;
}

.red {
	color: #ce180b;
}

#content-wrapper {
	animation: fadein 500ms;
}

@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

footer {
	padding-bottom: 100px !important;
}

.dropdown-toggle::after {
	content: none;
}

.dropdown-menu {
	min-width: 30px;
	background-color: rgba(0, 0, 0, 0.55);
}

#lang-flags {
	background-color: rgba(0, 0, 0, 0.45);
	position: fixed;
	right: 0;
	top: 0;
	z-index: 16;
	border: 0;
	border-bottom-left-radius: 8px;
	padding: 1px;
}

#lang-dropdown {
	padding: 0 15px;
}

#lang-flags .dropdown-item {
	color: #ffffff;
}

#lang-flags .dropdown-item:hover {
	color: #242424;
}

#lang-flags .btn.focus,
#lang-flags .btn:focus {
	outline: 0;
	box-shadow: none;
}

#lang-flags a img {
	line-height: 30px;
	width: 30px;
	height: 15px;
	border-radius: 3px;
	transition: all 400ms;
}

#cookies-desc {
	margin: 0 15px 0 0;
	position: fixed;
	bottom: 15px;
	left: 15px;
	border-radius: 6px;
	font-size: 0.735rem;
	color: #ccc;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 12;
	transition: all 500ms ease-in;
}

#cookies-desc p {
	margin: 0;
}

#cookies-desc p a {
	font-weight: 400;
	text-decoration: none;
	color: #0095ff;
	transition: none;
}

#cookies-desc button {
	background-color: rgba(150, 150, 150, 0);
	border: 0;
	border-radius: 15px;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.5rem;
	color: #fff;
	margin: 0;
	padding: 0 3px;
	transition: all 225ms;
	outline: none;
}

#cookies-desc button:hover {
	background-color: rgba(255, 255, 255, 0.9);
	color: #000;
}

#cookies-desc p a:hover {
	color: #fff;
	text-decoration: underline;
}

.container {
	max-width: 1280px;
}

.modal-header,
.modal-footer {
	border: 0px;
}

.modal {
	background-color: rgba(0, 0, 0, 0.4);
}

.info-modal {
	min-height: 85vh;
}

.info-modal .modal-content button {
	position: relative;
	right: -0.75rem;
	top: -0.75rem;
	background-color: #000;
	opacity: 1;
	border-radius: 0.85rem;
	border: 2px solid #fff;
	color: #fff;
	width: 1.7rem;
	height: 1.7rem;
	text-shadow: none;
	transition: all 220ms;
	vertical-align: middle;
	outline: 0;
}

.info-modal .modal-content button:hover {
	background-color: #fff;
	border-color: #000;
	color: #000;
	opacity: 1 !important;
}

.info-modal iframe {
	width: 100%;
	min-height: 80vh;
	border: 0px;
}

/*
 * Extra utilities
 */

.flex-equal>* {
	-ms-flex: 1;
	flex: 1;
}

@media (min-width: 768px) {
	.flex-md-equal>* {
		-ms-flex: 1;
		flex: 1;
	}
}

.overflow-hidden {
	overflow: hidden;
}

/* FONTS AND FONT SIZES */

.featuresRow h2,
.featuresRow h4,
#registerModalLabel,
.cta-container h3,
#community-container h3,
#news-cards h3,
#press-link,
#dlc-container h3 {
	font-family: 'Noto Sans', sans-serif;
}

.featuresRow p {
	font-family: 'Noto Sans', sans-serif;
}

.featuresRow h2,
#registerModalLabel {
	font-size: 1.8rem;
}

#date-wrapper h1,
#discord-cta-container h3,
.cta-container h3,
.btn-pattern-orange,
#steam-cta-btn,
.featuresRow h2,
#fixed-cta-btn,
#demo-subheader {
	font-family: 'Germania One', cursive;
}

#registerModalLabel {
	color: black;
}

.featuresRow h2 {
	text-transform: capitalize;
}

.cta-container h3,
#community-container h3,
#news-cards h3,
#dlc-container h3 {
	font-size: 2.2rem;
}

.featuresRow h4 {
	display: inline;
	font-size: 1.1rem;
}

.featuresRow p {
	line-height: 1.6;
	font-size: 1rem;
}

@media (min-width: 512px) {
	.featuresRow p {
		font-size: 1.2rem;
	}

	.featuresRow h4 {
		font-size: 1.2rem;
	}

	.featuresRow h2 {
		font-size: 1.6rem;
	}
}

@media (min-width: 992px) {
	.featuresRow p {
		font-size: 1.6rem;
	}

	.featuresRow h4 {
		font-size: 1.8rem;
	}

	.featuresRow h2,
	.cta-container h3,
	#community-container h3 {
		font-size: 2rem;
	}
}

@media (min-width: 1200px) {
	.featuresRow p {
		font-size: 1.8rem;
	}

	.featuresRow h4 {
		font-size: 2rem;
	}

	.featuresRow h2,
	.cta-container h3 {
		font-size: 2.6rem;
	}
}

#page-footer p {
	font-size: 0.7rem;
}

/* BUTTONS */
.btn-horizontal-blue {
	color: #fff;
	background: linear-gradient(#0062cc,
			#0062cc 50%,
			#004C9E 50%,
			#004C9E 100%);
	border: 0px solid #0062cc;
	border-radius: 7px;
	box-shadow: 0 0 0 0.2rem rgba(33, 33, 33, .3);
	text-transform: capitalize;
	transition: all 220ms linear;
}

.btn-horizontal-blue:hover {
	color: #fff;
	background: linear-gradient(#0095EB,
			#0095EB 50%,
			#0078BD 50%,
			#0078BD 100%);
	border-color: #0062cc;
	box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, .5);
}

.btn-pattern-orange {
	background-color: #010333;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230950dd'/%3E%3Cstop offset='1' stop-color='%23010333'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%232486ff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%232486ff' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
	background-size: cover;
	background-position: center bottom;
	border-radius: 10px;
	border: 0px;
	transition: all 220ms linear;
}

.btn-pattern-orange:hover {
	background-color: #570303;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e05200'/%3E%3Cstop offset='1' stop-color='%23570303'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23ffbf00' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ffbf00' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.26'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 0 10px 0.6rem rgba(200, 0, 0, .8);
}

.btn-discord {
	font-family: 'Pirata One', cursive !important;
	background-color: #7289DA;
	border-radius: 10px;
	border: 4px solid #7289DA;
	transition: all 220ms linear;
}

.btn-discord:hover {
	background-color: #2C2F33;
	border-color: #7289DA;
}

.btn-discord svg {
	fill: #fff;
	width: 300px;
	transition: all 220ms linear;
}

@media(max-width: 575.98px) {
	.btn-discord svg {
		width: 220px;
	}
}

.btn-discord:hover svg {
	fill: #7289DA;
}

footer .btn-outline-light {
	color: #b2b2b2;
	border-color: #b2b2b2;
}

#request-btn img {
	width: 25px;
	filter: brightness(80%);
	transition: filter .15s ease-in-out;
}

#request-btn:hover img {
	filter: invert(100%);
}

/* SITE HEADER */

.jumbotron {
	position: relative;
	height: 95vw;
	max-height: 110vh;
	overflow: hidden;
	background-color: none;
	/* -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10%);
	mask-image: linear-gradient(0deg, transparent 0, #000 10%); */
}

.jumbotron:after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	width: 100%;
	height: 8em;
}

.vimeo-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background-image: url("../images/bgs/video-bg.jpg");
	background-size: cover;
	background-position: bottom left;
}

.vimeo-wrapper video {
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

@media (max-width: 767.95px) {
	.vimeo-wrapper video {
		display: none !important;
	}
}

@media (max-width: 150vh) {
	.vimeo-wrapper video {
		left: 66%;
	}
}

@media (max-width: 120vh) {
	.vimeo-wrapper video {
		left: 82%;
	}
}

#main-logo {
	display: inline-block;
}

#main-logo img {
	max-width: 50vw;
}

@media (max-width: 1599.98px) {
	#main-logo {
		top: 10px;
		left: 40px;
	}
}

@media (max-width: 991.98px) {
	#main-logo {
		top: 10px;
		left: 25px;
	}

	#main-logo img {
		max-width: 45vw;
	}
}

@media (max-width: 767.98px) {
	#main-logo {
		top: 10px;
		left: 10px;
	}

	#main-logo img {
		max-width: 50vw;
	}
}

@media (max-width: 575.98px) {
	#main-logo {
		top: 5px;
		left: 5px;
	}
}

@media (min-width: 175vh) {
	#main-logo img {
		max-width: 50vw;
	}
}

#date-cta-wrapper {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20%;
	z-index: 10;
}

#date-wrapper h1 {
	color: #fff;
	font-size: 4.2rem;
	white-space: nowrap;
	text-shadow: 0 5px rgba(0, 0, 0, 0.95);
}

@media (max-width: 911.98px) {
	#date-cta-wrapper {
		bottom: 35%;
	}

	#date-wrapper h1 {
		text-shadow:
			3px 3px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}
}

@media (max-width: 767.98px) {

	/* #date-cta-wrapper {
		bottom: 70px;
	} */
	#date-wrapper h1 {
		font-size: 3rem;
	}
}

@media (max-width: 575.98px) {
	#date-cta-wrapper {
		bottom: 50px;
	}

	#date-wrapper h1 {
		font-size: 2.4rem;
	}
}

#cta-wrapper {
	/* position: absolute;
	left: 0;
	right: 0;
	bottom: 15%; */
	z-index: 11;
}

.cta-btn {
	font-family: 'Roboto', sans-serif;
	font-size: 2rem;
	position: relative;
	display: inline-block;
	color: white;
	border-radius: 8px;
	transition: all 150ms linear;
}

#steam-cta-btn,
#steam-dlc-btn,
#fixed-cta-btn {
	background: linear-gradient(1deg, rgba(255, 85, 0, 0.94), rgba(255, 235, 0, 0.94));
}

/* #fixed-cta-btn {
	background: linear-gradient(0deg, rgba(223, 172, 7, 0.9), rgba(223, 172, 7, 0.9));
} */


#steam-cta-btn:hover,
#steam-dlc-btn:hover,
#fixed-cta-btn:hover {
	transform: scale(1.03);
}

#steam-cta-btn:hover,
#steam-dlc-btn:hover,
#fixed-cta-btn:hover {
	background: linear-gradient(1deg, rgb(255, 85, 0), rgb(255, 235, 0));
}

/* #fixed-cta-btn:hover {
	background: linear-gradient(0deg, rgb(223, 172, 7), rgb(223, 172, 7));
} */


#steam-cta-btn {
	padding: 15px 35px;
}

#demo-subheader {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px 25px;
	display: inline-block;
	font-size: 1.4rem;
	position: relative;
	color: white;
	border-radius: 0 0 8px 8px;
	border: 2px solid white;
	border-top: 0;
	transition: all 150ms linear;
	z-index: 1;
}

.carousel-caption {
	bottom: 5px;
	padding-bottom: 5px;
}

.carousel-caption img {
	transform: scale(0.9, 0.9);
}

#steam-dlc-btn,
#gog-dlc-btn {
	padding: 15px 15px;
}

@media (max-width: 992.98px) {

	#steam-dlc-btn,
	#gog-dlc-btn {
		padding: 7px 7px;
	}

	.carousel-caption img {
		transform: scale(0.7, 0.7);
	}
}

@media (max-width: 767.98px) {

	#steam-dlc-btn,
	#gog-dlc-btn {
		padding: 1px;
	}

	.carousel-caption {
		right: auto;
		left: 25px;
		bottom: 4px;
		padding-bottom: 0;
	}

	.carousel-caption img {
		transform: scale(0.5, 0.5);
	}
}

@media (max-width: 511.98px) {

	#steam-dlc-btn,
	#gog-dlc-btn {
		padding: 0;
	}

	.carousel-caption {
		right: auto;
		left: 10px;
		bottom: 2px;
		padding-bottom: 0;
	}
}

#gog-cta-btn,
#gog-dlc-btn {
	background: linear-gradient(220deg, rgba(137, 14, 185, 0.9), rgba(124, 8, 219, 0.9));
}

#gog-cta-btn {
	padding: 15px 35px;
}

.cta-btn a,
.cta-btn a:hover {
	color: white;
}

.cta-btn:hover {
	cursor: pointer;
}



#gog-cta-btn:hover,
#gog-dlc-btn:hover {
	box-shadow: 0 0 5px 5px rgba(173, 25, 231, 0.87);
}

@media (max-width: 767.98px) {
	#steam-cta-btn {
		padding: 15px 36.5px;
	}
}

@media (max-width: 511.98px) {
	.cta-btn img {
		width: 40px;
	}

	#steam-cta-btn,
	#gog-cta-btn {
		padding: 2px 30px;
		height: 55px;
	}
}

#awards-wrapper {
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 12%;
	z-index: 11;
}

#screenshot-sticker {
	position: absolute;
	bottom: 15%;
	left: 73%;
	right: 3%;
	/* width: 18%; */
	z-index: 12;
	max-width: 528px;
}

#screenshot-sticker video {
	max-width: 520px;
	width: 100%;
	height: 100%;
	display: flex;
}

#screenshot-sticker span {
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	transform: translate(-50%, -50%) scale(.8);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

#screenshot-sticker span img {
	height: 100px;
	margin-left: 10%;
	width: auto;
	transition: all .3s ease;
	opacity: 0.8;
}

@media (max-width: 1023.98px) {
	#awards-wrapper {
		width: 20%;
		bottom: 57%;
	}
}

@media (max-width: 911.98px) {
	#screenshot-sticker {
		left: 33%;
		right: 33%;
		bottom: 13%;
	}
}



@media (max-width: 911.98px) and (max-height: 729.98px) {
	#screenshot-sticker {
		display: none !important;
	}

	#date-cta-wrapper {
		bottom: 20%;
	}
}

/* SCREENSHOTS AND TRAILER */

#trailerModal .modal-dialog {
	max-width: 70vw;
	max-height: 70vh;
}

@media (max-width: 575.98px) {
	#trailerModal .modal-dialog {
		max-width: 100vw;
		margin: .5rem 0;
	}
}

.img-thumbnail {
	border: 0;
	background-color: rgba(255, 122, 33, 0.502);
	transition: all 320ms linear;
}

.img-thumbnail:hover {
	background-color: rgba(255, 122, 33, .85);
}

.screenshot-thumbnail {
	border-radius: 4px;
	overflow: hidden;
}

.screenshot-thumbnail:hover {
	cursor: pointer;
}

#screenshot-sticker video,
#screenshots-container img {
	transition: all 320ms linear;
}

#screenshot-sticker a:hover video,
#screenshot-sticker a:hover img,
#screenshots-container img:hover {
	transform: scale(1.1);
}

#screenshot-sticker a:hover img {
	opacity: 1;
}

.carousel-img-thumb {
	overflow: hidden;
}

.carousel-indicators li {
	width: 8px;
	height: 8px;
	background-color: #dfac07;
	margin-left: 4px;
	margin-right: 4px;
	border-radius: 50%;
}

.feature-text-right img,
.feature-text-left img {
	margin: 0 auto;
}

.carousel-img-wrapper>img {
	max-width: 720px;
	max-height: 405px;
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dfac07' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dfac07' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-control-next,
.carousel-control-prev {
	opacity: .7;
}

.carousel-control-prev {
	justify-content: start;
}

.carousel-control-next {
	justify-content: end;
}

.feature-text-left,
.feature-text-right {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	border-radius: 15px;
}

.feature-text-left {
	padding-left: 25px;
	padding-right: 45px;
	right: -35px;
}

.feature-text-right {
	padding-left: 45px;
	padding-right: 25px;
	left: -35px;
}

@media (max-width: 767.98px) {

	.feature-text-left,
	.feature-text-right {
		position: relative;
		display: inline-block;
		width: 100%;
		max-width: 100%;
		padding: 15px 10px 20px 10px;
		border-radius: 0;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		right: 0;
		left: 0;
		bottom: -10px;
	}
}

#dlc-container {
	padding: 0;
}

#dlc-carousel {
	border-radius: 20px;
	overflow: hidden;
}

@media (max-width: 911.98px) {
	#dlc-carousel {
		border-radius: 10px;
		overflow: hidden;
	}
}

#dlc-carousel .carousel-indicators {
	left: auto;
	margin-right: 10%;
	margin-bottom: 0.5rem;
}

/* NEWS AND SUBSCRIBE CTA STYLES */

#signup-cta-container {
	margin: -18px 0;
}

.mask-top {
	padding-top: 80px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%);
	mask-image: linear-gradient(180deg, transparent 0, #000 7%);
}

#news-container {
	position: relative;
	border-bottom: none;
}

#news-cards .card-body {
	min-height: 382px;
}

#news-cards .card,
#news-cards .card-img-wrapper {
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff, rgba(204, 204, 204, 0.7));
	border: 0;
	z-index: 1;
}

#news-cards .card:hover {
	box-shadow: 0px 0px 3px 5px #dfac07;
}

#news-cards .card::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image: none;
	background-color: #fff;
	opacity: 0.7;
}

#news-cards .card:hover::before {
	opacity: 1;
}

#news-cards a {
	color: black;
	font-weight: bold;
}

#news-cards .modal a:hover {
	color: red;
}

#news-cards .btn-outline-dark:hover {
	color: white;
}

#news-cards .btn {
	font-weight: initial;
}

#news-cards .card,
#news-cards .card::before,
#news-cards .card img {
	transition: all 225ms ease-in;
}

.subscribe-btn {
	font-size: 2rem;
}

.btn-yellow {
	color: #fff;
	background-color: #dfac07;
	border-color: #dfac07;
}

@media (min-width: 512px) {
	.subscribe-btn {
		font-size: 2.9rem;
	}
}

#registerModal .modal-content,
#trailerModal .modal-content {
	background-color: rgba(220, 220, 220, 0.75);
	border: 0px solid #ccc;
	border-radius: 10px;
}

/* Subscribe form styles */

#registerModal input[type=email] {
	width: 50%;
}

@media (max-width: 991.98px) {
	#registerModal input[type=email] {
		width: 75%;
	}
}

@media (max-width: 575.98px) {
	#registerModal input[type=email] {
		width: 100%;
	}
}

#registerModal input[type=checkbox]+label {
	display: block;
	margin: 0.2em;
	cursor: pointer;
	padding: 0.1em;
}

#registerModal input[type=checkbox] {
	display: none;
}

#registerModal input[type=checkbox]+label:before {
	content: "\2714";
	border: 0.1em solid #000;
	border-radius: 0.2em;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.2em;
	vertical-align: middle;
	color: transparent;
	transition: .2s;
}

#registerModal input[type=checkbox]+label:active:before {
	transform: scale(0);
}

#registerModal input[type=checkbox]:checked+label:before {
	background-color: #007bff;
	border-color: #007bff;
	color: #fff;
}

#registerModal input[type=checkbox]:disabled+label:before {
	transform: scale(1);
	border-color: #aaa;
}

#registerModal input[type=checkbox]:checked:disabled+label:before {
	transform: scale(1);
	background-color: #bfb;
	border-color: #bfb;
}

#community-container {
	/* border-top: 1px solid rgb(192 103 13); */
	border-bottom: 1px solid #dfac07;
	background-color: black;
}

#community-container h3 {
	color: white;
}

@media (max-width: 767.98px) {
	#press-link {
		padding-top: 0;
	}
}

#social-icons svg {
	fill: #879198;
	width: 60px;
	margin-left: 15px;
	transition: all 200ms ease-in-out;
}

@media (max-width: 399.98px) {
	#social-icons svg {
		width: 50px;
	}
}

#social-icons svg:hover {
	fill: #D28A0F;
}

#social-icons .fb-icon:hover {
	fill: #4267B2;
}

#social-icons .twitter-icon:hover {
	fill: #ffffff;
}

#social-icons .youtube-icon:hover {
	fill: #FF0000;
}

#social-icons .steam-icon:hover {
	fill: #377096;
}

#social-icons .instagram-icon:hover {
	fill: #C72D8F;
}

#social-icons .discord-icon:hover {
	fill: #7289DA;
}

#social-icons .bluesky-icon:hover {
	fill: #0886FE;
}

#social-icons .tiktok-icon:hover {
	fill: #000;
	filter:
		drop-shadow(2px 2px 0 #ff0050) drop-shadow(-2px -2px 0 #00f2ea);
}

/* FOOTER STYLES */
footer {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%);
	mask-image: linear-gradient(180deg, transparent 0, #000 10%);
	background-color: #010101 !important;
}

footer .text-muted {
	color: #879198 !important;
}

footer img {
	max-height: 60px;
}

#press-link {
	line-height: 1;
	vertical-align: top;
	font-size: 3rem;
	padding-top: 30px;
}

#press-link a {
	color: #879198;
	transition: all 200ms ease-in-out;
}

#press-link a:hover {
	color: #D28A0F;
}

.gray-img-link img {
	-webkit-filter: grayscale(100%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	transition: all 150ms linear;
}

.gray-img-link img:hover {
	-webkit-filter: grayscale(0%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

.bright-img-link img {
	-webkit-filter: brightness(0.7);
	/* Safari 6.0 - 9.0 */
	filter: brightness(0.7);
	transition: all 150ms linear;
}

.bright-img-link img:hover {
	-webkit-filter: brightness(1);
	/* Safari 6.0 - 9.0 */
	filter: brightness(1);
}

#footer-text-links p a {
	color: #dfac07;
	transition: all 150ms linear;
}

#footer-text-links p a:hover {
	color: white;
	text-decoration: underline;
}

/* Localized font for PL and RU*/

.russo-lg,
.russo-sm,
.russo-xl {
	font-family: 'Russo One', sans-serif !important;
}

.russo-xl {
	font-size: 4rem !important;
}

.russo-lg {
	font-size: 2rem !important;
}

.russo-sm {
	font-size: 0.8em !important;
}

@media (max-width: 1199.98px) {
	.russo-lg {
		font-size: 2.4rem !important;
	}

	.russo-sm {
		font-size: 1.6rem !important;
	}
}

@media (max-width: 1023.98px) {
	.russo-xl {
		font-size: 4rem !important;
	}

	.russo-lg {
		font-size: 2rem !important;
	}

	.russo-sm {
		font-size: 1.2rem !important;
	}
}

@media (max-width: 767.98px) {
	.russo-xl {
		font-size: 3rem !important;
	}
}

@media (max-width: 511.98px) {
	.russo-xl {
		font-size: 2rem !important;
	}
}

#fixed-cta-btn-text {
	display: inline-block;
}

#fixed-cta-btn-text-short {
	display: none;
}

@media (max-width: 767.98px) {
	#fixed-cta-btn-text {
		display: none;
	}

	#fixed-cta-btn-text-short {
		display: inline-block;
	}
}

@media (max-width: 512.98px) {
	#fixed-cta-btn-text-short.russo-sm {
		display: none;
	}
}

/* NEW BGS */
.bg-1 {
	background-color: #0078BD;
	background-image: url("../images/bgs/feature-bg1.jpg");
	background-size: cover;
	background-position: top left;
	border-bottom: 4px solid black;
}

.bg-2 {
	background-color: darkolivegreen;
	background-image: url("../images/bgs/bg-crusaders.jpg");
	background-size: cover;
	background-position: top left;
	border-bottom: 4px solid black;
}

.bg-3 {
	background-color: #0078BD;
	background-image: url("../images/bgs/feature-bg3.jpg");
	background-size: cover;
	background-position: top right;
	border-bottom: 4px solid black;
}

.bg-4 {
	background-color: #0078BD;
	background-image: url("../images/bgs/feature-bg4.jpg");
	background-size: cover;
	background-position: bottom left;
	border-bottom: 4px solid black;
}

.dark-texture-bg {
	background-color: #181818;
	background-image: url("../images/bgs/dark-texture-bg.jpg");
	background-size: 2000px;
	background-repeat: repeat;
}

.dark-article-wrapper {
	position: relative;
	top: -15px;
	bottom: -15px;
	z-index: 2;
}

.dark-article {
	margin: -25px 0;
	padding: 40px 0;
}

.light-bg {
	margin-top: -15px;
	background-color: #f7d780;
	background-image: url("../images/bgs/BG-vrock-512.jpg");
	background-size: 512px;
	background-repeat: repeat;
}

.torn-parchment-top,
.torn-parchment-bottom {
	position: relative;
	border: 0;
	height: 39px !important;
	background-image: url("../images/bgs/BG-vrock-burnt-top.png");
	background-repeat: repeat-x;
	z-index: 5;
}

.torn-parchment-top {
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 35%);
	mask-image: linear-gradient(0deg, #00000000 0, #000000 35%);
}

.torn-parchment-bottom {
	bottom: 15px;
	-webkit-transform: scaleY(-1);
	-moz-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	transform: scaleY(-1);
	-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 35%);
	mask-image: linear-gradient(0deg, #00000000 0, #000000 35%);
}

/* .dirty-bg {
	background-image: url("../images/bgs/dirty-bg.jpg");
	background-size: cover;
	background-position: top right;
} */

/* #content-bg {
	position: relative;
	top: -1px;
} */

/* ANIMATIONS */
.hidden {
	opacity: 0;
}

.fadeInTop {
	animation: fadeInTop 1.2s both;
	-webkit-animation: fadeInTop 1.2s both;
	-o-animation: fadeInTop 1.2s both;
	-moz-animation: fadeInTop 1.2s both;
}

@keyframes fadeInTop {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-moz-keyframes fadeInTop {
	0% {
		opacity: 0;
		-moz-transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInTop {
	0% {
		opacity: 0;
		-o-transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@-webkit-keyframes fadeInTop {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

.fadeInBottom {
	animation: fadeInBottom 2s both;
	-webkit-animation: fadeInBottom 2s both;
	-o-animation: fadeInBottom 2s both;
	-moz-animation: fadeInBottom 2s both;
}

@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(75px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-moz-keyframes fadeInBottom {
	0% {
		opacity: 0;
		-moz-transform: translateY(75px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInBottom {
	0% {
		opacity: 0;
		-o-transform: translateY(75px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@-webkit-keyframes fadeInBottom {
	0% {
		opacity: 0;
		-webkit-transform: translateY(75px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

/*--- ScrollFade Specific ---*/

.scrollFade {
	opacity: 0;
	pointer-events: all;
}

/*------*/

/* RANGE SLIDER STUFF */
.swap-img-slider {
	position: relative;
	/* max-width: 640px;
	height: 360px; */
	overflow: hidden;
}

.slider-img-small {
	max-width: 640px;
	height: 360px;
}

.slider-img-large {
	max-width: 960px;
	height: 540px;
}

.slider-img {
	position: absolute;
	width: 100%;
	height: 100%;
	/* max-width: 640px;
	max-height: 360px; */
	background-size: cover;
}

#slider1-bg-img {
	background-image: url('../images/screenshots/thumbs/5b.jpg');
}

#slider1-fg-img {
	background-image: url('../images/screenshots/thumbs/5a.jpg');
	width: 50%;
}

.slider {
	position: absolute;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	background: rgba(242, 242, 242, 0);
	outline: none;
	margin: 0;
	transition: all .2s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider::-webkit-slider-thumb:hover {
	background: rgba(#f2f2f2, .1);
}

.slider-small::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 5px;
	height: 360px;
	background: rgba(209, 152, 0, 0.7);
	cursor: pointer;
}

.slider-small::-moz-range-thumb {
	width: 5px;
	height: 360px;
	background: rgba(209, 152, 0, 0.7);
	cursor: pointer;
}

.slider-large::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 8px;
	height: 540px;
	background: rgba(209, 152, 0, 0.7);
	cursor: pointer;
}

.slider-large::-moz-range-thumb {
	width: 8px;
	height: 540px;
	background: rgba(209, 152, 0, 0.7);
	cursor: pointer;
}

.slider-button {
	size: 30px;
	pointer-events: none;
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgb(209, 152, 0);
	left: calc(50% - 18px);
	top: calc(50% - 18px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider-button:after {
	content: '';
	padding: 3px;
	display: inline-block;
	border: solid #5D5D5D;
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg);
}

.slider-button:before {
	content: '';
	padding: 3px;
	display: inline-block;
	border: solid #5D5D5D;
	border-width: 0 2px 2px 0;
	transform: rotate(135deg);
}

/* bordered image classes */

.troop-vids-wrapper {
	max-width: 640px;
}

.troop-vids-wrapper .carousel-inner {
	background-image: url(../images/bgs/videos-landscape.jpg);
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
}

.troop-vids-wrapper video {
	max-width: 640px;
}

.slider-img-small-wrapper {
	max-width: 640px;
}

.slider-img-large-wrapper {
	max-width: 1260px;
}

.slider-img-large-wrapper .carousel-item {
	max-width: 1200px;
}

.char-vids-wrapper {
	max-width: 460px;
}

.char-vids-wrapper .carousel-inner {
	max-height: 400px;
}

.carousel-item video {
	width: 100%;
	height: auto;
}

.bordered-img-wrapper {
	position: relative;
}

.gold-border {
	position: absolute;
	background-repeat: repeat;
	z-index: 2;
}

.b-top {
	top: 2px;
	left: 10px;
	right: 10px;
	height: 32px;
	background-image: url(../images/Panel_Border_Top.png);
}

.b-right {
	top: 10px;
	right: 1px;
	bottom: 10px;
	width: 33px;
	background-image: url(../images/Panel_Border_Right.png);
}

.b-bottom {
	bottom: 2px;
	left: 10px;
	right: 10px;
	height: 33px;
	background-image: url(../images/Panel_Border_Bottom.png);
}

.b-left {
	top: 10px;
	left: 2px;
	bottom: 10px;
	width: 32px;
	background-image: url(../images/Panel_Border_Left.png);
}

.corner {
	position: absolute;
	width: 33px;
	height: 33px;
	z-index: 2;
}

.c-top.c-left {
	top: 0;
	left: 0;
}

.c-top.c-right {
	top: 0;
	right: 0;
}

.c-bottom.c-left {
	bottom: 0;
	left: 0;
}

.c-bottom.c-right {
	bottom: 0;
	right: 0;
}

.content {
	position: relative;
	z-index: 1;
	padding: 30px;
}

/* RSS video stuff */
.rss-video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.rss-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Fixed Nav styles */

#fixedLayer {
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 5px 10px 25px;
	min-height: 60px;
	background: linear-gradient(180deg, black 70%, rgba(0, 0, 0, 0) 100%);
	color: white;
	/* border-radius: 0 0 20px 20px; */
	visibility: hidden;
	/* Initially hidden */
	opacity: 1;
	/* Start transparent */
	transform: translateY(-60px);
	/* Start slightly above */
	transition: all 0.5s ease;
	z-index: 15;
}

#fixedLayer.visible {
	visibility: visible;
	opacity: 1;
	/* Fade to fully opaque */
	transform: translateY(0);
	/* Move to its original position */
}

@media (max-width: 767.98px) {
	#fixedLayer {
		text-align: left;
	}

	#fixedLayer img {
		display: none;
	}
}

#fixed-cta-btn {
	padding: 5px 15px;
	font-size: 1.5rem;
}

#fixed-cta-btn img {
	width: 25px;
}

.smaller-text {
	font-size: 0.8em;
}

.ekko-lightbox-nav-overlay a,
.ekko-lightbox-nav-overlay a:hover {
	color: #fff;
	font-size: 4rem;
	text-shadow: -2px 0 2px #000,
		2px 0 2px #000,
		0px 2px 0 #000,
		0 -2px 0 #000;
	-webkit-text-stroke: 2px black;
	-webkit-text-fill-color: white;
}

#trailerModal iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}