/* CSS Document */
/* system font*/
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900');

@font-face {
	font-family: 'Attagiel';
	src: url('fonts/Attagiel.woff2') format('woff2'),
		url('fonts/Attagiel.woff') format('woff'),
		url('fonts/Attagiel.ttf') format('ttf'),
		url('fonts/Attagiel.otf') format('otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Soho Gothic Pro';
    src: url('fonts/SohoGothicPro-Regular.woff2') format('woff2'),
        url('fonts/SohoGothicPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Soho Gothic Pro';
    src: url('fonts/SohoGothicPro-Bold.woff2') format('woff2'),
        url('fonts/SohoGothicPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
	--gold: #d4ac57;
	--blue: #002E6E;
	--darkblue: #001125;
	--nightblue: #001633;
	--teal: #0f3c46;
	--masthead_blur: #04344b;
	--footer_blur: #10375e;
}

/* To fix AOS's `fade-left` causing extra blank space on mobile */
/* This breaks lightbox2 option to prevent scrolling */
/* * {
	overflow-x: clip;
} */

/* initial setting*/
html body {
	max-width: 100vw;
	/* font-family: 'Titillium Web', sans-serif; */
	font-family: 'Soho Gothic Pro', sans-serif;
	font-weight: normal;
	overflow-x: hidden;

	background-color: var(--nightblue);
}

html.lb-disable-scrolling,
body.lb-disable-scrolling {
	/* position: fixed !important; */
	overflow: hidden !important;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
}

/* To un-fix the CSS fix for AOS */
.overflow-x-visible {
	overflow-x: visible !important;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

.overflow-y-visible {
	overflow-y: visible;
}

.overflow-y-hidden {
	overflow-y: hidden;
}

.parallax-parent {
	height: 100vh;
	overflow: hidden;
}

.parallax-child {
	height: 100%;
	position: relative;
	top: 0;
}

p {
	font-size: 15px;
	line-height: 1.6;
}

.para-text-shadow p {
	text-shadow: 4px 4px 4px rgba(0,0,0,.8);
}

.text-gold {
	color: var(--gold);
}

b,
strong,
.text-bold {
	font-weight: 700;
}

a,
a:hover {
	color: var(--gold);
	text-decoration: underline;
}

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

.btn {
	border-radius: 4rem;
	border: 2px solid;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 2px;
	padding: 9px 24px;
	text-decoration: none
}

.btn-primary {
	color: var(--gold);
	background-color: transparent;
	border-color: var(--gold);
}

.btn-primary:hover {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--gold);
	text-decoration: none
}

.btn-primary.alt:hover {
	color: var(--blue);
	background-color: #fff;
	border-color: #fff;
	text-decoration: none
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--gold);
}

.btn-primary:focus,
.btn-primary.focus {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--gold);
}

.btn-secondary {
	color: #ffffff;
	background-color: transparent;
	border-color: #ffffff;
}

.btn-secondary:hover {
	color: #FFF;
	background-color: var(--gold);
	border-color: var(--gold);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--gold);
}

.btn-secondary:focus,
.btn-secondary.focus {
	color: #fff;
	background-color: #001380;
	border-color: var(--gold);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-secondary:focus,
.btn-secondary.focus {
	box-shadow: none !important;
}

.btn-image {
	width: auto;
	height: 43px;
	cursor: pointer;
}
@media (max-width: 576px) {
	.btn-image {
		height: 35px;
	}
}

.btn-close-x {
	margin-top: -1rem;
	padding-bottom: 1rem;
    font-size: 2rem;
	color: var(--gold);
	cursor: pointer;
}

p,
button {
	position: relative;
}

img {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-ms-transform: translateZ(0);
	/* IE 9 */
	-webkit-transform: translateZ(0);
	/* Chrome, Safari, Opera */
}

.show_if_narrow {
	display: none;
}

.hide_if_narrow {
	display: block;
}

.z-index-3 {
	position: relative;
	z-index: 3;
}

.z-index-5 {
	position: relative;
	z-index: 5;
}

.z-index-10 {
	position: relative;
	z-index: 10;
}

.z-index-20 {
	position: relative;
	z-index: 20;
}

.text-shadow {
	text-shadow: 5px 5px 8px rgba(0, 0, 0, 1);
}

.err_msg_box {
	font-size: 14px;
}

/*			w <= 409	*/
@media only screen and (max-width: 409px) {
	p {
		font-size: 15px;
	}

	.show_if_narrow {
		display: block;
	}

	.hide_if_narrow {
		display: none;
	}
}

/*	400 <=	w <= 499	*/
@media only screen and (min-width: 400px) and (max-width: 499px) {
	p {
		font-size: 15px;
	}

	.show_if_narrow {
		display: block;
	}

	.hide_if_narrow {
		display: none;
	}
}

/*	1200 <= w 	*/
/* @media only screen and (min-width: 1200px) {
	body, p {
		font-size: 1.1rem;
		line-height: 2rem;
	}
} */

@media only screen and (max-width: 1200px) {
	.hide_if_narrow {
		display: none;
	}
}

.h-auto {
	height: auto !important;
}




/* BORDERS ======================================================================== */

.border-bottom-black {
	border-bottom: 1px solid #000;
}

.border-bottom-darkblue {
	border-bottom: 1px solid var(--darkblue);
}

.border-bottom-teal {
	border-bottom: 1px solid var(--teal);
}

.border-bottom-masthead_blur {
	border-bottom: 1px solid var(--masthead_blur);
}




/* MODALS ======================================================================== */

.modal-open {
	padding-right: 0 !important;
}

.modal-open .modal {
	overflow-y: hidden;
}

.modal-content {
	border: 0 !important;
}
#main_video .modal-content {
	background-color: rgb(255, 255, 255, 0);
}
.modal-dialog-scrollable .modal-content {
	overflow: visible;
}
/* @media (max-width: 576px) {
	/* I forgot why I want this to be hidden * /
	.modal-dialog-scrollable .modal-content {
		overflow: hidden; /* Default bootstrap behavior * /
	}
} */


