/* 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: 'Oswald';
	src: url('../fonts/Oswald-VariableFont_wght.ttf') format('truetype');
}

:root {
	--hotpink: #D8176F;
	--gold: #C3922E;
	--darkblue: #002E6E;
	--nightblue: #182339;
	--sand: #ede4e1;
}

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

html {
	overflow-x: clip;
}

/* initial setting*/
html body {
	width: 100%;
	max-width: 100%;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	color: #fff;
	overflow-x: clip;

	/* background-color: #223860; */
	background-color: var(--nightblue);
	background-size: 120% auto;
	background-position: center top;
	background-repeat: no-repeat;
}
html.is-desktop body {
	background-image: url('../images/nightstars.png');
}

@media only screen and (min-width: 1200px) {
	body {
		font-size: 1.2rem;
		line-height: 2rem;
	}
}

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

.snap-me {
	scroll-snap-align: start;
}

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

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

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

b,
strong {
	font-weight: 700;
}

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

a.a-white,
a.a-white:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

.text-white {
	color: #fff;
}

.font-weight-bold {
	font-weight: 700;
}

.text-decoration-none {
	text-decoration: none;
}

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

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

.show_if_narrow {
	display: none;
}

.hide_if_narrow {
	display: block;
}

/*			w <= 409	*/
@media only screen and (max-width: 409px) {
	p,
	#section_5_text 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,
	#section_5_text p {
		font-size: 16px;
	}

	.show_if_narrow {
		display: block;
	}

	.hide_if_narrow {
		display: none;
	}
}

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

/* Spacing --------------------------------------------- */

.mt-large {
	margin-top: 180px;
}
.mb-large {
	margin-bottom: 180px;
}

.mt-small {
	margin-top: 120px;
}
.mb-small {
	margin-bottom: 120px;
}

.mt-xsmall {
	margin-top: 60px;
}
.mb-xsmall {
	margin-bottom: 60px;
}

/* Buttons --------------------------------------------- */

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

.btn.white {
	color: #fff;
}

.btn.whiteborder {
	border-color: #fff;
}

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

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

.btn-primary.alt:hover {
	color: var(--darkblue);
	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(--darkblue);
	border-color: var(--gold);
}

.btn-primary:focus,
.btn-primary.focus {
	color: #fff;
	background-color: var(--darkblue);
	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(--darkblue);
	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-contest-2 {
	color: #fff !important;
	border-color: #fff !important;
	background-color: var(--darkblue) !important;
}

.btn-contest-2:hover,
.btn-contest-2:active,
.btn-contest-2:focus {
	color: var(--gold) !important;
	border-color: var(--gold) !important;
	background-color: #fff !important;
}

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

.btnImage {
	/* max-width: 100%; */
	width: 100%;
	max-width: 280px;
	max-height: 52px;
	cursor: pointer;
}

/* Background colors --------------------------------------------- */

.bg_darkblue {
	background-color: var(--darkblue);
}

.bg_nightblue {
	background-color: var(--nightblue);
}

.bg_sand {
	background-color: var(--sand);
}

.bg_hotpink {
	background-color: var(--hotpink);
}

/* z-index --------------------------------------------- */

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

.zIndex-10 {
	z-index: 10;
}




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

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

.slick-dots li button:before {
	color: var(--gold);
}

.slick-dots li.slick-active button:before {
	color: var(--gold);
}




/* FLOATIES ================================================== */

.floaty {
	position: absolute;
	width: 400px;
	max-width: 50vw;
	max-height: 50vh;
	overflow-x: clip;
}

.floaty.left {
	left: 0;
}
.floaty.right {
	right: 0;
}

.floaty-holder {
	position: relative;
	overflow: visible;
}
.left .floaty-holder {
	left: -140px;
}
.right .floaty-holder {
	right: -140px;
}

.floaty.one   { margin-top: -200px;  }
.floaty.two   { margin-top: 300px;   }
.floaty.three { margin-top: -700px;  }
.floaty.four  { margin-top: -600px;  }
.floaty.five  { margin-top: -80px;   }
.floaty.six   { margin-top: -380px; width: 300px; }
.floaty.seven { margin-top: 500px;   }
.floaty.eight { margin-top: -1420px; }

.floaty .gears {
	background-image: url('../images/float-gears.svg');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: .1;
	aspect-ratio: 1037 / 1233;
}
.floaty .clock {
	background-image: url('../images/float-clock.svg');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: .2;
	aspect-ratio: 1 / 1;
}

.floaty.one   > div > div { transform: rotate(95deg); }
.floaty.two   > div > div { transform: rotate(-65deg); }
.floaty.three > div > div { transform: rotate(85deg); }
.floaty.four  > div > div { transform: rotate(175deg); }
.floaty.five  > div > div { transform: rotate(205deg); }
.floaty.six   > div > div { transform: rotate(75deg); }
.floaty.seven > div > div { transform: rotate(-25deg); }
.floaty.eight > div > div { transform: rotate(5deg); }




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

.sect_header_img {
	max-width: 800px;
	/* margin-bottom: 10px; */
}
@media screen and (max-width: 991px) {
	.sect_header_img {
		max-width: 100%;
	}
}

.sect_header_img.singleLine {
	max-height: 33px;
}
.sect_header_img.singleLine.withTail {
	max-height: 47px;
}
.sect_header_img.doubleLines {
    max-height: 87px;
}
.sect_header_img.doubleLines.withTail {
    max-height: 105px;
}
.sect_header_img.withTail {
	margin-bottom: -4px;
}




/* SECTION COVER ================================================== */

#sectCover {
	background-size: cover;
	position: relative;
	right: 0;
	bottom: 0;
	height: 150vh;
	min-width: 100%;
	min-height: 100%;
	z-index: -5;

	margin-left: 0 !important;
	padding-left: 0 !important;
}
/* ideal */
@media (min-aspect-ratio: 16/9) {
    #sectCover {}
}
/* mobile */
.is-mobile #sectCover {}
/* tablet portrait */
@media screen and (min-width: 1024px) {
	.is-portrait.is-mobile #sectCover {
		height: 115vh;
	}
}
/* mobile portrait */
@media screen and (max-width: 1023px) {
	.is-portrait.is-mobile #sectCover {
		height: 120vh;
	}
}
/* mobile landscape */
.is-landscape.is-mobile #sectCover {}
/* mobile portrait small */
@media screen and (max-height: 750px) {
	.is-portrait.is-mobile #sectCover {
		height: 130vh;
	}
}
/* funny people */
@media screen and (min-width: 1260px) and (max-height: 540px) {
	#sectCover {}
}
/* niche people */
.is-niche #sectCover {
	height: 200vh;
}




