html, body { 
   font-family:"Roboto",sans-serif; 
   scroll-behavior: smooth;
}

body {
	background-image: linear-gradient(to bottom right, #403F44, #1E1B32);
}

#btm_bar {
	position: fixed;
	bottom: 0;
	height: 80px;
	width: 100%;
	background-image: linear-gradient(to bottom right, #403F44, #1E1B32);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	box-shadow: 0 -2px 10px 1px rgba(0, 0, 0, 1);

	
	&& a.app {
		background-color: transparent;
		display: block;
		width: 76px;
		height: 76px;
		&& :hover {
			border-radius: 10px;
			background-color: rgba(255,255,255,.1);
			transition: background-color .3s ease-in-out;
		}
		&& i {
			font-size: 30px;
			color:white;
		}
	}

	& i.kft.spotify:before {
		font-size: 38px;
	}
}


.page_title {
	color: rgba(255,255,255,.9);
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 25px;
	user-select: none;
	text-align: left;
	font-family: Lato;
	padding: 30px;
}






















body, html { font-size: 14px; height: auto; }
/*h1 { font-size:unset; }
h2 { font-size:unset; }*/
h3 { font-size:1.3em; }

body:not(.mce-content-body) {
	margin:0 auto; 
	min-height: 100vh;
	min-height: 100dvh;
/*	display: grid;
	grid-template-rows:minmax(700px,auto) 1fr;*/
}
body.main-middle:not(:has(menu.navbar)) { grid-template-rows:minmax(700px,auto) 1fr; }
body:not(.dev):not(.mce-content-body).no_footer { grid-template-rows:minmax(700px,auto); }

body.mce-content-body { padding:5px 15px; }

a { color: var(--a-link); transition: color .25s ease-in-out; }
@media (hover: hover) { a:hover{ color:var(--a-link-hover); }}

@media (hover: hover) { 
	main section[data-type=text] a {
	  background: linear-gradient(0deg, var(--a-link), var(--a-link)) no-repeat right bottom / 0 2px;
	  transition: background-size .3s;
	  padding-bottom: 2px;
	  color:var(--a-link);
	}
	main section[data-type=text] a:not(.b-icn):where(:hover, :focus-visible) {
	  background-size: 100% 2px;
	  background-position-x: left;
	  color:var(--a-link-hover) !important;
	}
}

p, li, li ul li  {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
    line-height: 175%;
 }
li ul li  { font-size: 16px; }

div.hr {
	border-top:1px solid var(--light-border);
	margin-block: 20px;
	height: 1px;
	width: 100%;
}
div.hr.less { margin-block: 10px; }
div.hr.soft { border-top-color:rgba(0,0,0,.075); }
div.hr.dash { border-top-style: dashed; }
div.hr.logo { height:20px; }
div.hr.logo::before {
	font-family: "kui";
	content: "\e952";
	font-size: 52px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: -30px;
	left: 50%;
	background: white;
	padding-inline: 10px;
	transform: translateX(-50%);
	color: rgba(0,0,0,.75);
}
.dev div.hr.logo::before { top:-10px; }

.pg-hdr p { margin:0; }
.pg-hdr picture img, .img-pg-hdr { border-bottom: 8px solid; user-select: none; -webkit-user-select:none; }
.mobile .pg-hdr picture img, .mobile .img-pg-hdr { object-fit: cover; height: 350px; border-bottom: 4px solid; }
.tablet .pg-hdr picture img, .tablet .img-pg-hdr { object-fit: cover; height: 400px; }

/********************/
/*     scrollUp     */
/********************/

#scrollUp {
	position: fixed;
	width: 40px;
	bottom: 20px;
	right: 30px;
	z-index: 50000;
	background-color: rgba(44, 44, 48, .8);
	transition: bottom .3s ease-in-out;
}
.mobile #scrollUp, .tablet #scrollUp { bottom: 20px; right: 20px;}

/******************/
/*     Images     */
/******************/

