/* ----------------------------------------------------------------------------
= Main import - compiles to /css/style.css
----------------------------------------------------------------------------- */
/* MISC HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/** 1. Correct `inline-block` display not defined in IE 8/9. Normalize vertical align of `progress`  */
audio, canvas, progress, video { display: inline-block; vertical-align: baseline;}
/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* Links ========================================================================= */
a:active, a:hover { outline: 0; }  /** Improve readability when focused, mouse hovered in all browsers. */
dfn { font-style: italic; } /** Address styling not present in Safari and Chrome. */
svg:not(:root) { overflow: hidden; }   /** Correct overflow not hidden in IE 9/10/11. */
figure { margin: 1em 40px; } /** Address margin not present in IE 8/9 and Safari. */
/* Forms ========================================================================== */
input { line-height: normal; }
input[type='checkbox'], input[type='radio'] {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 0;}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { height: auto;}
input[type='search'] {-webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; }
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {-webkit-appearance: none;}
/** Define consistent border, margin, and padding. */
fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; }
/** Don't inherit `font-weight` applied by a rule above. */
optgroup { font-weight: bold; }

/*-- Font sizing --*/
:root { font-size: 16px; }
@media screen and (max-width: 48em) { :root { font-size: calc( 16px + (18 - 16) * ( (100vw - 48em) / (1024 - 768) )); } }
@media screen and (max-width: 64em) { :root { font-size: 18px; } }

.clearfix { zoom: 1; }
.clearfix::before, .clearfix::after { display: block; visibility: hidden; height: 0; content: '\0020'; }
.clearfix::after { clear: both; }
.clear { clear: both; }

* { letter-spacing: 0.02em; }

.header-base, h1, h2, h3, h4, h5, h6, .sitemap .column > ul > li > a { 
    margin: 0 0 0.25em; font-weight: inherit; line-height: 1; 
    font-family: ITCKabelStdBook; font-weight: 800; color: black; }

h1, .h1 { font-size: 3.1573345183rem; margin-bottom: 18px; }

@media screen and (max-width: 48em) { h1, .h1 { font-size: 40px; } }