#sectCover_genecoPresents {
    max-width: 130px;
    margin: 2rem auto 0;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
	z-index: 3;
}
@media screen and (max-width: 1199px) {
	.is-desktop #sectCover_genecoPresents {
		max-width: 100px;
	}
}
/* ideal */
@media (min-aspect-ratio: 16/9) {
    #sectCover_genecoPresents {}
}
/* mobile */
.is-mobile #sectCover_genecoPresents {}
/* tablet portrait */
@media screen and (min-width: 1024px) {
	.is-portrait.is-mobile #sectCover_genecoPresents {
		max-width: 100px;
	}
}
/* mobile portrait */
@media screen and (max-width: 1023px) {
	.is-portrait.is-mobile #sectCover_genecoPresents {
		margin: 1.5rem auto 0;
	}
}
/* small mobile portrait */
@media screen and (max-width: 430px) {
	.is-portrait.is-mobile #sectCover_genecoPresents {
		max-width: 100px;
		margin: 1.5rem auto 0;
	}
}
/* mobile landscape */
.is-landscape.is-mobile #sectCover_genecoPresents {}
/* mobile portrait small */
@media screen and (max-height: 360px) {
	.is-portrait.is-mobile #sectCover_genecoPresents {
		margin: 1rem auto 0;
	}
}
/* funny people */
@media screen and (min-width: 1260px) and (max-height: 540px) {
	#sectCover_genecoPresents {}
}
/* niche people */
.is-niche #sectCover_genecoPresents {
    max-width: 110px;
}




/* content on top of the video */
.sectCover_txt {
	width: 80%;
	position: absolute;
    top: 100vh;
	left: 10%;
	min-height: 50vh;
	text-align: center;
	/* background-color: var(--nightblue); */
	z-index: 5;
}
/* ideal */
@media (min-aspect-ratio: 16/9) {
    .sectCover_txt {
		top: 70%;
	}
}
/* mobile portrait */
@media screen and (max-width: 1023px) {
	.is-portrait.is-mobile .sectCover_txt {
		top: 55%;
	}
}
/* mobile portrait small */
@media screen and (max-height: 750px) {
	.is-portrait.is-mobile .sectCover_txt {
		top: 50%;
	}
}
/* small ipad landscape */
@media screen and (min-width: 1010px) and (max-width: 1040px) and (min-height: 750px) and (max-height: 780px) {
	.sectCover_txt {
		top: 65% !important;
	}
}
/* small ipad portrait */
@media screen and (min-width: 750px) and (max-width: 780px) and (min-height: 1010px) and (max-height: 1040px) {
	.sectCover_txt {
		top: 65% !important;
	}
}
/* large ipad landscape */
@media screen and (min-width: 1350px) and (max-width: 1380px) and (min-height: 1010px) and (max-height: 1040px) {
	.sectCover_txt {}
}
/* large ipad portrait */
@media screen and (min-width: 1010px) and (max-width: 1040px) and (min-height: 1350px) and (max-height: 1380px) {
	.sectCover_txt {
		top: 1000px;
	}
}
/* funny people */
@media screen and (min-width: 1260px) and (max-height: 540px) {
	.className {}
}
/* niche people */
.is-niche .sectCover_txt {
	top: 60%;
}




