@import url("loading.css");

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 13px;
}
*
{
	margin:0;
	padding:0;
}

article, aside, figure, footer, header, hgroup, menu, nav, section
{
	display:block;
}

img
{
	border:0;
	vertical-align:middle;
	border-style:none;
}

svg:not(:root)
{
	overflow:hidden
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

label 
{
	display:none;
}

input[type=text], input[type=password] {
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border-top:0;
  border-left:0;
  border-right:0;
  background:none;
  outline:0;
  color:#fff;
}

input[type=text]:focus, input[type=text]:active, input[type=password]:focus, input[type=password]:active {
  background: none;
  border-top:0;
  border-left:0;
  border-right:0;
  outline:0;
  color:#fff;
}
input[type=text]:-webkit-focus, input[type=text]:-webkit-active, input[type=password]:-webkit-focus, input[type=password]:-webkit-active {
  background: none;
  border-top:0;
  border-left:0;
  border-right:0;
  outline:0;
  color:#fff;
  -webkit-box-shadow: 0 0 0 30px black inset !important;
  -webkit-text-fill-color: white !important;
}

input:autofill, input:-webkit-autofill  {
	background: none;
	border-top:0;
  border-left:0;
  border-right:0;
	border-bottom: 1px thin #fff;
	outline:0;
	color:#fff;
	-webkit-box-shadow: 0 0 0 30px black inset !important;
	-webkit-text-fill-color: white !important;
}

.hidden 
{
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

#loader
{
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	display:flex;
	align-items:center;
	justify-content: center;
	height:100vh;
  z-index: 101;
  background-color: #000;
  animation: slideUp .4s ease-in-out  forwards 3s;
}

@keyframes slideUp {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-100vh) scale(1);
  }
}

#loader img
{
	width:50vw;

}

html, body
{
	width:100vw;
	min-height:100vh;
	/*background: #003846; /*dark blue*/
	/*background: #444; /*charcoal */
	color:#999;
	font-family: "Oswald", Helvetica, sans-serif;
	font-size:12pt;
}

body
{
	background-image:url(../resources/images/2023empress_landing_bg.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	background-color: #000;
	background-position: 30% center;
	background-repeat: no-repeat;
}

#content_wrapper
{
	width:100vw;
	height:100vh;
}

@media screen and (max-width: 1367px) 
{
	#body
	{
		background-image:url(../resources/images/empress_landing_mobile.png);
		background-attachment: scroll;
	}

	
}

#top
{
	position: sticky;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	height:60px;
}

.fixed
{
	position:fixed;
	top:0;
}

#toplabel
{
	position: absolute;
	top: 0;
	right: 5%;
}

#toplabel h1
{
	font-family: futura-pt, sans-serif;
	font-weight: 300;
	font-style: normal;
	color:  #fff;
	font-size: 6vw;
	margin-top: .21em;
}

#toplogo
{
	position: absolute;
	top: .25em;
	left: .25em;
}

#toplogo img
{
	width: 40vw;
}

.mytf
{
	height:100vh;
	border:0;
	position:absolute;
	top:0;
}

.mytf iframe
{
	border-radius: 0 !important;

}

.mytfLabel
{
	z-index: 100;
	width:100%;
	position:absolute;
	top:100px;
	left:0;
	color:#fff;
	text-align:center;
	font-size: 2em;
	text-transform: uppercase;
	font-style:strong;
	font-family:futura-pt, sans-serif;
}

#burger
{
	position: absolute;
	top: .85em;
	right: .75em;
	width: 30px;
	height: 30px;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
  background: url(../resources/ui/burger.svg) no-repeat;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  cursor: pointer;
}

#burger:hover {
    background: url(../resources/ui/burger_over.svg);
}

#admin_login_btn
{
	position: absolute;
	top: .85em;
	right: 3em;
	width: 30px;
	height: 30px;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
  background: url(../resources/ui/admin_btn.svg) no-repeat;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  cursor: pointer;
}

#admin_login_btn:hover 
{
    background: url(../resources/ui/admin_btn_over.svg);
}

#main 
{
	width: 100%;
	height: 100%;
}

.cwbLRI 
{
	background-color: none !important;

}

#menu_wrapper
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	display: none;
	z-index:99;
}

nav#menu
{
	margin: 25%;
	padding: 1em;

}

nav#menu div
{
	font-family: futura-pt-bold, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1rem;
	color:  #fff;
	word-wrap: break-word;
	list-style: none;
	padding-bottom: 1em;
	display: block;

}

nav#menu span.menu__headline-text
{
	font-size: 1vw;
}