.ux-picture { width: max-content; position: relative; }
.ux-picture.center { margin-inline: auto;  }
.ux-picture.center img { margin-inline: auto; }
.ux-picture.fleft { float: left; margin-right: 40px; }
.ux-picture.fright { float: right; margin-left: 40px; }
.mobile .ux-picture.mfull { margin-inline: auto; float: unset; }
.ux-picture.rounded img { border-radius:10px; }
.ux-picture.maxw img { width:100%; }
.ux-picture.border { border: 10px solid rgba(0,0,0,.09); border-radius: 20px; }
/*	shadow center*/
.ux-caption { 
	position: absolute;
	bottom: 10px;
	width: 100%;
	background-color: rgba(0,0,0,var(--opacity,.7));
	color: white;
	padding: 5px 20px;
	text-align: center; 
	text-shadow: 1px 1px 1px black;
}
.ux-caption.center {
    width: calc(100% - 20px);
    margin-inline: 10px;
    border-radius: 5px;
}


/**********************/
/*     Page Hero     */
/**********************/

.noborder .hero { border-bottom:0; }

.hero { position:relative; border-bottom:8px solid; }
.mobile .hero { border-bottom: 4px solid; }

.hero picture img { width:100%; }
:is(.tablet,.mobile) .hero picture img { object-fit: cover; height: 300px; }

.mobile .hero img.noborder, .noborder .hero img, .hero img.noborder { border-bottom:0; }

.h100p .hero { height:100%; }
.h100p .hero picture, .h100p .hero picture img,
.h100p .hero img { height: 100%; object-fit: cover; }

.nominh .hero { min-height:unset !important; }

.desktop.wide .hero { min-height:500px; }
.desktop.wide .no_min .hero { min-height:unset; }
:is(.tablet,.mobile) .no_min .hero picture img { height: 250px; }

.hero .text { bottom:30px; }

.shaded .hero .text {
	background-color: rgba(0,0,0,.5);
	border-radius: 9px;
	padding: 20px;
}
.shaded .hero .text h1,
.shaded .hero .text h5 { 
	background-color:unset; 
	padding:0; 
	margin:0;
	margin-top:10px; 
	padding-inline: 20px; 
}

.hero .text h1 {
	display: inline;
	font-size: 36px;
	color: #fff;
	text-shadow: 1px 1px 4px rgba(0,0,0,.8);
	padding: 6px 20px 4px 20px;
	background-color: rgba(0,0,0,.5);
	border-radius: 9px;
	text-wrap: balance;
}
.tablet .hero .text h1 { font-size:30px; }
.mobile .hero .text h1 { font-size:22px; display:block; }
.hero .text h5 {
	color: var(--white);
	padding: 10px 30px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.65);
}

.hero .cta { }

.hero .cta.center {
	position: absolute;
	left: 50%;
	bottom: 40px;
	padding: 0 40px 40px;
	transform: translate(-50%,-50%);
	background: rgba(255,255,255,.1);
	border: 2px solid rgba(255,255,255,.35);
	line-height: 40px;
	font-size: 14pt;
	height: 40px;
}

.desktop:not(.wide) .hero .cta.center {
	bottom: 20px;
	height: 30px;
	line-height: 30px;
	padding: 0 30px 30px;
	font-size: 12pt;
}

.tablet .hero .cta.center,
.mobile .hero .cta.center {
	bottom: 10px;
	height: 24px;
	line-height: 24px;
	padding: 0 24px 24px;
	font-size: 11pt;
}

/***************************/
/*     Decks and Cards     */
/***************************/

.deck {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: auto;
	gap:15px;
}

.desktop.wide .deck { max-width: 1280px; }

.card {
	width: 350px;
	height: 250px;
	position: relative;
	cursor: pointer;
	border-radius: 8px;
	background-color: black;
	transition: box-shadow .35s ease;
}

.desktop.wide .card { width:380px; }
.mobile .card { width:calc(100% - 22px); }

.card_img { overflow: hidden; border-radius: 8px; height: 250px; }
.card_img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform .85s ease;
}

.card-arrow {
	width: 30px;
	font-size: 24px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	height: 36px;
}
@-webkit-keyframes slide { 0%, to { transform: translate(0) }	50% { transform: translate(10px) }}
@keyframes slide { 0%, to { transform: translate(0) }	50% {	transform: translate(10px) }}

@media (hover: hover) { 
	.card:hover { box-shadow: 0 0 0px 6px rgba(0,0,0, .15); }
	.card:hover .card_img img { transform:scale(1.1); }
	.card:hover .card-arrow { animation: slide 1.3s ease-in-out infinite; }
}

