/* CSS INDEX
------------
CSS HEADER
CSS NAV
CSS HEAD ANIMATION
CSS MAIN
CSS LINKS
CSS GALLERY
CSS BRANDING
CSS SPONSORS
CSS FOOTER
CSS SCROLL TO TOP
CSS KNACK
*/

u { display: none; }
* { margin: 0; padding: 0; }
header { display: block; }
a img { border-style: none; }

html {
	height: 100%;
	scroll-behavior: smooth;
	}

body {
	font-family: 'Barlow Condensed', sans-serif;
	background: #fdfdfd;
	color: #444;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	}

p {
	padding-top: 1em;
	line-height: 1.5;
	}
#access article p, #access article ul { font-size: 18px;}
@media screen and (min-width: 1200px) { #access article p, #access article ul { font-size: 22px; } }
@media screen and (min-width: 1800px) { #access article p, #access article ul { font-size: 24px; } }

li { line-height: 1.5; }

ol, ul { margin: 0.5em 0 0.5em 1em; }

strong { font-weight: 700; }
em { font-style: italic; }

#index h1,
#gallery h1,
#branding h1,
#access h1 {
	text-align: center;
	color: #333;
	font-weight: 400;
	font-size: 24pt;
	margin-top: 1em;
	}
#access h1 {
font-weight: 700;
color: navy;
}
/* @media screen and (max-width: 1000px) { h1 { font-size: 2em; } }
@media screen and (max-width: 800px) { h1 { font-size: 1.7em; } }
@media screen and (max-width: 600px) { h1 { font-size: 1.5em; } } */
h2, h3 {
color: #00284a;
font-weight: 700;
}
h2 { font-size: 1.6em; }
#access h2 { margin-top: 1em; }
h3 { font-size: 0.9em; }

.img {
	text-align: center;
	font-size: 90%;
	}
.right {
	float: right;
	margin: 0 0 0.5em 1em;
	}
.left {
	float: left;
	margin: 0 1em 0.5em 0;
	}
.full { width: 100%; }

.cleft { clear: left; }
.cright { clear: right; }
.cboth { clear: both; }
.hide { display: none; }


/*	=============================================================================
	CSS HEADER
	============================================================================= */

header#kn-app-header { display: none; }

header, .header {
	width: 100vw;
	height: 38vw;
	position: relative; z-index: 2;
	background-color: #000;
	background-repeat: no-repeat;
/*	background-image: conic-gradient(white, purple, red, orange ,red, purple ,white); */
	background-image: url(../images2024/header2024e.jpg);
    background-size: cover;
    box-sizing: border-box;
    display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 27vw 8.4vw 4vw;
	font-size: 1.2vw;
	}
#book_book header, #book_book .header { background-image: url(../images2024/header2024d.jpg); }

@media screen and (max-width: 600px) {
  header, .header { height: 42vw; }
  }

#header-logo { grid-row: 1; }

#header-strapline {
  font-style: normal;
	text-align: center;
	grid-row: 2;
	}
#header-strapline p { padding: 0; }
.lmf_date {
	position: relative; left: -0.4vw;
	font-size: 3.2vw;
	font-weight: 700;
	color: #fff;
	}
.lmf_date span {
	font-size: 50%;
	text-transform: uppercase;
	vertical-align: top;
	position: relative; top: 0.3em;
	}
#lmf_events {
	font-size: 1.95vw;
	color: #ffc;
	letter-spacing: 0.06rem;
	font-weight: 400;
	position: relative; top: -0.2em; left: -0.4vw;
	}
header header nav { grid-row: 3;}

@media screen and (min-width: 1300px) {
#lmf_events { letter-spacing: 0.08rem; }
}

@media screen and (min-width: 1800px) {
#lmf_events { letter-spacing: 0.11rem; }
}

@media screen and (max-width: 800px) {
#lmf_events {
	letter-spacing: 0;
	font-size: 2.2vw;
	}
}

#header-logo img {
	width: 30vw;
	display: block;
	margin: 1vw auto 0;
	}

/*	=============================================================================
	CSS NAV
	============================================================================= */

header nav ul, .header nav ul {
	list-style: none;
	margin: 0;
	font-size: 1.5vw;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	}

.box { height: 4vw; }
.box a {
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 100%;
	padding-top: 0.3vw;
	text-align: center;
	color: #000;
	background-color: #CFB500;
	text-decoration: none;
	overflow: hidden;
	}
.box span { position: relative; top: -5px; }

.box a:hover {
	border: 3px solid #630;
	border-width: 0 0 3px;
	}