.modal-trigger {
	cursor: pointer;
}

#vote_modal {
	overflow-y: auto !important;
}

@media (max-width: 450px) and (orientation: portrait) {
	#vote_modal .modal-dialog-centered {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
}

@media (max-height: 640px) and (orientation: landscape) {
	#vote_modal .modal-dialog-centered {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
}

#vote_modal .modal-content {
	overflow: visible;
}

/* #picture_modal {
	max-height: 90vh;
    margin-top: 5vh;
} */

#picture_modal .modal-dialog {
  max-width: 95vw;
  max-height: 90vh;
}

#picture_modal .modal-content {
  height: auto;
  max-height: 90vh;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
}

/* Allow the body area to scroll if needed */
#picture_modal .modal-body {
  overflow-y: auto;
  max-height: calc(90vh - 2rem);
}

/* Make image fit nicely within modal */
#picture_modal_img {
	max-width: 100%;
	max-height: 65vh;
	width: auto;
	height: auto;
	object-fit: contain;
}
@media (max-height: 620px) {
	#picture_modal_img {
		max-height: 55vh;
	}
}

.border-gold {
	/* border: 2px solid var(--gold); */ /* they don't want gold borders */

	border: 10px solid transparent;
	padding: 15px;
	border-image: url(../images/frame/frame-border.png) 50 stretch;
}




/* SPACERS ======================================================================== */

/* Between sections */
.spacer-section {
	width: 100%;
	height: 80px;
}

/* After title */
.spacer-title {
	width: 100%;
	height: 40px;
}




/* BACKGROUNDS ======================================================================== */

.fade-from-darkblue,
.fade-from-nightblue,
.fade-from-teal,
.fade-from-masthead_blur,
.fade-from-footer_blur,
.fade-to-darkblue,
.fade-to-nightblue,
.fade-to-teal,
.fade-to-masthead_blur,
.fade-to-footer_blur {
	position: relative;
  	overflow: hidden; /* ensures ::after stays inside */
}

.fade-from-darkblue::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, 
											var(--darkblue) 100%);
}

.fade-from-nightblue::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, 
											var(--nightblue) 100%);
}

.fade-from-teal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, 
											var(--teal) 100%);
}

.fade-from-masthead_blur::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 30%, 
											var(--masthead_blur) 85%);
}

.fade-from-footer_blur::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, 
											var(--footer_blur) 100%);
}

.fade-to-darkblue::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, 
											var(--darkblue) 100%);
}

.fade-to-nightblue::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, 
											var(--nightblue) 100%);
}

.fade-to-teal::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, 
											var(--teal) 100%);
}

.fade-to-masthead_blur::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, 
											var(--masthead_blur) 85%);
}

.fade-to-footer_blur::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px; /* fade height */
	pointer-events: none; /* don’t block clicks */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, 
											var(--footer_blur) 100%);
}




/* FLOATERS ======================================================================== */

.floater {
	position: absolute;
}

/* **** */
.floater.corner-tl {
	top: -10px;
	left: -10px;
	z-index: 10;
}
.floater.corner-tr {
	top: -10px;
	right: -10px;
	z-index: 10;
}
.floater.corner-bl {
	bottom: -20px;
	left: -20px;
	z-index: 10;
}
.floater.corner-br {
	bottom: -20px;
	right: -20px;
	z-index: 10;
}
.floater.corner-tl img,
.floater.corner-tr img {
	width: 40px;
	height: 40px;
}
.floater.corner-bl img,
.floater.corner-br img {
	width: 50px;
	height: 50px;
}

/* **** */
.floater.splatter-left {
    top: 1020px;
    left: 0;
    z-index: 20;
}
@media (max-width: 2000px) {
	.floater.splatter-left {
	    /* left: calc(100% / 5);
	    top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.splatter-left {
	    /* left: calc(100% / 7);
	    top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.splatter-left {
	    display: none;
	    /* left: calc(100% / 10);
	    top: 0; */
	}
}
@media (max-width: 576px) {
	.floater.splatter-left {
	    /* left: calc(100% / 22);
	    top: 0; */
	}
}
.floater.splatter-left img {
	max-width: 400px;
}