.card-content {
	background: linear-gradient(
		rgba(0, 0, 0, 0.0) 0%,
		rgba(0, 0, 0, 0.1) 5%,
		rgba(0, 0, 0, 0.2) 10%,
		rgba(0, 0, 0, 0.5) 30%,
		rgba(0, 0, 0, 0.6) 40%,
		rgba(0, 0, 0, 0.7) 60%,
		rgba(0, 0, 0, 0.8) 70%,   
		rgba(0, 0, 0, .9) 100%
    );
	min-height: 90px;
	border-radius: 0 0 10px 10px;
	color: white;
	padding: 10px;
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0;
	width: 100%;
	transition: background-color .3s ease-in-out;
}
.card-content.row { flex-direction:row; }

.card-content:has(.card-subtitle:empty) { min-height:60px; }
.card-content:has(.card-subtitle:empty) .card-arrow { bottom:13px; }

.card-title {
	font-size: 22px;
	font-weight: bold;
	color: white;
	margin-bottom: 5px;
	font-family: Lato;
	text-shadow: 1px 1px 1px rgba(0,0,0,.8);
	text-wrap: balance;
	width: calc(100% - 50px);
	padding-left: 10px;
}
.card-subtitle {
	text-shadow: 1px 1px 1px rgba(0,0,0,.8);
	width: calc(100% - 50px);
	padding-left: 10px;
}
.card-subtitle:empty { display:none; }

/***********************/
/*     Video Embed     */
/***********************/

/* Embedded Video Related  */
p.video_frame {
	margin: 0 auto;
	width: max-content;
	border: 6px solid rgba(255, 255, 255, 0.35);
	border-radius: 5px;	
}

p.video_frame iframe { display: block; }
.mobile p.video_frame iframe { width: 100%; aspect-ratio: 16/9; height: 100%; }

.video16x9 {
	aspect-ratio: 16/9;
  	width: 100%;
  	height: auto;
  	border-radius: 10px; 
}

/***********************/

.main-middle main {
	height:calc(100vh - 50px); /* 50px Header */
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.main-middle:not(:has(menu.navbar)) main { height:calc(100vh); }

.main-middle footer { margin-top:0; }

.main-middle main section {
	height: 100%;
	width: 100%;
	max-width: 100%;
	margin:0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.main-middle main.nonone section.none { display:flex }

.main-middle main section.none { display:none; }

body:not(.admin) section.w100p {
	width:100%;
	max-width: unset;
	padding:0;
	margin:0;
	border:0;
}
section:not(.w100p) .section { padding-inline:24px; }

section.h100p, section.h100p .section { height:100vh; }
section.h100p:first-of-type, section.h100p:first-of-type .section { height:calc(100vh - 50px); }

body:not(.admin) section { 
	position: relative; 
	max-width: 1200px;
	margin: 0 auto 10px;
}

section.w100p.boxed .section {
	max-width: 1200px;
	margin: 0 auto 10px;
}
.mobile section.w100p.boxed .section { padding:20px; }

.desktop .boxed { width: 1200px; margin-inline: auto; }
.tablet .boxed, .mobile .boxed { width: 96%; margin-inline: auto; }

/*.admin section.off.show { display: block; }*/
.admin section.off {
  background-color: rgba(255,255,255,.15);
  opacity: .65 !important;
/*  display: none;*/
}

section h1:first-child, section h2:first-child, section h3:first-child, 
section h4:first-child, section h5:first-child { padding-top: 20px; }

h1 { 
	font-family: var(--title);
	font-size: 2.35em;
	margin-block: 20px 20px;
	letter-spacing: -0.5px;
	font-style: italic;
	text-wrap: balance;
}
.mobile h1 { font-size: 2.05em; }

section h1.tight:first-child, h1.tight { padding:0; margin:0; }

h2 { 
	font-family: var(--title);
	font-size: 1.85em;
	margin-block: 10px;
	letter-spacing: -0.5px;
	font-style: italic;
}
.mobile h2 { font-size: 1.55em; }

p { margin-block: 14px; }

ul { 
	margin-block: 14px;
	padding:0;
	list-style: square; 
	padding-left: 30px;
}
ul li::marker { color:var(--prime); }