.venues { color: #81cbd5; }
.acts { color: #a9c92b; }
.shows { color: #f8aa13; }
.audience { color: #f9df4d; }

.apply_link a::before,
.venues_link a::before,
.acts_link a::before,
.schedule_link a::before,
.book_link a::before,
.joinin_link a::before,
.events_link a::before,
.home_link a::before,
.contact_link a::before,
.gallery_link a::before {
	font-family: 'Material Icons';
	font-size: 2vw;
	margin-right: 2px;
	color: #000;
	}
.apply_link a::before { content: 'mic' }
.venues_link a::before { content: 'room' }
.acts_link a::before { content: 'headset_mic' }
.schedule_link a::before { content: 'schedule' }
.book_link a::before { content: 'book_online' }
.joinin_link a::before { content: 'emoji_people' }
.events_link a::before { content: 'people' }
.home_link a::before { content: 'home' }
.contact_link a::before { content: 'mail' }
.gallery_link a::before { content: 'photo_library' }

@media screen and (max-width: 800px) {
	header nav ul, .header nav ul { font-size: 2vw; }
	.apply_link a::before,
	.venues_link a::before,
	.acts_link a::before,
	.schedule_link a::before,
	.book_link a::before,
	.joinin_link a::before,
	.events_link a::before,
	.home_link a::before,
	.contact_link a::before,
	.gallery_link a::before { font-size: 2.5vw; }
	}
/*
@media screen and (max-width: 600px) {
	header nav ul, .header nav ul { font-size: 2.5vw; }
	.box a span { position: relative; top: -3px; }
	.acts_link a span {
		font-size: 2.3vw;
		left: -2px;
		}
	}
*/
@media screen and (max-width: 600px) {
	header nav ul, .header nav ul { font-size: 3vw; }
	.box a span { top: -5px; }
	.acts_link, .events_link { line-height: 1; }
	.acts_link a span, .events_link a span { top: 0; }
/*	.acts_link a span { font-size: 3vw; } */
	.box {
		position: relative;
		height: 12vw;
		}
	.box a { padding-top: 1vw; }
	.apply_link a::before,
	.venues_link a::before,
	.acts_link a::before,
	.schedule_link a::before,
	.book_link a::before,
	.joinin_link a::before,
	.events_link a::before,
	.contact_link a::before,
	.gallery_link a::before,
	.home_link a::before {
		position: absolute; top: 1.8vw;
		font-size: 8vw;
		}
	.book_link a::before,
	.contact_link a::before,
	.gallery_link a::before,
	.acts_link a::before{ top: 2.5vw; font-size: 7vw; }
	
	.events_link a::before  { top: 7vw; font-size: 4vw; }
	
	.venues_link a::before { left: 3vw; }
	.apply_link a::before { left: 3vw; }
	.acts_link a::before { left: 5vw; top: 4vw; }
	.schedule_link a::before { left: 3vw; }
	.book_link a::before { left: 3.5vw; }
	.joinin_link a::before { left: 3vw; }
	.events_link a::before { left: 5vw; }
	.contact_link a::before { left: 21vw; }
	.gallery_link a::before { left: 3vw; }
	.home_link a::before { left: 21vw; }
	}

/*	=============================================================================
	CSS ICONS
	============================================================================= */

.icons::before {
font-family: 'Material Icons';
font-size: 24px;
margin-right: 2px;
position: relative; top: 5px;
color: #fff;
}
.car::before { content: 'directions_car' }
.bus::before { content: 'directions_bus' }
.train::before { content: 'train' }

#map article { text-align: center; }
#map article img { max-width: 100%; }

/*	=============================================================================
	CSS HEAD ANIMATION
	============================================================================= */

.header {
	position: fixed; top: -24vw; left: 0; z-index: 3;
	height: 1vw;
	grid-template-rows: 6vw 4vw;
	}

.head {
	position: relative;
	grid-row: 1;
	}
.header .lmf_date {
	letter-spacing: .1rem;
	color: #fff;
	position: relative; top: -1.5vw;
	text-align: center;
	}

#alt-logo {
	position: absolute; top: 2vw; left: 1vw;
	height: 5vw;
	}
.header nav { grid-row: 2; }

@media screen and (max-width: 600px) {
	.header { grid-template-rows: 8vw 4vw; }
	.head { font-size: 3.3vw; }
	#alt-logo { height: 6vw; }
	}
@media screen and (max-width: 400px) {
	#alt-logo { height: 8vw; }
	.header {
		height: 16vw;
		grid-template-rows: 11vw 5vw;
		}
	}

@keyframes dropfauxheader {
	0% { top: -110px; }
	100% { top: 0; }
	}

@media (prefers-reduced-motion: no-preference) {
	.header-animation {
		animation-name: dropfauxheader;
		animation-duration: 1s;
		-webkit-animation-fill-mode: forwards;
		}
	}


/*	=============================================================================
	CSS MAIN
	============================================================================= */

main {
	margin: 2em 5vw 1vw;
	position: relative; z-index: 1;
	}
#acts main, 
#events main,
#outdoors main,
#schedule main,
#venues main,
#workshops main,
#youth main { margin: 2em 0 1vw; }

#gallery main { margin: 2em 0.7vw 1vw; }

article { margin: 0 5vw 0; }
#index article {
	font-size: 14pt;
	text-align: center;
	}

.script_intro {
	font-weight: 500;
	font-size: 150%;
	color:#777;
	}

@media screen and (min-width: 1800px) {
	#index article { font-size: 24pt; }
	#index h1 { font-size: 36pt; }
	.script_intro { font-size: 40pt; }
    #access article { font-size: 22px;}
    #access h1 { font-size: 38px; }
	}

main nav div {
	background: #00375c;
	width: 16em;
	height: 3em;
	margin: 1em auto;
	}
main nav div a {
	display: block;
	width: 14em;
	height: 1em;
	color: #000;
	background-color: #CFB500;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 1em;
	font-weight: 700;
	}

#announce {
  width: 550px;
  margin: auto;
  padding: 1em;
  border: 1px solid #ddd;
}
#announce_img img { width: 400px; }

/* @media screen and (max-width: 1000px) { .script_intro { font-size: 1.7em; } }
@media screen and (max-width: 800px) { .script_intro { font-size: 1.5em; } }
@media screen and (max-width: 600px) { .script_intro { font-size: 1.3em; } } */

/*	=============================================================================
	CSS LINKS
	============================================================================= */
	
#links {
	margin: 6vw 0;
	display: grid;
	gap: 5vw;
	grid-template-columns: repeat(2, 1fr);
	}

