/*
   
   Theme Name: Wilma Theater 2020
   Text Domain: wilma2020
   Author: Zero Defect Design LLC
   Author URI: https://zerodefectdesign.com
      
	2021-12-06: typeface switched from renner to jost	
		
   */

	/* fonts */
	
	@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap');
      
   /* resets */
   
   * { box-sizing: border-box; border: none; outline: none; }
   html { height: 100%; -webkit-text-size-adjust: 100%; }
   *:before, *:after { box-sizing: inherit; }
   table { border: 0; padding: 0; border-spacing: 0px; border-collapse: collapse; }   
   img { vertical-align: bottom; }
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
   a[name] { position: relative; top: -120px; }
   .img { width: 100%; height: 0; padding-top: 50%; margin-bottom: 12px; background-position: center center; background-size: cover; }
   
   /* structure + type */
   
   body { color: #000000; background-color: #000000; margin: 0px; padding: 0px; }
   body, input, textarea, select, button { font: 300 18px/25px 'Jost', sans-serif; }
	
	/* remove all traces of colour or background images */
	

   .reversed { color: #000000; background-color: #FFFFFF; }
		/*
		
   .blackout { color: #FFFFFF; background-color: #000000; }
   .ticketzone { color: #FFFFFF; background-color: #141563; }
   .next { background: #141563 url('images/bg-next.jpg') center center no-repeat; background-size: cover; }
   .related { background: #370A0C url('images/bg-related-lobby.jpg') center center no-repeat; background-size: cover; }
   .grey { background-color: #DEDEDE; }
	.meet-artists { background-color: #EFEFEA; }
   .next h4 { font-weight: 600; }
	*/
	
	.next { background-color: #FFFFFF; border-bottom: 1px solid #000000; }
	
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
   b { font-weight: 600; }
   h2 { font-weight: 600; font-size: 300%; line-height: 110%; margin: 0; text-transform: uppercase; }
   h2 select { font-weight: 300; margin: 0; font-size: inherit; line-height: inherit; text-transform: uppercase; border: 1px solid #DEDEDE; cursor: pointer; }
   h2 .prevnext { font-weight: 300; }
   h2.subtitle 
   { 
      font-family: 'Jost', sans-serif; font-size: 150%; line-height: 110%; font-style: italic; margin-top: 10px; font-weight: 300; 
      letter-spacing: -.02em; text-transform: none;
   }
   h3 { font-weight: 600; font-size: 175%; line-height: 110%; margin: 0; color: #000000; }
   h4 { font-weight: 400; font-size: 150%; line-height: 100%; margin: 0; text-transform: uppercase; }
	

	
	body.home .tile h4 { margin-bottom: 10px; color: #000000; }
   h5 { font-weight: 600; font-size: 175%; line-height: 100%; margin: 0; padding: 0; text-transform: uppercase; color: #000000; }
   .reversed h5, .ticketzone h5 { color: #000000; }
	h1.black, h2.black, h3.black, h4.black, h5.black { color: #000000; }
	h1.blue, h2.blue, h3.blue, h4.blue, h5.blue { color: #382EFE; }
	
   .date { font-weight: 600; text-transform: uppercase; }
   .credits { text-transform: uppercase; letter-spacing: .03em; font-weight: 400; }
   .warm, .credits { color: #5D5D5E; }
   .container { color: #000000; background-color: #FFFFFF; text-align: left; }
   body.no-hero .container { padding-top: 80px; }
   .container.reversed { color: #FFFFFF; background-color: #000000; }
   .frame { padding-left: 35px; padding-right: 35px; display: flex; text-align: left; max-width: 1600px; margin: 0 auto; }
   .content { padding-top: 70px; padding-bottom: 35px; }
   .leftcol { width: 370px; flex-grow: 0; flex-shrink: 0; flex-basis: 370px; padding: 0px 35px 35px 35px; } 
   .leftcol .art { width: 100%; height: auto; }
   .leftcol .info { margin: 30px 0px; padding: 30px 0px; border-top: 2px dotted #666666; border-bottom: 2px dotted #666666; }
   .leftcol ul { list-style-type: none; padding: 0px; margin: 30px 0px; border-top: 2px dotted #DEDEDE; }
   .leftcol li { list-style-type: none; padding: 5px 0px; margin: 0px; display: block; font-weight: 400; border-bottom: 2px dotted #DEDEDE; }
   .primary { flex-grow: 1; flex-shrink: 1; padding: 0px 35px 35px 35px; }
	.twocol h5 { margin-bottom: 1em; }
   
   /* quote styles */
   
   blockquote { margin: 35px 0px; padding: 0px 60px; position: relative; }
   blockquote p { font-size: 190%; line-height: 115%; font-weight: 300; margin-bottom: 10px; }
   blockquote p cite { font-size: 55%; }
   cite { display: block; text-align: right; font-weight: 400; font-style: italic; }
   cite::before { content: "\2014"; display: inline-block; margin-right: 5px; }
   blockquote::before, blockquote::after { position: absolute; display: block; width: 35px; top: 0; bottom: 0; background-size: contain; background-repeat: no-repeat; content: ""; }
   blockquote::before { left: 0; background-image: url('images/quote-left.svg'); background-position: center top; }
   blockquote::after { right: 0; background-image: url('images/quote-right.svg'); background-position: center bottom; }
   .dq::before { background: transparent url('images/quote-left.svg') center top no-repeat; margin-right: 6px; }
   .dq::after { background: transparent url('images/quote-right.svg') center top no-repeat; margin-left: 6px; }
   .dq::before, .dq::after { width: 11px; height: 16px; background-size: contain; display: inline-block; content: ""; }
   .reversed .dq::before, .reversed blockquote::before { background-image: url('images/quote-left-rev.svg'); }
   .reversed .dq::after, .reversed blockquote::after { background-image: url('images/quote-right-rev.svg'); }

   /* links + controls */
   
   a { text-decoration: none; color: #000000; }
   .reversed a { color: #000000; }
   a:hover, .reversed a:hover { color: #5D5D5E; }
   .btn, a.btn, .ghostbtn, a.ghostbtn, button
   { 
      color: #FFFFFF;  display: inline-block; padding: .25em .5em .2em .5em;  text-transform: uppercase; letter-spacing: .1em; line-height: 100%; cursor: pointer; 
      font-weight: 400; white-space: nowrap; border: 1px solid #382EFE;
   }
   .reversed a.btn { border-color: #FFFFFF; }
   .ghostbtn, a.ghostbtn { border: 1px solid #382EFE; color: #382EFE; }
   /* .reversed .ghostbtn, .reversed a.ghostbtn { border-color: #FFFFFF; color: #FFFFFF; } */
   .btn, a.btn, button { background-color: #382EFE; }
   .btn:hover, a.btn:hover, .reversed a.btn:hover, .ghostbtn:hover, a.ghostbtn:hover, button:hover { color: #FFFFFF; background-color: #000000; border-color: #000000; } 
   .btn.tickets, .ghostbtn.tickets 
   { 
      background-image: url('images/icon-ticket.svg'); background-position: 5px center; background-size: auto 65%; background-repeat: no-repeat; 
      padding-left: 30px;
   }
   .btn.bigtickets 
   { 
      background-image: url('images/icon-ticket.svg'); background-position: 10px center; background-size: auto 65%; background-repeat: no-repeat;  
      font-size: 115%; line-height: 100%; padding: 12px 15px 8px 50px; 
   }
   .btn.info, .ghostbtn.info 
   { 
      background-image: url('images/icon-info-p.svg'); background-position: 7px center; background-size: auto 65%; background-repeat: no-repeat; 
      padding-left: 30px;
   }
   .ghostbtn.info:hover { background-image: url('images/icon-info.svg'); }
   .btn.wilmabill, .ghostbtn.wilmabill 
   { 
      padding-left: 40px; background-image: url('images/icon-download-b.svg'); background-position: 13px center; background-size: auto 65%; background-repeat: no-repeat; 
   }
   .btnbar { margin-top: 8px; }
   
   .breadcrumb { margin-bottom: 15px; text-transform: uppercase; letter-spacing: .03em; font-weight: 400; white-space: collapse; }
   .breadcrumb a 
   { 
      display: inline-block; padding-right: 20px; margin-right: 5px; color: #000000;
      background: transparent url('images/breadcrumb-grey.svg') right center no-repeat; background-size: contain; 
   }
   .breadcrumb a:hover { color: #000000; }
	.anchor { display: block; position: relative; height: 1px; width: 1px; top: -200px; }
	
	/* wp buttons */
	
	.primary .wp-block-buttons { margin-bottom: 1rem; display: flex; gap: 20px; flex-wrap: nowrap; align-items: stretch; }
	.primary .wp-block-buttons .wp-block-button { background-color: #382EFE; display: flex; align-items: center; }
	.primary .wp-block-buttons .wp-block-button:nth-child(even), .primary .wp-block-buttons .wp-block-button:nth-child(even)  a.wp-block-button__link { background-color: #5D5D5E; }
	.primary .wp-block-buttons .wp-block-button a.wp-block-button__link 
	{ 
		border-radius: 0; text-transform: uppercase; font-weight: 400; background-color: #382EFE; width: 100%;
	}
	.primary .wp-block-buttons .wp-block-button:hover, .primary .wp-block-buttons .wp-block-button:hover a.wp-block-button__link { background-color: #000000; }
   @media screen and (max-width: 950px) 
	{ 
		.primary .wp-block-buttons { flex-wrap: wrap; gap: 0; }
		.primary .wp-block-buttons .wp-block-button { width: 100%; }
	}
	
   /* forms */
   
   input, select, textarea { background-color: #EFEFEF; }
   input[type=checkbox] { background-color: transparent; }
   fieldset { margin: 5px 0px; padding: 0px 20px 0px 0px; display: block; width: 100%; }
   fieldset.half { float: left; width: 50%; }
   fieldset label { font-size: 90%; }
   fieldset label input { display: block; width: 100%; }
   
   /* header */
   
   #hd-container 
   { 
      position: absolute; top: 0; left: 0; right: 0; color: #888888; z-index: 100; padding-bottom: 30px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); 
   }
   #hd 
   { 
      padding: 14px 70px 3px 70px; display: flex; justify-content: space-between; align-items: center; /* font-size: 110%; line-height: 110%; */
       font-weight: 600; text-align: left; max-width: 1600px; margin: 0 auto;
   }
   #hd a { color: #FFFFFF; display: inline-block; padding: 0px 4px; font-weight: 400; margin: -1px 0; }
   #hd .logo { width: 200px; flex-grow: 0; flex-shrink: 0; }
   #hd .logo img { width: 192px; height: 56px; display: table; margin: 11px 0px 7px 0px;  }
   #hd .controls { flex-grow: 0; flex-shrink: 0; margin-right: -10px; white-space: nowrap; display: flex; justify-content: flex-end; padding-top: 13px; }   
   #hd .tickets 
   { 
      display: flex; color: #FFFFFF; border: 1.5px solid #FFFFFF; padding: 2px 10px 0px 10px; cursor: pointer; margin-right: 15px;
      font-weight: 400; align-items: center; text-transform: uppercase; font-size: 80%; line-height: 80%; letter-spacing: 1px;
      border-radius: 20px;
   }
   #hd .tickets:hover { color: #FFFFFF; background-color: #5D5D5E; border-color: #5D5D5E; }
   #hd .calendar { background: transparent url('images/icon-calendar.svg') center center no-repeat; }
   #hd .searchbtn { background: transparent url('images/icon-search.svg') center center no-repeat; }
   #hd .navbtn { background: transparent url('images/icon-nav.svg') center center no-repeat; }
   #hd .calendar, #hd .searchbtn, #hd .navbtn { width: 40px; height: 30px; background-size: 24px auto; cursor: pointer;  }
   #hd a:hover { color: #ADADAE; }
	#hd .tickets:hover { color: #000000; background-color: #FFFFFF; }
   #hd-container { position: fixed; background: none; background-color: rgba(0,0,0,0); padding-bottom: 0px; }
   #hd-backplate { position: fixed; top: 0px; left: 0px; right: 0px; height: 99px; background-color: #000000; opacity: 0; transition: opacity 0.6s ease; z-index: 99; }
   #hd-backplate.scrolled, body.no-hero #hd-backplate { opacity: 0.7; }

   ul#menu, ul#menu li { margin: 0; padding: 0; list-style-type: none; }
   ul#menu { flex-grow: 1; flex-shrink: 1; padding-left: 25px; padding-top: 13px; }
   ul#menu li { display: inline-block; float: left; padding-right: 2px;  }
   ul#menu li a { display: block; padding: 14px 15px 14px 12px; background: transparent url('images/dot.png') right center no-repeat; background-size: 3px 3px; }
   ul#menu li:last-child a { background-image: none; }
   ul#menu li.has-submenu:hover { background: transparent url('images/icon-submenu-black.svg') 10px 40px no-repeat; background-size: auto 20px; } 
   ul#menu li ul { display: none; position: absolute; z-index: 220; margin: 0px; padding: 0px; list-style-type: none; }
   ul#menu li:hover ul { display: block; text-align: left; }
   ul#menu li ul li { margin: 0px; padding: 0px; list-style-type: none; text-transform: none; display: block; float: none; }
   ul#menu li ul li a { color: #FFFFFF; display: block; font-size: 16px; padding: 4px 12px; background-color: #000000; background-image: none; }
   ul#menu li ul li:first-child { border-top: 6px solid #000000; }
   ul#menu li ul li:last-child { border-bottom: 6px solid #000000; }
   ul#menu li ul li a:hover { color: #FFFFFF; background-color: #5D5D5E; opacity: 1; }

   /* mobile navigation */
   
   #mobilemenu 
   { 
      position: fixed; top: 0; right: 0; left: 0; z-index: 99; overflow: hidden; height: 0px; opacity: 0; transition-duration: 0.3s;  
		background-color: rgba(0,0,0,0.95); width: 100%; 
   }
   #mobilemenu.active { height: 100vh; opacity: 1; }
	#mobilemenu .frame { padding: 80px 22px 0px 22px; display: block; }
   #mobilemenu a { color: #FFFFFF; display: block; font-size: 30px; line-height: 30px; padding: 10px 25px 10px 0; font-weight: 300; }
	#mobile-menu {   }
   #mobile-menu ul { list-style-type: none; margin: 0px;  }
   #mobilemenu a { font-size: 24px; line-height: 24px; padding: 8px 10px 8px 0px; }
	#mobile-menu { list-style-type: none; margin: 0px; padding: 0; color: #FFFFFF;  width: 100%; }
   #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: 16px; line-height: 1; padding: 7px 0px; }
	ul.mobilebuttons { margin-left: 0; padding-left: 0; list-style-type: none; }

	
   
   /* search modal */
   
   #searchmodal
   { 
      position: fixed; top: 0; right: 0; left: 0; z-index: 500; overflow: hidden; height: 0px; opacity: 0; transition-duration: 0.3s;  
      background-color: rgba(255,255,255,0.97);
   }
   #searchmodal.active { height: 100vh; opacity: 1; overflow: auto; }
   #searchmodal .content { padding-top: 35px; }
   #searchmodal .closebtn 
   { 
      width: 50px; height: 48px; background: transparent url('images/icon-close.svg') center center no-repeat; background-size: contain; cursor: pointer; 
      opacity: 0.5;
   }
   #searchmodal .closebtn:hover { opacity: 1; }
   #searchmodal form { white-space: nowrap; display: flex; align-items: flex-end; }
   #searchmodal input
   {
      font-size: 48px; line-height: 48px; background-color: transparent; border: none;
      -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0px;
   }
   #searchmodal input:focus { outline: none; }
   #searchmodal input#s 
   { 
      width: calc(100% - 60px); border-bottom: 2px dotted #666666; color: #000000; margin-right: 10px; 
      font-family: Jost; font-weight: 300;
   }
   #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 .tiles { margin-top: 40px; }
   #autoresults h3 { margin-bottom: 20px; }
   #autoresults .searchresult { margin-bottom: 10px; }
   #autoresults .searchresult .excerpt { color: #777777; font-size: 90%; line-height: 115%; }
   #autoresults .date { font-size: 90%; }
   .artists .artist { width: 150px; margin: 17px; text-align: center; line-height: 100%; }
   #autoresults .searchresult.artists img { width: 150px; height: 150px; border-radius: 50%; display: block; margin-bottom: 10px; }
   
   /* announcement */
   
   #announce { color: #FFFFFF; background-color: #F32E33; padding: 12px 20px 10px 20px; text-align: center; font-size: 150%; line-height: 100%; font-weight: 400; }
   a:hover #announce { background-color: #F4AC11; }
   
   /* hero images + slider */
   
   .herocon { max-height: calc(100vh - 200px); overflow: hidden; position: relative; }
   .herocon .caption, .hero .caption
   { 
      position: absolute; bottom: 0; right: 0; color: #FFFFFF; background-color: rgba(0,0,0,0.5); padding: 4px 8px; display: inline-block;
   }
   img.hero { width: 100%; height: auto; }
   div.hero, div.slider, div.slide
   { 
      width: 100%; height: 60vw; max-height: calc(100vh - 200px); background-position: center center; background-repeat: no-repeat; background-size: cover;  
      position: relative;
   }
   div.slide { height: 0; padding-top: 66%; }
   body.home div.slide { padding-top: 0; }
   body.home div.slider, body.home a.slide, body.home div.slide { height: 50vw; background-position: center center; background-repeat: no-repeat; background-size: cover;   }
   .hero .overlay, .slider .overlay 
   { 
      position: absolute; bottom: 0px; left: 0px; right: 0px; color: #FFFFFF; padding-top: 100px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9));
   }
   .slider h2 { text-shadow: 5px 5px 15px rgba(0,0,0,0.4); }
   .slider .subtitle { font-size: 135%; line-height: 150%; text-shadow: 5px 5px 15px rgba(0,0,0,0.4); }
   a.slide { color: #FFFFFF; }
   .slide-container { position: relative; }
   
   /* shade over sliders and hero images */
   body.home::after, body.has-hero::after
   {
      position: absolute; top: 0; left: 0; right: 0; height: 150px; content: " "; background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); 
      z-index: 95;
   }
   
   /* table: grid */
   
   figure.wp-block-table { margin: 20px 0px; padding: 0px; }
   figure.wp-block-table table { border-top: 2px dotted #DEDEDE; width: 100%; }
   figure.wp-block-table table tr { border-bottom: 2px dotted #DEDEDE; vertical-align: top; }
   figure.wp-block-table table th { font-weight: 600; text-align: left; }
   figure.wp-block-table table td, figure.wp-block-table table th { padding: 7px 15px 7px 0px; }
   figure.wp-block-table table td:last-child, figure.wp-block-table table th:last-child { padding-right: 0px; }
   
   /* tiles */
   
   .tiles { display: flex; margin: 0px -17px -35px -17px; flex-wrap: wrap; align-items: flex-start; }
   .tiles.events { align-items: stretch; }
   .tiles.events .tile { display: flex; }
   .tile { width: calc(50% - 34px); margin: 0px 17px 35px 17px; } 
   .tile .date .subtitle { display: block; color: #000000; }
   body.onecolumn .tile, #autoresults .tile, .tiles.onecolumn .tile { width: calc(33.333% - 34px); }
   .tile img { width: 100%; height: auto; display: block; margin: 0px 0px 10px 0px; }
   .tile .img  { width: 100%; height: 0; padding-top: 50%; margin-bottom: 12px; background-position: center center; background-size: cover; }
   .tiles.events .tile .img { width: 33.333%; height: auto; margin-bottom: 0; padding: 0; }
   .tiles.events .tile .content { align-self: center; padding: 17px 35px; color: #000000; }
   .tiles.events .tile h3 
   { 
      font-family: 'DV', sans-serif; font-weight: 600; letter-spacing: 0px; text-transform: uppercase; font-size: 175%; line-height: 100%; 
      letter-spacing: .02em;
   }
   @media screen and (min-width: 1600px) { .tiles.events .tile h3 { font-size: 175%; } .tiles.events .tile .content { font-size: 125%; } }
   @media screen and (max-width: 1300px) { .tiles.events .tile .content { padding: 17px; } .tiles.events .tile h3 { font-size: 125%; } }
   @media screen and (max-width: 980px) { .tiles.events .tile .img { width: 18%; } .tiles.events .tile .content { padding: 8px 17px; } }
   @media screen and (max-width: 500px) { .tiles.events .tile .img { width: 25%; } }

   .tiles.events .tile .date { color: #FFFFFF; font-weight: 400; margin: 6px 0px 0px 0px; line-height: 105%; }
   a.tile:hover { opacity: 0.8; }
   .tile { background-position: center center; background-size: cover; }
   .tile.wide { align-self: center; }
   .tiles.linktiles .tile { width: calc(33.333% - 34px); }
   @media screen and (max-width: 1400px) { .tiles.linktiles .tile { width: calc(50% - 34px); } }
   @media screen and (min-width: 1401px) { .tiles .tile.wide, .tiles.linktiles .tile.wide { width: calc(66.664% - 34px); } }
   .tiles.linktiles .tile .contents { width: 100%; height: 0; padding-top: 50%; position: relative;  }
   .tiles.linktiles .tile h4 
   { 
      display: inline-block; padding: 8px; position: absolute; bottom: 0; left: 0; text-transform: none;
      font-size: 125%; line-height: 100%; color: #FFFFFF; background-color: #000000; font-weight: 400;
   }
   .tiles.linktiles a.tile:hover { opacity: 1; }
   .tiles.linktiles a.tile:hover h4 { background-color: #5D5D5E; }
	.related .tiles .tile b { font-size: 22px; line-height: 1.2; }
   
   /* tile and post lists */
   
   .tile ul, ul.post-list { list-style-type: none; margin: 20px 0 0 0; padding: 0; }
   .tile li, ul.post-list li { list-style-type: none; margin: 10px 0 0 0; padding: 0; }
   .tile li a, ul.post-list li a { font-weight: 400; font-size: 115%; line-height: 110%; }
   .tile li .date, ul.post-list li .date { font-size: 90%; }
   .tile .date, ul.post-list li .date { text-transform: uppercase; letter-spacing: .03em; font-weight: 400; color: #5D5D5E; }
   
   /* listings */
   
   .listing { display: flex; align-items: center; margin: 8px 0px; }
   .listing .day { font-size: 150%; line-height: 100%; width: 40px; text-align: center; margin-right: 15px; font-weight: 300; }
   .listing .info a { font-weight: 600; }
   
   /* calendar grid */
   
   .calendar-controls { float: right; margin: 0px 0px 20px 20px; }
   .calendar-controls a, .calendar-controls span 
   { 
      display: inline-block; width: 40px; height: 40px; margin-left: 5px; border-radius: 50%; background-color: #5D5D5E; 
      background-position: center center; background-repeat: no-repeat; background-size: 50% auto;
   }
   .calendar-controls .view-list { background-image: url('images/icon-list.svg'); }
   .calendar-controls .view-grid { background-image: url('images/icon-calendar.svg'); }
   .calendar-controls a:hover { background-color: #000000; }
   .calendar-controls span.current { background-color: #000000; }
   .primary div.calendar { margin: 0px -20px; } 
   table.calendar-month { border-spacing: 20px; border-collapse: separate; width: 100%; }
   table.calendar-month th { font: 700 18px/18px 'lars', sans-serif; text-align: left; padding: 0px; }
   table.calendar-month td 
   { 
      padding: 20px 0px 20px 0px; border-top: 1px solid #000000; width: 14.286%; color: #000000;
      font-size: 16px; line-height: 20px; vertical-align: top;
   }
   table.calendar-month td h3 { font-weight: 400; font-size: 20px; line-height: 20px; color: inherit; margin-bottom: 8px; }
   table.calendar-month td.empty { color: #999999; border-color: #CCCCCC; }
   table.calendar-month td.blank { border-color: transparent; }
   table.calendar-month tbody tr:first-child td.empty, table.calendar-month tbody tr:first-child td.blank { border-color: #000000; }
   table.calendar-month td.today { border-top: 3px solid #5D5D5E; padding-top: 18px; }
   table.calendar-month td.today h3 { color: #5D5D5E; font-weight: 700; }
   table.calendar-month td a { display: block; font-weight: 400; margin-bottom: 10px; }
   table.calendar-month td a:last-child { margin-bottom: 0px; }
   table.calendar-month td img { display: block; width: 100%; height: auto; margin: 6px 0px; }
   table.calendar-month td .time { color: #5D5D5E; display: block; }
   
   /* month grids */
   
   table.month { width: 100%; border-collapse: collapse; }
   table.month caption { text-align: center; font-size: 110%; font-weight: 600; padding-bottom: 10px; color: #000000; }
   table.month th { color: #000000; background-color: rgba(255,255,255,0.6); line-height: 100%; padding: 4px 0px 1px 0px; }
   table.month th, table.month td { width: 14.2857%; vertical-align: top; text-align: center; }
   table.month td { border-top: 1px solid rgba(0,0,0,0.75); min-height: 70px; }
   table.month td .daynum { font-weight: 300; display: block; height: 25px; font-size: 80%; color: rgba(0,0,0,0.75); }
   table.month td.blank { padding-top: 76px; }
   table.month td.empty .daynum { height: 75px; }
   table.month td a { display: block; height: 25px; color: #5D5D5E; font-weight: 400; font-size: 18px; }
   table.month td span { display: block; height: 25px; color: #FFFFFF; font-weight: 400; }
   table.month td a:hover { color: #FFFFFF; background-color: #382EFE; }
   @media screen and (max-width: 1120px) { table.month th, table.month td { font-size: 90%; } }
   
   /* video */
   
   .video-container { overflow: hidden; height: 0; padding-bottom: 56.25%; position: relative; margin-bottom: 30px; }
   .video-container iframe { position:absolute; left: 0; top: 0; height: 100%; width: 100%; }
   
   /* sliders */
   
   .slider { z-index: 50; }
   .slide { padding: 0px; display: block; position: relative; }
   .slide .frame { align-items: center; height: 100%; }
   .slide .leftcol { padding-top: 0px; padding-bottom: 0px; }
   .slide .primary { padding: 35px; }
   .slide h2 { font-weight: 600; margin-bottom: 15px; }
   .slide .subtitle { font-size: 150%; line-height: 110%; margin: 0px 0px 15px 0px; }
   .slide .quote { font-size: 150%; line-height: 110%; margin: 35px 0px 0px 0px; }
   .slide .dq::before { background-image: url('images/quote-left-rev.svg'); margin-right: 6px; }
   .slide .dq::after { background-image: url('images/quote-right-rev.svg'); margin-left: 6px; }
   .slide .dq::before, .slide .dq::after { width: 11px; height: 20px; }

   @media screen and (min-width: 1600px) { body.home .slide h2 { font-size: 350%; } }
   
   .slide .caption 
   { 
      position: absolute; bottom: 0; right: 0; color: #FFFFFF; background-color: rgba(0,0,0,0.5); padding: 4px 8px; display: inline-block;
   }
   .slider.multi { color: #FFFFFF; background-color: #000000; }
   .slider.multi .slide img { height: 25vw; }
   .slider.multi .slide .video-container { height: 25vw; width: 39vw; }

   
   @media screen and (min-width: 1600px) { .slider.multi .slide img  { height: 500px; } .slider.multi .slide .video-container { height: 500px; width: 889px; } }
   @media screen and (max-width: 1120px) { .slider.multi .slide img { height: 30vw; } .slider.multi .slide .video-container { height: 30vw; width: 45vw; } }
   @media screen and (max-width: 980px) { .slider.multi .slide img { height: 35vw; }  .slider.multi .slide .video-container { height: 35vw; width: 52vw; } }
   @media screen and (max-width: 500px) { .slider.multi .slide img { height: 55vw; } .slider.multi .slide .video-container { height: 55vw; width: 95vw; } }
   
   /* footer */
   
   .footer { font-weight: 300; padding-top: 45px; padding-bottom: 10px; color: #FFFFFF; background-color: #000000; }
   .footer .primary a { color: #FFFFFF; border-bottom: 2px dotted rgba(255,255,255,0.5); }
   .footer a:hover { color: #5D5D5E; }
   .footer .wilma-theater { display: block; text-align: center; margin-top: -9px; margin-bottom: 20px; }
   .footer .wilma-theater img { width: 50%; height: auto; }
   .footer .social { text-align: center; }
   .footer .address { display: flex; margin-right: -40px; }
   .footer .address div { padding: 0px 40px 20px 0px; flex-basis: 50%; flex-grow: 1; flex-shrink: 1; }
   .footer a { white-space: nowrap; }
   .footer a.tel { color: #FFFFFF; }
   .social a.facebook { background: transparent url('images/icon-facebook-w.svg') center center no-repeat; }
   .social a.instagram { background: transparent url('images/icon-instagram-w.svg') center center no-repeat; }
   .social a.youtube { background: transparent url('images/icon-youtube-w.svg') center center no-repeat; }
   .footer .social a { display: inline-block; width: 40px; height: 40px; background-size: auto 30px; }
   .footer .social a.facebook { background-size: auto 28px; }
   .footer .social a.youtube { background-size: 33px auto; }
   .footer .social a:hover { opacity: 0.75; }
   
   /* home page features */
   
   a.zone-education { display: flex; background-color: #46365E; color: #FFFFFF; }
   a.zone-education div.img 
   { 
      flex-basis: 50%; background: #000000 url('/wp-content/uploads/2020/02/education-home-2.jpg') center center no-repeat; background-size: cover; 
      height: auto; padding-top: 0; margin-bottom: 0;
   }
   a.zone-education div.info { flex-basis: 50%; padding: 70px; }
   a.zone-education div.info div { max-width: 680px; }
   a.zone-education h3 { color: #ebc325; margin-top: 0; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
	a.zone-education:hover .ghostbtn { background-color: #F6014F; }
   @media screen and (max-width: 1120px) { a.zone-education div.info { padding: 70px 35px; } }
   @media screen and (max-width: 980px) { a.zone-education div.info { padding: 35px; } }
   @media screen and (max-width: 700px) 
   { 
      a.zone-education { flex-wrap: wrap; } 
      a.zone-education div.img { height: 30vw; flex-basis: 100%; } 
      a.zone-education div.info { padding: 25px; flex-basis: 100%; } 
   }
   
   /* artists */
   
   .artists { display: flex; flex-wrap: wrap; align-items: flex-start; margin: -17px; }
   .artists .artist { width: 150px; margin: 17px; text-align: center; line-height: 100%; }
   .artists.landing .artist { width: 250px; }
   .artists .artist img { width: 100%; height: auto; border-radius: 50%; display: block; margin-bottom: 10px; }
   .artists .artist .name { display: block; font-weight: 400; }
   .artists .artist .role { display: block; color: #5D5D5E; font-size: 85%; line-height: 100%; margin-top: 5px; font-weight: 400; text-transform: uppercase; }
   
   /* education */
   
	/*
   .for-artists { background: #c4c3c2 url('images/bg-for-artists.jpg') right center no-repeat; background-size: auto 100%; }
   .for-artists h5 { color: #FFFFFF; }
   @media screen and (max-width: 500px) { .for-artists { background-image: none; } }
   @media screen and (min-width: 1401px) { .for-artists { background-position: right 10%; background-size: auto 150%; } }
   */
	
   /* action item tiles */
   
   .tile a.donate, .tile a.mailing-list { color: #000000; display: block; }
   .tile a.donate h4 { color: #BC0149; margin-bottom: 10px; padding-left: 40px; background: transparent url('images/icon-heart.svg') left center no-repeat;
      background-size: contain; }
   .tile a.mailing-list h4 { color: #5D5D5E; margin-bottom: 10px; padding-left: 40px; background: transparent url('images/icon-at.svg') left center no-repeat;
      background-size: contain; }
   .tile a.donate:hover h4, .tile a.mailing-list:hover h4 { color: #000000; background-image: url('images/icon-right.svg'); }
   
   /* back-to-top control */
   
   a#totop 
   { 
      position: fixed; width: 100px; height: 100px; bottom: 0px; left: 50%; margin-left: -50px; margin-bottom: -55px; 
      z-index: 25; text-align: center; color: #FFFFFF; background-color: #5D5D5E; border-radius: 50px; display: none; 
      font: 700 60px/60px 'Jost', sans-serif;
   }
   a#totop:hover { color: #FFFFFF; background-color: #000000; }
   
   
   /* third-party form repairs */
   
   div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], 
   div.wpforms-container-full .wpforms-form .wpforms-page-button
   {
      color: #FFFFFF !important; background-color: #000000 !important; display: inline-block; padding: .3em .5em .2em .5em !important;  
      text-transform: uppercase; letter-spacing: .1em; line-height: 100%; cursor: pointer; font-weight: 400; white-space: nowrap; border: 0 !important;
   }
   div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
   div.wpforms-container-full .wpforms-form .wpforms-page-button:hover
   {
      background-color: #5D5D5E !important;
   }
   
   
   /* larger screens */
   
   @media screen and (min-width: 1800px)
   {
      body { font-size: 20px; line-height: 28px; }
      .leftcol { width: 460px; flex-basis: 460px; }
   }
   
   /* small desktop (was 1190px) */
   
   @media screen and (max-width: 1350px)
   {
      #hd { padding-top: 5px; padding-left: 35px; padding-right: 25px; }
      #menu { padding-left: 30px; }
      .frame { padding-left: 0; padding-right: 0; }
      #hd .logo { width: 185px; flex-basis: 185px; }
      #hd .logo img { width: 177px; height: 41px; margin-top: 7px; margin-bottom: 10px; }
      #hd-backplate { height: 71px; }
      
      .leftcol { width: 220px; flex-basis: 220px; padding-right: 0px; }
      h5 { font-size: 150%; }
      .footer .address { flex-wrap: wrap; margin-right: 0; }
      .footer .address div { flex-basis: 100%; padding-right: 0; }
      .footer .leftcol { padding-bottom: 0px; }
      
      .slide .date { font-size: 100%; }
      .slide .subtitle, .slide .quote { font-size: 125%; }
      .slide .dq::before, .slide .dq::after { width: 8px; height: 15px; }
      .slide h2 { font-size: 175%; }

      
      .slide .quote { margin-top: 15px; }
 
   }
   
   /* menu issues (was 1100px) */
   
   @media screen and (max-width: 1350px)
   {
      ul#menu { padding-left: 15px; }
      ul#menu li a { padding: 14px 11px 14px 8px; }
   }
   
   /* tablet (was 1029/1030) */
   
   @media screen and (min-width: 1350px) { .mobileonly, #hd .mobileonly { display: none; } }
   @media screen and (max-width: 1349px)
   {   
      body { font-size: 16px; line-height: 20px; }
   
      #hd .controls { flex-grow: 1; padding-top: 4px; }
      #hd .tickets { margin-right: 8px; }
      #menu { display: none; }
      .content { padding-top: 35px; padding-bottom: 0px; }
      .leftcol { flex-basis: 215px; padding-right: 0; }   
      blockquote { padding: 0px 40px; }
      blockquote::before, blockquote::after { width: 25px; }
      blockquote .quote { font-size: 150%; }
      .lSSlideOuter .lSPager.lSpg { display: none; }

      .btn.tickets, .ghostbtn.tickets { padding: 10px 12px 8px 45px; }
      .artists.landing .artist { width: 150px; }
   }
   
   @media screen and (max-width: 900px)
   {
      .tile { width: calc(100% - 34px); } 
      body.onecolumn .tile, #autoresults .tile, .tiles.onecolumn .tile { width: calc(50% - 34px); }
		.hero .overlay, .slider .overlay { padding-top: 25px; }
   }     
         
   /* phone */
   
   @media screen and (max-width: 700px)
   {
      h2 { font-size: 190%; }
      h3 { font-size: 150%; }
      #hd { padding-left: 20px; padding-top: 2px; padding-bottom: 0px; }
      #hd .logo { width: 100px; flex-basis: 100px; padding-top: 3px; padding-bottom: 2px; }
      #hd .logo img { width: 92px; height: 27px; }
      #hd .controls { padding-top: 0px; }
		
		#hd .controls a.tickets { display: none; }
      #hd-backplate { height: 56px; } 
      .tile .date .subtitle { display: none; }
      .frame { flex-wrap: wrap; }
      .leftcol, .primary { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; padding: 0px 25px 25px 25px; }
      .leftcol .art { max-width: 50%; }
      body.single-artist .leftcol { order: 2; }
      .leftcol.below { order: 3; }
      #autoresults .tile { width: calc(100% - 34px); } 
      
      .slide .leftcol { flex-basis: 25%; padding-right: 0px; }
      .slide .primary { flex-basis: 75%; padding: 0px 17px 0px 35px; }
      .slide h2 { margin-bottom: 10px; font-size: 125%; }
      .slide .leftcol .art { max-width: 100%; }
      /* .slide .subtitle, .slide .quote { display: none; } */
		
		body.home div.slider, body.home a.slide, body.home div.slide { background-color: #000000; height: 70vw; background-position: center top; background-size: 100% auto; }
		body.home div.slider .overlay { min-height: 20vw; background-color: #000000; padding-top: 15px; padding-bottom: 15px; }
		body.home .slide .subtitle, body.home .slide .quote { font-size: 95%; margin-bottom: 0; }
		body.home .slide .primary { padding-left: 25px; }
      
      .artists .artist { width: 130px; font-size: 95%; }
      .footer { padding-top: 25px; }
      .footer .wilma-theater { text-align: left; display: inline-block; vertical-align: top; margin: 0; }
      .footer .wilma-theater img { height: 40px; width: auto; }
      .footer .social { text-align: left; margin: 0px 0px 0px 10px; padding-bottom: 0; display: inline-block; vertical-align: top; }
      .footer .social a { background-position: center bottom; vertical-align: top;  }
      .footer .address { padding-top: 23px; }
   }
   
   
   @media screen and (max-width: 500px)
   {
		
		body.home div.slider, body.home a.slide, body.home div.slide { height: 80vw; }
		body.home div.slider .overlay { min-height: 30vw; }
				
      .tiles.linktiles .tile, .tiles.onecolumn .tile { width: calc(100% - 34px); } 
   }