@charset "UTF-8";
@import url("https://hello.myfonts.net/count/2f8ef0");
@import url("https://hello.myfonts.net/count/2f8ef0");
@font-face { font-family: "Scala Sans"; src: url('../fonts/2F8EF0_1_0.eot%3F&1644064179'); src: url('../fonts/2F8EF0_1_0.eot%3F&1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_1_0.eot%3F1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_1_0.woff2%3F1644064179') format('woff2'), url('../fonts/2F8EF0_1_0.woff%3F1644064179') format('woff'), url('../fonts/2F8EF0_1_0.ttf%3F1644064179') format('truetype'); font-weight: normal; font-style: bold; }
@font-face { font-family: "Scala Sans"; src: url('../fonts/2F8EF0_2_0.eot%3F&1644064179'); src: url('../fonts/2F8EF0_2_0.eot%3F&1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_2_0.eot%3F1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_2_0.woff2%3F1644064179') format('woff2'), url('../fonts/2F8EF0_2_0.woff%3F1644064179') format('woff'), url('../fonts/2F8EF0_2_0.ttf%3F1644064179') format('truetype'); font-weight: italic; font-style: normal; }
@font-face { font-family: "Scala Sans"; src: url('../fonts/2F8EF0_3_0.eot%3F&1644064179'); src: url('../fonts/2F8EF0_3_0.eot%3F&1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_3_0.eot%3F1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_3_0.woff2%3F1644064179') format('woff2'), url('../fonts/2F8EF0_3_0.woff%3F1644064179') format('woff'), url('../fonts/2F8EF0_3_0.ttf%3F1644064179') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: "Calibre"; src: url('../fonts/calibre-web-regular.eot%3F&1647072533'); src: url('../fonts/calibre-web-regular.eot%3F&1647072533') format('embedded-opentype'), url('../fonts/calibre-web-regular.eot%3F1647072533') format('embedded-opentype'), url('../fonts/calibre-web-regular.woff%3F1647072533') format('woff'), url('../fonts/calibre-web-regular.woff2%3F1647072533') format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: "Calibre"; src: url('../fonts/calibre-web-bold.eot%3F&1647072533'); src: url('../fonts/calibre-web-bold.eot%3F&1647072533') format('embedded-opentype'), url('../fonts/calibre-web-bold.eot%3F1647072533') format('embedded-opentype'), url('../fonts/calibre-web-bold.woff%3F1647072533') format('woff'), url('../fonts/calibre-web-bold.woff2%3F1647072533') format('woff2'); font-weight: bold; font-style: bold; }
@font-face { font-family: "Scala Sans"; src: url('../fonts/2F8EF0_1_0.eot%3F&1644064179'); src: url('../fonts/2F8EF0_1_0.eot%3F&1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_1_0.eot%3F1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_1_0.woff2%3F1644064179') format('woff2'), url('../fonts/2F8EF0_1_0.woff%3F1644064179') format('woff'), url('../fonts/2F8EF0_1_0.ttf%3F1644064179') format('truetype'); font-weight: normal; font-style: bold; }
@font-face { font-family: "Scala Sans"; src: url('../fonts/2F8EF0_2_0.eot%3F&1644064179'); src: url('../fonts/2F8EF0_2_0.eot%3F&1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_2_0.eot%3F1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_2_0.woff2%3F1644064179') format('woff2'), url('../fonts/2F8EF0_2_0.woff%3F1644064179') format('woff'), url('../fonts/2F8EF0_2_0.ttf%3F1644064179') format('truetype'); font-weight: italic; font-style: normal; }
@font-face { font-family: "Scala Sans"; src: url('../fonts/2F8EF0_3_0.eot%3F&1644064179'); src: url('../fonts/2F8EF0_3_0.eot%3F&1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_3_0.eot%3F1644064179') format('embedded-opentype'), url('../fonts/2F8EF0_3_0.woff2%3F1644064179') format('woff2'), url('../fonts/2F8EF0_3_0.woff%3F1644064179') format('woff'), url('../fonts/2F8EF0_3_0.ttf%3F1644064179') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: "Calibre"; src: url('../fonts/calibre-web-regular.eot%3F&1647072533'); src: url('../fonts/calibre-web-regular.eot%3F&1647072533') format('embedded-opentype'), url('../fonts/calibre-web-regular.eot%3F1647072533') format('embedded-opentype'), url('../fonts/calibre-web-regular.woff%3F1647072533') format('woff'), url('../fonts/calibre-web-regular.woff2%3F1647072533') format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: "Calibre"; src: url('../fonts/calibre-web-bold.eot%3F&1647072533'); src: url('../fonts/calibre-web-bold.eot%3F&1647072533') format('embedded-opentype'), url('../fonts/calibre-web-bold.eot%3F1647072533') format('embedded-opentype'), url('../fonts/calibre-web-bold.woff%3F1647072533') format('woff'), url('../fonts/calibre-web-bold.woff2%3F1647072533') format('woff2'); font-weight: bold; font-style: bold; }
/** Convert font-size from px to rem with px fallback  @param $size - the value in pixel you want to convert  e.g. p {@include fontSize(12px);}  */
/* @file global.styles  Styles you add here will load for all device sizes, they are "global", as opposed to "responsive" styles, which only load for a given breakpoint (media query) that you set in theme settings. See the README for more details.   How to use this file: --------------------  There are many empty selectors and some basic styles to act as a guide. Nothing is set in stone and you can change anything - even delete all of it and start with your own clean slate.  To FORCE PRINT all selectors you can search and replace a single { (opening curly brace) and insert an empty comment. This is very useful in conjuction with FireSass: https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/  See global.base also which includes normalize.css and some additional helper classes and base styles. */
/*

!* ============================================================================= HTML Elements ========================================================================== *!


p { margin-bottom: 1.333em;
}


address { font-style: normal;
}


article ul { margin-left: 2em;
}



pre,
code,
tt,
samp,
kbd,
var { font-family: $mono;
}

!* ============================================================================= Custom Actors Fund components ========================================================================== *!

.title, #page-title, %h1 { @include fontSize(36px); line-height: 1.090909; color: $violet; // text-transform: uppercase;
}

.headline, h2, %h2 { @include fontSize(41px); font-weight: bold; margin-top: 1em; color: $redesign_black
}
h3, h3 a, %h3 { margin-top: 0.25em; margin-bottom: 0.1em; line-height: 1.1; color: $teal; font-weight: normal; text-decoration: underline; font-weight: bold; @include fontSize(34px);

}
// Inline article headers from CKEditor
h2.h2-small, h3.h3-article-inline, .field-name-field-body > h3 { @include fontSize(20px); font-weight: bold; color: $off-black; text-transform: none; letter-spacing: 0.1em; line-height: 1.1; margin: 0.5em 0 0.25em 0;
}
h2 + h2.h2-small, h2 + h3.h3-article-inline { margin-top: -0.5em; margin-bottom: 0.5em;
}
h2.block-title { margin-top: 0;
}

.subhead, h4, %h4 { @include fontSize(17px); color: $gray; text-transform: uppercase; letter-spacing: 0.14em;
}

a { color: $blue;
}


.button-large { @include fontSize(16px); padding: 1em 1.875em; background-color: $red;
}

.button-small { @include fontSize(14px); padding: 0.75em 1.4285714em; background-color: $orange;
}

.photo-credit-notice, .field-name-field-photo-credit { font-style: italic; color: #555;
}

#edit-submit + #edit-preview { margin-left: 1em;
}

ul.list-2-col, .block-content ul.list-2-col { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; li { padding-right: 2em; } & + p { clear: both; }
}


!* ============================================================================= Header & Footer ========================================================================== *!




// Flexbox container for mobile donate button and social icon layout


!* Footer wrapper !
#footer-wrapper { padding: 5em 0 2em 0; background: $redesign_black;; color: #fff; a { color: $teal; text-decoration: underline; &:hover{ border-bottom: none; } } .icon-social{ margin-right: 2em; } h2 { @include fontSize(16px); color: #fff; text-transform: uppercase; } .button-link a { color: #fff; } .copyright { margin: 0 $gutter-width; border-top: 1px $gray solid; padding-top: 1em; color: $redesign_grey; a{ color: $gray; } .block-inner { margin: 0; } .copyright-statement{ float: left; } .privacy-policy{ float: right; } } .taf-logo-grey { margin-bottom: 1.25em; a{ display: inline-block; width: 156px; height: 185px; background-size: contain; padding-right: 1em; float: left; } }
}

#footer-wrapper .footer-partners { a { // @include opacity(0.75); // @include transition(opacity 400ms ease); // color: $teal; // &:link, &:visited, &:hover, &:focus, &:active { //   color: #fff; // } // &:hover, &:focus, &:active { //   @include opacity(1); // } } .icon-social{ margin-right: 1em; }
}
.footer-partners p { margin-bottom: 3em; display: block;
}

#footer-wrapper .partner-promo-text { display: block; @include fontSize(12px); line-height: 1.1; margin-top: 8px; margin-top: 0.5rem;
}

#block-search-form { width: 100%; { @include box-sizing(border-box); -webkit-appearance: none; margin: 0; padding: 0; line-height: 1; @include border-radius(3px); } .container-inline, .form-item { float: left; } .container-inline { width: 100%; max-width: 100%; } .form-item { width: 75%; } input[type="search"] { @include fontSize(16px); padding: 0.5625em 0.25em; height: 34px; width: 100%; border: 1px solid $gray; border-right: 0; // outline: 1px red dotted; } .form-actions { position: relative; width: 25%; float: right; left: -1px; } input[type="submit"] { font-size: 0; color: transparent; background-color: $blue; width: 100%; height: 34px; background-position: 50% 50%; // outline: 1px green dotted; border: 1px solid $gray; border-left: 0; @include border-radius(0 3px 3px 0); @include transition(background-color 400ms ease); &:hover, &:focus, &:active { background-color: $blue-dark; } }
}

// Partner icons

!* ============================================================================= Page content header ========================================================================== *!

!* The main page title (h1) !
#page-title { margin: 0 0 0.75em 0;
}


!* ============================================================================= Misc Global Styles ========================================================================== *!


!* Aggregator feed source !
#aggregator .feed-source .feed-icon { display: inline; float: none; margin-right: 10px;
}


.feed-details dt,
.feed-details dd { display: inline; margin: 0;
}


!* Generic styles for links. See the ul.links declaration in node and comment stylesheets !
ul.links { margin: 0; padding: 0;
 &.inline { display: block; }
 li { display: inline; list-style: none; padding: 0 10px 0 0; }
}


!* Search results are an ordered list so reset the margin !
.search-results { margin: 0; padding: 0;
}


!* Attribution message and link !
.attribution { display: block; opacity: 0.65; padding: 1em 0; text-align: center;
 a { text-decoration: none; color: inherit;
 &:hover, &:focus { text-decoration: underline; } }
}


!* ============================================================================= Primary, Secondary and Menu Bar region menus ========================================================================== *!

!* ============================================================================= Menu Toggles ========================================================================== *!
// .at-mt is a page class
.at-mt { .at-menu-toggle, .at-menu-toggle ul, .at-menu-toggle ul.menu { margin-top: 0; margin-bottom: 0; padding: 0; }
 .at-menu-toggle-button { margin: 0; }
 .at-menu-toggle ul a { padding: 0 10px; white-space: nowrap; }
}


!* ============================================================================= Menus, usually blocks ========================================================================== *!

ul.menu { padding-left: 15px;
 ul { padding-left: 15px; }
 li { margin: 0; }
}


!* If li.content exists it's a problem, so reset the padding *!
.block .menu li.content { padding: 0;
}



!* ============================================================================= Pagers ========================================================================== *!

ul.pager { clear: both; margin: 0; text-align: center; @include fontSize(16px); border-top: 1px solid $gray; text-transform: none; color: $black;
}

ul.pager.pager-show-more { border: 0;
}

.item-list ul.pager li { margin: -1em 0 0 0 !important;
}


ul.pager li { background-image: none; display: inline; list-style-type: none; padding: .5em; &.pager-current { font-weight: 700; color: $teal; }
}


.block ul.pager li { margin: 0;
}


!* Theme the various states of pager links !
ul.pager li {
 a {
 &:link, &:visited { color: #000; }
 &:active, &.active { color: #000; }
 &:hover, &:focus { color: #000; font-weight: bold; } }
 &.pager-item {} &.first {} &.last {} &.pager-current {} &.pager-first {} &.pager-previous, &.pager-next { display: inline-block; position: relative; top: 0.5em; a { display: inline-block; width: 2em; height: 2em; background-color: $gray; background-position: 50% 50%; background-size: 0.5em; &:hover, &:focus { background-color: $off-black; } } } &.pager-last {}
 &.pager-first, &.pager-last { text-transform: capitalize; font-weight: bold; }
}

ul.pager.pager-show-more a { &:link, &:visited { color: $violet; } &:hover, &:focus, &:active { color: $blue; }
}

!* ============================================================================= Skip Navigation ========================================================================== *!

#skip-link { left: 50%; margin-left: -6.5em; margin-top: 0; padding: 0 0.5em; position: absolute; width: 12em; z-index: 50;
 a { background: #444; background: rgba(0, 0, 0, 0.6); color: $page; display: block; line-height: 2; padding: 0; text-align: center; text-decoration: none;
 &:link, &:visited { background: #444; background: rgba(0, 0, 0, 0.6); color: $page; display: block; line-height: 2; padding: 0; text-align: center; text-decoration: none; } &:hover, &:focus, &:active { outline: 0; } }
}


!* ============================================================================= Tabs (local tasks) ========================================================================== *!

#tasks { margin-bottom: 15px;
}


ul.primary { border-bottom-color: $border; margin: 20px 0; padding: 0 0 0 5px;
 li { display: block; float: left; margin: 0 1px -1px;
 a { background-color: $ultralight; border-color: $border; margin-right: 1px; padding: 0 10px; display: block; float: left; height: 1.5em; line-height: 1.5em;
 &:hover, &:focus { background-color: $light; border-color: $border; } } }
 li.active { a, a:hover, a:focus { background-color: $page; border-bottom-color: $page; } }
}


ul.secondary { border-bottom: 1px solid $border; margin: 1em 0 0; padding: 0 .3em 1em;
 li { border-right: 0; list-style: none; padding: 0 10px 0 0;
 a { &:hover, &.active { border-bottom: none; text-decoration: underline; } } }
}


!* ============================================================================= Action links ========================================================================== *!

ul.action-links { margin: 20px 0 0; list-style: none;
 li {}
}


!* Field types (Core) !

!* Taxonomy !
.field-type-taxonomy-term-reference {
 !* The same bottom margin as p, blockquote, ul, ol and dl *! margin-bottom: 1.5em;
 &.field-label-inline .field-items { margin: 0; padding: 0; }
 &.field-label-inline .field-item { display: inline; list-style: none; padding: 0 10px 0 0; }
}

!* Float left setting !
.ia-l .field-type-image figure,
.iat-l .field-type-image figure { margin: 5px 20px 15px 0;
}


!* Centered setting !
.ia-c .field-type-image figure,
.iat-c .field-type-image figure { margin: 5px auto 15px;
}


!* Float right setting !
.ia-r .field-type-image figure,
.iat-r .field-type-image figure { margin: 5px 0 15px 20px;
}



!* ============================================================================= Block Styling ========================================================================== *!

!* Main wrapper for most blocks, block_system_main does not have it !
.block { margin-bottom: 20px;
}


!* Match item list and block menu margin and padding !
.block-content {
 ul, ol { padding: 0 0 0 15px; }
 li { margin: 0; padding: 0; }
}
.pane-views-related-programs-block h2 { margin-bottom: 0.1em;
}
!* ============================================================================= Views and Grids ========================================================================== *!
.nav-grid h3 { margin-top: 0.5em;
}
.nav-grid-node-1808 { // Am I Eligible grid tile .row-content { padding: 2em 2em 2em 2em; text-align: left; background-color: $teal; color: #fff; background-position: 50% 1.25em; background-size: 75px 75px; position: relative; overflow: hidden; &::before{ content: ""; background: $redesign_purple; width: 150px; height: 50px; position: absolute; left: 0; top: -16px; transform: skewY(-12.5deg); transform-origin: 0 100%; } &::after{ content: ""; background: #8253a2; width: 87px; height: 122px; position: absolute; bottom: -120px; right: 0; transform: skewY(-52.5deg); transform-origin: 0 100%; } } h3 { // margin: 0.5em; } h3 a { color: #fff; font-weight: bold; @include fontSize(51px);
 } .button-link a { background-color: $violet; }
}
.nav-grid { .views-row { margin-bottom: 2em; }
}

.content-list { .views-row { margin-bottom: 2em; &.views-row-last { border: 0; } } h2, h2 a, h4, h4 a { @include fontSize(34px); margin: 0.65em 0 0.85em 0; color: $teal; text-decoration: underline; font-weight: bold; } h2 a, h4 a { // border-bottom:1px dotted $blue; &:hover, &:focus, &:active { // border-bottom: 1px dotted transparent; } } .subhead { color: $off-black; font-weight: bold; a { color: $violet; &:hover, &:focus, &:active { color: $blue; border-bottom: 1px dotted currentColor; } } } .views-field-field-news-date:after { content: "|"; margin-left: 0.333em; margin-right: 0.333em; } .standout-link { @include fontSize(14px); } img { margin: 1em 0; }
}
.content-list.content-list-calendar,
.content-list.content-list-workshop-listing { h3 { font-weight: bold; }
}
.content-list.content-list-grouped { h3 ~ .views-row { margin-bottom: 1em; padding-bottom: 1em; border: 0; } .views-row:not(.first) + h3 { margin-top: 1em; padding-top: 2em; border-top: 1px solid $gray; }
}
// All views exposed forms
.views-exposed-form, .block-facetapi  { select { font-family: $scala-sans; color: $off-black; font-size: .8em; } label, h2.block-title { @include fontSize(14px); color: $off-black; text-transform: uppercase; } .views-exposed-widget .form-submit { margin-bottom: 3em; a { color: #888; } } .views-exposed-widget.views-submit-button { clear: left; }
}

.block-facetapi h2.block-title { margin-bottom: 0;
}
.block-facetapi .form-item { margin-top: 0.25em;
}

// Image map of states on /resources - hide except at desktop
.map_img { display: none;
}

// Calendar pages //
.view .date-nav-wrapper .date-nav { margin-bottom: 0;
}
// Hide grid on mobile
.calendar-grid { .view-filters, .view-header, .view-content { display: none; }
}
.calendar-calendar td { color: $off-black;
}
.calendar-calendar td.empty { color: $gray;
}
.calendar-calendar { a { color: $violet; &:hover, &:active, &:focus { color: $teal !important; } } div.calendar { @include fontSize(14px); line-height: 1.25; } .views-field-field-date-data, .views-field-field-date-data > span { color: $green; } .item { padding: 0.25em 0 !important; } .views-field-title-1 { margin-bottom: 0.25em; }
}
.calendar-calendar .month-view .full td.single-day div.monthview { background: none;
}
.calendar-calendar .month-view .full td.date-box.today, .calendar-calendar .month-view .full tr td.single-day.today { border-color: $orange;
}
.calendar-calendar tr { background: #f5f5f5;
}
.calendar-calendar th.days { background: #EDEDED; color: $off-black;
}
.calendar-calendar .month-view .day { font-weight: bold !important;
}

!* ============================================================================= Shared Components ========================================================================== *!

#alert-wrapper { background-color: $cherry; color: #fff; a { color: #fff; border-bottom: 1px dotted #fff; &:hover, &:active, &:focus { text-decoration: none; border-bottom: 1px solid #fff; } }
}
#alert-wrapper { .emergency-alert { position: relative; } aside { text-align: center; line-height: 1.15; } h2.block-title { display: block; @include box-sizing(border-box); position: absolute; height: 1em; width: 1em; z-index: 5; right: 0; background-color: $cherry; background-position: 50% 50%; background-size: 0.5em; padding: 0.5em 0.5em 0.75em 0.5em; } .block-content { padding: 1em 1.25em 0 1.25em; }
}
#alert-wrapper + #header-wrapper { margin-top: 3em;
}
#alert-wrapper aside { max-width: 1300px; margin: 0 auto;
}
#alert-wrapper .views-label { font-weight: bold; text-transform: uppercase;
}

// Link bars component
.link-bar-label-wrapper { position: absolute; top: 40%; right: 0; padding-right: 24px; background-size: auto 14px; background-position: top 50% right 10px;
}
.link-bar-label { visibility: hidden; display: inline-block; width: 100px; margin-right: 6px; @include fontSize(14px); font-weight: bold; color: #fff; text-transform: uppercase; @include transition(visibility 400ms ease 100ms);
}
.link-bars.view-performances-events .link-bar-label { width: 200px;
}
// Link bars are color striped
.link-bars .views-row a { .arrow-box { background-color: $teal; } h3 { color: $teal; } &:hover, &:focus, &:active { .arrow-box { background-color: $redesign_purple; } h3 { color: $redesign_purple; } }
}
.link-bars .views-row a { display: block; position: relative; @include box-sizing(border-box); background-color: #eee; padding: 0.5em 80px 0.75em 1em; margin-bottom: 1em; img { display: none; } h3 { @include fontSize(18px); font-weight: bold; @include transition(color 400ms ease); } p { color: $off-black; margin: 0; } .arrow-box { position: absolute; right: 0; top: 0; width: 45px; overflow: hidden; height: 100%; text-align: center; @include transition(width 400ms ease, background-color 400ms ease); } &:hover, &:focus, &:active { outline: 0;
}


}
// Promo event link bars
.view-performances-events.link-bars-promo { @extend %divider;
}
.view-performances-events.link-bars-promo .views-row a { float: left; width: 100%; margin-bottom: 2em; h3 { margin-bottom: 0.25em; } img { width: 100%; }
}


// Drop cap
p.drop-cap:first-letter { float: left; color: $violet; font-size: 2.9em; padding-top: 8px; padding-right: 8px; margin-bottom: 2px; line-height: 0.8; font-weight: bold;
}

span.orange-text{ color: $orange;
}


span.purple-text{ color: $violet;
}



.nav-back-to { .block-inner { margin: 0 0 2em 0; } a:before { content: " "; position: relative; top: 1px; display: inline-block; padding-right: 0.5em; width: 0.5em; height: 0.8em; background-size: 0.5em 0.8em; }
}
// Past event indicator
.field-name-past-event-indicator { @include element-invisible; // Accessibly hide words "past event" & + .content-title { display: inline-block; } & + #page-title, & + .content-title { line-height: 1.3; //outline: 1px dotted rebeccapurple; } & + #page-title:before, & + .content-title:before  { // And add visual indicator to title display: inline-block; content: " "; position: relative; top: 0.2em; margin-right: 0.5em; background-repeat: no-repeat; width: 1.0967741em; height: 1em; background-size: contain; background-position: top left; }
}
.lt-ie9 .field-name-past-event-indicator { & + #page-title, & + .content-title { padding-left: 45px; background-repeat: no-repeat; background-size: 31px 34px; background-position: 0 50%; } & + #page-title:before, & + .content-title:before  { display: none; }
}
// Search results Content type indicator
.listing-content-type { @include fontSize(14px); letter-spacing: 0.1em; font-style: italic; text-transform: uppercase; line-height: 1;
}

!* ============================================================================= Node-specific Styling ========================================================================== *! // Basic pages / generic styles .field-name-field-body { h2 { margin-bottom: 0.25em; } blockquote { @include fontSize(24px); margin: 1em 0; line-height: 1.1; font-style: italic; color: $blue; } } //Accordions .node-type-landing-page{ .field-name-field-accordion-item{ .field-name-field-title{ font-weight: bold; font-size: 1.3em; cursor: pointer; // Plus icon &::before{ cursor: pointer; display: block; width: 30px; height: 30px; float: left; margin-top: -5px; margin-right: 2px; margin-left: -6px; content: ""; background: linear-gradient(#000,#000), linear-gradient(#000,#000), #fff; background-position:center; background-size: 50% 2px,2px 50%; !*thickness = 2px, length = 50% (25px)*! background-repeat:no-repeat; } &.open{ &::before{ background-size: 50% 2px,0px 50%; !*thickness = 2px, length = 50% (25px)*! } } } .field-name-field-description{ display: none; } } }

 // Programs
.field-name-field-intro-text { @include fontSize(24px); line-height: 1.375; margin-bottom: 1em;
}


.node-type-programs .field-name-field-website, .field-name-field-feature-image { margin-bottom: 32px; margin-bottom: 2rem;
}


.node-type-programs .field-name-field-website, .view-footer, .standout-link, .pager-show-more { a { color: $violet; text-transform: uppercase; font-weight: bold; padding-right: 1em; background-position: right 0 top 1px; background-size: auto 0.75em; &:hover, &:focus, &:active { color: $blue; } }
}
.view-footer { margin-top: 3em; text-align: center;
}

// Performances and events detail nodes
.node-type-performances-events { .group-date, .group-location { padding-left: 80px; min-height: 55px; @include fontSize(24px); margin-bottom: 3em; background-position: left 0; } .group-date { background-sizing: auto 38px; span { display: block; } } .group-location { background-sizing: auto 50px; } .group-header, .group-description { @extend %divider; } .field-name-field-benefit-explanation { @extend %divider; .field-item { @extend %nav-highlight; @extend %circle-icon; margin-bottom: 0.5em; } } .group-tickets { @extend %divider; float: left; width: 100%; margin-bottom: 2em; padding-bottom: 1.5em; .button-link a { margin-bottom: 1.5em; } } .group-ticket-links { margin-bottom: 2em; } .field-name-field-website.button-link a { background-color: $violet; margin-top: 0; } .field-name-ticket-phone.button-link a { background-color: $light-gray; color: $violet; } .field-name-field-additional-info { clear: both; } .view-sponsors a, .view-sponsors .views-row { display: inline-block; } .view-sponsors a { margin-right: 20px; } .view-sponsors .views-row-last a { margin-right: 0; } .view-sponsors .view-content  { text-align: center; } .view-sponsors .attachment .view-content { text-align: left; } .field-name-field-additional-phone-info { @include fontSize(14px); margin-top: -1em; }
}

.field-name-field-body img { margin: 1em 0;
}


span.caption > p { margin-top: 0; margin-bottom: 0; @include fontSize(14px); font-style: italic;
}
.field-name-field-news-date, .field-name-field-category { font-weight: bold; margin-bottom: 1em;
}
.field-name-field-news-date { margin-right: 0.33em;
}
.field-name-field-category { span.first { margin-left: 0.33em; } span { &:after { content: ", "; color: $blue; } } span.last:after { content: " "; }
}
p.group-news-meta { margin-bottom: 2em;
}

// Other Generic node styles - Housing Opportunity Nodes, workshops
.node-type-housing-opportunity { .group-contact { h2 { margin: 0 0 0.5em 0; } address { margin: 1em 0; } .field-label, h3 { margin-bottom: 0; } .addr-city, .addr-state { margin-right: 4px; } .addr-city + .addr-state { &:before { content: ", "; margin-left: -4px; } } section { margin-bottom: 0.5em; } }
}
.node-type-afac-calendar-, .node-workshops { section { margin: 0 0 1em 0; } section.field-type-text-long { margin-bottom: 0.25em; }
}

// Corporate sponsors list page
.corp-sponsors-list { .views-row { margin-bottom: 2em; } .view-content h3:before { content: " "; display: block; @extend %divider; padding-bottom: 0; }
}

// Service links social sharing icons
.field-name-service-links-displays-group { margin-bottom: 1em;
}

// Blog posts / news posts
.node-type-news { .pane-node + .panel-separator { @extend %divider; padding-bottom: 0; margin-left: $gutter-width; margin-right: $gutter-width; }
}
// Service links social share icons
div.service-links, .service-links a, .field-name-service-links-displays-group .label-inline { display: inline-block;
}
.service-links a { width: 1.5em; height: 1.5em; margin-right: 0.75em; color: transparent; overflow: hidden; // background-color: $blue; // @include border-radius(3px); background-position: 50% 50%; // @include transition(background-color 400ms ease); // &:hover, &:focus, &:active { //   background-color: $violet; // } .lt-ie9 & { font-size: 0; width: 25px; height: 25px; }
}
a.service-links-twitter { background-size: 1em 0.8125em;
}
a.service-links-facebook { background-size: 0.5em 1.0625em;
}
.field-name-service-links-displays-group .label-inline { position: relative; top: -0.5em; margin-right: 0.75em; color: black; font-weight: bold;
}

// Drupal markup for date displays where multiple dates are listed out in their nodes
.node-type-workshops, .node-type-afac-calendar- { .date-display-single > div.date-display-range { display: inline; } .date-display-single { display: block; }
}
!* ============================================================================= Forms ========================================================================== *!

!* Wrapper for a form element (or group of form elements) and its label !
.form-item {
 input.error, textarea.error, select.error { border: 1px solid $highlight; }
 label { font-weight: 700; }
 label.option { }
 .description { font-size: 0.85em; }
 &.form-checkboxes , &.form-radios { }
}


!* Highlight marks and form required mark !
.marker,
.form-required { color: $highlight;
}


.container-inline { div, label { display: inline; }
}

!* Define consistent borders !
fieldset { border: 1px solid $border;
}

!* Password confirmation !
.password-parent,
.confirm-parent { margin: 0;
}

#mc_embed_signup { .input-group label { display: inline; margin-left: 0.5em; } ul, ul li { list-style: none; margin: 0; padding: 0; } ul li { margin: 0.5em 0; padding-left: 2em; } .mc-field-group { margin: 1em 0; }
}

.indicates-required { margin: 1em 0;
}
.asterisk { color: $cherry; font-weight: bold; font-style: none !important;
}
!* ============================================================================= Tables ========================================================================== *!

table { margin: 10px 0; padding: 0; width: 100%;
 &.sticky-header { z-index: 10; }
}


table,
thead,
tbody,
tr,
th,
td { border-color: $border;
}


table,
td,
th { vertical-align: middle;
}


caption,
th,
td { text-align: left;
}


thead tr { font-weight: 700; background-color: $medium_dark;
}


td,
th { border-bottom: 0; margin: 0; padding: 5px 7px;
}


tbody tr { border-top: 1px solid $border;
}


tr {
 &.odd { background: $page; }
 !* Table row striping *! &.info, &.even, &:nth-child(2n+2)  { border-bottom: 0; background-color: $ultralight; }
 &.odd td.active { background-color: $light; }
 &.even td.active { background-color: $medium_light; }
}

!* ============================================================================= Membership Table - Desktop ========================================================================== *!
 // Display a button if JS is disabled body.has-js{ table.benefits{ .no-js-button{ display: none; } }
}
table.benefits{ // Hide on mobile .no-js-button{ display: inline-block; white-space: nowrap; background: #4f2683; color: white; border-radius: 3px; margin-top: .5em; padding: .3em 1em; } display: none; @media only screen and (min-width: 76em){ display: inline-block; } margin-top: 2em; background: white; border-color: transparent; // border-collapse: separate; thead, tbody, tr, th, td { background: white; border-top: 2px solid #b7b9ba; } td{ text-align: center;
 } .benefits-row-header{ font-weight: normal; width: 10.625rem; padding: 1rem 1rem 1rem 0rem; line-height: 1.2; }
 td:nth-child(2n) { background-color: #eeeeee; }
 // tbody tr { //   border: none; // }
 .visually-hidden{ display: none; } th{ vertical-align: middle; } th.hover{ border-left-color: transparent; border-right-color: transparent; }
 thead{ text-transform: uppercase; color: #4f2683; .benefits-header-title{ color :#0097b8; min-width: 160px; &.hover{ background-color: white !important; color: #0097b8 !important; } } .benefits-info{ opacity: 0; height: 0; position: absolute; left: -999rem; } .benefits-header-price{ text-align: center; padding: .5rem; min-width: 5rem; max-width: 8rem; } .benefits-cta{ overflow: hidden; white-space: nowrap; background: #4f2683; color: white; border-radius: 3px; padding: .6em 1em; display:none; //shown on hover state
 } .benefits-header>.benefits-header-price{ position: relative; padding: .5em 1.5em; } .benefits-header>th:nth-child(2n) { background-color: #eeeeee; }
 // Need both of this to be the same .benefits-header>.th:nth-child(2n).hover, .benefits-header-cellJS.hover { background-color: #0097b8; color: white; // padding: 0 3em; .benefits-cta{ display: inline-block; margin-top: .7em; margin-bottom: .5em; } .benefits-info{ border-top: 1rem solid #0097b8; // border-left: .0625rem solid #0097b8; // border-right: .0625rem solid #0097b8; width: 100%; bottom: 0; left: 0; opacity: 1; height: auto; background-color: #0097b8; margin-bottom: -.0625rem; padding-top: .625rem; border-bottom: 2px solid #0097b8; z-index: 20; } .benefits-level, .benefits-amount{ margin: 0; } }
 } .benefits-cell{ line-height: 0; p{ margin-top: .5em; line-height: 1.3; } } .benefits-cell.checked>span { display: inline-block; width: 25px; height: 25px; background-color: #4f2683; border-radius: 100%; background-image: url($af_benefits_checkmark); background-repeat: no-repeat; background-size: 15px; background-position: center; }
 .benefits-cell.hover{ border-left: 2px solid #0097b8; border-right: 2px solid #0097b8;
 }
 tbody{ border-bottom: 2px solid #b7b9ba !important; }
 .last-row .benefits-cell.hover{ border-bottom: 2px solid #0097b8; }

}

.benefits-footnotes{ padding: 2em 0; font-style: italic;
}


!* ============================================================================= Membership "Table" - Mobile ========================================================================== *!
 // Display accordion content if JS is disabled
body.has-js{ .benefits-accordion{ .accordion-item-content{ display: none; } }
}

.benefits-accordion{ padding: 0 10px; // Hide on mobile @media only screen and (min-width: 76em){ display: none; } // .accordion-item-content{ //   display: none; // } h3{ color:  #4f2683; background-image: url($af_icon_plus); background-repeat: no-repeat; background-size: 25px; background-position: right; width: 100%; cursor: pointer; font-weight: bold; font-size: 1.3em; line-height: 1.5; margin: 0; } h3.open{ background-image: url($af_icon_minus); } ul{ list-style-type: none; padding: 0; } .accordion-item{ padding-top: 2em; padding-bottom: 1.7em; border-top: 2px solid #eeeeee; } ul.benefits-lists{ list-style-type: disc; padding: 0 40px; ul li::before{ content: "-"; //content: "—"; //mdash margin-left: 7px; padding-right: 10px; margin-bottom: -2px; } } .benefits-cta{ overflow: hidden; white-space: nowrap; background: #4f2683; color: white; border-radius: 3px; padding: .7em 1em; font-size: 14px; font-weight: bold; text-transform: uppercase; }
}



!* ============================================================================= Messages ========================================================================== *!

div { &.messages { // Left and right margin are set by the global gutter width margin-bottom: 10px; margin-top: 10px;
 ul { margin-top: 0; margin-bottom: 0; } }
}

!* Unpublished nodes !

.node-unpublished {
 p.unpublished { @include unpublished; }
}


!* ============================================================================= Maintenance pages ========================================================================== *!

.maintenance-page { .container { padding: 40px 0; }
 #site-name, #page-title { margin: 0; }
}


.db-offline { .container { margin: 0 auto; padding: 40px 0; width: 100%; max-width: 960px; }
 div.messages { margin: 20px 0 0; }
 #content { padding: 20px 0; }
}


!* ============================================================================= Misc overrides for contrib modules ========================================================================== *!

!* Admin menu overrides !
#admin-menu { margin: 0; padding: 0;
}


!* Devel Module !
.dev-query { background: $light; padding: 30px;
}


!* Styleguide module tweaks !
#styleguide-header { padding: 0 10px;
 .item-list { font-family: inherit; margin: 0 20px 20px 0; min-height: 260px; width: auto; }
}
!* ============================================================================= AHIRC Stage Managers Directory ========================================================================== *!
.view-ahirc-health-directory { .views-label { font-weight: bold; } .views-field { padding: 0.125em 0; } legend, fieldset { cursor: pointer; background-color: $light-gray; } legend { width: 100%; margin-left: -1em; padding: 1em; font-weight: bold; text-transform: uppercase; } fieldset { border: 0; margin: 1em 0 1em 0; padding: 0 1em 1em 1em; .views-field { padding-left: 1em; padding-right: 1em; } // .views-field:nth-of-type(1) { //   margin-top: 0.5em; // } }
}

html.js .view-ahirc-health-directory { fieldset.collapsed, fieldset.collapsible { .fieldset-legend { background: none; } } fieldset.collapsible .fieldset-legend a { color: $violet; &:before {  // Down triangle content: " "; position: relative; top: -3px; display: inline-block; width: 0; height: 0; margin-right: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid $violet; } // &:hover, &:focus, &:active { //   &:before { //     border-left-color: $violet; //   } // } } fieldset.collapsible.collapsed .fieldset-legend a { color: $blue; &:before {  // Right triangle top: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid $blue; } &:hover, &:focus, &:active { color: $violet; &:before { border-left-color: $violet !important; } } }
}

!* ============================================================================= Homepage Specific Styles ========================================================================== *!
.front .region-hero img { display: none;
}
.front #page-title { @include element-invisible; }
.front .region-hero { .views-row { line-height: 0; } .views-field-field-intro-text, .view-homepage-sections { @include box-sizing(border-box); padding-left: $gutter-width; padding-right: $gutter-width; @include fontSize(40px); color: white; bottom: 10%; .large-text{ @include fontSize(80px); font-weight: bold; } // @media only screen and (max-width: 87.5em){ //   color: red; // } } .views-field-field-intro-text { width: 100%; text-align: right; padding-right: 4em;
 }
}

.front .views-field-field-intro-text { text-transform: none; line-height: 1.333; margin: 1em auto; a { color: $violet; // border-bottom: 1px dotted transparent; // @include transition(border 400ms ease); &:hover, &:focus, &:active { // border-bottom: 1px dotted currentColor; color: $teal; } } br { display: none; }
}
.front h2.views-field-field-intro-text { color: #686868;
}
// Divider
.front .region-secondary-content:after { content: " "; @include box-sizing(border-box); display: block; height: 1px; line-height: 1; width: inherit; background-color: $gray; margin: 2em $gutter-width 0 $gutter-width;
}
.front #content-wrapper { margin-top: 2em;
}
#block-views-homepage-sections-block, .homepage-featured, #block-views-homepage-sections-block-1, .homepage-subsections { img { width: 100%; } h2 { margin: 0 0 0.5em 0; } p { @include fontSize(20px); line-height: 1.2; margin-bottom: 1em; } .field-name-field-image { line-height: 0; } .button-link a { background-color: $violet; }
}
#block-views-homepage-sections-block, .homepage-featured { .views-row { position: relative; float: left; background-color: $teal; } p, h2, h2 a, a { color: #fff; } .group-feat-text { padding: 2em 2.25em; }
}
#block-views-homepage-sections-block-1, .homepage-subsections { .views-row { margin-bottom: 3em; // background-color: #eee; } // Video .views-row-1 { position: relative; &::before{ content: "WATCH"; font-size: 1.2em; font-weight: bold; } // Black line ---- next to WATCH &::after{ content: ""; width: 40px; height: 2px; background: black; position: absolute; top: 14px; left: 82px; } iframe{ width: 50%; float: right; } .group-sub-text{ width: 50%; // float: left; text-align: left; h2{ letter-spacing: normal; line-height: normal; } .button-link a{ background: white; color: $redesign_purple; border-color: $redesign_purple; } } } // Our Services .views-row-2 { // margin-right: 1.5625%; position: relative; display: inline-block; margin-top: 200px; margin-bottom: 200px;
 .group-sub-text{ width: 50%; float: left; .button-link{ display: none; } } .services-list{ width: 40%; float: right; margin-top: 2em; @include fontSize(31px); ul{ columns: 2; -webkit-columns: 2; -moz-columns: 2; li{ list-style-type: none; color: $redesign_purple; border-left: 4px solid $redesign_purple; line-height: normal; padding-bottom: 1em; padding-left: 1em; font-weight: bold; } } }
 &::before, &::after{ content: ""; background: $redesign_light_grey; height: 100%; width: 200%; display: block; position: absolute; // z-index: -1; } &::before{ margin-left: -50%; top: 0; transform: skewY(-3.5deg); transform-origin: 0 100%; z-index: -2; } &::after{ margin-left: -50%; top: 0; transform: skewY(3.5deg); transform-origin: 0 100%; z-index: -1; } }
 .views-row-3 { position: relative; &::after{ content: ""; background-image: url('../images/dancer_fpo.png'); background-position: bottom; background-repeat: no-repeat; background-size: contain; display: block; position: absolute; width: 1000px; height: 1000px; right: -20%; top: -63%; } .button-link a{ background: white; color: $redesign_purple; border-color: $redesign_purple; } }
 //Support our work .views-row-4 { margin-top: 25em; margin-bottom: 10em; .group-sub-text{ color: white; h2 a{ color: white; } } .button-link a{ border-color: white; } } .group-sub-text { position: relative; width: 50%; } h2 { color: $teal; text-transform: none; @include fontSize(68px); } .button-link { // width: 100%; // position: absolute; // bottom: 2em; // left: 50%; // margin-left: -50%; }
}
.promo-footer { width: 100%; height: 100px; background: url(images/png/word_wrap.png) repeat-x; background-position: bottom; // IE8 fallback background-size: cover;
}
.homepage-featured .teaser-long { display: none;
}

// Special Message - collapsible block instead of overlay

.region-special-message { .block-content, h2 { text-align: center; } .block-content { @include fontSize(16px); } .cta-highlight, p { max-width: 884px; max-width: 55.25rem; } .cta-highlight { line-height: 1.5; color: $cherry; @include fontSize(22px); margin: 1.75em auto 2em auto; // max-width: 734px; // max-width: 45.875rem; .button-link a { @include fontSize(14px); background-color: $cherry; margin: 1.5em 0 0 0; } } .cta-standout { font-weight: bold; text-transform: uppercase; } .pane-title { @include fontSize(24px); padding: 1.5em 40px; margin-bottom: 0; background-color: $violet; color: #fff; line-height: 1.333; &:after { content: " "; display: inline-block; position: relative; width: 1em; height: 1em; top: 0.1em; margin-left: 0.25em; // outline: dotted 1px yellow; background-repeat: no-repeat; background-size: 17px 10px; background-size: 1.0625rem 0.625rem; background-position: 0 50%; } } .ctools-collapsible-content { border-bottom: 37px solid $violet; } .ctools-collapsible-container .ctools-toggle { background: none; } .ctools-collapsed h2 { margin-bottom: 0; } p { @include fontSize(20px); line-height: 1.2; margin-top: 1.5em; margin-right: auto; margin-left: auto; // max-width: 884px; // max-width: 55.25rem; } #jquery-countdown-jquery-countdown { display: inline-block; } .hasCountdown { background: none; border: 0; } .countdown_section { position: relative; @include box-sizing(border-box); padding: 0 1em; @include fontSize(12px); line-height: 1; color: $violet; text-transform: uppercase; &:after { content: " : "; position: absolute; top: 0.5em; right: -0.25em; @include fontSize(30px); } &:last-child:after { content: " "; display: none; } } .countdown_amount { @include fontSize(60px); font-weight: bold; }
}

.flexbox { .countdown_row { @include display-flex; @include justify-content(center); }
}

h2.collapsiblockCollapsed, h2.collapsiblockCollapsed + .block-content { display: none;
}

.region-special-message .collapsiblock-processed.block { margin-bottom: 0 !important;
}

!* ============================================================================= Coogan Fund domain styles ========================================================================== *!
.domain-coogan { #edit-submit-coogan { margin: 0.15em 0 0 0; } .coogan-result-message { font-weight: bold; font-weight: 700; color: $cherry; } .block.main-site-link { margin: 1em 0; .block-inner { margin: 0; a { display: inline-block; @include box-sizing(border-box); padding: 0.1em 1em 0.1em 1.5em; background-color: $blue; border: 1px solid $blue; color: #fff; background-repeat: no-repeat; background-position: 0.5em 50%; background-size: 0.35em; font-weight: bold; font-weight: 700; &:hover, &:focus, &:active { background-color: #fff; color: $blue; } } } }
}
.page-node-67 .field-name-field-body { ul, ul li { list-style-type: none; }
}

!* ============================================================================= News page /about-us/news ========================================================================== *!
 body.page-node-1807{ .date-display-single{ text-transform: none; font-weight: normal; letter-spacing: normal;
 } .views-field-field-category{
 a{ color: $teal; text-transform: none; font-weight: normal; letter-spacing: normal; }
 } }

*/
/* ============================================================================= Base ========================================================================== */
/* To preserve theme settings never apply font properties to the HTML element. This is critically important if you are using the Responsive JavaScript feature as this relies on being able to set a pseudo font family on the HTML element. If you need to set default font properties of any kind use the BODY element as these can be overridden using font theme settings. */
html { background: #fff; }

body { font-family: Calibre, Arial, Helvetica, sans-serif; color: #282828; overflow-x: hidden; }

/* ============================================================================= Links Links Links, General Links ========================================================================== */
a { display: inline-block; text-decoration: none; border-bottom: 1px dotted transparent; color: #009fc2; -moz-transition: color 400ms ease, border 400ms ease; -o-transition: color 400ms ease, border 400ms ease; -webkit-transition: color 400ms ease, border 400ms ease; transition: color 400ms ease, border 400ms ease; }
a:link, a:visited, a:active, a.active { outline: none; }
a:hover, a:focus, a:active { color: #8253a2; }
p a:hover, .node-type-programs .field-name-field-website a:hover, .view-footer a:hover, .standout-link a:hover, p a:focus, .node-type-programs .field-name-field-website a:focus, .view-footer a:focus, .standout-link a:focus, p a:active, .node-type-programs .field-name-field-website a:active, .view-footer a:active, .standout-link a:active { border-bottom: 1px dotted currentColor; }

a[href*=".pdf"] { padding-left: 1.5em; background-repeat: no-repeat; background-size: 1em 1em; }

button, .button, input[type="submit"], .button-link a { background-color: #8253a2; padding: 5px 28px; font-size: 22px; font-weight: bold; color: #fff; border-radius: 4px; transition: 0.4s ease; box-shadow: none; border: 1px solid #8253a2; font-family: Calibre, Arial, Helvetica, sans-serif; }
button:hover, button:focus, .button:hover, .button:focus, input[type="submit"]:hover, input[type="submit"]:focus, .button-link a:hover, .button-link a:focus { background-color: transparent; transition: 0.4s ease; color: #8253a2; }

button, input[type="submit"] { -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; }
button:hover, button:focus, input[type="submit"]:hover, input[type="submit"]:focus { background-color: #8253a2; }

.container { width: 100%; padding: 0 20px; margin: 0 auto; max-width: 1330px; }
@media only screen and (min-width: 1600px) { .container { max-width: 1540px; } }
.container--large { width: 100%; padding: 0 20px; margin: 0 auto; }
@media only screen and (max-width: 1599px) { .container--large { max-width: 86.25rem; } }
@media only screen and (min-width: 1600px) { .container--large { max-width: 1540px; } }
@media only screen and (max-width: 1599px) { .taf-header__wrapper .container { max-width: 86.25rem; } }