/* **** */
.floater.splatter-right {
    top: 1220px;
    right: 0;
    z-index: 20;
}
@media (max-width: 2000px) {
	.floater.splatter-right {
	    /* right: calc(100% / 5);
	    top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.splatter-right {
	    /* right: calc(100% / 7);
	    top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.splatter-right {
	    display: none;
	    /* right: calc(100% / 10);
	    top: 0; */
	}
}
@media (max-width: 576px) {
	.floater.splatter-right {
	    /* right: calc(100% / 22);
	    top: 0; */
	}
}
.floater.splatter-right img {
	max-width: 400px;
}

/* **** */
.floater.star-shooting-to-left {
    right: calc(100% / 4);
    top: 100px;
}
@media (max-width: 2000px) {
	.floater.star-shooting-to-left {
	    right: calc(100% / 5);
	    top: 100px;
	}
}
@media (max-width: 1500px) {
	.floater.star-shooting-to-left {
	    right: calc(100% / 10);
	    top: 100px;
	}
}
@media (max-width: 991px) {
	.floater.star-shooting-to-left {
	    right: calc(100% / 30);
	    top: 100px;
	}
}
@media (max-width: 576px) {
	.floater.star-shooting-to-left {
	    display: none;
	}
}
.floater.star-shooting-to-left img {
	max-width: 100px;
}

/* **** */
.floater.star-weird {
    left: calc(100% / 4);
    top: 70px;
}
@media (max-width: 2000px) {
	.floater.star-weird {
	    left: calc(100% / 5);
	    top: 70px;
	}
}
@media (max-width: 1500px) {
	.floater.star-weird {
	    left: calc(100% / 10);
	    top: 70px;
	}
}
@media (max-width: 991px) {
	.floater.star-weird {
	    left: calc(100% / 30);
	    top: 70px;
	}
}
@media (max-width: 576px) {
	.floater.star-weird {
	    display: none;
	}
}
.floater.star-weird img {
	max-width: 50px;
}

/* **** */
.floater.star-splatter {
	right: calc(100% / 3.5);
    top: 450px;
}
@media (max-width: 2000px) {
	.floater.star-splatter {
	    right: calc(100% / 5);
	    top: 450px;
	}
}
@media (max-width: 1500px) {
	.floater.star-splatter {
	    right: calc(100% / 7);
	    top: 400px;
	}
}
@media (max-width: 991px) {
	.floater.star-splatter {
	    right: calc(100% / 10);
	    top: 330px;
	}
}
@media (max-width: 576px) {
	.floater.star-splatter {
	    /* display: none; */
	    right: calc(100% / 22);
	    top: 300px;
	}
}
.floater.star-splatter img {
	max-width: 30px;
}

/* **** */
.floater.star-splatter2 {
	left: calc(100% / 3.5);
    top: 0;
}
@media (max-width: 2000px) {
	.floater.star-splatter2 {
	    left: calc(100% / 5);
	    top: 0;
	}
}
@media (max-width: 1500px) {
	.floater.star-splatter2 {
	    left: calc(100% / 7);
	    top: 0;
	}
}
@media (max-width: 991px) {
	.floater.star-splatter2 {
	    left: calc(100% / 10);
	    top: 0;
	}
}
@media (max-width: 576px) {
	.floater.star-splatter2 {
	    display: none;
	    /* left: calc(100% / 22);
	    top: 0; */
	}
}
.floater.star-splatter2 img {
	max-width: 40px;
}

/* **** */
.floater.star-weird2 {
    left: calc(100% / 4);
    top: 60px;
}
@media (max-width: 2000px) {
	.floater.star-weird2 {
	    left: calc(100% / 5);
	    /* top: 60px; */
	}
}
@media (max-width: 1500px) {
	.floater.star-weird2 {
	    left: calc(100% / 10);
	    /* top: 60px; */
	}
}
@media (max-width: 991px) {
	.floater.star-weird2 {
	    left: calc(100% / 30);
	    /* top: 60px; */
	}
}
@media (max-width: 576px) {
	.floater.star-weird2 {
	    /* display: none; */
	}
}
.floater.star-weird2 img {
	max-width: 50px;
}

/* **** */
.floater.star-splatter3 {
	right: calc(100% / 3.5);
	top: 40px;
}
@media (max-width: 2000px) {
	.floater.star-splatter3 {
	    right: calc(100% / 5);
	    /* top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.star-splatter3 {
	    right: calc(100% / 7);
	    /* top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.star-splatter3 {
	    right: calc(100% / 10);
	    /* top: 0; */
	}
}
@media (max-width: 576px) {
	.floater.star-splatter3 {
	    /* display: none; */
	    right: calc(100% / 22);
	    /* top: 0; */
	}
}
.floater.star-splatter3 img {
	max-width: 30px;
}

/* **** */
.floater.star-shooting-to-right {
    left: -100px;
    top: 100px;
}
@media (max-width: 2000px) {
	.floater.star-shooting-to-right {
	    /* left: -100px;
	    top: 100px; */
	}
}
@media (max-width: 1500px) {
	.floater.star-shooting-to-right {
	    /* left: -100px;
	    top: 100px; */
	}
}
@media (max-width: 991px) {
	.floater.star-shooting-to-right {
		/* display: none; */
		left: -30px;
	    top: 20px;
	}
}
@media (max-width: 576px) {
	.floater.star-shooting-to-right {
	    display: none;
	}
}
.floater.star-shooting-to-right img {
	max-width: 100px;
}

