@font-face {
	font-family: "Trajan Pro";
	src: url("./fonts/Trajan Pro.ttf") format("truetype");
	font-weight: bold;
}

html {
	font-family: Bebas Nue;
	background: transparent;
	height: 100%;
}

body {
	background: url('../images/bg.png') center center no-repeat;
	background-size: cover;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 9999;
	overflow: hidden;
	text-align: center;
}

#corners {
	background: url('../images/rocks.png') bottom center no-repeat;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: 3;
	image-rendering: pixelated;
}


#logo-splash {
	background: url('../images/logo-splash.png') bottom center no-repeat;
	background-size: cover;
	position: absolute;
	top: 21vw;
	left: 0vw;
	width: 14vw;
	height: 14vw;
	z-index: 3;
	opacity: 0.3;
	mix-blend-mode: ligthen;
	image-rendering: pixelated;
}

#video-bg {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: -1;
}

#video-bg #strain-video {
	position: fixed;
	top: 45%;
	left: 50%;
	width: 150%;
	height: 114vh;
	transform: translate(-50%, -50%);
}


#content {
	background: rgba(0, 0, 0, 0.25);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

#audio {
	position: absolute;
	width: 12vw;
	bottom: 0.5vw;
	left: 0.5vw;
}

#logo {
	background: url('../images/logo.png') center center no-repeat;
	background-size: cover;
	width: 22vw;
	height: 13.5vw;
	margin: 5vw auto 0 auto;
	animation: pulse 3s infinite;
	filter: drop-shadow(0 0 2vw rgba(15, 6, 5, 1));
}

#countdown-container {
	background: url('../images/countdown1.png') center center no-repeat;
	position: absolute;
	top: 0;
	left: 100px;
	padding: 50px;
	text-align: center;
	width: 400px;
	height: 300px;
	box-sizing: border-box;
	background-size: 70% 100%;
}

#countdown {
	font-size: 20px;
	font-weight: bold;
	color: #e7bc78;
	letter-spacing: 2px;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin-top: 110px;
	margin-bottom: 20px;
}

#opening-text {
	display: none;
}

#opening-date {
	border: none;
	outline: none;
	color: #e7bc78;
	font-size: 15px;
	letter-spacing: 2px;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
}

@media only screen and (max-width: 600px) {
	#countdown-container {
		background: none;
		position: absolute;
		top: 38%;
		left: 10px;
		padding: 20px;
		text-align: center;
		width: calc(100% - 20px);
		box-sizing: border-box;
		white-space: nowrap;
	}

	#countdown {
		background: none;
		font-size: 28px;
		color: #d4a455;
		margin-top: 20px;
	}

	#opening-text {
		display: block;
		border: none;
		outline: none;
		text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
		color: #d4a455;
		font-size: 30px;
		letter-spacing: 2px;
		cursor: pointer;
		transition: 0.3s;
		font-family: Trajan Pro;
		font-weight: 600;
		margin-top: 30px;
	}

	#opening-date {
		color: #d4a455;
		display: none;
	}
}

#timer-text table {
	position: absolute;
	top: 67%;
	width: 82%;
	margin-left: 8.5%;
}

#timer-text table td {
	width: 25%;
	font-size: 0.35vw;
	text-align: center;
}

#timer {
	width: 80%;
	position: absolute;
	top: 54%;
	left: 50%;
	transform: translate(-50%, 0);
	display: flex;
}

#timer div {
	width: 25%;
	padding: 0.4vw 0.2vw;
	border-radius: 0.2vw;
	margin: 0 0.2vw;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 50, 50, 0.6);
	color: rgba(255, 200, 80, 1);
	font-size: 0.8vw;
	font-weight: 600;
	text-shadow: 0 0 0.8vw rgba(255, 0, 0, 1);
}

#flags {
	position: absolute;
	top: 1vw;
	right: 5vw;
	display: flex;
}

@keyframes movedown {
	from {
		top: -16.5vw;
	}

	to {
		top: 0;
	}
}

.flag_feature {
	background: url(../images/flag.png) center center no-repeat;
	background-size: cover;
	width: 6.7vw;
	height: 16.5vw;
	image-rendering: pixelated;
	font-family: Trajan Pro;
	color: rgba(255, 255, 255, 1);
	font-size: 0.6vw;
	padding-top: 3vw;
	font-size: 0.5vw;
	margin: 0 0.5vw;
	position: relative;
	top: -17.5vw;
}

.flag_feature img {
	width: 1.4vw;
	border-radius: 50%;
	border: 0.1vw solid rgba(255, 210, 50, 1);
	box-shadow: 0 0 1vw rgba(255, 80, 30, 1);
}

.flag_feature span {
	font-size: 0.8vw;
	color: rgba(255, 210, 50, 1);
	text-shadow: 0 0 0.8vw rgba(255, 100, 50, 1);
	filter: drop-shadow(0 0 0.05vw rgba(160, 60, 0, 1));
}