nav#menu div.menu__item
{
	text-transform: uppercase;
}

nav#menu a
{
	text-decoration: none;
	color: #fff;

}

nav#menu a:hover
{
	text-decoration: none;
	color: #eb4c5d; /*pink*/

}

.menu {
	grid-area: content;
	font-weight: 400;
	font-size: 1rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-self: center;
	align-items: flex-start;
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.menu__headline {
	margin-bottom: 1rem;
}

.menu__headline-deco {
	display: block;
	width: 3rem;
	height: 1px;
	margin-bottom: 1rem;
	border-bottom: 1px solid #fff;
	background: #000;
	transform-origin: 0% 50%;
}

.menu__headline-text {
	position: relative;
	overflow: hidden;
	display: block;
}

.menu__headline-text span {
	display: block;
	font-size: 1rem;
}

.menu__item {
	flex: none;
	margin-right: 4rem;
	padding: 0 2rem 0 0;
}

.menu__item-inner {
	white-space: nowrap;
	position: relative;
	cursor: pointer;
	font-size: 3vw;
	padding: 0.5rem;
	display: block;
	color: var(--color-menu);
	transition: transform 0.2s;
}

.menu__item-inner:hover {
	font-style: italic;
	transform: translate3d(2rem,0,0);
	color: var(--color-menu-hover);
}

.menu__item-inner::before {
	content: '';
	top: 55%;
	width: 3.5rem;
	height: 1px;
	background: currentColor;
	position: absolute;
	right: calc(100% + 2rem);
	opacity: 0;
	pointer-events: none;
}

.menu__item-inner:hover::before {
	opacity: 1;
}

/* Pseudo-element for making sure that hover area is active */
.menu__item-inner:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: -5.5rem;
	right: 0;
	height: 100%;
}

#landing
{
	height:100%;
	width:100%;
	text-align:center;
}

#tagline
{
	position:absolute;
	bottom:5%;
	left:10%;
}

#tagline h1
{
	font-family: futura-pt, sans-serif;
	font-weight: 300;
	font-style: normal;
	color:  #fff;
	font-size: 6vw;
}

#joinus
{
	width: 100%;
	height: 100%;
	float: right;
	text-align: right;

}

#joinus_btn
{
	margin-top: 25%;
	margin-right: 5%;

}