/* **** */
.floater.moon {
	right: -100px;
    top: 400px;
}
@media (max-width: 2000px) {
	.floater.moon {
	    /*     right: -100px; */
	    /* top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.moon {
		right: -100px;
	    /* top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.moon {
	    /* right: -100px; */
	    top: 250px;
	}
}
@media (max-width: 576px) {
	.floater.moon {
	    display: none;
		/* right: -100px; */
	    /* top: 110px; */
	}
}
.floater.moon img {
	max-width: 100px;
}

/* **** */
.floater.star-explosion {
	left: calc(100% / 16 * 15);
	top: 0;
}
@media (max-width: 2000px) {
	.floater.star-explosion {
	    /* right: calc(100% / 5); */
	    /* top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.star-explosion {
		left: calc(100% / 16 * 15);
	    /* top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.star-explosion {
		display: none;
	    /* right: calc(100% / 10); */
	    /* top: 110px; */
	}
}
@media (max-width: 576px) {
	.floater.star-explosion {
	    display: none;
		/* left: calc(100% / 16 * 13); */
	    /* top: 110px; */
	}
}
.floater.star-explosion img {
	max-width: 100px;
}

/* **** */
.floater.splatter-left-vote {
    top: 0;
    left: 0;
    z-index: 20;
}
@media (max-width: 2000px) {
	.floater.splatter-left-vote {
	    /* left: calc(100% / 5);
	    top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.splatter-left-vote {
	    display: none;
	    /* left: calc(100% / 7);
	    top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.splatter-left-vote {
	    /* left: calc(100% / 10);
	    top: 0; */
	}
}
@media (max-width: 576px) {
	.floater.splatter-left-vote {
	    /* left: calc(100% / 22);
	    top: 0; */
	}
}
.floater.splatter-left-vote img {
	max-width: 400px;
}

/* **** */
.floater.splatter-right-vote {
    top: 400px;
    right: 0;
    z-index: 20;
}
@media (max-width: 2000px) {
	.floater.splatter-right-vote {
	    /* right: calc(100% / 5);
	    top: 0; */
	}
}
@media (max-width: 1500px) {
	.floater.splatter-right-vote {
	    /* right: calc(100% / 7);
	    top: 0; */
	}
}
@media (max-width: 991px) {
	.floater.splatter-right-vote {
	    display: none;
	    /* right: calc(100% / 10);
	    top: 0; */
	}
}
@media (max-width: 576px) {
	.floater.splatter-right-vote {
	    /* right: calc(100% / 22);
	    top: 0; */
	}
}
.floater.splatter-right-vote img {
	max-width: 400px;
}




/* SECTION TITLES ======================================================================== */

.section_title {}
@media (max-width: 576px) {
	.section_title {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
}

.section_title > img,
.title_img {
    width: 100%;
    max-width: 800px;
    height: auto;
    max-height: 80px;
}




/* SECTION 1 - Cover video  ================================================== */

#section_1 {}

#masthead-bg {
	background-image: url('../images/bg/masthead-bg-w3000_7.jpg');
	background-position: center bottom;
	background-size: cover;
}
@media screen and (max-width: 1199px) {
	#masthead-bg {
		background-image: url('../images/bg/masthead-bg-w2000_7.jpg');
	}
}
@media screen and (max-width: 991px) {
	#masthead-bg {
		background-image: url('../images/bg/masthead-bg-w1000_3.jpg');
		background-position: center bottom;
		background-size: cover;
	}
}
@media screen and (max-width: 767px) {
	#masthead-bg {}
}
@media screen and (max-width: 576px) {
	#masthead-bg {}
}

#masthead-frame {
	max-width: 830px;
}
@media screen and (max-width: 1199px) {
	#masthead-frame {}
}
@media screen and (max-width: 991px) {
	#masthead-frame {
		max-width: 100%;
	}
}
@media screen and (max-width: 767px) {
	#masthead-frame {}
}
@media screen and (max-width: 576px) {
	#masthead-frame {}
}

#masthead-frame-top {
}
@media screen and (max-width: 1199px) {
	#masthead-frame-top {}
}
@media screen and (max-width: 991px) {
	#masthead-frame-top {}
}
@media screen and (max-width: 767px) {
	#masthead-frame-top {}
}
@media screen and (max-width: 576px) {
	#masthead-frame-top {}
}

#masthead-frame-medium {
	background-image: url('../images/masthead/masthead-frame-w1320-medium.png');
	background-position: center center;
	background-size: 100% 100%;
}
@media screen and (max-width: 1199px) {
	#masthead-frame-medium {}
}
@media screen and (max-width: 991px) {
	#masthead-frame-medium {}
}
@media screen and (max-width: 767px) {
	#masthead-frame-medium {}
}
@media screen and (max-width: 576px) {
	#masthead-frame-medium {}
}

#masthead-frame-bottom {}
@media screen and (max-width: 1199px) {
	#masthead-frame-bottom {}
}
@media screen and (max-width: 991px) {
	#masthead-frame-bottom {
		padding-bottom: 9rem !important;
	}
}
@media screen and (max-width: 767px) {
	#masthead-frame-bottom {
		padding-bottom: 9rem !important;
	}
}
@media screen and (max-width: 576px) {
	#masthead-frame-bottom {
		padding-bottom: 9rem !important;
	}
}

