html {
	font-size: 1em;
}

@media (max-width: 767.98px) {
	html {
		font-size: 0.9em;
	}
}

@media (max-width: 511.98px) {
	html {
		font-size: 0.8em;
	}
}

body {
	background-color: #242424;
	color: rgb(255, 255, 255);
	font-family: "Cabin", sans-serif;
	overflow-x: hidden;
}

.f-roboto-s {
	font-family: "Roboto Serif", serif;
}

a {
	color: #ff7800;
	text-decoration: none;
}

a:hover {
	color: #00c4e7;
}

.wf-btn {
	color: white;
	font-weight: 600;
	background-color: #ff7800;
}

.wf-btn:hover {
	color: white;
	background-color: #b45400;
}

.wf-blue-btn {
	color: white;
	font-weight: 600;
	background-color: #00c4e7;
}

.wf-blue-btn:hover {
	color: white;
	background-color: rgb(4, 80, 151);
}

#jumbo-container {
	background-color: black;
	background: url(../images/dark-tex-bg.jpg);
	background-size: cover;
	box-shadow: inset 0em 0em 1em 1px #ff7800, inset 0em 0em 1em 0px #ff7800;
	border: none;
	border-radius: 0 0 50% 50% / 0 0 10% 10%;
}

.side-units {
	position: absolute;
	z-index: -1;
	min-height: 600px;
	background-repeat: no-repeat;
	background-position: top;
}

@media (max-width: 1599.98px) {
	.side-units {
		display: none !important;
	}
}

#left-unit-1 {
	width: 327px;
	right: 88vw;
	background-image: url(../images/foolking-imgs/Mage.png);
}

#right-unit-1 {
	width: 258px;
	left: 88vw;
	background-image: url(../images/foolking-imgs/Peasant-Skel.png);
}

#left-unit-2 {
	width: 586px;
	right: 88vw;
	background-image: url(../images/foolking-imgs/Knight.png);
}

#right-unit-2 {
	width: 394px;
	left: 88vw;
	background-image: url(../images/foolking-imgs/God.png);
}

iframe {
	border-radius: 35px;
}

.line-header {
	width: 100%;
	border-bottom: 2px solid #4b4a4a;
	border-radius: 100%;
	line-height: 0.1em;
	margin: 10px 0 20px;

}

.line-header span {
	background: #212529;
	padding: 0 20px;
}

.card {
	background-color: rgba(0, 0, 0, 0.1);
}

#what-we-offer h4,
#what-we-offer i {
	color: #ff7800;
}

#fk-card .row {
	min-height: 260px;
}

#fk-card-img {
	width: 100%;
	height: 100%;
	min-width: 423px;
	min-height: 269px;
	background-image: url(../images/foolking-imgs/fk-1.jpg);
	background-size: cover;
	border-radius: 0.375rem 0 0 0.375rem;
}

@media (max-width: 767.98px) {
	#fk-card-img {
		min-height: 300px;
		width: auto;
		min-width: auto;
		max-width: 90vw;
		border-radius: 0.375rem 0.375rem 0 0;
	}
}

#fk-wishlist-btn {
	font-size: 1.5rem;
	margin-left: 2px;
	margin-bottom: 0.5rem;
	position: relative;
	transition: all ease-in-out 200ms;
	z-index: 2;
}

#fk-wishlist-btn:hover {
	transform: scale(1.02);
	filter: brightness(1.3);
}


#news-section .card {
	overflow: hidden;
	transition: all ease-in-out 200ms;
}

#fk-card:hover,
#news-section .card img {
	transition: all ease-in-out 300ms;
}

#news-section .card:hover {
	background-color: #ff7800;
}

#fk-card:hover {
	background-color: rgba(0, 0, 0, 0.01);
	;
}

#news-section .card:hover img {
	transform: scale(1.03);
}

#fk-social-icons {
	z-index: 2;
	position: relative;
}

#fk-social-icons a img {
	transition: all ease-in-out 200ms;
}

#fk-social-icons a img:hover {
	filter: brightness(1.3);
	transform: scale(1.02);

}

#news-cards-container .card {
	background-color: rgba(255, 255, 255, 0.062);
}

#signup-wrapper {
	background: linear-gradient(rgba(0, 0, 0, 0) 5%, black);
}

footer {
	background-color: black;
}

.social-icons i {
	color: #879198;
	transition: all 200ms ease-in-out;
}

#fixed-logo {
	position: fixed;
	top: 10px;
	left: 20px;
	z-index: 4;
}

#head-social-icons {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 4;
}

#fixed-layer {
	text-align: left;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 20px;
	max-height: 3.6rem;
	/* background: linear-gradient(180deg, black 70%, rgba(0, 0, 0, 1) 100%); */
	background-color: #000000e7;
	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: 3;
}

#fixed-layer img {
	max-height: 2.7rem;
	max-width: 33vw;
}

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

#footer-social-icons i {
	font-size: 2rem;
}

@media (max-width: 399.98px) {
	#footer-social-icons i {
		font-size: 1.5rem;
	}
}

/* #footer-social-icons i:hover {
	color: #D28A0F;
} */

.social-icons .twitter-icon:hover {
	color: #1d9bf0;
}

.youtube-icon:hover {
	color: #FF0000;
}

.steam-icon:hover {
	color: #377096;
}

.instagram-icon:hover {
	color: #C72D8F;
}

.discord-icon:hover {
	color: #7289DA;
}

.tiktok-icon:hover {
	color: #000;
	filter:
		drop-shadow(1px 1px 0 #ff0050) drop-shadow(-1px -1px 0 #00f2ea);
}

footer ul {
	font-size: 0.9rem;
}

#legal-text,
#legal-text span {
	font-size: 0.8rem;
}

.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;
}

/*------*/

.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;
}

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

@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 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%;
}