.flag_feature .bottom {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 3.8vw;
	transform: translate(-50%, 0);
}

.flag_feature .center {
	width: 100%;
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#features {
	background: url(../images/wood.png) center center no-repeat;
	background-size: cover;
	width: 25vw;
	height: 20.9vw;
	position: absolute;
	top: 0vw;
	right: 5vw;
	image-rendering: pixelated;
	font-family: Trajan Pro;
	color: rgba(255, 255, 255, 1);
	font-size: 0.6vw;
	animation: slideInDown 1s 1;
	display: none;
}

#features table {
	width: 90%;
	margin-left: 7%;
	max-height: 12vw;
	margin-top: 7.4vw;
}


#features table td.icon img {
	width: 1.2vw;
}

#features table td {
	text-align: left;
}

#features table td span {
	color: rgba(255, 200, 50, 1);
	text-shadow: 0 0 0.6vw rgba(255, 50, 50, 1);
}

.btn-more-features {
	background: url('../images/more-features.png') center center no-repeat;
	background-size: cover;
	width: 9vw;
	height: 2.03vw;
	line-height: 2vw;
	border: none;
	outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 0.65vw;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin: 0.4vw 0;
}

.btn-more-features:hover {
	transform: scale(0.95);
	filter: saturate(1.5) brightness(1.4) drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1));
}

.btn-more-features-mobile {
	display: none;
}

.btn-more-features-mobile:hover {
	transform: scale(0.95);
	filter: saturate(1.5) brightness(1.4) drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1));
}

.btn-more-features-big {
	background: url('../images/more-features.png') center center no-repeat;
	background-size: cover;
	width: 12vw;
	height: 2.7vw;
	line-height: 2.7vw;
	border: none;
	outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 0.9vw;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin: 0.4vw 0;
}

.btn-more-features-big:hover {
	transform: scale(0.95);
	filter: saturate(1.5) brightness(1.4) drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1));
}

#discord-btn {
	width: 2.5vw;
	top: 40%;
	right: 0.5vw;
	position: absolute;
	animation: backInRight 1s 1;
	transition: 0.3s;
	z-index: 10;
}

#discord-btn:hover {
	transform: scale(1.1);
	filter: drop-shadow(0 0 1vw rgba(80, 80, 255, 0.5));
}

#discord {
	width: 15vw;
	height: 15vw;
	position: absolute;
	top: 60%;
	right: 10vw;
	transform: translate(0, -50%);
}

#discord iframe {
	width: 100%;
	height: 100%;
}

#buttons {
	width: 40%;
	margin: 25vh auto 0 auto;
	text-align: center;
	z-index: 30;
	position: relative;
}

#buttons .playnow {
	background: url('../images/playnow.png') center center no-repeat;
	background-size: cover;
	width: 14vw;
	height: 3vw;
	line-height: 3vw;
	border: none;
	outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 1vw;
	letter-spacing: 2px;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin: 0.5vw 0;
	z-index: 50;
}

#buttons .playnow:hover {
	transform: scale(0.95);
	filter: saturate(1.5) brightness(1.4) drop-shadow(0 0 1.5vw rgba(155, 55, 15, 1));
}

#buttons .forums {
	background: url('../images/forums.png') center center no-repeat;
	background-size: cover;
	width: 12vw;
	height: 2.7vw;
	line-height: 2.7vw;
	border: none;
	outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 0.9vw;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin: 0.4vw 0;
}

#buttons .forums:hover {
	transform: scale(0.95);
	filter: saturate(1.5) brightness(1.4) drop-shadow(0 0 1.5vw rgba(155, 35, 15, 1));
}

#votes {
	width: 30%;
	margin: 1vw auto 0 auto;
	text-align: center;
	display: none;
}

.vote-btn {
	background: url('../images/vote-btn.png') center center no-repeat;
	background-size: cover;
	width: 11vw;
	height: 2.8vw;
	line-height: 3.4vw;
	border: none;
	outline: none;
	text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: 1vw;
	letter-spacing: 2px;
	cursor: pointer;
	transition: 0.3s;
	font-family: Trajan Pro;
	font-weight: 600;
	margin: 0 0.5vw;
	z-index: 50;
	position: relative;
	text-align: left;
	padding-left: 3vw;
	color: rgba(255, 190, 80, 1);
}

.vote-btn img {
	position: absolute;
	width: 2vw;
	top: 50%;
	left: 0.5vw;
	transform: translate(0, -50%);
}

.vote-btn #vote-on {
	position: absolute;
	font-size: 0.4vw;
	top: -0.8vw;
	left: 3vw;
	color: rgba(255, 255, 255, 1);
}