#section_1_text {}
@media screen and (max-width: 1199px) {
	#section_1_text {}
}
@media screen and (max-width: 991px) {
	#section_1_text {}
}
@media screen and (max-width: 767px) {
	#section_1_text {}
}
@media screen and (max-width: 576px) {
	#section_1_text {}
}
/* Geneco Alex Screen */
@media (min-width: 1200px) and (max-width: 1300px) and (min-height: 500px) and (max-height: 599px) {
	#section_1_text {}
}

#section_1_text p {
	font-size: 15px;
	line-height: 1.7;
	color: #f1f1f1;
	text-shadow: 5px 5px 8px rgba(0, 0, 0, .5);
}
@media screen and (max-width: 1199px) {
	#section_1_text p {}
}
@media screen and (max-width: 991px) {
	#section_1_text p {
		font-size: 15px;
		line-height: 1.6;
	}
}
@media screen and (max-width: 767px) {
	#section_1_text p {}
}
@media screen and (max-width: 576px) {
	#section_1_text p {}
}
/* Geneco Alex Screen */
@media (min-width: 1200px) and (max-width: 1300px) and (min-height: 500px) and (max-height: 599px) {
	#section_1_text p {}
}

/* darken the video when on mobile */
.dark_bg_overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 130%;
	z-index: -5;
	background-color: rgba(0, 0, 0, 0.2);
}

.bg-body {
  	position: relative; /* needed for the pseudo-element */
	background-color: var(--darkblue);
	background-image: url("../images/bg/bg-body_11-w2589.jpg");
	background-size: 100% auto;
	background-position: center top;
	background-repeat: repeat-y;
}
/* @media screen and (max-width: 3000px) {
	.bg-body {
		background-image: url("../images/bg/bg-body_6-w3000.jpg");
	}
} */
@media screen and (max-width: 2000px) {
	.bg-body {
		background-image: url("../images/bg/bg-body_11-w2000.jpg");
	}
}
@media screen and (max-width: 991px) {
	.bg-body {
		background-image: url("../images/bg/bg-body_11-w1000.jpg");
	}
}
@media screen and (max-width: 991px) {
	.bg-body {
		margin-top: -9rem;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 100px);
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-image: linear-gradient(to bottom, transparent 0, black 100px);
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}
}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 576px) {
	.bg-body {
		background-image: url("../images/bg/bg-body_11-w0600.jpg");
	}
}




/* SECTION - VIDEO ======================================================================== */

#section_video {
	/* background-image: url("../images/video-section-bg.jpg?v=1111");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat; */
}

#nlsVidContainer {
    display: flex;
    justify-content: center; /* Center the video */
    align-items: center; /* Center vertically */
    padding: 0;
	position: relative;
	/* aspect-ratio: 0.66365591 / 1; */
	max-width: 550px;
	margin: 0 auto;
}

.nlsVidBorder {
	background-image: url('../images/frame3.png');
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 0.66365591 / 1;
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.vid-image {
	/* padding: 22.75% 20.955% 0 21.15%;
	aspect-ratio: 0.66365591 / 1; */
	/* position: absolute;
	top: 0;
	left: 0; */
	width: 100%;
	box-sizing: border-box;
	z-index: 1;
}

#infinity_video {
	width: 100%;
	/* aspect-ratio: 9 / 16; */
}

.embed-responsive-item {
	width: 100%;
	/* aspect-ratio: 9 / 16; */
	margin: 0 auto;
}

.bdr_mask {
	padding: 20px;
	border-radius: 42px;
}

/* SECTION - Intro ======================================================================== */

#section_intro {}

#partnership-logos {
	/* max-width: 900px;
	height: auto; */
}

#partnership-logos a {}

#partnership-logos img {
	width: auto;
	height: 100px;
	border: 0;
}
@media (max-width: 1300px) {
	/* #partnership-logos img {
		height: 80px;
	} */
}
@media (max-width: 1199px) {
	/* #partnership-logos img {
		height: 80px;
	} */
}
@media (max-width: 991px) {
	#partnership-logos img {
		height: 80px;
	}
}
@media (max-width: 767px) {
	#partnership-logos img {
		height: 70px;
	}
}
@media (max-width: 576px) {
	#partnership-logos img {
		height: 55px;
	}
}
@media (max-width: 450px) {
	#partnership-logos img {
		height: 40px;
	}
}

/* SECTION - Vote ======================================================================== */

#section_vote {
	/* background-color: #682A36;
	background-image: url("../images/red-terrain-bg-3.jpg?v=1434234");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center; */
}
@media (max-width: 576px) {
	#section_vote {
		/* background-image: url("../images/red-terrain-bg-2-mobile.jpg?v=333"); */
	}
}

.voteSection_label,
.voteSection_label * {
	cursor: pointer;
}

.voteSection_label {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 10px;
    position: relative;
	z-index: 99;
}

.voteSection_img_container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
/* @media (max-width: 576px) {
	.voteSection_img_container {
		height: 160px;
	}
}
@media (max-width: 450px) {
	.voteSection_img_container {
		height: 130px;
	}
} */

.artwork-border {
	background-image: url("../images/gallery/frame.png");
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2px;
}

.voteSection_img {
	width: 78.75%;
}

.voteSection_input_container {
	height: 60px;
}

