/* 

	2025 landing Stylesheet
	 
	@import url("src/fontawesome/v6.6.0/css/fontawesome.min.css");
	@import url("src/fontawesome/v6.6.0/css/light.min.css");
	@import url("src/fontawesome/v6.6.0/css/brands.min.css");

*/

@font-face { font-family: 'Barlow Semi Condensed'; src: url('src/webfonts/barlowsemicondensed-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('src/webfonts/barlowsemicondensed-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('src/webfonts/barlowsemicondensed-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('src/webfonts/barlowsemicondensed-bolditalic.woff2') format('woff2'); font-weight: 700; font-style: italic; }

/* Basics */

html { color: #fefefe; font-family: 'Barlow Semi Condensed', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 17px; width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { margin: 0px; padding: 0px; height: 100%;	background: #000000; }
img { border: 0; display: block; }
h1, h2, h3, p, a { padding: 0; margin: 0; font-weight: normal; }
b, strong { font-weight: 700; }
a { text-decoration: none; }
.clear { clear: both; }
.responsive-show { display: none !important; }

#bg { display: none; }
#cn { position: relative; width: 100%; min-height: 100%; text-align: center; box-sizing: border-box; padding: 0px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; align-items: center; }
#countdown-title h3 { text-transform: uppercase; font-weight: 700; font-size: 24px; }
#countdown-title { padding-bottom: 10px; }
#logo { position: relative; padding: 0px; max-width: 100%; }
#logo img { position: relative; display: inline-block; height: auto; max-height: 70vh; max-width: 100%; }
#location h3 { text-transform: uppercase; font-weight: 700; font-size: 24px; }
#tickets { position: relative; padding: 40px 20px 40px 20px; }
#tickets a { background: #FFFFFF; color: #000000; padding: 18px 36px; font-size: 24px; text-transform: uppercase; font-weight: 700; border-radius: 9px; }
#tickets a:hover { background: #F99852; color: #000000; }
#social { position: absolute; bottom: 10px; left: 10px; right: 10px; text-align: center; }
#social .icon { position: relative; display: inline-block; vertical-align: middle; margin: 0px 10px; }
#social a { position: relative; display: inline-block; vertical-align: middle; color: #FFFFFF; font-size: 32px; padding: 10px; width: 40px; height: 40px; text-align: center; background: 0; border-radius: 32px; transition: all 200ms ease-in-out; }
#social a:hover { color: #F99852; transition: all 100ms ease-in-out; }
#ft { position: relative; padding: 20px; }
#ft a { color: #999999; font-size: 12px; text-transform: uppercase; }
#ft a:hover { color: #F99852; }

#terms { padding: 40px; text-align: left; max-width: 780px; }
#terms p { padding-bottom: 8px; }

#theme-home-bg-video { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
#theme-home-bg-video video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); }

a { color: #FFFFFF; }
a:hover { color: #F99852; }

@media only screen and (min-width: 640px) and (orientation: landscape) {
	#bg { position: fixed; display: block; width: 100vw; height: 100vh; background: url("/2025-landing/fantasm-lotto-arena-2025-1920x1080px.jpg") no-repeat right center; background-size: cover; }
	#logo { display: none; }
}

@media only screen and (min-width: 640px) {
	#logo { max-width: 100%; }
}

@media only screen and (max-width: 640px) {
	.responsive-hide { display: none !important; }
}

@media only screen and (max-width: 820px) and (orientation: portrait) {
	#cn { justify-content: space-between; }
	#tickets { position: relative; padding: 40px 20px 80px 20px; }
}

@media only screen and (max-height: 640px) and (orientation: landscape) {
}
