/* Table of Content
==================================================
	#Site Variables
	#Site Styles
	#UIKit Styles
	#Page Styles
	#Media Queries
	#Font-Face */
	


/* #Site Variables
================================================== */
:root {
  --primary: #217FC4;
  --secondary: #82C958;
  --orange: #D88146;
  --teal: #3F9AAE;
  --purple: #7D66A7;
  --light: #D5E4DE;
  --dark: #002952;
  --white: #ffffff;
  --text: #002952;
  --navigation: #ffffff;
  
  --primary-font: "Gantari", sans-serif;
  --secondary-font: "Mozilla Headline", sans-serif;
}


/* #Site Styles
================================================== */
*				{ outline:none; }
html, body		{ color:var(--text); font-size:18px; font-weight:300; font-family:var(--primary-font); line-height:1.5rem; letter-spacing:-.5px; }

.aligncenter 	{ text-align:center; }
.alignleft		{ text-align:left; }
.alignright		{ text-align:right; }
	img.aligncenter { float:none; display:block; margin:0 auto 15px; }
	img.alignleft	{ float:left; margin-right:15px; }
	img.alignright	{ float:right; margin-left:15px; }

.w900 			{ font-weight:900; }
.w800			{ font-weight:800; }
.w700			{ font-weight:700; }
.w600			{ font-weight:600; }
.w500			{ font-weight:500; }
.w400			{ font-weight:400; }
.w300			{ font-weight:300; }
.w200			{ font-weight:200; }
.w100			{ font-weight:100; }

.font6			{ font-size:0.625em; }
.font7			{ font-size:0.750em; }
.font8			{ font-size:0.875em; }
.font10			{ font-size:1.0em; }
.font12			{ font-size:1.2em; }
.font13			{ font-size:1.3em; }
.font15			{ font-size:1.5em; }
.font18			{ font-size:1.8em; }
.font20			{ font-size:2.0em; }
.font25			{ font-size:2.5em; }
.font30			{ font-size:3.0em; }
.font35			{ font-size:3.5em; }
.font40			{ font-size:4.0em; }
.font45			{ font-size:4.5em; }

.s1				{ letter-spacing:1px; }
.s2				{ letter-spacing:2px; }
.s3				{ letter-spacing:3px; }
.s4				{ letter-spacing:4px; }
.s5				{ letter-spacing:5px; }
.s6				{ letter-spacing:6px; }
.s7				{ letter-spacing:7px; }
.s8				{ letter-spacing:8px; }

.lh0			{ line-height:1em; }
.lh1			{ line-height:1.1em; }
.lh2			{ line-height:1.2em; }
.lh3			{ line-height:1.3em; }
.lh4			{ line-height:1.4em; }
.lh5			{ line-height:1.5em; }
.lh8			{ line-height:1.8em; }
.lh20			{ line-height:2.0em; }
.lh25			{ line-height:2.5em; }

h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-h4	{ font-family:var(--secondary-font); font-weight:500; color:inherit; line-height:1.2em; text-transform:inherit; }

h1, .uk-h1 		{ font-size:3.000em; }
h2, .uk-h2 		{ font-size:2.750em; }
h3, .uk-h3 		{ font-size:1.750em; }
h4, .uk-h4 		{ font-size:1.250em; }

p				{ line-height:1.5em; }

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

a, .uk-link	{ color:var(--primary); }
	a:hover, .uk-link:hover { color:inherit; text-decoration:underline; }

em 				{ color:inherit; font-weight:500 }

blockquote	{ font-style:normal; color:inherit; }
	blockquote cite { font-style:normal; }

.font-primary	{ font-family:var(--priamry-font); }
.font-secondary { font-family:var(--secondary-font); }

/* #UIKit Styles
================================================== */
.uk-text-default 	{ color:var(--text); }
.uk-text-contrast	{ color:var(--white) !important; }
.uk-text-tertiary 	{ color:var(--tertiary) !important; }

.uk-text-lead		{ color:inherit; font-size:1.2em; font-weight:600; }

.uk-background-dark, .uk-section-dark { background-color:var(--dark); color:var(--white); }
.uk-background-muted, .uk-section-muted { background-color:var(--light); color:var(--secondary); }

.uk-button { border:0; text-transform:uppercase; font-family:var(--primary-font); font-weight:600; letter-spacing:3%; line-height:1em; padding:15px 40px; border-radius:25px; background:var(--white); color:var(--dark); transition: all 0.3s ease-in-out; }
	.uk-button:hover { background:var(--orange); color:var(--white); }