@media (max-width: 576px) {
	.voteSection_input_container {
		height: 70px;
	}
}

.voteSection_btn_container {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
}

.voteSection_btn_img {
	width: 32px;
	min-width: 32px;
	height: 24px;
	/* margin-top: 4px; */
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	padding-top: 6px;
	padding-right: 8px;
}

.voteSection_btn_txt {
	cursor: pointer;
	/* flex: 1; */
	text-align: left;
	/* font-family: "Attagiel", serif;
	font-size: 38px; */
	overflow-x: visible !important;
}

.is-portrait.is-mobile .voteSection_btn_img {
	margin-top: 2px;
}

/* @media (max-width: 576px) {
	.voteSection_btn_img {
		margin-top: 12px;
	}
} */
.voteSection_btn_img.is_unchecked {
	background-image: url("../images/checkbox-border.png");
}
.voteSection_btn_img.is_checked {
	background-image: url("../images/checkbox-checked.png");
}

.bg-body_9 {
	background-color: transparent !important;
	background-image: url('../images/bg/bg-body_11-w0600.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

input[type=text],
input[type=email] {
	border-radius: 2rem;
}

#voteSection_form .form-group {
	width: 66%;
}

@media (max-width: 576px) {
	#voteSection_form .form-group {
		width: 80%;
	}
}

/** BIGGER THAN GENECO **/




/* This one works! */

*::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}




/* SECTION D - Counter ======================================================================== */




/* SECTION D - Counter - flip =========================================== */

#counter-container {
	display: block;
	padding-bottom: 40px;
}

@media (max-width: 576px) {
	#counter-container {
		max-width: 100%;
	}
}

.tick,
.tick * {
	font-family: 'Oswald', sans-serif !important;
	font-size: 120px !important;
	font-weight: 700 !important;
}

#flip-container {
	padding-top: 10px;
	padding-bottom: 10px;
}

.tick-flip {
	box-shadow: inset 0 0 6px #000;
	margin: 0 16px;

	overflow-x: visible !important;
	/* To un-fix the CSS fix for AOS */
}