@font-face {
    font-family: 'Gotham';
    src: url('../resources/fonts/Gotham-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

#bgimg
{
	
}



#landinglogo
{
	margin:auto 0;
	text-align:center;
	position: relative;
	background-size:contain;
	min-height:80%;
}

.landinglogo img{
	max-height: 651px !important;
	max-width: 651px !important;
  
}


#container
{
	margin-left: auto;
	margin-right: auto;
	/*
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	*/
}

#contact_address
{
	width:100%;
	text-align:center;
}

#contact_address dt
{
	color:#ccc;
	font-size:14pt;
	font-weight:bold;

}
#contact_address dd a
{
	color:#D8394A;
	text-decoration:none;
}

footer
{
	border-top: 1px solid #D8394A;
	background: #FFBB00; /*gold*/
	background: #1A1A1A; /*dark blueblack */
	width:100%;
	height: 15px;
	bottom:0;
	padding: 10px 0;
	font-size:.7em;
	text-align:center;
	color: #FFBB00;
}

#copyright
{
	margin-left: auto;
	margin-right: auto;
}

/* ERROR PAGE */

#error_container
{
	display:flex;
	align-items:center;
	justify-content: space-around; 
	flex-wrap: wrap;
	flex:200px;
	width:100vw;
	height:100vh;
	text-align:center;
	color:#D8394A;
	position: absolute;
	top:0;
}

#error_container #error_message h2
{

}

#error_message
{
	color:#fff;
	font-weight:500;
	align-items:flex-start;
}

#error_image
{
	width:500px;
	height:500px;
}

.cursor {
	display: none;
}

.ButtonsWrapper-sc-__sc-1ckh2u2-2{
	display:none !important;
}
.cJwpQj {
	display:none;
}

@media (any-pointer: fine) {
	.cursor {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		pointer-events: none;
		mix-blend-mode: color-burn;
	}
	.cursor__inner {
		fill: var(--cursor-fill);
		stroke: var(--cursor-stroke);
		stroke-width: var(--cursor-stroke-width);
		opacity: 0.7;
	}
	.no-js .cursor {
		display: none;
	}
}

/* LOGIN */

#login_panel
{
	margin-top: 15%;	
}

#login_panel format
{
	border: 3px solid #f1f1f1;

}

#login_panel h2
{
	font-family: futura-pt, sans-serif;
	font-weight: 300;
	font-style: normal;
	color:  #fff;
	font-size: 3vw;
	width:100%;
	padding:10px 0 15px 0;
}

#login_panel label
{
	color:#fff;
	font-size:.75em;
}

#login_panel input[type=text], input[type=password]
{
	width: 100%;
  padding: 12px 10px;
  margin: 8px 0;
  outline:0;
}

#login_panel input[type=checkbox]
{
	margin:0 5px 0 0;

}

#login_panel button
{ 
  background-color: #fff;
  color: #000;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

#login_panel button:hover 
{
	opacity: .8;

}

#login_panel .imgcontainer
{
    text-align:center;

}

#login_panel .imgcontainer img
{
    width:225px;
}

#login_panel .error
{
	background: #f2dede;
	color: #a94442;
	padding: 10px;
	width: 100%;
	border-radius: 5px;
	margin: 20px auto;

}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  
}

/* Modal Content/Box */
.modal-content {
  background-color: #000;
  margin: 20px auto; /* 15% from the top and centered */
  width: 80%; /* Could be more or less, depending on screen size */
  border-radius: 20px;
	background-blend-mode: screen;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	padding:0 20px 40px 20px;
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 50px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

/* LOGGED IN */

#logged_in
{
	position: absolute;
	top: 50px;
	right: 0;
	width: 300px;
	height: 25px;
	background:#ffbb00; /*yellow */
	border-radius: 20px;
	padding:0 15px 0 0;
}

#logged_in span
{
	font-size:.8em;
	color:#000;
	width:225px;
	padding:4px 15px 0 0;
	text-align: right;
	height:100%;
	display:block;
}

#logged_in a
{
	width:50px;
	font-size:.8em;
	border-left:1px solid #000;
	color:#000;
	padding:4px 15px 5px 10px;
}

#logged_in span, a
{
	font-family: futura-pt, Arial, sans-serif;
	float:left;
	height:25px;
}

#logged_in a:hover
{
	color: #fff;
}

/* SECTION CHAPTERS */

.group
{
	background:#000;
	margin:0;
	padding:0;
}

.group h1
{
	text-transform: uppercase;
	color:#fff;
	font-style:strong;
	padding: 0;
	font-family:futura-pt, sans-serif;
	border-radius:4px;
	margin: 0;
}

.chapter
{
	
	
}

.chapter h2
{
	margin:0;
	width:100%;
	font-family: futura-pt, sans-serif;
	font-style: strong;
	padding:0 25px;
	background:  #fff;
	color: #000;
	font-size: 3.25em;
	z-index:2;
}

.chapter p
{
	font-family: futura-pt, sans-serif;
	text-align:center;
	font-size: 1.75em;
	line-height: 1.25em;
	padding:50px;
	color:#000;
	display:flex;
	align-items:center;
}

.welcomeMessage
{
	display:flex;
	height:50vh;
	
	align-items:center;
	justify-content: center;
	text-align:center;
	padding:0 30px;
	background: #fff;
	color: #000;
}
.welcomeMessage h2
{
	width:35vw;
	font-family: "Oswald", sans-serif;
	font-style: strong;
	font-size: 18pt;
}

#admin_welcome 
{
	position:absolute;
	top: 80px;
	left:0;
}

.vidFullW
{
	width:100%;
	border-top:6px solid #000;
}

#set-height
{
	display:block;
}

#contact_info
{
	background:#fff;
	text-align:center;
}

#contact_info ul
{
	display:flex;
	justify-content: space-around;
	color:#000;
	font-size: 18pt;
	font-family:'Oswald', sans-serif;

}

#contact_info p
{
	font-size:14pt;
	padding:20px;
	color: #000;
}

/* MARQUEE */

.marquee_container
{
	--space: 0rem;

  display: grid;
  align-content: center;
  overflow: hidden;
  gap: var(--space);
  width: 100%;
  font-family: futura-pt, -ui, sans-serif;
  line-height: 1.5;
  color: #ffbb00;
}

.marquee {
  --duration: 60s;
  --gap: var(--space);

  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  transform: skewY(0deg);
  font-size:10em;
}

.marquee_icon
{
	background-image:url(../resources/ui/round_mp_dot.svg);
	width:.75em;
	height:.75em;
	background-repeat:no-repeat;
	background-position:center center;
	padding:0 75px;
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee__group img {
  max-width: clamp(10rem, 1rem + 28vmin, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
}

.marquee__group p {

}

.marquee--borders {
  border-block: 3px solid dodgerblue;
  padding-block: 0.75rem;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: calc(var(--duration) / -2);
}

.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}