.uk-button-primary { background:var(--primary); color:var(--white); }
.uk-button-dark { background:var(--dark); color:var(--white); }

.uk-card { color:inherit !important; }
.uk-card.card-orange { background: #DB742C; color:var(--white) !important; }

.uk-height-small { height:135px; }

/* #Page Styles
================================================== */
.header { border-bottom:1px solid rgba(255,255,255,0.25); padding-top:0; padding-bottom:0; }
	.header .uk-grid > * { padding-top:15px; padding-bottom:15px; border-right:1px solid rgba(255,255,255,0.25); }
	.header .uk-grid > *:last-child { border:0; }

.logo { max-width:600px; width:100%; }

.ticker { padding:20px 0; color:var(--primary); font-size:1.5em; line-height:1.1em; display:flex; gap:10px; }

.details { border-top:1px solid rgba(255,255,255,0.25); font-size:1.5em; }
	.details .items > * { padding:25px 25px; border-right:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; }
	.details .items > *:last-child { border:0; }

.sup-title { font-weight:700; text-transform:uppercase; letter-spacing:8%; color:#363636; }
.sup-title + *  { margin-top:0px; }

.bg-orange-gradient { background: linear-gradient(180deg, #FDBE4D 0%, #FF9A53 100%); }
.bg-purple { background:var(--purple); color:var(--white); }
.bg-teal { background:var(--teal); color:var(--white); }

.overlay-dark { --tile-image: none; background-color:rgba(0, 52, 102, 1); background-image: linear-gradient(0deg, rgba(0, 52, 102, 0.77), rgba(0, 52, 102, 0.77)), linear-gradient(0deg, rgba(0, 32, 67, 0.74), rgba(0, 32, 67, 0.74)), linear-gradient(0deg, #000, #000), var(--tile-image); background-blend-mode: color, normal, color, normal; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden;  }
	.overlay-dark.hover { transition: all 0.3s ease-in-out; }
	.overlay-dark.hover:hover { background-image:none; }
.overlay-blue { background: rgba(21, 120, 193, 0.91); }


:root{ --timeW: 75px; --headerH: 110px; --slotH: 18px; }
.schedule-wrap { display: grid; grid-template-columns: var(--timeW) 1fr 1fr; gap:20px; align-items: start; position: relative; }

/* Times */
.times{ padding-top: var(--headerH); grid-column: 1; grid-row: 1; }
.time { position: relative; width: var(--timeW); height: calc(var(--slotH) * 4); font-weight: 700; letter-spacing: .06em; font-size: .875em; line-height:0; }

/* Stages */
.stage { grid-row:1; z-index:1; }
.stage-orange{ background: var(--orange); grid-column: 2; }
.stage-teal{ background: var(--teal); grid-column: 3; }
.stage-header{ height: var(--headerH); display: flex; align-items: center;  justify-content: center; text-align: center; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size:1.5em; padding: 0 20px; }
	.stage-header .sponsor { font-size:.75rem; font-weight:400; letter-spacing:.02em; }
	.stage-header .sponsor a { color:inherit; text-decoration:underline; }
	.stage-header .sponsor a:hover { text-decoration:none; }
.stage-body { position: relative; padding: 20px 18px 22px; height: var(--timelineH, 0px); }
.stage-body::before { content:""; position:absolute; inset: 0; pointer-events:none; background: repeating-linear-gradient( to bottom,  rgba(255,255,255,.45) 0px, rgba(255,255,255,.45) 2px, transparent 2px, transparent calc(var(--slotH) * 4)); z-index: 1; width:calc(100% + 28px); left:-14px; }

/* Acts */
.act { position:absolute; left:10px; z-index:2; width:calc(100% - 20px); display:flex; align-items:center; justify-content:center; text-align:center;  padding: 0 54px 0 18px; box-sizing: border-box; }

.stage-orange .act { background: #B15B20; }
	.stage-teal .act { background: #1F768A; }

.act-name { font-size:1.00em; font-weight:500; line-height:1em; }
.act-time { font-size:0.75em; font-weight:700; line-height:1em; margin-top:3px; }

.act-icon { position: absolute; right: 16px; width: 22px; height: 22px; opacity: .95; }

.pad-right { padding-right:50px; }

.signup-box { background:rgba(255,255,255,.9); padding:25px; border-radius:15px; }
	.signup-box label { display:block; font-size:.75em; font-weight:500; text-transform:uppercase; letter-spacing:1px; }
	.signup-box input[type="text"], .signup-box input[type="email"], .signup-box input[type="tel"], .signup-box textarea { background:none; border:2px solid var(--dark); width:100%; padding:5px 15px; min-height:40px; box-sizing:border-box; }

.video-mask { 
  --mask: url('/spring-arts/images/sf-mask.svg');
  -webkit-mask-image: var(--mask); mask-image:var(--mask);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-mode: luminance; mask-mode: luminance; overflow: hidden; position: relative;
}
.video-mask video { width: 100%; height: 100%; display: block; object-fit: cover; }

.ticker { overflow: hidden; width: 100%; position: relative; padding:30px 0; }
.ticker-track{ display: flex; gap: 40px; width: max-content; animation: ticker-scroll 25s linear infinite; }
.ticker-track > div { white-space: nowrap; font-weight: 500; font-size: 1.75rem; position:relative; }
.ticker-track > div:after { content:''; position:absolute; top:0; bottom:0; right:-20px; margin:auto 0; display:inline-block; height:7px; width:7px; background:var(--primary); }

.featured-artist { position:relative; overflow:hidden; }
	.featured-artist .overlay { position:absolute; top:100%; left:0; width:100%; height:100%; border-top:3px solid var(--dark); transition: all 0.3s ease-in-out; }
	.featured-artist:hover { cursor:pointer !important; }
	.featured-artist:hover .overlay { top:calc(100% - 3px); }
	.featured-artist.active .overlay { top:0; }

/* animation */
@keyframes ticker-scroll{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.main { padding-right:130px; }

.sidebar { position:fixed; top:0; right:0; width:130px; height:100vh; overflow:auto; z-index:1000; box-shadow:0 0 30px rgba(0,0,0,0.3); box-sizing:border-box; padding:2.25rem 10px; text-align:center; transition: right 250ms ease; background:var(--white); }
	.sidebar .main-nav { list-style:none; padding:0; margin:0 0 25px; }
	.sidebar .main-nav > li { margin-bottom:10px; line-height:1.2em; }
	.sidebar .main-nav > li > a { font-weight:700; }

	.sidebar .main-nav > li > ul { list-style:none; padding:0; margin:10px 0 25px; }
	.sidebar .main-nav > li > ul > li { margin:10px 0; }
	.sidebar .main-nav > li > ul > li > a { font-size:.875em; font-weight:400; }
	
	.sidebar .main-nav li.active { background:#f2f2f2; }

	.sidebar .uk-button { padding:8px 15px; font-size:.75em; }

	.sidebar.is-open{ right: 0; }

.footer { position:fixed; bottom:0; width:100%; left:0; background:var(--white); z-index:1001; padding:10px; box-sizing:border-box; }
	.footer img { width:110px; }
	.footer .uk-button { padding:8px 15px; font-size:.75em; max-width:130px; }

/* #Media Queries
================================================== */
	@media only screen and (max-width: 1220px) {

	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		h1, .uk-h1 		{ font-size:1.750em; }
		h2, .uk-h2 		{ font-size:1.750em; }
		h3, .uk-h3 		{ font-size:1.250em; }
		h4, .uk-h4 		{ font-size:1.000em; }

		:root{ --timeW: 50px; --headerH:75px; --slotH: 15px; }
		.stage-header{ font-size:.875em; letter-spacing:1%; line-height:1em; padding:0 5px; }
		.act {  padding:0 5px; }
		.act svg { display:none; }
		.act-name { font-size:.65em; }
		.act-time { font-size:.50em; }

		.main { padding-right:0; }
		.sidebar { right:-130px; }

		.pad-right { padding-right:0; }

		.header .uk-grid > * { border-right:0; }

		.details { font-size:1.2em; }
		.details .items > * { padding:15px 15px; border-bottom:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; }
		
		.details .items > *:nth-child(2), .details .items > *:nth-child(4) { border-right:0; }
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		:root{ --timeW: 25px; --headerH:75px; --slotH: 15px; }
		.time { font-size: .5em; }
		.stage-header .sponsor { font-size:.5rem; line-height:1em; margin-top:5px; letter-spacing:.01em; }
		.act-name { font-size:.60em; }
		.act-time { font-size:.45em; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */


/*	@font-face {
	    font-family: 'FontName';
	    src: url('/spring-arts/fonts/FontName.eot');
	    src: url('/spring-arts/fonts/FontName.eot?iefix') format('eot'),
	         url('/spring-arts/fonts/FontName.woff') format('woff'),
	         url('/spring-arts/fonts/FontName.ttf') format('truetype'),
	         url('/spring-arts/fonts/FontName.svg') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/