.tick-flip:before {
	content: '';
	position: absolute;
	/* specify the value of border width here */
	top: -5px;
	right: -5px;
	bottom: -7px;
	left: -5px;
	/* --- */
	background-color: transparent;
	background-image: url("../images/counter-numbers/counter-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* background: url(../images/flip_border.png) no-repeat; */
	/* background-size: cover; */
	/* border-radius: 20px; */

	box-sizing: border-box;
	z-index: -1;
}

.tick-flip-panel {
	color: #111f7c !important;
	/* background-color: #f8f8f8 !important;
	box-shadow: inset 0 0 20px #000; */
	background-color: transparent !important;
	background-image: url("../images/counter-numbers/counter-bg.png") !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*  		w <= 409    */
@media only screen and (max-width: 409px) {

	.tick,
	.tick * {
		font-size: 11vw !important;
	}

	.tick-flip:before {
		/* specify the value of border width here */
		top: -4px;
		right: -3px;
		bottom: -3px;
		left: -3px;
		/* --- */

		/* background: radial-gradient(circle at 100% 100%, transparent 0, transparent 9px, transparent 9px) 0% 0%/10px 10px no-repeat,
			radial-gradient(circle at 0 100%, transparent 0, transparent 9px, transparent 9px) 100% 0%/10px 10px no-repeat,
			radial-gradient(circle at 100% 0, transparent 0, transparent 9px, transparent 9px) 0% 100%/10px 10px no-repeat,
			radial-gradient(circle at 0 0, transparent 0, transparent 9px, transparent 9px) 100% 100%/10px 10px no-repeat,
			linear-gradient(transparent, transparent) 50% 50%/calc(100% - 2px) calc(100% - 20px) no-repeat,
			linear-gradient(transparent, transparent) 50% 50%/calc(100% - 20px) calc(100% - 2px) no-repeat,
			linear-gradient(140deg, #d6b47a 0%, #f8fac3 25%, #b7863e 50%, #f0eeb5 75%, #d6b47a 100%); */
		border-radius: 5px;
	}

	.tick-flip {
		margin: 0 10px;
	}

	.tick-flip-panel {
		box-shadow: inset 0 0 6px #000;
	}

	.tick-flip-panel-front {
		height: 60% !important;
	}
}

@media only screen and (min-width: 410px) and (max-width: 575px) {

	.tick,
	.tick * {
		font-size: 14vw !important;
	}

	.tick-flip {
		margin: 0 6px;
	}

}

@media only screen and (min-width: 576px) and (max-width: 991px) {

	.tick,
	.tick * {
		font-size: 11vw !important;
	}

}

/*	400	 <= w <= 499    */
@media only screen and (min-width: 400px) and (max-width: 499px) {

	.tick-flip:before {
		/* specify the value of border width here */
		top: -3px;
		right: -3px;
		bottom: -4px;
		left: -3px;
		/* --- */

		border-radius: 5px;
	}

	.tick-flip-card {
		box-shadow: inset 0 0 3px #000;
	}

	.tick-flip-panel {
		box-shadow: inset 0 0 12px #000;
	}

	.tick-flip-panel-front {
		height: 60% !important;
	}
}

/*  768	 <= w <= 1279	*/
@media only screen and (min-width: 768px) and (max-width: 1279px) {}

/*  1280 <= w <= 1439   */
@media only screen and (min-width: 1280px) and (max-width: 1439px) {}

/*  1280 <= w <= 1439
	1024 <= h           */
@media only screen and (min-width: 1280px) and (max-width: 1439px) and (min-height: 1024px) {}

/*  1440 <= w   */
@media only screen and (min-width: 1440px) {}




/* SECTION NEW COUNTER ================================================== */

#sectCounter {}

:root {
	--tick-gap: 0px;
}

#tick-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--tick-gap);
}

.tick-col-container {
	max-width: 160px;
	background-image: url("../images/counter-numbers/counter-bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 100 / 183;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* @media (max-width: 576px) {
	.tick-col-container {
		max-width: 60px;
	}
} */

.digits-4 .tick-col-container { width: calc(100% / 4 - var(--tick-gap)); }
.digits-5 .tick-col-container { width: calc(100% / 5 - var(--tick-gap)); }
.digits-6 .tick-col-container { width: calc(100% / 6 - var(--tick-gap)); }
.digits-7 .tick-col-container { width: calc(100% / 7 - var(--tick-gap)); } 
.digits-8 .tick-col-container { width: calc(100% / 8 - var(--tick-gap)); }
.digits-9 .tick-col-container { width: calc(100% / 9 - var(--tick-gap)); }
.digits-10 .tick-col-container { width: calc(100% / 10 - var(--tick-gap)); }

.tick-col {
	width: 110% !important;
	max-height: 90%;
    /* margin-top: -40px; */
}
/* @media (max-width: 576px) {
	.tick-col {
    	margin-top: -20px;
	}
} */




/* Slick carousel ============================================= */

/* container of img.slick-prev and img.slick-next */
.slick-arrow {}

.slick-prev,
.slick-next {
	height: auto;
	top: 40%;
	left: inherit;
}
.slick-prev {
	left: inherit;
}
.slick-next {
    right: initial;
}

.slick_container {
}

.slick-track {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
	.slick-track {
		display: block !important;
	}
}

.slick_item {
	padding: 20px;
}
#section_explore .slick_item {
	padding: 0 40px;
}

.slick-dots li button:before {
	color: white;
	font-size: 10px;
}

.slick-dots li.slick-active button:before {
	color: white;
}

/* SECTION - Explore Other Artworks  ================================================== */

#section_explore {}

.slick_item_explore {
	display: flex !important;
	align-items: center;
}
/* @media (max-width: 1200px) {
	.slick_item_explore {
		padding: 0 18px;
	}
}
@media (max-width: 991px) {
	.slick_item_explore {
		padding: 0 25px;
	}
}
@media (max-width: 765px) {
	.slick_item_explore {
		padding: 0 25px;
	}
}
@media (max-width: 576px) {
	.slick_item_explore {
		padding: 0 25px;
	}
} */

/* .slick_item_explore a,
.slick_item_explore img {
	max-width: 80%;
	margin: 0 auto;
}

#slick_container_explore {
	max-height: 640px;
}
@media (max-width: 765px){
#slick_container_explore {
	max-height: 600px;
}
}
@media (max-width: 576px) {
#slick_container_explore {
	max-height: 550px;
}
}

.explore_link {
	color: #FFF;
	text-decoration: none !important;
} */

#section_explore .slick-dots {
	position: relative;
}

@media (max-width: 768px) {
	#section_explore .slick-dots li {
		display: none;
	}
	#section_explore .slick-dots li.slick-active, /* current */
	#section_explore .slick-dots li.slick-active + li, /* next */
	#section_explore .slick-dots li.slick-active + li + li,
	#section_explore .slick-dots li:has(+ li.slick-active) /* previous */ {
		display: inline-block;
	}
}

/* SECTION - Stories  ================================================== */

#section_stories {
	/* background-color: #124521;
	background-image: url("../images/green-terrain-bg2.jpg?v=473537");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center; */
}

.slick_item_story {
	/* position: relative; */
	/* aspect-ratio: 0.79347862 / 1; */
	/* aspect-ratio: 0.625 / 1; */
	/* padding: 0 25px; */
	/* width: 380px; */
	display: flex !important;
	align-items: center;
}

@media (max-width: 1200px) {
	.slick_item_story {
		/* aspect-ratio: 0.55 / 1; */
		padding: 0 18px;
	}
}

@media (max-width: 991px) {
	.slick_item_story {
		/* aspect-ratio: 0.615 / 1; */
		padding: 0 25px;
	}
}

@media (max-width: 765px) {
	.slick_item_story {
		/* aspect-ratio: 0.615 / 1; */
		padding: 0 25px;
	}
}

@media (max-width: 576px) {
	.slick_item_story {
		aspect-ratio: 0.685 / 1;
		padding: 0 25px;
	}
}

.stories_bdr {
	position: absolute;
	background-image: url(../images/stories_border.png?v=2);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
}

.slick_item_story a,
.slick_item_story img {
	max-width: 100%;
}

.slick_item_story a {}

.stories_img {
	width: 100%;
	padding: 59px 30px 0px;
	z-index: 1;
}

.stories_img2 {
	width: 100%;
	height: auto;
}

