/* fonts */
	
	@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,500;0,600;1,300;1,500;1,600&family=Jost:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

	/*
	*    
	*  Theme Name: 	Philadelphia Sinfonia 2022
	*  Text Domain: 	sinfonia22
	*  Author: 			Zero Defect Design
	*  Author URI: 	https://zerodefectdesign.com
	* 
	*/

   /* resets */

   *, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
   html, body { height: 100%; font-size: 18px; line-height: 1.5; }
	body > footer { position: sticky; top: 100vh; }
   table { border-collapse: collapse; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
	p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
   input, button, textarea, select { font: inherit; }
	textarea { white-space: revert; }
	
	/* structure */
	
	body { background: #FFFFFF url('images/spiral.svg') center center no-repeat fixed; background-size: 105% auto; margin: 0; padding: 150px 0 0 0; text-align: center; }
	body.black { background-color: #000000; background-image: none; color: #FFFFFF; }
	body.home { padding-top: 171px; }
	.frame { padding-left: 85px; padding-right: 85px; max-width: 1400px; text-align: left; margin: 0 auto; }
	main .frame { padding-top: 42px; padding-bottom: 85px; }
	body.home main .frame { padding-bottom: 42px; }
	body.home main .frame.mainframe { padding: 0; max-width: 100%; margin: 0; }
	.hero 
	{ 
		margin-bottom: 30px; width: 100%; height: 0; padding-top: 50%; background-position: center center; background-repeat: no-repeat;
		background-size: cover;	
	}
	
	header 
	{ 
		position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(to right, #5B1400, #5B1400 50%, #210700 100%); 
		box-shadow: 0 0 15px rgba(0,0,0,0.4); z-index: 500;
	}
	header .frame 
	{ 
		padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: space-between; 
		background: linear-gradient(to right, rgba(152,90,0,0) 0px, rgba(152,90,0,1) 230px, rgba(152,90,0,0) 540px);
	}
	header a { text-decoration: none; }
	header a.ps { text-align: left; padding: 20px 0; }
	header a.ps img { width: 300px; height: auto; }
	header nav { text-align: right; }
	header #topline { padding-bottom: 10px; }
	header #topline a { color: #B98100; display: inline-block; margin-left: 1rem; }
	header #topline a:hover { color: #FFFFFF; }
	
	footer { background-color: #F2F0F0; line-height: 1.4; }
	footer .frame { padding-top: 42px; padding-bottom: 42px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px;  }
	footer .frame p { /* margin-right: 85px; margin-bottom: 33px; */ color: rgba(0,0,0,0.5); width: calc(33.3333% - 27px); }
	footer .frame p b { color: #000000; }
	footer .frame p.full { width: 100%; }
	footer a { text-decoration: none; }
	
	/* type */
	
	body { font: 400 18px/1.5 'Jost', sans-serif; color: #000000; }
	h2 { font: 300 42px/1 'Crimson Pro', serif; margin-bottom: 1.5rem; }
	h3 { font: 400 28px/1 'Crimson Pro', serif; margin-bottom: 1rem; color: #962C0C; }
	h4 { font: 600 20px/1.2 'Jost', sans-serif; margin-bottom: 1rem; }
	h6 { font: 400 18px/1.2 'Jost', sans-serif; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 1px; }
	.divided { border-bottom: 2px dotted #999999; padding-bottom: 0.5rem; margin: 1.5rem 0; }
	
	p, ul { margin-bottom: 1rem; color: rgba(0,0,0,0.7); }
	ul.event-list li { margin-bottom: 0.5rem; }
	b, strong { font-weight: 600; color: #000000; }
	.ax, b.ax, li::marker, .date, a .date, .warm, .warm b, .warm strong { color: #B98100; }
	
	/* menu */
	
	ul#menu { list-style-type: none; margin: 0; padding: 0; }
	ul#menu li { display: inline-block; list-style-type: none; margin: 0 0 0 1rem; padding: 0; position: relative; }
	ul#menu li a { color: #FFFFFF; font: 300 22px/1 'Crimson Pro', serif; display: inline-block; }
	ul#menu li a:hover { color: #EEBE00; }
	
	
	#menu li ul { display: none; position: absolute; z-index: 220; margin: 0px; padding: 0px; list-style-type: none; }
   #menu li:hover ul { display: block; text-align: left; padding-top: 9px; }
	#menu > li.has-submenu:hover::before 
	{ 
		position: absolute; display: block; content: ""; width: 0; height: 0; top: 28px; left: 10px; 
		border-bottom: 10px solid #8E4E00; border-left: 5px solid transparent; border-right: 5px solid transparent;
	}
   #menu li ul li { margin: 0px; padding: 0px; list-style-type: none; text-transform: none; display: block; float: none; }
   #menu li ul li a 
   { 
      color: #FFFFFF; display: block; font: 400 17px/1.2 'Jost', sans-serif; padding: 7px 10px; 
      background-color: #8E4E00; background-image: none; letter-spacing: 0; margin: -1px 0px; 
		white-space: nowrap;
   }
   #menu li ul li:first-child { border-top: 6px solid #8E4E00; }
   #menu li ul li:last-child { border-bottom: 6px solid #8E4E00; }
   #menu li ul li a:hover { color: #FFFFFF; background-color: #B98100; }
	
	/* search button */
	
	.searchbtn { font-size: 2em; display: inline-block; width: 0.4em; box-sizing: content-box; height: 0.4em; border: 2px solid #FFFFFF;
		position: relative; top: 1px; border-radius: 0.35em; cursor: pointer; }
	.searchbtn:before { content: ""; display: inline-block; position: absolute; right: -5px; bottom: -3px; border-width: 0;
      background: #FFFFFF; width: 9px; height: 2px; transform: rotate(45deg); }
	.searchbtn:hover { border-color: #EEBE00; }
	.searchbtn:hover:before { background-color: #EEBE00; }
	
	/* mobile nav button */
	
	.menubtn 
	{ 
		font-size: 2em; height: 0.4em; display: inline-block; width: 0.6em; box-sizing: content-box; border-top: 2px solid #FFFFFF;
		border-bottom: 2px solid #FFFFFF; cursor: pointer; position: relative; top: 2px; margin-left: 15px;
	}
	.menubtn:before 
	{ 
		content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; border-bottom: 2px solid #FFFFFF;
		margin-top: 1px;
	}
	.menubtn:hover, .menubtn:hover:before { border-color: #EEBE00; }

	/* links and controls */
	
	a, a b, a strong { color: #555E8F; } 
	
	a:hover, a:hover b, a:hover strong { color: #5B1400; }
	.breadcrumb { display: block; margin: 0 0 15px 0; }
	h6 a, .breadcrumb a { text-decoration: none; }
	a h3 { color: #000000; }
	.breadcrumb a { display: inline-block; margin: 0 0.5rem 0 0; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; }
	.breadcrumb a::after 
	{ 
		display: inline-block; margin: 0 0 0 0.5rem; color: #B98100; 
		font: 600 24px/1 'Crimson Pro', serif; content: '~';
	}
	a.social 
	{ 
		display: inline-block; background-position: center center; width: 24px; height: 24px;
		background-repeat: no-repeat;	background-size: auto 50%; border-radius: 50%;
		position: relative; top: 5px; border: 2px solid #B98100;
	}
	a.social-linkedin { background-image: url('images/icon-linkedin.svg'); }
	a.social-instagram { background-image: url('images/icon-instagram.svg'); background-size: auto 60%; background-position: center 45%; }
	a.social-facebook { background-image: url('images/icon-facebook.svg'); }
	a.social-twitter { background-image: url('images/icon-twitter.svg');  }
	a.social-youtube { background-image: url('images/icon-youtube.svg'); background-size: auto 40%; background-position: 55% center; }
	a.social-linkedin:hover { background-color: #0A66C2; border-color: #0A66C2; }
	a.social-instagram:hover { background-color: #F401D1; border-color: #F401D1; }
	a.social-facebook:hover { background-color: #4267B2; border-color: #4267B2; }
	a.social-twitter:hover { background-color: #55ACEE; border-color: #55ACEE; }
	a.social-youtube:hover { background-color: #DD0809; border-color: #DD0809; }
	header #topline a.social { margin-left: 0.5rem; }
	body .wp-block-buttons>.wp-block-button, .wp-block-button { margin-bottom: 1rem; }
	.btn, a.btn, button, a.wp-block-button__link
	{ 
		border: 0; background-color: #555E8F; color: #FFFFFF; font-size: 18px; line-height: 1; padding: 6px 12px; cursor: pointer; 
		white-space: nowrap; text-decoration: none; border-radius: 0;
	}
	.btn:hover, a.btn:hover, button:hover, a.wp-block-button__link:hover { color: #FFFFFF; background-color:#B98100; }
	
	/* tiles */
	
	.tiles { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
	.tile { width: calc(33.3333% - 27px); }
	.tile.double { width: calc(66.666% - 67px); }
	.tile a, a.tile { text-decoration: none; }
	.tile img, .tile .img { margin-bottom: 12px; }
	.tile .img 
	{ 
		width: 100%; height: 0; padding-top: 66.4%; background: #767DA0 url('images/slug.svg') center center no-repeat; background-size: cover; 
		position: relative;
	}
	.tiles-portrait .tile .img { padding-top: 100%; background-position: center top; }
	.tile h4 { margin-bottom: 4px; }
	.tile a { position: relative; }
	.tile .badge 
	{ 
		position: absolute; top: 0; left: 0; display: block; color: #D7D3E4; background-color: rgba(0,0,0,0.75); padding: 5px 8px 5px 8px; 
		font-size: 17px; line-height: 1; font-family: 'Crimson Pro', serif; font-weight: 400;
		
	}
	.announce { color: #FFFFFF; background-color: #B98100; font-weight: 400; display: block; text-decoration: none; font-size: 20px; }
	a.announce:hover { color: #FFFFFF; background-color: #000000; }
	body.home .announce .frame { padding-top: 15px; padding-bottom: 15px; }
	
	/* blockquotes */
	
	blockquote { margin: 2rem 0; }
	blockquote p { color: #BE955C; font-size: 130%; line-height: 1.4; font-family: 'Crimson Pro', serif; font-style: italic; }
	blockquote cite { display: block; text-align: right; }
	blockquote cite::before { content: '~'; display: inline-block; margin-right: 0.5rem; }
	
	/* bars */
	
	a.bar 
	{ 
		display: block; padding: 60px 30px 30px 30px; margin: 0 0 20px 0; text-decoration: none; 
		background-color: #232742; background-position: center center; background-repeat: no-repeat; background-size: cover;
	}
	a.bar.bar-ps { background-image: url('images/bar-cymbals.jpg'); }
	a.bar.bar-psp { background-image: url('images/bar-harp.jpg'); }
	a.bar.bar-strings { background-image: url('images/bar-strings.jpg'); }
	a.bar.bar-psco { background-image: url('images/bar-fabric.jpg'); }
	a.bar h3 { color: #EEBE00; margin: 0; }
	a.bar .info { color: rgba(255,255,255,0.7); line-height: 1.2; margin: 10px 0 0 0; }
	a.bar:hover h3, a.bar:hover .info { color: #FFFFFF; text-shadow: 0px 0px 10px rgba(255,204,0,9); }
	a.bar:hover h3 { color: #FFCF33; }
   @media screen and (max-width: 900px) 
	{ 
		a.bar { padding: 30px 15px 15px 15px; } 
		a.bar h3 { font-size: 22px; }
		a.bar .info { font-size: 16px; }
	}
	
	/* zones */
	
	.reversed { background-color: #000000; }
	.reversed, .reversed p { color: #FFFFFF; }
	.reversed h3 { color: #EEBE00; }
	
	body.home .zone { padding: 42px 0; }
	.zone.welcome {  background: #43475f url('images/spiral-reversed.svg') center center no-repeat fixed; background-size: 105% auto; }
	.zone.welcome.welcome2 { background: transparent; }
	.zone.welcome .frame { display: flex; align-items: center; gap: 42px; }
	.zone.welcome .frame > div { width: calc(50% - 21px); }
	.zone.welcome p { color: rgba(255,255,255,0.8); margin-bottom: 0; }
	.zone.welcome.welcome2 p { color: rgba(0,0,0,0.8); }

	/* mailchimp signup */
	
	.zone.signup { background: #767da0 url('images/bg-violin.jpg') center center no-repeat; background-size: cover; }
	#mc_embed_signup #mc_embed_signup form { position: relative; padding: 0 !important; }
	#mc_embed_signup_scroll { display: flex; align-items: flex-end; gap: 20px; width: 100%; }
	#mc_embed_signup_scroll .mc-field-group { border: 0; margin: 0; padding: 0; flex-grow: 1; }
	#mc_embed_signup_scroll .mc-field-group:last-child { flex-grow: 0; }
	#mc_embed_signup_scroll label { display: block; font-size: 15px; margin: 0 0 4px 0; opacity: 0.7;  }
	#mc_embed_signup_scroll input { width: 100%; height: auto; border: 0; color: #000000; background-color: rgba(255,255,255,0.6); font-size: 18px; line-height: 1; padding: 6px; }
	#mc_embed_signup_scroll .btn { border: 0; background-color: #B98100; color: #FFFFFF; font-size: 18px; line-height: 1; padding: 9px 12px; cursor: pointer; }
	#mc_embed_signup_scroll .btn:hover { background-color: #EEBE00; }
   @media screen and (max-width: 900px)
   {
		#mc_embed_signup_scroll { flex-wrap: wrap; }
		#mc_embed_signup_scroll .mc-field-group:first-child { width: 100%; }
	}
	main .mainframe .signup .frame { padding: 42px; }
	
	/* paypal forms */
	
	.paypalform table td { padding: 10px 20px 10px 0px; }
	.paypalform table td:first-child  { width: 240px; }
	.paypalform table td:last-child { padding-right: 0; }
	.paypalform table td select { width: 300px; }
	.paypalform table td:nth-child(3) select { width: auto; }
	
	
	/* sliders */
	
	.slide-container { position: relative; }
	.slide 
	{ 
		width: 100%; height: 50vw; max-height: 75vh; position: relative; 
		background-color: #000000; background-position: center center; background-repeat: no-repeat; background-size: cover; 
	}
	.slide .caption 
	{ 
		position: absolute; bottom: 0; left: 0; right: 0; padding: 90px 0 21px 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.85) 75%); 
	}
	.slide .caption .frame { text-align: center; color: #FFFFFF; }
	.slide .caption .frame h2 { margin-bottom: 10px; line-height: 1; }
	.slide .caption .frame .info { color: #BFBCCB; }
	
	/* images */
	
	img.inpage { margin-bottom: 1rem; }
	img.alignright { float: right; width: calc(50% - 20px); height: auto; margin: 0 0 40px 40px; }
		
	
	/* video embeds */
	
	.video-container { overflow: hidden; height: 0; padding-bottom: 56.25%; position: relative; z-index: 20; }
   .video-container iframe { position:absolute; left: 0; top: 0; height: 100%; width: 100%; }

   /* mobile navigation + search modal */
   
   #mobilemenu, #searchmodal { position: fixed; top: 0; right: 0; left: 0; z-index: 99; overflow: scroll; height: 0px; opacity: 0; transition-duration: 0.3s; }
   #mobilemenu { background-color: #767DA0; }
	#searchmodal { background-color: #FFFFFF; }
	#mobilemenu .frame, #searchmodal .frame { padding-top: 0px; padding-bottom: 0px; }
   #mobilemenu.active, #searchmodal.active { height: 100vh; opacity: 1; }
   #mobilemenu.active .frame, #searchmodal.active .frame { padding-top: 180px; padding-bottom: 25px; }

   #mobilemenu a { color: #FFFFFF; display: block; font-size: 20px; line-height: 20px; padding: 10px 25px 10px 0; font-weight: 400; text-decoration: none; }
   #mobile-menu { list-style-type: none; margin: 0px; padding: 0px; color: #FFFFFF; }
   #mobile-menu > li { border-bottom: 1px solid rgba(255,255,255,0.33); padding-right: 50px; }
   #mobile-menu > li.menu-item-has-children 
   { 
      background: transparent url('images/icon-down.svg') right 9px no-repeat; background-size: 13px auto; 
      cursor: pointer;
   }
   #mobile-menu > li.menu-item-has-children.expanded { background-image: url('images/icon-up.svg'); }
   #mobile-menu > li > ul { display: none; }   
   #mobile-menu > li.expanded > ul { display: block; list-style-type: disc; margin-bottom: 15px; }
   #mobile-menu > li > ul > li a { font-size: 18px; line-height: 1; padding: 7px 0px; }  
	#mobile-menu li::marker { color: #000000; }
   
   #searchmodal form { white-space: nowrap; display: flex; align-items: flex-end; gap: 10px; margin-top: 25px; margin-bottom: 25px; }
   #searchmodal input:focus { outline: none; }
   #searchmodal input#s 
	{ 
		width: 100%;  background-color: transparent; border: none; border-bottom: 1px solid #666666; 
		color: #000000; font-weight: 400; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0px;	
	}
   #searchmodal.active::after 
   { 
      position: fixed; left: 0px; bottom: 0px; right: 0px; height: 100px; z-index: 501;
      content: " "; display: block; background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
   }

   #autoresults h3 { margin-bottom: 20px; }
	.searchresult { text-decoration: none; display: flex; align-items: center; gap: 25px; margin-bottom: 25px; }
	.searchresult .rthumb 
	{ 
		width: 90px; height: 60px; background: #767DA0 url('images/slug.svg') center center no-repeat; background-size: cover; 
		flex-grow: 0; flex-shrink: 0; align-self: flex-start;
	}
	.searchresult .rtitle { font: 600 24px/1.2 'Crimson Pro', serif; }
	.searchresult .rtype { font-size: 16px; font-family: 'Jost', sans-serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #000000; margin-bottom: 2px; }
	.searchresult .rinfo { color: #B98100; }
	
	/* wordpress admin */
	
	body.admin-bar header { top: 32px; }
	@media screen and (max-width: 772px) { body.admin-bar header { top: 46px; } }
	
	/* mobile considerations */
	
	@media screen and (max-width: 1200px)
   {
		body { padding-top: 120px; }
		body.home { padding-top: 136px; }
		.frame { padding-left: 42px; padding-right: 42px; }
		.frame.hero { padding: 0; max-width: 100%; }
		header a.ps img { width: 220px; }
   }  

   @media screen and (min-width: 901px)
   {
		.mobileonly, ul#menu li.mobileonly { display: none; }
	}

   @media screen and (max-width: 900px)
   {
		body { padding-top: 71px; }
		body.home { padding-top: 81px; }
		header a.ps { padding: 10px 0; }
		header a.ps img { width: 140px; }
		#menu li.has-submenu, #menu li.no-submenu, header #topline { display: none; }

		.zone.welcome .frame { flex-wrap: wrap; }
		.zone.welcome .frame > div { width: 100%; }
		
		footer .frame { gap: 21px; }
		footer .frame p, .tile { width: 100%; }
		
		h2 { font-size: 34px; }
   }  
	
   @media screen and (max-width: 650px)
   {
		img.alignright { float: none; width: 100%; margin-left: 0; }		
	}
   
   /* print */

   @media print
   {
		header { display: none; }
   }