:root
{
	--apo-jukay-choco-brown-rgb : 88, 53, 51;
	--apo-jukay-orange-rgb : 226, 85, 45;
	--apo-jukay-gold-rgb : 227, 189, 52;
	--app-jukay-green-rgb : 0, 171, 120;
}

*
{
	box-sizing: border-box;
}

main
{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 90%;
}
nav ~ main
{
	margin-top: 56.18px;
	height: calc(100% - 56.18px - 72.53px);
}

main ~ section.apo-jukays-running-banner
{
	width: 100%;
	height: 10%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #111;
	color: rgb(var(--apo-jukay-orange-rgb));
}

main ~ section.apo-jukays-running-banner .banner-container
{
	position: relative;
	height: 3rem;
	width: 100%;
}

main ~ section.apo-jukays-running-banner .banner-container > .banner
{
	line-height: 3rem;
	font-size: 3vh;
	color: rgb(var(--apo-jukay-orange-rgb));
	position: absolute;
	top: 0;
	left: 100%;
	animation-name: runningWordsToLeft;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	white-space: nowrap;
}

.ajm-fs-1
{
	font-size: 3.25vh;
}

.ajm-fs-2
{
	font-size: 2.75vh;
}

.ajm-fs-3
{
	font-size: 2.25vh;
}

.ajm-fs-4
{
	font-size: 1.75vh;
}

.ajm-fs-5
{
	font-size: 1.25vh;
}

.apo-jukays-menu-container
{
	height: 100%;
	display: flex;
	flex-direction: column;
}

.apo-jukays-logo-container
{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}

.apo-jukays-logo-container > img
{
	width: auto;
	height: 300px;
}

.apo-jukays-menu-content-container
{
	position: relative;
	width: 100%;
	height: auto;
}

.apo-jukays-menu-background-video
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

.apo-jukays-menu-black-background
{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: auto;
	background-color: rgba(50, 50, 50, 1);
}

.apo-jukays-menu-main-border
{
	border: 5px solid rgba(var(--apo-jukay-gold-rgb),1);;
	border-radius: 10px;
}

.apo-jukay-menu-table
{
	background-color: rgba(0, 0, 0, 0);
}

.great-vibes-regular {
	font-family: "Great Vibes", cursive;
	font-weight: 400;
	font-style: normal;
}

.great-vibes-bold {
	font-family: "Great Vibes", cursive;
	font-weight: bold;
	font-style: normal;
}

.protest-riot-regular {
  font-family: "Protest Riot", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.protest-riot-bolder {
  font-family: "Protest Riot", sans-serif;
  font-weight: bolder;
  font-style: normal;
}


.apo-jukay-choco-brown-color
{
	color : rgba(var(--apo-jukay-choco-brown-rgb),1);
}

.apo-jukay-orange-color
{
	color : rgba(var(--apo-jukay-orange-rgb),1);
}

.apo-jukay-gold-color
{
	color : rgba(var(--apo-jukay-gold-rgb),1);
}

.apo-jukay-gold-bg-color
{
	background-color : rgba(var(--apo-jukay-gold-rgb),1);
}

.apo-jukay-green-color
{
	color : rgba(var(--app-jukay-green-rgb),1);
}

.apo-jukay-bg-logo
{
	background-image: url('/assets/images/ApoJukaysOLogov1.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.coming-soon-text-container
{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
}

.coming-soon-text
{
	font-size: 2rem;
	color : #fff;
	text-align: center;
}

@media (min-width: 992px)
{
	.apo-jukays-menu-container
	{
		display: flex;
		flex-direction: row;
		height: 100%;
	}

	.apo-jukays-logo-container
	{
		width: 20%;
		height: 100%;
	}

	.apo-jukays-logo-container > img
	{
		width: 100%;
		height: auto;
	}

	.apo-jukays-menu-background-video
	{
		transform: translateY(-30%);
	}

	.apo-jukays-menu-black-background
	{
		height: 100%;
	}

	.apo-jukays-menu-content-container
	{
		position: relative;
		width: 80%;
		height: 100%;
		overflow: hidden;
	}
}

@keyframes runningWordsToLeft
{
  	from {left: 100%;}
  	to {left: -200%}
}