@media (max-width: 1200px) {
	.stories_img {
		padding: 49px 28px 0px;
	}
}
@media (max-width: 991px) {
	.stories_img {
	padding: 56px 28px 10px;
	}
}
@media  (max-width: 576px) {
	.stories_img {
	padding: 83px 55px 0px 51px;
	}
}
@media  (max-width: 484px) {
	.stories_img {
	/* padding: 26% 15% 0px; */
	padding: 26.75% 15.45% 0px 15.25%;
	}
}

.stories_name {
	/* margin: 0 auto;
	padding: 4px 20px 8px;
	background-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #ffd95c 35%, #ffde7b 40%, #f9dd8a 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%);
	background-repeat: repeat-y;
	background-size: 100%;
	border-radius: 5px; */

	padding: 10px 0 12px;
	background-image: url('../images/btn-blank2.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	color: #FFF;
	line-height: 1.1;
	font-size: 0.9em;
	text-shadow: 0 0 3px rgba(0,0,0,0.15);
}
/* @media (max-width: 991px) {
	.stories_name {
		margin-top: 2.75rem;
	}
} */
@media  (max-width: 576px) {
	.stories_name {
		background-image: url('../images/btn-blank1.png');
	}
}
/* @media  (max-width: 400px) {
	.stories_name {
		margin-top: 3.75rem;
	}
} */

.stories_name .title {
	font-size: 0.75em;
	font-weight: 400;
}

.story_link {
	color: #FFF;
	text-decoration: none !important;
}




/* SECTION B - Popout & Recycle ================================================== */

.btn-primary.DDDDDDISABLE,
.btn-primary.DDDDDDISABLE:hover {
	color: #A2954F !important;
	background-color: transparent !important;
	border-color: #A2954F !important;
	cursor: default !important;
}

.goldgold_bn_container.DDDDDDISABLE,
.goldgold_bn_container.DDDDDDISABLE:hover .goldgold_bn_container:hover.DDDDDDISABLE,
.goldgold_bn_container:hover.DDDDDDISABLE:hover {
	background-image: url("../images/btn-loc-xl-out.png");
	cursor: default !important;
}

.secondContest-a .DDDDDDISABLE,
.secondContest-a .DDDDDDISABLE:hover {
	color: #fff !important;
	cursor: default !important;
}

.red-packet-design-container {
	width: 100%;
	padding: 105px 0 181px;
}


@media only screen and (max-width: 499px) {
	.section_3_popout {
		bottom: 100px;
	}
}


@media only screen and (min-width: 500px) and (max-width: 767px) and (min-width: 1200px) {
	.section_3_popout {
		bottom: 220px;
	}
}


/*			w <= 409 */
@media only screen and (max-width: 409px) {

	#section3_bn_1,
	#section3_bn_2 {
		font-size: 12px;
	}

	.red-packet-design-container {
		width: auto;
	}
}


/*	410	 <= w	*/
@media only screen and (min-width: 410px) and (max-width: 991px) {

	.red-packet-design-container {
		padding: 80px 0 150px;
	}
}





/* SECTION D - Pop Up Event ======================================================================== */

#section_popup {
	/* background-color: #682A36;
	background-image: url("../images/red-terrain-bg-3.jpg?v=2");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	display: block; */
}

@media screen and (max-width: 575px) {
	#section_popup {
		padding-top: 2em;
	}
}

#section_popup_header_img {
	max-width: 690px;
	padding-bottom: 2rem;
}

@media (max-width: 767px) {
	#section_popup_header_img {
		max-width: 100%;
	}
}






#section_brief {
	/* margin-bottom: 700px; */
	/* margin-bottom: 35vw;
    padding-top: 25vw; */
	padding-bottom: 40rem;
}
@media screen and (max-width: 2000px) {
	#section_brief {
		padding-bottom: 30rem;
	}
}
@media screen and (max-width: 1700px) {
	#section_brief {
		padding-bottom: 25rem;
	}
}
@media screen and (max-width: 1199px) {
	#section_brief {
		padding-bottom: 20rem;
	}
}
@media screen and (max-width: 991px) {
	#section_brief {
    	padding-bottom: 15rem;
	}
}
@media screen and (max-width: 767px) {
	#section_brief {
		padding-bottom: 10rem;
	}
}
/* @media screen and (max-width: 576px) {
	#section_brief {}
}
/ * Geneco Alex Screen * /
@media (min-width: 1200px) and (max-width: 1300px) and (min-height: 500px) and (max-height: 599px) {
	#section_brief {}
} */






/* SECTION - Footer ======================================================================== */

#section_footer {
  	position: relative; /* needed for the pseudo-element */
	background-image: url(../images/bg/bg-footer_8.png);
	/* background-color: var(--nightblue); */
	background-color: transparent;
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;

	/* aspect-ratio: 3000 / 2699; */
}
@media (max-width: 768px) {
	#section_footer {
		background-size: 170% auto;
	}
}

.footerlogo {
	width: 100%;
	max-width: 140px;

}
@media only screen and (min-width: 410px) {
	.footerlogo {
		width: 100%;
		max-width: 140px;
	}
}
@media only screen and (min-width: 768px) {
	.footerlogo {
		width: 100%;
		max-width: 140px;
	}
}