.sectCover_txt p {
	font-size: 16px;
	line-height: 1.3;
	color: #f1f1f1;
}

.sectCover_clouds {
	max-width: 70%;
	position: absolute;
    top: 35%;
	left: 0;
    opacity: .9;
    /* background: red; */
	z-index: 2;
}
/* ideal */
@media (min-aspect-ratio: 16/9) {
    .sectCover_clouds {}
}
/* mobile */
.is-mobile .sectCover_clouds {
	display: none;
}
/* tablet portrait */
@media screen and (min-width: 1024px) {
	.is-portrait.is-mobile .sectCover_clouds {}
}
/* mobile portrait */
@media screen and (max-width: 1023px) {
	.is-portrait.is-mobile .sectCover_clouds {}
}
/* mobile landscape */
.is-landscape.is-mobile .sectCover_clouds {}
/* mobile portrait small */
@media screen and (max-height: 750px) {
	.is-portrait.is-mobile .sectCover_clouds {}
}
/* funny people */
@media screen and (min-width: 1260px) and (max-height: 540px) {
	.sectCover_clouds {
		display: none;
	}
}
@media screen and (max-height: 550px) {
	.is-landscape.is-desktop .sectCover_clouds {
		display: none;
	}
}
/* niche people */
.is-niche .sectCover_clouds {
	top: 30%;
}


.sectCover_clouds img {
	width: 100%;
}


#heroContainer {
    width: 100%;
	max-width: 1600px;
    height: 120vh;
    position: relative;
	top: 20px;
    margin: 0 auto;
	border: 1px solid var(--nightblue);
    /* overflow: hidden; /* Ensures no overflow from the container */
}
/* tablet portrait */
@media screen and (min-width: 1024px) {
	.is-portrait.is-mobile #heroContainer {
		top: -80px;
	}
}
/* mobile landscape */
.is-landscape.is-mobile #heroContainer {
	top: 5vh;
}
/* mobile portrait small */
@media screen and (max-height: 750px) {
	.is-portrait.is-mobile #heroContainer {}
}
/* small ipad landscape */
@media screen and (min-width: 1000px) and (max-width: 1050px) and (min-height: 740px) and (max-height: 790px) {
	#heroContainer {
		top: 0;
	}
}
/* small ipad portrait */
@media screen and (min-width: 740px) and (max-width: 790px) and (min-height: 1000px) and (max-height: 1050px) {
	#heroContainer {
		top: -40px;
	}
}
/* large ipad landscape */
@media screen and (min-width: 1340px) and (max-width: 1390px) and (min-height: 1000px) and (max-height: 1050px) {
	#heroContainer {}
}
/* large ipad portrait */
@media screen and (min-width: 1000px) and (max-width: 1050px) and (min-height: 1340px) and (max-height: 1390px) {
	#heroContainer {
		top: -180px;
	}
}
/* funny people */
@media screen and (min-width: 1260px) and (max-height: 540px) {
	#heroContainer {}
}
/* niche people */
.is-niche #heroContainer {
	height: 120vh;
	top: 5vh !important;
}




#heroContainer::before,
#videoOverlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to top, var(--nightblue), rgba(27, 39, 63, 0) 25%), /* Top */
        linear-gradient(to bottom, var(--nightblue), rgba(27, 39, 63, 0) 15%), /* Bottom */
        linear-gradient(to right, var(--nightblue), rgba(27, 39, 63, 0) 15%), /* Left */
        linear-gradient(to left, var(--nightblue), rgba(27, 39, 63, 0) 15%); /* Right */
    /* background-blend-mode: multiply; /* Blend the gradients */
    z-index: 1; /* Make sure this is above the video */
}
.is-portrait.is-mobile #heroContainer::before,
.is-portrait.is-mobile #videoOverlay {
	aspect-ratio: 430 / 530;
}




#heroVideo {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
	object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* Ensure the video is behind the overlay */
}
.is-portrait.is-mobile #heroVideo {
	width: 100%;
	height: auto;
    /* top: 0; */
	object-fit: contain;
}
.is-niche #heroVideo {
    /* top: 0; */
	object-fit: cover;
}




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

#sectVid {
	margin-top: 11rem;
}

#nlsVidContainer {
    display: flex;
    justify-content: center; /* Center the video */
    align-items: center; /* Center vertically */
    padding: 20px 0;
}

.nlsVidBorder {
    padding: 20px 20px;
}