.linkBlock {
	box-sizing: border-box;
	height: 33.5vw;
	background-size: 100%;
	box-shadow: 3px 3px 5px #abc;
	}

.linkBlock a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: white;
	text-decoration: none;
	}
.linkBlock a::before {
	position: absolute; top: 0.5em; left: 0.5em;
	content: attr(title);
	font-size: 2vw;
	}
#links p {
	font-size: 1.1vw;
	padding-top: 0.2vw;
	}

.links-detail {
	box-sizing: border-box;
	position: relative; top: 26vw;
	padding: 0.6vw 1vw;
	height: 7.5vw;
	background-color: #aaa;
	}

@media screen and (min-width: 1800px) {
	#links p { font-size: 1.3vw; }
	.links-detail h2 { font-size: 1.5vw; }
	.links-detail h3 { font-size: 1.4vw; }
	}

@media screen and (max-width: 1000px) {
	#links p { font-size: 1.2vw; }
	}

@media screen and (max-width: 800px) {
	.linkBlock { height: 34vw; }
	.links-detail { height: 8vw; }
	.links-detail h2 { font-size: 1.9vw; }
	.links-detail h3 { font-size: 1.6vw; }
	#links p { font-size: 1.3vw; }
	#spotify_link h2 {
		padding: 0 0.4em;
	 font-size: 1em;
	}
	}

@media screen and (max-width: 500px) {
	#links { grid-template-columns: repeat(1, 1fr); }
	.linkBlock { height: 63vw; }
	.links-detail { top: 50.5vw; height: 12.5vw; }
	.links-detail h2 { font-size: 3vw; }
	.links-detail h3 { font-size: 2.6vw; }
	#links p { font-size: 2.5vw; }
	.linkBlock a::before {	font-size: 4vw; }
	}

#venues_link { background-image: url("../images2024/venues.jpg") }
#acts_link { background-image: url("../images2024/lmf2024_01.jpg") }
#outdoor_link { background-image: url("https://lancastermusicfestival.com/images2023/outdoor.jpg") }
#young_link { background-image: url("https://lancastermusicfestival.com/images2023/youth.jpg") }
#workshops_link { background-image: url("../images2024/lmfweb01.jpg") }
#events_link { background-image: url("../images2024/lmf2024_08.jpg") }
#itineraries_link { background-image: url("https://lancastermusicfestival.com/images2023/home_curated.jpg") }
#access_link { background-image: url("https://lancastermusicfestival.com/images2023/accessible.jpg") }
#map_link { background-image: url("https://lancastermusicfestival.com/images2023/map2023_thumb.jpg") }

#venues_link .links-detail { background: #ff671f; }
#acts_link .links-detail { background: #E03E52; }
#events_link .links-detail { background: #FF9E1B; }
#workshops_link .links-detail { background: #CFB500; }
#outdoor_link .links-detail { background: #81cbd5; }
#young_link .links-detail { background: #a9c92b; }
#itineraries_link .links-detail { background: #a9c92b; }
#access_link .links-detail { background: #cfb500; }
#map_link .links-detail { background: #81cbd5; }