h2, .h2 { font-size: 2.368593037rem; margin-bottom: 15px; }
h2.long_title, .h2.long_title { font-size: 1.776889rem; }
h3, .h3 { font-size: 1.776889rem; margin-bottom: 15px; }
h4, .h4 { font-size: 1.333rem; margin-bottom: 15px; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.7501875469rem; }
.small_paragraph, .small p, .link ul.list .description p, .link ul.list .description li { font-size: 1rem; -webkit-font-smoothing: antialiased; }
.p-base, p, .p { line-height: 1.5; font-size: 1rem; font-family: ITCKabelStdBook; color: #404140; -webkit-font-smoothing: antialiased; }
p, .p { margin: 0 0 20px; }
p.lead, .p.lead { font-size: 1.424rem; -webkit-font-smoothing: antialiased; font-family: ITCKabelStdBook; font-style: italic; font-size: 26px; color: #404140; letter-spacing: 0; line-height: 39px; margin-bottom: 30px; }
p strong, .p strong { font-weight: 700; }
address, .address { margin: 0 0 20px; font-style: normal; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
ul li, ol li { position: relative; margin: 0; padding: 0; list-style: none; -webkit-font-smoothing: antialiased; }
ol { margin-bottom: 20px; }
ol > li { counter-increment: li-counter; padding: 0 0 0px 30px; line-height: 1.5; font-weight: 400; margin-bottom: 16px; font-size: 1rem; -webkit-font-smoothing: antialiased; }
ol > li::before { content: ''; position: absolute; top: -1px; left: 0px; width: 25px; height: 25px; font-size: 20px; content: counter(li-counter) "."; color: black; font-family: ITCKabelStdBook; }

@media screen and (max-width: 26em) { ol > li::before { top: -4px; left: 1px; } }

ol > li::after { content: ''; position: absolute; top: 24px; left: 0px; width: 13px; height: 2px; background: #D9262A; }

@media screen and (max-width: 26em) { ol > li::after { left: 1px; top: 22px; } }
@media screen and (max-width: 26em) { ol > li { font-size: 1.266rem; } }

a { border: none; color: #D9262A; text-decoration: none; cursor: pointer; -webkit-transition: all 200ms linear; transition: all 200ms linear; }
a:hover, a:focus { color: #D9262A; }

/*==== Shedd Wiebsite TEMPLATE specific ================*/

/*--  Breakpoints  -----------------------------------------------  
  min-width
    bp-xxxs 20em        320px
    bp-xxs  26em        416px   cover all smartphones in portrait mode
    bp-s    48em        768px   most smartphones in landscape mode
            50em        800px   most Samsung Notes
    bp-m    64em        1024px  most Android tablets and iPads in portrait mode
            71em        1136px  iPhone 5
    bp-l    84em        1366px  most Android tabs and iPads in landscape, older desktop/laptop monitors
    bp-xl   120em       1920px
    bp-xxl  160em       2560px
    bp-xxxl 240em       3840px
  max-width
----------------------------------------------------------------- */

/*----- FONTS -------*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300;400;500;600;700;800;900&display=swap');

/* This forces the vertical scrollbar visible in all cases and active when needed.
    The effect is to avoid a weird reorientation of the window when the scrollbar disappears then the mobile 
    navigation bar is opened
*/
html {height: 100%;  -webkit-box-sizing: border-box; box-sizing: border-box;}
*, *::after, *::before { -webkit-box-sizing: inherit; box-sizing: inherit;}
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    overflow-y:scroll !important;   /* forces the vertical scrollbar visible in all cases and active when needed */
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    font-family: ITCKabelStdBook;
    font-size: 16px;
    text-align: left;
    background-color:#4f708b;
    align-self:center;
}

#container {
    position: relative;
    margin: 0 auto;
    padding: 0;
}

#layout { 
    position: relative; 
    background-color:white;
    width: 100%; 
    margin: 0 auto; 
    padding-left: 1em; 
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}

header { position: relative; max-width: 100%; margin: 0 auto; padding: 0; align-self:center; background: black; height: 100px; z-index: 400; top: 0px; }

@media screen and (min-width: 20em)  {body {margin: 0 0%;}}  /* 320px    xs  */
@media screen and (min-width: 36em)  {body {margin: 0 0%;}}  /* 576px    sm  */
@media screen and (min-width: 48em)  {body {margin: 0 0%;}}  /* 768px    md  */
@media screen and (min-width: 62em)  {body {margin: 0 2%;}}  /* 992px    lg  */
@media screen and (min-width: 75em)  {body {margin: 0 6%;}}  /* 1200px   xl  */
@media screen and (min-width: 87.5em){body {margin: 0 10%;}} /* 1400px   xxl */
@media screen and (min-width: 100em) {body {margin: 0 14%;}} /* 1600px */
@media screen and (min-width: 120em) {body {margin: 0 18%;}} /* 1920px */
@media screen and (min-width: 160em) {body {margin: 0 22%;}} /* 2560px */
@media screen and (min-width: 200em) {body {margin: 0 26%;}} /* 3200px */
@media screen and (min-width: 240em) {body {margin: 0 30%;}} /* 3840px */ 

/* ----------------------------------------------------------------------------
= Extra Bootstrap grid elements
----------------------------------------------------------------------------- */
.row-cols-7>*{flex:0 0 auto;width:14.2857142857%}
.row-cols-8>*{flex:0 0 auto;width:12.5%}
.row-cols-sm-7>*{flex:0 0 auto;width:14.2857142857%}
.row-cols-sm-8>*{flex:0 0 auto;width:12.5%}
.row-cols-md-7>*{flex:0 0 auto;width:14.2857142857%}
.row-cols-md-8>*{flex:0 0 auto;width:12.5%}
.row-cols-lg-7>*{flex:0 0 auto;width:14.2857142857%}
.row-cols-lg-8>*{flex:0 0 auto;width:12.5%}
.row-cols-xl-7>*{flex:0 0 auto;width:14.2857142857%}
.row-cols-xl-8>*{flex:0 0 auto;width:12.5%}
.row-cols-xxl-7>*{flex:0 0 auto;width:14.2857142857%}
.row-cols-xxl-8>*{flex:0 0 auto;width:12.5%}

/* ----------------------------------------------------------------------------
= Header basics
----------------------------------------------------------------------------- */

@media screen and (max-width: 48em) { 
    header { zoom: 1; min-height: 40px; }
    header::before, header::after { display: block; visibility: hidden; height: 0; content: '\0020'; }
    header::after { clear: both; } }

/*--  Header SheddLogo [differs from LYL] --*/
header .SheddLogo a, header .SheddLogo span { display: block; height: 100%; width: 100%; text-indent: -9999px; opacity: 1; transition: none; }

header .SheddLogo { height: 64px; position: absolute; left: .5em; top: 2em; transform: translateY(-50%); }
.SheddLogo { height: 64px; position: absolute; left: .5em; top: 2em; transform: translateY(-50%); }

/* Header logo is larger from 64ems (1024px) up NOTE: The header height is set here as well  */

@media screen and (min-width: 20em) {header {height:70px;}
    header .SheddLogo {height:42px; left:.5em; top:2em; }
}
@media screen and (min-width: 36em) {header {height:70px;}
    header .SheddLogo {height:42px; left:.5em; top:2em; }
}
@media screen and (min-width: 48em) {header {height:90px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}
@media screen and (min-width: 62em) {header {height:90px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em;}
}
@media screen and (min-width: 75em) {header {height:90px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}
@media screen and (min-width: 87.5em) {header {height:90px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}
@media screen and (min-width: 120em) {header {height:90px;width:1600px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}
@media screen and (min-width: 160em) {header {height:90px;width:1600px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}
@media screen and (min-width: 200em) {header {height:90px;width:1600px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}
@media screen and (min-width: 240em) {header {height:90px;width:1600px;}
    header .SheddLogo {height:64px; left:.5em; top:2.5em; }
}


header .SheddLogo a:hover { opacity: 0.75; }

/*--  ActionLogo --*/
.ActionIcon {height: 30px;}

@media screen and (min-width: 20em) {.ActionIcon {height:28px; align-self:center; vertical-align:central; }}
@media screen and (min-width: 36em) {.ActionIcon {height:28px; align-self:center; vertical-align:central; }}
@media screen and (min-width: 48em) {.ActionIcon {height:36px; align-self:center; vertical-align:central; }}
@media screen and (min-width: 62em) {.ActionIcon {height:36px; align-self:center; vertical-align:central; }}

/*-- GLOBAL NAV -- */
.global_nav { height: 66px; position: absolute; top: -5px; right: 10px; min-width: 200px; z-index: 50001; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0px 10px; -webkit-transition: all 200ms linear; transition: all 200ms linear; }

/* display/hide contact block at */
@media screen and (max-width: 64em) { .global_nav { display: none; } }

/* Ticket Office Information (top right) */
.global_nav .box-office {float: left; margin-right: 0; }
.global_nav .box-office span {font-family: ITCKabelStdBook; font-size: 14px; 
                              color: #FFFFFF; letter-spacing: 0; line-height: 18px; -webkit-font-smoothing: antialiased;}
.global_nav .box-office span.title {margin-right: 3px; }
.global_nav .box-office span.phone {font-family: ITCKabelStdBook; font-size: 13px; color: #8eb4d3; letter-spacing: 0; line-height: 18px; }
.global_nav .box-office span.address {font-family: ITCKabelStdBook; font-size: 13px; line-height: 15px; color: white; }

.venue-name { font-family: ITCKabelStdBook; font-size: 18px; color: white; line-height: 20px; }
.venue-phone { font-family: ITCKabelStdBook; font-size: 13px; color: white; line-height: 13px; }
.venue-hours { font-family: ITCKabelStdBook; font-size: 13px; color: white; line-height: 13px; }
.venue-address { font-family: ITCKabelStdBook; font-size: 13px; color: white; line-height: 13px; }

/* email */
.email a { font-family: ITCKabelStdBook; font-size: 14px; text-decoration: none; color: white; line-height: 18px; -webkit-font-smoothing: antialiased; position: relative;}
.email a::after {content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); text-align: center;
    transition: all 200ms linear; }
.email a::before {content: ""; height: 1px; width: 0; position: absolute; bottom: -2px; left:1px;  background: #D9262A; transition: width 200ms linear; }
.email a:hover { text-decoration: none; color: white; }
.email a:hover::before { text-decoration: none; width: calc(100%); }


/* Ticket Office email (top right) */
.global_nav .email { text-decoration:none; }
.global_nav .email a { font-family: ITCKabelStdBook; font-size: 14px; text-decoration:none; color: white; letter-spacing: 0; line-height: 18px; margin-left:-2px;}
.global_nav .email a::after { 
    content: ""; position: absolute; text-decoration:none; right: 0; top: 2em;
    transform: translateY(-50%); text-align: center; transition: all 200ms linear; }
.global_nav .email a::before { 
    content: ""; height: 1px; width: 0; position: absolute; bottom: -2px; text-decoration:none; background: #D9262A; transition: width 200ms linear; }
.global_nav .email a:hover { color: white; text-decoration:none; }
.global_nav .email a:hover::before { width: calc(100% - 10px); text-decoration:none; }

/*-- Header event calendar & donation button (not used) -- */
.global_nav .event-calendar { float: left; }
.global_nav .event-calendar a { font-family: ITCKabelStdBook; font-weight: bold; font-size: 14px; color: white; letter-spacing: 0; line-height: 18px; -webkit-font-smoothing: antialiased; position: relative; padding: 10px 0px; padding-right: 30px; margin-right: 30px; }
.global_nav .event-calendar a::after { content: ""; position: absolute; right: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../images/icons/calendar.svg"); background-size: 19px 18px; height: 18px; width: 19px; background-repeat: no-repeat; background-position: center; -webkit-transition: all 200ms linear; transition: all 200ms linear; }
.global_nav .event-calendar a::before { content: ""; height: 1px; width: 0; position: absolute; bottom: 5px; right: 30px; background: #D9262A; -webkit-transition: width 200ms linear; transition: width 200ms linear; }
.global_nav .event-calendar a:hover { color: white; }
.global_nav .event-calendar a:hover::after { background-image: url("../images/icons/calendar-hover.svg"); }
.global_nav .event-calendar a:hover::before { width: calc(100% - 30px); }

.global_nav .donate { float: left; }

/* ----------------------------------------------------------------------------
= Navigations
----------------------------------------------------------------------------- */
/* This is the main menu. Default = displayed --*/
.main_nav{ zoom: 1; height: 18px; top:58px; position: absolute; right: 0px; bottom: 0px; z-index: 505; margin: 0 0 0; padding: 0; padding-right: 8px; display: block; }
.main_nav::before, .main_nav::after { display: none; visibility: hidden; height: 0; content: '\0020'; }
.main_nav::after { clear: both; }

/*-- Don't use  mobile nav header/footer --*/
.main_nav .mobile_nav_header, .main_nav .mobile_nav_footer { display: none; }

/*-- Main Menu, Top level (horizontal list) --*/
.main_nav ul { position: relative; display: block; margin: 0; padding: 0; text-align: left; float: left; }
.main_nav ul li { position: relative; display: block; float: left; height: auto; margin: 0; padding: 0; }

/* Defines horizontal menu styling - "padding" sets spacing between elements */
.main_nav > ul > li > a, 
.main_nav > ul > li > a:link, 
.main_nav > ul > li > a:visited { display: block; margin: 0; padding: 0 9px 32px; 
    color: white; font-family: ITCKabelStdBook; font-size: 16px; 
    text-align: left; text-decoration: none; -webkit-transition: none; transition: none; 
    -webkit-font-smoothing: antialiased; }

.main_nav > ul > li > a span, 
.main_nav > ul > li > a:link span, 
.main_nav > ul > li > a:visited span { display: block; clear: both; margin: 0 0 10px; color: #D9262A; 
    font-size: 22px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; 
    text-decoration: none; }

.main_nav > ul > li > a:hover, 
.main_nav > ul > li > a.active, 
.main_nav > ul > li > a:link:hover, 
.main_nav > ul > li > a:link.active, 
.main_nav > ul > li > a:visited:hover, 
.main_nav > ul > li > a:visited.active { color: white; text-decoration: none;}

/* Defines red line under horizontal menu elements. "width" = length of this line for each element*/
/* beginning of red underline */
.main_nav > ul > li > a::before {content: ''; height: 1px; position: absolute; bottom: 32px; 
  width: 0; text-decoration: none; background: #D9262A; 
  -webkit-transition: width 200ms linear; transition: width 200ms linear; }
.main_nav > ul > li > a:hover::before { width: calc(100% - 17px); }
.main_nav > ul > li > a.active::after, 
.main_nav > ul > li > a:link.active::after, 
.main_nav > ul > li > a:visited.active::after {content: ''; position: absolute; top: calc(100% - 32px); 
  left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); 
  text-decoration: none; background: #D9262A; height: 1px; width: 100px; 
  -webkit-transition: width 200ms linear; transition: width 200ms linear; }

.main_nav > ul > li > a.active:hover::after, 
.main_nav > ul > li > a:link.active:hover::after, 
.main_nav > ul > li > a:visited.active:hover::after { width: 60px; }

/*-- Main menu 2nd level drop downs container --*/
.main_nav > ul .sub { position: absolute; display: none; z-index: 9000; top: 1.9em; left: 0; width: 100%; 
                      background: black; min-width: 8em; padding-bottom: 1em; }
.main_nav > ul .sub > ul {float: left; height: auto; margin: 0; border: none; border-top: none; background: none; position: relative; display: block; }
/*--  The red left edge bar of the drop down*/
.main_nav > ul .sub > ul::after {content: ""; background: #D9262A; height: 100%; width: 1px; position: absolute; top: 0px; left: 18px;}

/*-- Main menu 2nd level items  (the first vertical menu) --*/
.main_nav > ul .sub > ul > li { 
    float: none; height: auto; margin-left: 2px; list-style-type: none; list-style-image: none; 
    border-right: none; border-left: none; cursor: pointer; text-align: left; 
    padding-left: 1.8em; padding-right: .5em; width: 100%; display: block; float: left; }

.main_nav > ul .sub > ul > li:first-child { display: block; border-top: none; }
.main_nav > ul .sub > ul > li > a, 
.main_nav > ul .sub > ul > li > a:link, 
.main_nav > ul .sub > ul > li > a:visited { 
    display: block; margin: 0; color:white; 
    font-size: 16px; line-height: 18px; cursor: pointer;
    text-align: left; text-decoration: none; text-indent: 0; text-transform: none; 
    font-family: ITCKabelStdBook; padding: 6px 0 2px 0px; -webkit-font-smoothing: antialiased; }

.main_nav > ul .sub > ul > li > a:hover, 
.main_nav > ul .sub > ul > li > a:focus, 
.main_nav > ul .sub > ul > li > a.active, 
.main_nav > ul .sub > ul > li > a:link:hover, 
.main_nav > ul .sub > ul > li > a:link:focus, 
.main_nav > ul .sub > ul > li > a:link.active, 
.main_nav > ul .sub > ul > li > a:visited:hover, 
.main_nav > ul .sub > ul > li > a:visited:focus, 
.main_nav > ul .sub > ul > li > a:visited.active { color: #D9262A; cursor: pointer; text-decoration: none; }

/*-- Main menu 2nd level menu items with 3rd level */
/*-- defines where the "+" goes ..."height" determines position relative to text to left */
.main_nav > ul .sub > ul > li.has-third-level .sub_trigger { 
    display: inline-block; position: absolute; height: 30px; width: 30px; top: 0px; right: 10px; margin-left: 10px; cursor: pointer; }

.main_nav > ul .sub > ul > li.has-third-level .sub_trigger::before, 
.main_nav > ul .sub > ul > li.has-third-level .sub_trigger::after { content: ""; background: #4a739f; position: absolute; }
.main_nav > ul .sub > ul > li.has-third-level .sub_trigger::before { height: 12px; width: 2px; left: 5px; top: 10px; }
.main_nav > ul .sub > ul > li.has-third-level .sub_trigger::after { height: 2px; width: 12px; top: 15px; }

.main_nav > ul .sub > ul > li.has-third-level.open .sub_trigger::before { content: none; }

.main_nav > ul .sub > ul > li:not(.has-third-level) > a[rel="external"]::after, 
.main_nav > ul .sub > ul > li:not(.has-third-level) > a:link[rel="external"]::after, 
.main_nav > ul .sub > ul > li:not(.has-third-level) > a:visited[rel="external"]::after { content: "\f08e"; font-family: "FontAwesome"; margin-left: 10px; }

/*-- Main menu 3rd level menu (indented below 2nd level items) */
.main_nav > ul .sub > ul > li ul.level_3 { width: 100%; padding-left: 20px; display: none;}
.main_nav > ul .sub > ul > li ul.level_3 > li { float: left; width: 100%;}

.main_nav > ul .sub > ul > li ul.level_3 > li > a, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:link, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:visited { 
    display: block; height: auto; margin: 0; color: white; background: none; 
    font-size: 16px; font-weight: 400; line-height: 18px; cursor: pointer; text-align: left; 
    padding-top: 3px; padding-bottom: 3px; text-decoration: none; text-indent: 0; text-transform: none; 
    font-family: ITCKabelStdBook; -webkit-font-smoothing: antialiased; }

.main_nav > ul .sub > ul > li ul.level_3 > li > a[rel="external"]::after, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:link[rel="external"]::after, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:visited[rel="external"]::after { 
    content: "\f08e"; font-family: "FontAwesome"; margin-left: 10px; }

.main_nav > ul .sub > ul > li ul.level_3 > li > a:hover, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:focus, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a.active, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:link:hover, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:link:focus, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:link.active, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:visited:hover, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:visited:focus, 
.main_nav > ul .sub > ul > li ul.level_3 > li > a:visited.active { color: #D9262A; cursor: pointer; }

/*-- Main menu 4thlevel menu (indented with bullet below 3rd level items...doesn't hide) */
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 { width: 100%; padding-left: 10px; }
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li { float: left; width: 100%; }

.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:link, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:visited { 
    display: block; height: auto; margin: 0; color: white; background: none; 
    font-size: 13px; font-weight: 400; line-height: 15px; cursor: pointer; 
    text-align: left; text-decoration: none; text-indent: 0; text-transform: none; 
    font-family: ITCKabelStdBook; -webkit-font-smoothing: antialiased; }

.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a::before, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:link::before, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:visited::before { content:box; }

.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a[rel="external"]::after, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:link[rel="external"]::after, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:visited[rel="external"]::after { 
    content: "\f08e"; font-family: "FontAwesome"; margin-left: 10px; }

.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:hover, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:focus, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a.active, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:link:hover, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:link:focus, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:link.active, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:visited:hover, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:visited:focus, 
.main_nav > ul .sub > ul > li ul.level_3 > li ul.level_4 > li > a:visited.active { color: #D9262A; cursor: pointer; }

/* this turns the main menu text that is NOT covered over whatever color 
    keeping it white for now.
*/
.main_nav > ul:hover > li > a:not(.active), 
.main_nav > ul:hover > li > a:not(.active):link, 
.main_nav > ul:hover > li > a:not(.active):visited { color: white; }

.main_nav > ul:hover > li.hover > a, 
.main_nav > ul:hover > li.hover > a:link, 
.main_nav > ul:hover > li.hover > a:visited { color: white; }

/* ===============================================================================
= Mobile Navigation
================================================================================== */
/*-- Mobile menu button (nav-toggle) */
#nav-toggle { position: absolute; width: 30px; height: 10px; cursor: pointer; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); position: absolute; top: 6px; left: 50%; -webkit-transform: translateX(-50%) rotate(0); transform: translateX(-50%) rotate(0); -webkit-transition: all 200ms linear; transition: all 200ms linear; }

#nav-toggle span.top, 
#nav-toggle span.bottom { position: absolute; top: 0px; left: 0px; width: 30px; height: 2px; -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }

#nav-toggle span.bar { display: block; width: 30px; height: 2px; background: #fff; position: absolute; left: 0px; -webkit-transition: background 200ms linear, -webkit-transform 200ms linear; transition: background 200ms linear, -webkit-transform 200ms linear; transition: transform 200ms linear, background 200ms linear; transition: transform 200ms linear, background 200ms linear, -webkit-transform 200ms linear; }

#nav-toggle span.top { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: rotate(0); transform: rotate(0); }

#nav-toggle span.top .bar { top: 0px; -webkit-transition: -webkit-transform 0.2s 0.2s; transition: -webkit-transform 0.2s 0.2s; transition: transform 0.2s 0.2s; transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s; -webkit-transform: translateY(-3px); transform: translateY(-3px); }

#nav-toggle span.bottom { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transform: rotate(0); transform: rotate(0); }

#nav-toggle span.bottom .bar { bottom: 0px; -webkit-transition: -webkit-transform 0.2s 0.2s; transition: -webkit-transform 0.2s 0.2s; transition: transform 0.2s 0.2s; transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s; -webkit-transform: translateY(4px); transform: translateY(4px); }

#nav-toggle:hover span.bar { background: white; }

/*-- Mobile menu button context (nav-toggle-wrapper). Default = not displayed --*/
.nav-toggle-wrapper { top: 2em; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 8px; width: 50px; height: 34px; position: absolute; display: none; z-index: 1501; cursor: pointer; }

/*-- Displays mobile toggle button up to max-width (disappears at max-width setting. This @media entry must follow entry above --*/
@media screen and (max-width: 64em) {.nav-toggle-wrapper {display: block;}}

.nav-toggle-wrapper .text { /* Menu: */ font-family: "ITCKabelStdBook"; font-size: 11px; color: #E6E6E6; letter-spacing: 0; text-align: center; line-height: 11px; position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.nav-toggle-wrapper.active #nav-toggle { -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); left: calc(50% - 3px); top: 3px; }

.nav-toggle-wrapper.active #nav-toggle span.bar {background: #D9262A;}
.nav-toggle-wrapper.active #nav-toggle span.top { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); }

.nav-toggle-wrapper.active #nav-toggle span.top .bar { -webkit-transform: translateY(0); transform: translateY(0); top: 0px; left: 0px; }

.nav-toggle-wrapper.active #nav-toggle span.bottom { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); }

.nav-toggle-wrapper.active #nav-toggle span.bottom .bar { -webkit-transform: translateY(0); transform: translateY(0); top: 0px; left: 1px; }

.nav-toggle-wrapper.active #nav-toggle + .text { color: white; }

/*-- Main menu bar --*/
/*-- This @media rule shapes the mobile menu (specifies a scroll on overflow, which keeps the mobile menu compact.
    It has no effect on the appearance or display of the main menu. */
@media screen and (max-width: 20em) {.nav_wrapper { position: fixed; top: 0; left: 0; width: 0; height: 100%; background: transparent; } }

.nav_wrapper.is-opened { 
    z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background: black; 
    -webkit-transition: background 200ms linear; transition: background 200ms linear;
}

/* This is the overal mobile menu container. It is modified by elements defined below.
    right: 18px specifies distance from right edge the mobile nav sits.
*/
.mobile_nav { position: absolute; display: none; z-index: 500 !important; top: 0px; width: 100%; margin: 0 0 0; padding: 0; background: black; max-width: 280px; right: 0px; height: 100%; zoom: 1;}
.mobile_nav::before, .mobile_nav::after { display: block; visibility: hidden; height: 0; content: '\0020'; }
.mobile_nav::after { clear: both; }
.mobile_nav .hover a { color: #D9262A; }

/*== Mobile menu header (not in current template) =====*/
.mobile_nav .mobile_nav_header { background: black; position: fixed; top: 0px; right: 0px; width: 100%; max-width: 280px; padding: 0px; z-index: 1; height: 0px; }

/*== Mobile menu footer =======*/
.mobile_nav .mobile_nav_footer { width: 100%; clear: both; min-height: 1em; height: 4.4em; background-color: black; padding: 1em 0 0 0; zoom: 1; }
.mobile_nav .mobile_nav_footer::before, 
.mobile_nav .mobile_nav_footer::after { display: block; visibility: hidden; height: 0; content: '\0020'; }
.mobile_nav .mobile_nav_footer .box-office  { font-family: "ITCKabelStdBook"; font-size: 16px; color: white; line-height: 18px; -webkit-font-smoothing: antialiased; text-align:center }
.mobile_nav .mobile_nav_footer .phone { font-family: ITCKabelStdBook; font-size: 13px; line-height: 15px; color: #8eb4d3; }
.mobile_nav .mobile_nav_footer .address { font-family: ITCKabelStdBook; font-size: 13px; line-height: 15px; color: white; }
.mobile_nav .mobile_nav_footer .email a { font-family: ITCKabelStdBook; color:white; font-size: 13px;line-height: 15px; -webkit-font-smoothing: antialiased; position: relative;}
.mobile_nav .mobile_nav_footer .email a::after { content: ""; position: absolute; right: 0px; top: 50%; 
    transform: translateY(-50%); text-align: center; transition: all 200ms linear;
    -webkit-transform: translateY(-50%); -webkit-transition: all 200ms linear; }
.mobile_nav .mobile_nav_footer .email a::before { 
    content: ""; height: 1px; width: 0; position: absolute; bottom: -2px; background: #D9262A; 
    -webkit-transition: width 200ms linear; transition: width 200ms linear; }
.mobile_nav .mobile_nav_footer .email a:hover { color: white; }
.mobile_nav .mobile_nav_footer .email a:hover::before { width: 100%; }

/*-- Mobile Menu list itself. 
    "padding-top" controls space at top of menu list (where "donate" & "search" could be (CSS for these stripped from this file)*/

.mobile_nav > ul { position: relative; display: block; float: left; clear: left; width: 100%; margin: 0; text-align: left; 
                   padding: 40px 0 0 20px; background: black; }

/*== Styles  1st level (main) navigation items ======*/
.mobile_nav > ul > li { position: relative; display: block; float: left; clear: left; width: 95%; margin: 0; padding: 0; border-bottom: 1px solid #E6E6E6; }
.mobile_nav > ul > li.page_1 { display: none; }
.mobile_nav > ul > li > .close-button { display: block; font-size: 18px; color: white; width: 18px; height: 18px; 
                                        position: absolute; top: 2px; right: 0px; cursor: pointer; }
.mobile_nav > ul > li > .close-button::after { content: "\f107"; font-family: "FontAwesome"; position: absolute; right: 4px; top: 10px; 
                                               -webkit-transition: all 200ms linear; transition: all 200ms linear; }
.mobile_nav > ul > li > .close-button:hover::after { color: #D9262A; }
/* Styles 1st level links */
.mobile_nav > ul > li > a, 
.mobile_nav > ul > li > a:link, 
.mobile_nav > ul > li > a:visited {display: block; float: left; clear: left; width: 100%; margin: 0; padding: 6px 0 6px 0 ; 
            font-family: ITCKabelStdBook,sans-serif; font-size: 16px; color: white; text-decoration: none; -webkit-font-smoothing: antialiased; }
.mobile_nav > ul > li > a:hover, 
.mobile_nav > ul > li > a.active, 
.mobile_nav > ul > li > a:link:hover, 
.mobile_nav > ul > li > a:link.active, 
.mobile_nav > ul > li > a:visited:hover, 
.mobile_nav > ul > li > a:visited.active { color: #D9262A; }

/*== Styles  2nd level navigation items ======*/

/* JQR - added to fix lack of wrap-around & tweak leading between lines (2022-04-02)  */
.mobile_nav > ul .sub > ul > li { 
    float: none; height: auto; margin-left: 2px; list-style-type: none; list-style-image: none; 
    border-right: none; border-left: none; cursor: pointer; text-align: left; 
    padding:  0 .5em .4em 0; width: 100%; display: block; float: left; }

/*--  The red left edge bar of the drop down*/
.mobile_nav > ul > li .sub { float: left; width: 80%; display: none; top:0; position: relative; padding: 0 0 .5em 1em; }
.mobile_nav > ul > li .sub::before { content: ""; position: absolute; top: 0px; left: 8px; height: calc(100% - 10px); width: 1px; background: #D9262A; }
/* deals with 3rd level button when needed */
.mobile_nav > ul > li .sub > ul > li.has-third-level { position: relative; }
.mobile_nav > ul > li .sub > ul > li.has-third-level .sub_trigger { display: inline-block; position: absolute; 
            height: 12px; width: 12px; top: 8px; right: 5px; margin-left: 10px; cursor:pointer; }
.mobile_nav > ul > li .sub > ul > li.has-third-level .sub_trigger::before, 
.mobile_nav > ul > li .sub > ul > li.has-third-level .sub_trigger::after { content: ""; background: #4a739f; position: absolute; }
.mobile_nav > ul > li .sub > ul > li.has-third-level .sub_trigger::before { height: 12px; width: 2px; left: 5px; }
.mobile_nav > ul > li .sub > ul > li.has-third-level .sub_trigger::after { height: 2px; width: 12px; top: 5px; }
.mobile_nav > ul > li .sub > ul > li.has-third-level.open .sub_trigger::before { content: none; }
.mobile_nav > ul > li .sub > ul > li:not(.has-third-level) > a[rel="external"]::after, 
.mobile_nav > ul > li .sub > ul > li:not(.has-third-level) > a:link[rel="external"]::after, 
.mobile_nav > ul > li .sub > ul > li:not(.has-third-level) > a:visited[rel="external"]::after { content: "\f08e"; font-family: "FontAwesome"; margin-left: 10px; }

/* Styles 2nd level links */
.mobile_nav > ul > li .sub > ul > li > a, 
.mobile_nav > ul > li .sub > ul > li > a:link, 
.mobile_nav > ul > li .sub > ul > li > a:visited { font-family: ITCKabelStdBook; font-size: 16px; 
        color: white; line-height: 20px; padding: 6px 0 6px 0; -webkit-font-smoothing: antialiased; }
.mobile_nav > ul > li .sub > ul > li > a:hover, 
.mobile_nav > ul > li .sub > ul > li > a.active, 
.mobile_nav > ul > li .sub > ul > li > a:link:hover, 
.mobile_nav > ul > li .sub > ul > li > a:link.active, 
.mobile_nav > ul > li .sub > ul > li > a:visited:hover, 
.mobile_nav > ul > li .sub > ul > li > a:visited.active { color: #D9262A; }

/*== Styles  3rd level navigation items ======*/
.mobile_nav > ul > li .sub ul.level_3 { padding-left: 20px; padding-bottom: 0px; display: none; }
.mobile_nav > ul > li .sub ul.level_3::before, 
.mobile_nav > ul > li .sub ul.level_3::after { display: block; visibility: hidden; height: 0; content: '\0020'; }
.mobile_nav > ul > li .sub ul.level_3::after { clear: both; }
.mobile_nav > ul > li .sub ul.level_3 > li { float: left; width: 100%; }
/* Styles 3rd level links */
.mobile_nav > ul > li .sub ul.level_3 > li > a, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:link, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:visited { display: block; height: auto; margin: 0; font-family: ITCKabelStdBook; font-size: 16px; 
        color: white; line-height: 20px; padding: 3px 0 3px 0; -webkit-font-smoothing: antialiased; }

.mobile_nav > ul > li .sub ul.level_3 > li > a[rel="external"]::after, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:link[rel="external"]::after, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:visited[rel="external"]::after { content: "\f08e"; font-family: "FontAwesome"; margin-left: 10px; }

.mobile_nav > ul > li .sub ul.level_3 > li > a:hover, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:focus, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:link:hover, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:link:focus, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:visited:hover, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:visited:focus { color: #D9262A; cursor: pointer; }

.mobile_nav > ul > li .sub ul.level_3 > li > a:hover, 
.mobile_nav > ul > li .sub ul.level_3 > li > a.active, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:link:hover, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:link.active, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:visited:hover, 
.mobile_nav > ul > li .sub ul.level_3 > li > a:visited.active { color: #D9262A; }

.mobile_nav > ul > li .sub ul.level_4 { width: 100%; padding-left: 10px; }

.mobile_nav > ul > li .sub ul.level_4 > li { float: left; width: 100%; }

.mobile_nav > ul > li .sub ul.level_4 > li > a, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited { display: block; height: auto; margin: 0; color: white; background: none; text-shadow: none; font-size: 13px; font-weight: 400; line-height: 21px; cursor: pointer; text-align: left; text-indent: 0; text-transform: none; font-family: ITCKabelStdBook; padding: 5px 0px; -webkit-font-smoothing: antialiased; }

.mobile_nav > ul > li .sub ul.level_4 > li > a[rel="external"]::after, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link[rel="external"]::after, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited[rel="external"]::after { content: "\f08e"; font-family: "FontAwesome"; margin-left: 10px; }

.mobile_nav > ul > li .sub ul.level_4 > li > a::before, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link::before, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited::before { content: "- "; }

.mobile_nav > ul > li .sub ul.level_4 > li > a:hover, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:focus, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link:hover, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link:focus, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited:hover, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited:focus { color: #D9262A; cursor: pointer; }

.mobile_nav > ul > li .sub ul.level_4 > li > a:hover, 
.mobile_nav > ul > li .sub ul.level_4 > li > a.active, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link:hover, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:link.active, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited:hover, 
.mobile_nav > ul > li .sub ul.level_4 > li > a:visited.active { color: #D9262A; }

.mobile_nav > ul > li.is-opened > .close-button::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); color: #D9262A; }

/*================================
    FOOTER BASICS
===================================*/
footer { position: relative; width: 100%; margin: 0; z-index: 1; }
footer .footer_holder { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; min-height: 2em; } 

/*================================
    FOOTER PANEL
================================-*/
footer .footer_panel {background: black; height:6.2em; -webkit-box-flex: 1; flex: 1; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; background-position: left center; background-size: auto 100%; background-repeat: no-repeat; background-color: black; }

/*.panel_inner {padding-top: .9em; padding-left: 1em;}*/
/*.panel_inner_right {padding-top: 1.4em; padding-right:2em; padding-left:3em;}*/
.panel_inner {position: relative; padding-top: .9em; padding-left: 1em;}
.panel_inner_right {position: relative; float:right; padding-top: 2em; padding-left:0em;}

.footer_venuename {font-size: 20px; width:295px; color:white; border-bottom: 1px solid #D9262A; padding-bottom:4px; margin-bottom: 4px;}

.footer_venueaddress,
.footer_venuephone,
.footer_venueemail,
.footer_venuehours {color:white; font-size:13px; line-height:16px; padding-left:6px; }
.footer_venuephone {color: #8eb4d3; }

/*--  FOOTER SOCIAL   --*/
.footer_social { width:60px; display: block; vertical-align:central; margin: 0px; 
                 text-align:right; transition: all 200ms linear; background-color:transparent;}
.footer_social::after { clear: both; }

.footer_social a { color: white; width: 25px; height: 25px; font-size: 21px; line-height: 21px; }
.footer_social a:hover { color: #D9262A;}
.fb a:hover {color: royalblue;}
.tw a:hover {color: deepskyblue;}
.yt a:hover {color: red;}
.ig a:hover {color:gold;}

@media screen and (max-width: 200em) {.panel_inner {width: 92%;}}
@media screen and (max-width: 100em) {.panel_inner {width: 92%;}}
@media screen and (max-width: 87.5em) {.panel_inner {width: 91%;}}
@media screen and (max-width: 75em) {.panel_inner {width: 90%;}}
@media screen and (max-width: 62em) {.panel_inner {width: 88%;}}
@media screen and (max-width: 48em) {.panel_inner {width: 86%;} 
@media screen and (max-width: 36em) {.panel_inner {width: 84%;}}
@media screen and (max-width: 32em) {.panel_inner {width: 82%;}}

@media screen and (max-width: 36em) {
    .footer_venueaddress, .footer_venuephone, .footer_venueemail,footer_panel .panel_inner .email,
    .footer_venuehours {font-size:12px; line-height:14px;}
    .footer_social a {width: 22px; height: 22px; font-size: 18px; line-height: 18px; margin-left: 2px;}
    .footer_social {width: 54px;}
    .footer_venuename {font-size:18px; width:270px; }
    .panel_inner {padding-top: .9em;}
    footer .footer_panel {height:6em;}
    }

/* ----------------------------------------------------------------------------
= Baseline styles for all buttons in a project. These are global.
----------------------------------------------------------------------------- */
.m-button, .gen-button, input.button, .base-button, .scale-button, .dontshow-overlay, .map_window .directions form button { display: inline-block; position: relative; background-color: #fff; color: #ffffff; text-align: center; padding: 10px 20px; line-height: 1; font-family: ITCKabelStdBook; font-size: 14px; color: black; letter-spacing: 0; text-align: center; font-weight: 500; }

.m-button:hover, .gen-button:hover, input.button:hover, .base-button:hover, .scale-button:hover, .dontshow-overlay:hover, .map_window .directions form button:hover { background-color: #D9262A; color: #fff; }

#loadMoreEvents[disabled="disabled"] { display: none; }

/***********************************************/
/*      Add Additional Button Styles Below     */
/***********************************************/
.base-button, 
.scale-button, 
.dontshow-overlay, 
.map_window .directions form button { 
    background: #D9262A; height: 32px; padding: 0px 20px; font-family: ITCKabelStdBook; font-weight: bold; font-size: 14px; 
    color: #FFFFFF; letter-spacing: 0; text-align: center; line-height: 32px; -webkit-font-smoothing: antialiased; 
    -webkit-transition: all 200ms linear; transition: all 200ms linear; }

.base-button:hover, 
.scale-button:hover, 
.dontshow-overlay:hover, 
.map_window .directions form button:hover { background-color: #FF0C11; }

.scale-button { position: relative; }
.scale-button::before, 
.scale-button::after { content: ""; position: absolute; left: 0px; width: 100%; height: 0px; 
                       background: #D9262A; -webkit-transition: all 200ms linear; transition: all 200ms linear; }
.scale-button::before { top: 100%; }
.scale-button::after { bottom: 100%; }
.scale-button:hover::before, 
.scale-button:hover::after { height: 5px; background: #FF0C14; }

.btn-calendar { background: transparent; color: white; }

.border-button, 
.spotlight-button, 
.button a, 
a.button, 
.news_list a.button { 
    padding: 10px 25px; border: 2px solid #D9262A; height: 36px; font-family: ITCKabelStdBook; font-weight: bold; font-size: 14px; 
    color: black; letter-spacing: 0; text-align: center; line-height:14px; text-decoration: none; 
    -webkit-transition: all 200ms linear; transition: all 200ms linear; -webkit-font-smoothing: antialiased; }

.border-button:hover, 
.spotlight-button:hover, 
a.button:hover, 
.button a:hover { background: #D9262A; color: white; }

.link { position: relative; }
.link ul.list { padding: 0; max-width: 980px; width: 100%; margin-left: auto; margin-right: auto; }
.link ul.list li > a, .link ul.list li > span { display: block; position: relative; padding: 5px 0px 0px 55px; word-wrap: break-word; color: black; font-family: ITCKabelStdBook; font-size: 18px; letter-spacing: 0; line-height: 43px; font-weight: 700; -webkit-transition: all 200ms linear; transition: all 200ms linear; }

 /*-----------------------------------------------------------
     Handles all Social Media icons for select social media urls -- Twitter | Facebook | Instagram | Pinterest 
  ------------------------------------------------------------*/ 
.link ul.list li > a .link_text, 
.link ul.list li > span .link_text { position: relative; font-weight: 800; }
.link ul.list li > a .link_text::after, 
.link ul.list li > span .link_text::after { content: ""; width: 100%; height: 1px; background: #D9262A; position: absolute; bottom: 0px; right: 0px; -webkit-transition: all 200ms linear; transition: all 200ms linear; }
.link ul.list li > a svg, .link ul.list li > span svg { -webkit-font-smoothing: antialiased; -webkit-transition: all 200ms linear; transition: all 200ms linear; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0px; }
.link ul.list li > a svg, .link ul.list li > a svg g, .link ul.list li > span svg, .link ul.list li > span svg g { fill: black; -webkit-transition: all 200ms linear; transition: all 200ms linear; }

.link ul.list li > a:hover, .link ul.list li > span:hover { color: #D9262A; }
.link ul.list li > a:hover svg, .link ul.list li > a:hover svg g, .link ul.list li > span:hover svg, .link ul.list li > span:hover svg g { fill: #D9262A; }

.link ul.list li > a:hover .link_text::after, .link ul.list li > span:hover .link_text::after { width: 20px; }

.link ul.list li > a[href*="twitter"] svg, .link ul.list li > a[href*="facebook"] svg, .link ul.list li > a[href*="instagram"] svg, .link ul.list li > a[href*="pinterest"] svg, .link ul.list li > a[href*="youtube"] svg, .link ul.list li > span[href*="twitter"] svg, .link ul.list li > span[href*="facebook"] svg, .link ul.list li > span[href*="instagram"] svg, .link ul.list li > span[href*="pinterest"] svg, .link ul.list li > span[href*="youtube"] svg { display: none; }

.link ul.list li > a[href*="twitter"]::before, 
.link ul.list li > a[href*="facebook"]::before, 
.link ul.list li > a[href*="instagram"]::before, 
.link ul.list li > a[href*="pinterest"]::before, 
.link ul.list li > a[href*="youtube"]::before, 
.link ul.list li > span[href*="twitter"]::before, 
.link ul.list li > span[href*="facebook"]::before, 
.link ul.list li > span[href*="instagram"]::before, 
.link ul.list li > span[href*="pinterest"]::before, 
.link ul.list li > span[href*="youtube"]::before { -webkit-transition: all 100ms linear; transition: all 100ms linear; position: absolute; top: 4px; left: 0px; display: inline-block; background: none; padding: 0; font-family: FontAwesome; font-size: 25px; font-weight: normal; font-style: normal; color: #404140; text-decoration: inherit; }

.link ul.list li > a[href*="twitter"]:hover::before, .link ul.list li > a[href*="facebook"]:hover::before, .link ul.list li > a[href*="instagram"]:hover::before, .link ul.list li > a[href*="pinterest"]:hover::before, .link ul.list li > a[href*="youtube"]:hover::before, .link ul.list li > span[href*="twitter"]:hover::before, .link ul.list li > span[href*="facebook"]:hover::before, .link ul.list li > span[href*="instagram"]:hover::before, .link ul.list li > span[href*="pinterest"]:hover::before, .link ul.list li > span[href*="youtube"]:hover::before { color: #D9262A; }

.link ul.list li > a[href*="twitter"]::before, .link ul.list li > span[href*="twitter"]::before { content: "\f099"; }
.link ul.list li > a[href*="facebook"]::before, .link ul.list li > span[href*="facebook"]::before { content: "\f09a"; }
.link ul.list li > a[href*="instagram"]::before, .link ul.list li > span[href*="instagram"]::before { content: "\f16d"; }
.link ul.list li > a[href*="pinterest"]::before, .link ul.list li > span[href*="pinterest"]::before { content: "\f0d2"; }
.link ul.list li > a[href*="youtube"]::before, .link ul.list li > span[href*="youtube"]::before { content: "\f16a"; }

.link ul.list li > span .link_icon { display: none; }

.link ul.list .description { padding-left: 55px; }
.link ul.list .description p, .link ul.list .description li { margin-top: 0; }
.link ul.list .description p { margin-bottom: 10px; font-size: 17px; letter-spacing: 0px; font-weight: 400; -webkit-font-smoothing: antialiased; }

/* Preload images */
body::after { content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png); display: none; }