.custom_bdr {
	/*
	border-image: none   100%  1     0      stretch;
	border-image: source slice width outset repeat|initial|inherit;
	
	border-image-source	The path to the image to be used as a border	
	border-image-slice	How to slice the border image	
	border-image-width	The width of the border image	
	border-image-outset	The amount by which the border image area extends beyond the border box	
	border-image-repeat	Whether the border image should be repeated, rounded or stretched
	*/
	/* border-image: url('../images/border-goldTrim.png') 100% 1 0 stretch; */
	border-image-source: url('../images/border-goldTrim.png');
	border-image-slice: 10%;
    border-image-width: 40px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
}

/* .custom_bdr img {
	width: 100%;
	padding: 20px;
	border-radius: 42px;
} */

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

/* #nlsVidContainer iframe {
    display: block;
    width: 100%;
    height: auto;
} */




/* SECTION GROUPS ================================================== */

/* #sectGroups {
	margin-top: 9rem;
} */

.sectGroups_img_book {
	max-width: 40%;
}
@media only screen and (max-width: 767px) {
	.sectGroups_img_book {
		max-width: 60%;
	}
}

.sectGroups_img_logos {
	max-width: 380px;
}




/* SECTION MEET ================================================== */

/* #sectMeet {
	margin-top: 9rem;
} */

.sectMeet_profile {
	width: 200px;
	/* height: 200px; */
	padding: 20px;
	cursor: pointer;
}

.sectMeet_profile a,
.sectMeet_profile img {
	width: 100%;
	height: 100%;
}




/* SECTION ORDER ================================================== */

/* #sectOrder {
	margin-top: 9rem;
} */

.sectOrder_img_book {
	width: 100%;
	padding: 20px;
	border-radius: 42px;
}




/* SECTION DOWNLOAD ================================================== */

#sectDownload {
	margin-top: 1rem;
}

.vote_container {}

.vote_item {}

.vote_item label,
.vote_item label * {
	cursor: pointer;
}

.vote_item img {
	width: 100%;
    padding: 20px;
}

.vote_item .vote_btn_container {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
}
.is-portrait.is-mobile .vote_item .vote_btn_container {
	margin-bottom: 2rem;
}

.vote_btn_item {}

.vote_btn_img {
	width: 20px;
	height: 20px;
	margin-top: 6px;

	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
}
.is-portrait.is-mobile .vote_btn_img {
	margin-top: 2px;
}

.vote_btn_img.is_unchecked {
	background-image: url("../images/cb-unchecked.png");
}
.vote_btn_img.is_checked {
	background-image: url("../images/cb-checked.png");
}
.vote_btn_img.is_selected {
	background-image: url("../images/cb-selected.png");
}

.vote_btn_txt {
	cursor: pointer;
}

#pre_vote_msg_box, 
.err_msg_box {
	padding: 10px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    /* background: grey; */
}



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

#sectCounter {}

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

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

.tick-col-container {
	max-width: 160px;

	background-image: url("../images/numbers/box.png");
	background-size: contain;
	background-repeat: no-repeat;

	aspect-ratio: 521 / 728;
}

.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)); } /* Default */
.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: 100%;
	height: 100%;
}




/* SECTION VENUES ================================================== */

/* #sectVenues {
	margin-top: 9rem;
} */

.sectVenues_img {
	width: 100%;
	padding: 20px;
	border-radius: 42px;
}

.sectVenues_reader {
	width: 100%;
	padding: 20px;
	border-radius: 42px;
}




/* SECTION BOOTH ================================================== */

/* #sectBooth {
	margin-top: 9rem;
} */

.sectBooth_photo {
	/* width: 200px;
	height: 200px; */
	padding: 20px;
	cursor: pointer;
}

.sectBooth_photo a,
.sectBooth_photo img {
	width: 100%;
	height: 100%;
}




/* MODAL ================================================== */

.modal-content {
	border: 0 !important;
}

#stage_one,
#stage_two {
    background-color: transparent !important;
}

#stage_one .modal-body,
#stage_two .modal-body {
    text-align: right;
    border:0 !important;
}

.is-mobile .vote_modal_header {
	font-size: 1.7rem;
}

.vote_modal_txt {
	width: 100%;
	text-align: center;
}




/* SECTION FOOTER ================================================== */

.footerlogo {
	width: 100px;
}


/*  		w <= 499   */
@media only screen and (max-width: 499px) {
	#sectFooter {
		background-size: 48%;
		background-position: right -20% top -150px;
	}

	#sectFooter:after {
		background-position: left -15% bottom -150px;
		background-size: 48%;
	}

}

/*	576	 <= w	*/
@media only screen and (min-width: 576px) and (max-width: 1000px) {
	#sectFooter {
		background-size: 40%;
		background-position: right -60px top -220px;
	}

	#sectFooter:after {
		background-position: left -8% bottom -200px;
		background-size: 37%;
	}
}