.vote-btn:hover {
	background: url('../images/vote-btn-h.png') center center no-repeat;
	background-size: cover;
	transform: scale(0.9);
	filter: drop-shadow(0 0 1.5vw rgba(255, 30, 0, 0.5));
}

#footer {
	background: linear-gradient(0deg, rgba(15, 7, 5, 1) -10%, transparent 100%);
	height: 15vw;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
}

#footer #text {
	height: 3vw;
	width: 40%;
	margin: 11.5vw auto 0 auto;
	padding: 0 auto;
	text-align: center;
}

#footer #text h2 {
	font: 0.5vw 'Arial';
	color: #ffc74a;
	height: 0.4vw;
	padding-top: 0.5vw;
}

#footer #text h3 {
	font: 0.35vw 'Arial';
	color: #9b7a62;
}

#strain {
	background: url('../images/strain.png') center center no-repeat;
	background-size: cover;
	width: 3.5vw;
	height: 1.35vw;
	position: absolute;
	bottom: 0.8vw;
	right: 1vw;
	animation: pulse 4s infinite;
	cursor: pointer;
}


@media screen and (max-width: 600px) {
	#video-bg #strain-video {
		width: auto !important;
		height: 110vh !important;
		top: 48% !important;
	}

	#logo-splash,
	#strain,
	#audio,
	#corners,
	#features,
	#discord-btn,
	#flags,
	.btn-more-features-big {
		display: none !important;
	}

	#content {
		width: 100% !important;
		min-height: 105vh !important;
		height: auto !important;
	}


	#logo {
		position: relative;
		width: 90vw;
		height: 60vw;
		margin: 0 auto;
		top: 40px
	}

	#timer-text table td {
		font-size: 1.2vw;
	}

	#timer div {
		padding: 0.7vw 0.3vw;
		font-size: 3vw;
	}


	#buttons {
		position: fixed;
		width: 80%;
		margin: auto;
		bottom: 100px;
		/* Adjust bottom margin as needed */
		left: 0;
		right: 0;
		text-align: center;
	}

	#buttons .playnow {
		width: 65vw;
		height: 14.6vw;
		line-height: 14.6vw;
		font-size: 5vw;
		margin-bottom: 2vw;
	}

	#buttons .forums {
		width: 55vw;
		height: 12.4vw;
		line-height: 12.4vw;
		font-size: 4vw;
		margin-bottom: 2vw;
	}

	.btn-more-features-mobile {
		background: url('../images/more-features.png') center center no-repeat;
		background-size: cover;
		width: 55vw;
		height: 12.4vw;
		line-height: 12.4vw;
		border: none;
		outline: none;
		text-shadow: 0 0 0.6vw rgba(0, 0, 0, 0.5);
		color: rgba(255, 255, 255, 1);
		font-size: 4vw;
		cursor: pointer;
		transition: 0.3s;
		font-family: Trajan Pro;
		font-weight: 600;
		margin: 0.4vw 0;
		display: initial !important;
	}

	#votes {
		width: 100%;
		margin: 1vw auto 0 auto;
		text-align: center;
	}

	.vote-btn {
		width: 40vw;
		height: 10.3vw;
		line-height: 13vw;
		font-size: 3.5vw;
		padding-left: 11vw;
	}

	.vote-btn img {
		width: 8vw;
		top: 50%;
		left: 1.5vw;
	}

	.vote-btn #vote-on {
		font-size: 1.5vw;
		top: -3vw;
		left: 11.5vw;
	}

	#footer {
		background: linear-gradient(0deg, rgba(15, 7, 5, 1) 0%, transparent 100%);
		height: 25vw;
	}


	#footer #text {
		height: 3vw;
		width: 90% !important;
		margin: 5vh auto 0 auto !important;
		padding: 0 auto;
		text-align: center;
	}

	#footer #text h2 {
		font: 9px 'Arial';
		color: #ffc74a;
		height: 9px;
	}

	#footer #text h3 {
		font: 7px 'Arial';
		color: #9b7a62;
	}

}




/* FACEBOOK POP UP */
#fanback {
	display: none;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}

#fan-exit {
	width: 100%;
	height: 100%;
}

#fanbox {
	background: white;
	width: 520px;
	height: 450px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 0.3vw;
}

#fanclose {
	float: right;
	cursor: pointer;
	background: url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
	height: 15px;
	padding: 20px;
	position: relative;
	padding-right: 40px;
	margin-top: -20px;
	margin-right: -22px;
}

#linkit a.visited,
#linkit a,
#linkit a:hover {
	color: #80808B;
	font-size: 10px;
	margin: 0 auto 5px auto;
	float: center;
}

@media (max-width: 600px) {
	.hide-on-mobile {
		display: none;
	}

	#fanback {
		display: none;
		background: none;
	}

	#fanbox {
		display: none;
	}

}