/*	=============================================================================
	CSS GALLERY
	============================================================================= */

#gallery_preview {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	}
.item img {
	width: 90%;
	margin: 5%;
	}

@media screen and (max-width: 800px) {
#gallery_preview {
	grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
#gallery_preview {
	grid-template-columns: 1fr;
	}
}

/*	=============================================================================
	CSS BRANDING
	============================================================================= */

#branding h1 { font-weight: 700; }
#branding h2 {
	font-weight: 400;
	margin: 1em 0 0;b
}
#branding article { margin-bottom: 2em; }
#branding article p { font-size: 120%; }
#branding article div {
	text-align: center;
margin: 1em 0 1em;
padding: 1em 0 1em;
	border: 2px solid #ccc;
	border-width: 2px 0 2px;
}
#branding article div img {
	max-width: 90% !important;
	margin-bottom: 1em;
}

#branding table { width: 90%; }
#branding td {
	width: 30%;
	text-align: center;
	vertical-align: top;
	padding-top: 10px;
}
#branding td img { max-width: 100px; }

/*	=============================================================================
	CSS SPONSORS
	============================================================================= */

#sponsors {
background: #CFB500;
padding: 1em;
}

#sponsors div img { max-height: 8vw; }
#sponsors h3 { color: #fff; }

#sponsors h3 { font-size: 1vw; }
	
#sponsors {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	}

#partner_head {
	grid-column: 1 / span 3;
	grid-row: 1;
	}
#partner_bid {
	grid-column: 2;
	grid-row: 2;
	}
#partner_brewery {
	grid-column: 1;
	grid-row: 2;
	}
#partner_monopoly {
	grid-column: 3;
	grid-row: 2;
	}
#support_head {
	grid-column: 4;
	grid-row: 1;
	}
#support_ace {
	grid-column: 4;
	grid-row: 2;
	}

@media screen and (max-width: 600px) {
#sponsors h3 {
font-size: 2vw;
text-align: center;
}
#sponsors div { width: 30vw; margin: auto; text-align: center;}
}

/*	=============================================================================
	CSS FOOTER
	============================================================================= */

footer {
	position: relative; z-index: 2;
	box-sizing: border-box;
	margin: auto;
	height: auto;
	width: 100vw;
	padding: 1vw 12vw 1vw;
	background-color: #eee;
	display: grid;
  grid-gap: 1vw;
  grid-template-columns: 1fr 1fr 19fr;
	}
	
footer a { text-decoration: none; }

footer p {
	padding: 0;
	font-size: 85%;
	}
.tw { color: #000; position: relative; top: -0.3em; }
.fb { color: #1c407c; }
.inst { color: #ef9024; }
.social::after { font-size: 2vw; }
.fb::after {
	font-family: 'Material Icons';
	content:"facebook";
	}
.inst::after {
	font-family: 'fontawesome';
	content:"\f16d";
	}
.tw::after {
	content:"𝕏";
	}
.settings::after {
	font-family: 'fontawesome';
	content:"\f013";
	}
.social:hover {
	color: #000;
	opacity: 0.5;
	}

@media screen and (max-width: 800px) {
	#index footer { padding: 1vw 25vw 1vw; }
	.social::after { font-size: 4vw; }
	}

/*	=============================================================================
	CSS SCROLL TO TOP
	============================================================================= */
	
#top_link {
	display: none;
	position: fixed;
	bottom: 20vh;
	right: 2vw;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #a9c92b;
	color: #fff;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	}

#top_link:hover {
	background-color: #f8aa13;
	}

/*	=============================================================================
	CSS KNACK
	============================================================================= */

#knack-dist_11 {
  max-width:700px;
  margin:auto
  }

.field_15,
.field_16,
.field_32,
.field_34,
.field_35,
.field_106,
.field_107,
.field_151,
.view-header { text-align: center; }

.field_106 h1 span { font-size: 0.8em; }
.field_16, .field_107 { font-size: 0.8em; }

.view-header h2.kn-title {
	color: #333;
	font-weight: 400;
	font-size: 2.5em;
	margin-top: 1em;
	}
#acts .field_32 h1 { font-size: 2em; }
#book .field_16 { text-align: left; }
.kn-info-bar { height: 1px; }
.kn-detail-body h1 { position: relative; top: 0.5em; }
.modal-card-head { visibility: hidden; height: 5em; }
.modal-card-foot { visibility: hidden; }

@media screen and (max-width: 500px) {
	#venues .field_15 h1,
	#acts .field_15 h1 { margin-top: 1em; }
	}