/* ----------------------------------------------------------------
    styles for africanfilmfestival.org
    (_source/styles/style.css)
-------------------------------------------------------------------
    owner: PCC Web Team <webteam@pcc.edu>
    author: Ali Gray <ali.gray@pcc.edu>
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    typography
    (_source/styles/base/_typography.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    global text styles
---------------------------------------------------------------- */
.center {
  text-align: center;
}

/* ----------------------------------------------------------------
    headings
---------------------------------------------------------------- */
/* --------------------------------------
	general heading styles
-------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "rl-aqva", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #e8c850;
  line-height: 1;
  margin: 2.5rem 0 0.3125rem;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: "rl-aqva", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}
h1 em, h1 i, h2 em, h2 i, h3 em, h3 i, h4 em, h4 i, h5 em, h5 i, h6 em, h6 i {
  font-family: "rl-aqva", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}
h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b, h4 strong, h4 b, h5 strong, h5 b, h6 strong, h6 b {
  font-family: "rl-aqva", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

h3 {
  font-size: 2.75em;
}

h4 {
  font-size: 2.375em;
}

h5 {
  font-size: 2em;
}

h6 {
  font-size: 1.625em;
}

/* --------------------------------------
	main content headings
    (with decoration)
-------------------------------------- */
h2, body.home section:not(#about-homepage) h3 {
  font-size: 3.5em;
  line-height: 1.2;
  margin: 0.625rem 0 1.875rem 3.4375rem;
  position: relative;
}
h2::before, body.home section:not(#about-homepage) h3::before {
  background: url(../images/reel.png) no-repeat center center;
  background-size: 3.125rem;
  content: "";
  display: inline-block;
  height: 3.5rem;
  margin-left: -3.75rem;
  margin-right: 0.625rem;
  position: absolute;
  top: 0.3125rem;
  width: 3.125rem;
}

body.home .page-title {
  display: none;
}

/* --------------------------------------
	headings on filled backgrounds
-------------------------------------- */
.filled-bg h2, .filled-bg h3 {
  color: #e8c850;
}

/* --------------------------------------
	headings on pattern/no fill backgrounds
-------------------------------------- */
body.home .bg-pattern h3, .bg-pattern h3 {
  color: #ffffff;
  text-shadow: 0 0 0.625em rgb(116.5909090909, 119.1818181818, 42.3181818182);
}

/* --------------------------------------
    headings: small screens
-------------------------------------- */
/* small screens */
@media only screen and (max-width: 39.9375em) {
  h2 {
    font-size: 3.5em;
  }
  h2, body.home h3 {
    margin: 3.125rem 0 1.25rem !important;
  }
  h2::before, body.home h3::before {
    left: 3.125rem !important;
    top: -3.4375rem !important;
  }
}
/* ----------------------------------------------------------------
    paragraphs
---------------------------------------------------------------- */
/* --------------------------------------
	basic paragraphs
-------------------------------------- */
p {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #ffffff;
  font-size: 1.125em;
  line-height: 1.4;
  padding: 0.3125rem 0 0.625rem;
  margin: 0 0 0.3125rem;
}

/* --------------------------------------
	strong and italicized text
-------------------------------------- */
strong, b {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

em, i {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
}

/* --------------------------------------
	film details
-------------------------------------- */
p#date-cal {
  margin-top: 1.375rem;
}

/* ----------------------------------------------------------------
    links
---------------------------------------------------------------- */
/* --------------------------------------
	basic links
-------------------------------------- */
a {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: rgb(249.7727272727, 242.5, 215.2272727273);
  font-size: 1.125rem;
  text-decoration: underline;
}
a:hover, a:visited:hover {
  color: white;
}
a:focus, a:visited:focus {
  color: white;
}
a:visited {
  color: rgb(246.8106060606, 235.4166666667, 192.6893939394);
}
a:active, a:visited:active {
  color: white;
}
a:focus:not(:hover) {
  outline: 0.0625rem solid #ffffff;
  outline-offset: 0.3125rem;
}

strong a {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

/* --------------------------------------
	current links
    (.current added with javascript)
-------------------------------------- */
a.current {
  color: white;
  cursor: default !important;
  text-decoration: none !important;
}

/* --------------------------------------
	anchors without hrefs
    (don't look like clickable links)
-------------------------------------- */
a:not([href]) {
  color: #ffffff;
  text-decoration: none;
}
a:not([href]):hover {
  color: #ffffff;
  cursor: default;
  text-decoration: none;
}

/* ----------------------------------------------------------------
    lists
---------------------------------------------------------------- */
/* --------------------------------------
	basic lists
-------------------------------------- */
ul, ol {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #ffffff;
  font-size: 1.125rem;
  margin: 0.625rem 0 0.3125rem 1.875rem;
}
ul li, ol li {
  padding: 0 0 0.625rem;
  margin: 0;
}
ul ul, ul ol, ol ul, ol ol {
  margin-top: 0;
}
ul ul li, ul ol li, ol ul li, ol ol li {
  margin-top: 0;
  padding: 0.3125rem 0 0;
}

/* --------------------------------------
	lists containing other elements
-------------------------------------- */
ul p, ol p {
  margin: 0;
  padding: 0;
}
ul img, ol img {
  margin: 0.625rem 0;
}

/* ----------------------------------------------------------------
    quotes
---------------------------------------------------------------- */
blockquote,
blockquote p {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  border-left: 0.0625rem solid #ffffff;
  color: #ffffff;
  margin: 0.9375rem;
  padding-left: 1.25rem;
}
blockquote p,
blockquote p p {
  border: none;
  margin: 0;
}

/* ----------------------------------------------------------------
    text-shadow
---------------------------------------------------------------- */
.content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content a, .content li, .content blockquote {
  text-shadow: 0 0 0.625em rgba(168, 60, 39, 0.9);
}

/* ----------------------------------------------------------------
    global styles
    (_source/styles/base/_global.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    skip to content
---------------------------------------------------------------- */
#skip {
  height: 0.0625rem;
  left: -624.9375rem;
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  top: auto;
  width: 0.0625rem;
}
#skip:focus {
  color: #ffffff;
  height: auto;
  left: 0.625rem;
  outline: none !important;
  text-decoration: underline;
  width: auto;
}

/* ----------------------------------------------------------------
    containers
---------------------------------------------------------------- */
/* --------------------------------------
	body, entire page
-------------------------------------- */
body {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  background: #878a31;
}

header > .grid-container, main > .grid-container, footer > .grid-container {
  padding: 0 1.875rem;
}

.content.grid-container {
  padding: 1.875rem;
}

/* --------------------------------------
	content area
-------------------------------------- */
.bg-pattern {
  padding: 3.125rem 0 3.75rem;
}

.filled-bg {
  background: url("../images/curve.svg") center left no-repeat, url("../images/lines.svg") center right no-repeat, linear-gradient(180deg, #97444f 0%, #a05222 100%);
  position: relative;
}

@media only screen and (max-width: 39.9375em) {
  .filled-bg {
    background: url("../images/curve.svg") center left no-repeat, linear-gradient(180deg, #97444f 0%, #a05222 100%);
  }
}
/* ----- curves -----*/
.filled-bg::before,
.filled-bg::after {
  aspect-ratio: 17/1;
  background: url("../images/curve-top.svg") no-repeat center bottom/cover;
  content: "";
  position: absolute;
  width: 100%;
}

.filled-bg::before {
  bottom: 99.9%;
}

.filled-bg::after {
  background: url("../images/curve-bottom.svg") center top repeat-x;
  top: 99.9%;
}

/* ----------------------------------------------------------------
    helpers
---------------------------------------------------------------- */
/* --------------------------------------
	hide empty p tags
-------------------------------------- */
p:empty {
  display: none;
}

/* --------------------------------------
	visibility
-------------------------------------- */
/* ----- visibly hide an object (seen by screen readers) ----- */
.visually-hide {
  height: 0.0625rem;
  left: -624.9375rem;
  overflow: hidden;
  position: absolute;
}

/* ----- true hide an object (not seen by screen readers) ----- */
.hidden, .hide, hr {
  display: none;
  margin: 0 !important;
  visibility: hidden;
}

/* ----- show a visibly-hidden object, usually applied with javascript ----- */
a.visually-show .visually-hide {
  left: auto;
  position: relative;
}

/* ------------------------------------
    clearing
------------------------------------ */
.clear {
  clear: both;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

/* ------------------------------------
    narrower content
------------------------------------ */
@media only screen and (min-width: 40em) {
  .narrower {
    width: 75%;
  }
}
/* ----------------------------------------------------------------
    header
    (_source/styles/layout/_header.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    general header
---------------------------------------------------------------- */
#header {
  background: url("../images/lines-header.svg") no-repeat center left, url("../images/reel.svg") no-repeat -5em -6em;
  background-size: cover, 40%;
}

/* ----------------------------------------------------------------
    branding
---------------------------------------------------------------- */
body.home .branding-content {
  display: none;
}

body:not(.home) .branding-home {
  display: none;
}
body:not(.home) .branding-content .logo.logo-stacked {
  display: none;
}
body:not(.home) .branding-content .logo.logo-horizontal {
  display: block;
}

.branding .main-graphic {
  float: left;
  margin: -4.375em 0 -11.25em -3.75em;
  max-width: 33.125rem;
  width: 40%;
}
.branding .logo {
  filter: drop-shadow(0 0 0.625rem rgba(98.1818181818, 100.3636363636, 35.6363636364, 0.7));
}

body.home .branding h1 {
  margin: 0;
}
body.home .branding .logo {
  display: block;
  margin: 0 auto;
  max-width: 62.5rem;
  padding: 3.125rem 1.875rem 0 1.25rem;
  width: 60%;
}

body:not(.home) .branding {
  padding-bottom: 6.25rem;
}
body:not(.home) .branding h1 {
  margin: 0 auto;
  width: 80%;
}

/* --------------------------------------
	header: extra large screens
-------------------------------------- */
@media only screen and (min-width: 75em) {
  .branding {
    padding-bottom: 7.5rem;
  }
}
/* --------------------------------------
	header: large screens
-------------------------------------- */
@media only screen and (min-width: 64em) and (max-width: 74.9375em) {
  body.home .branding {
    padding-bottom: 7.5rem;
  }
}
/* --------------------------------------
	header: medium screens
-------------------------------------- */
@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
  #header {
    background-size: cover, 50%;
  }
  body:not(.home).branding h1 {
    padding-bottom: 5rem;
  }
  body:not(.home).branding h1 h1 {
    width: 90%;
  }
}
/* --------------------------------------
	header: medium and small screens
-------------------------------------- */
@media only screen and (max-width: 63.9375em) {
  body.home .branding {
    padding-bottom: 7.1875rem;
  }
  body.home .branding .main-graphic {
    margin-top: 0;
  }
  body.home .branding .logo {
    padding-right: 0;
  }
}
/* --------------------------------------
	header: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  #header {
    background-size: cover, 70%;
  }
  .branding {
    padding-bottom: 2.1875rem;
    padding-top: 2.8125rem;
  }
  .branding .logo.logo-stacked {
    display: block !important;
  }
  .branding .logo.logo-horizontal {
    display: none !important;
  }
  body.home .branding {
    padding-bottom: 3.125rem;
  }
  body.home .branding .logo {
    float: right;
    padding: 3.125rem 0.625rem 0 0;
    width: 69%;
  }
}
/* ----------------------------------------------------------------
    homepage intro section
---------------------------------------------------------------- */
#tagline {
  align-items: center;
  align-self: center;
  background: linear-gradient(180deg, rgba(232, 200, 80, 0.1) 0%, rgba(232, 200, 80, 0.2) 100%);
  border-radius: 3.75rem;
  display: flex;
  font-size: 1.75em;
  justify-content: center;
  min-height: 25rem;
  padding: 1.875rem 1.25rem;
  text-align: center;
}
#tagline p {
  font-family: "rl-aqva", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #ffffff;
}
#tagline .tagline-large {
  display: block;
  font-size: 1.9375em;
  line-height: 1;
}

/* --------------------------------------
	intro section: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  #tagline {
    min-height: 6.25rem;
  }
}
/* ----------------------------------------------------------------
    navigation (global)
    (_source/styles/layout/_navigation.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    general navigation
---------------------------------------------------------------- */
.top-bar {
  background: none;
  height: 6.25rem;
  padding: 0 1.25rem;
}
.top-bar .top-bar-right {
  width: 37.5rem;
}
.top-bar ul {
  background: none;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* ----------------------------------------------------------------
    nav items
---------------------------------------------------------------- */
.top-bar .dropdown.menu li {
  padding: 0;
}
.top-bar .dropdown.menu li a {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #ffffff;
  font-size: 1.0625em;
  margin: 0;
  padding: 0.9375rem 0.9375rem;
  text-shadow: 0 0 0.625em rgb(116.5909090909, 119.1818181818, 42.3181818182);
}
.top-bar .dropdown.menu li a::after {
  display: none !important;
}
.top-bar .dropdown.menu li.is-active, .top-bar .dropdown.menu li a:hover, .top-bar .dropdown.menu li a:focus {
  color: rgb(249.7727272727, 242.5, 215.2272727273);
  text-decoration: underline;
}
.top-bar .dropdown.menu li a:focus:not(:hover) {
  outline: 0.0625rem solid #ffffff;
}
.top-bar .dropdown.menu li.is-active a {
  color: rgb(249.7727272727, 242.5, 215.2272727273);
}
.top-bar .dropdown.menu li .fa.fa-home {
  margin-top: -0.0625rem;
}

/* ----------------------------------------------------------------
    submenu
---------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  .top-bar .dropdown.menu .submenu {
    background: #e8c850;
    border: none;
    border-bottom: 0.3125rem solid #e8c850;
    border-top: 0.3125rem solid #e8c850;
    list-style: none;
  }
  .top-bar .dropdown.menu .submenu::before {
    color: #e8c850;
    content: "\f0d8";
    font-family: FontAwesome;
    font-size: 1.625em;
    position: absolute;
    right: 0.4375rem;
    top: -1.875rem;
  }
  .top-bar .dropdown.menu .submenu li a {
    color: rgb(147.3043478261, 52.6086956522, 34.1956521739);
    margin-top: 0;
    padding: 0.9375rem 1.0625rem;
    text-shadow: none;
  }
  .top-bar .dropdown.menu .submenu li a:hover, .top-bar .dropdown.menu .submenu li a:focus {
    background: #a83c27;
    color: #ffffff;
    text-decoration: none;
  }
}
/* ----------------------------------------------------------------
    donate
---------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  .top-bar .dropdown.menu > li:last-of-type a {
    color: #ffffff;
  }
  .top-bar .dropdown.menu > li:last-of-type a:hover, .top-bar .dropdown.menu > li:last-of-type a:focus {
    color: rgb(249.7727272727, 242.5, 215.2272727273);
  }
}
/* --------------------------------------
	navigation: extra large screens
-------------------------------------- */
@media only screen and (min-width: 112.5em) {
  .top-bar .top-bar-right {
    width: 62.5rem;
  }
}
/* --------------------------------------
	navigation: large screens
-------------------------------------- */
@media only screen and (min-width: 64em) {
  .top-bar .top-bar-right {
    padding-right: 1.25rem;
  }
}
/* --------------------------------------
	navigation: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  #global-nav {
    height: 0;
    padding-top: 5.625rem;
    position: relative;
    z-index: 1;
  }
  #global-nav::before {
    color: #e8c850;
    content: "\f0d8";
    font-family: FontAwesome;
    font-size: 2.875em;
    position: absolute;
    right: 2.3125rem;
  }
  .top-bar ul {
    background: #e8c850;
    padding: 0.9375rem 0;
  }
  .top-bar ul li a {
    font-family: "nexa", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 900;
    background: none;
    color: rgb(147.3043478261, 52.6086956522, 34.1956521739);
    display: block;
    margin-top: 0;
    padding: 0.75rem 1.25rem;
  }
  .top-bar ul li a:hover, .top-bar ul li a:focus {
    background: #a83c27;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
  }
  .top-bar ul li a:hover::after, .top-bar ul li a:focus::after {
    border-color: transparent transparent transparent #ffffff !important;
  }
  .top-bar ul li a::after {
    border-color: transparent transparent transparent rgb(147.3043478261, 52.6086956522, 34.1956521739) !important;
  }
  .drilldown .is-drilldown-submenu {
    background: #e8c850;
  }
  .drilldown .is-drilldown-submenu .js-drilldown-back > a::before {
    border-color: transparent rgb(147.3043478261, 52.6086956522, 34.1956521739) transparent transparent !important;
    margin-top: -0.125rem;
  }
  .drilldown .is-drilldown-submenu .js-drilldown-back > a:hover::before, .drilldown .is-drilldown-submenu .js-drilldown-back > a:focus::before {
    border-color: transparent #ffffff transparent transparent !important;
  }
}
/* ----------------------------------------------------------------
    hamburger menu icon
---------------------------------------------------------------- */
/* ------------------------------------
    overwrite Foundation
------------------------------------ */
.title-bar {
  background: none;
  padding: 0;
  position: absolute;
  top: 1.875rem;
  right: 1.875rem;
  z-index: 2;
}
.title-bar .title-bar-title {
  height: 0.0625rem;
  left: -624.9375rem;
  overflow: hidden;
  position: absolute;
}
.title-bar .menu-icon {
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  height: 1.875rem;
  margin: 0.3125rem 0 0;
  padding: 0;
  width: 2.5rem;
}
.title-bar .menu-icon::after, .title-bar .menu-icon:hover, .title-bar .menu-icon:focus {
  background: none;
  box-shadow: none;
}

/* ------------------------------------
    set up new hamburger icon so we can animate it
------------------------------------ */
.title-bar .menu-icon span {
  background: #ffffff;
  display: list-item;
  height: 0.1875rem;
  list-style: none;
  margin-bottom: 0.625rem;
  transition: transform 0.2s ease;
  width: 2.5rem;
}
.title-bar .menu-icon span:last-of-type {
  margin-bottom: 0;
}

/* ------------------------------------
    animate the icon
------------------------------------ */
.title-bar.active .menu-icon span {
  transition: transform 0.2s ease;
}
.title-bar.active .menu-icon span:nth-of-type(2) {
  background: #878a31;
}
.title-bar.active .menu-icon span:first-of-type {
  transform: rotate(45deg) translate(0.5rem, 0.625rem);
}
.title-bar.active .menu-icon span:last-of-type {
  transform: rotate(-45deg) translate(0.5rem, -0.625rem);
}

/* ----------------------------------------------------------------
    navigation (sidebar)
    (_source/styles/layout/_sidebar.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    general sidebar
---------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  #sidebar {
    padding-left: 3.125rem;
  }
}
#sidebar {
  padding-top: 1.5625rem;
}
#sidebar ul {
  margin-left: 0;
}
#sidebar ul li::before {
  color: white;
  content: "\f0da";
  font-family: FontAwesome;
  font-size: 1em;
  padding-right: 0.4375rem;
}

/* --------------------------------------
	sidebar links
-------------------------------------- */
#sidebar ul li {
  list-style: none;
}
#sidebar ul li.current_page_item a {
  color: white;
}
#sidebar ul li.current_page_item::before {
  color: white;
  content: "\f0da\f0da\f0da";
  font-family: FontAwesome;
  font-size: 1em;
  padding-right: 0.4375rem;
}

/* ----------------------------------------------------------------
    footer
    (_source/styles/components/_footer.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   sponsors
---------------------------------------------------------------- */
footer img {
  display: block;
  margin: 3.125rem auto;
}

/* ----------------------------------------------------------------
   color gradient
---------------------------------------------------------------- */
footer {
  background: #a83c27;
}
footer .content.grid-container {
  padding: 5rem 1.875rem 1.25rem;
}

@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
  footer .content.grid-container {
    padding-top: 3.75rem;
  }
}
@media only screen and (max-width: 39.9375em) {
  footer .content.grid-container {
    padding-top: 2.5rem;
  }
}
/* ----------------------------------------------------------------
    alert notices
    (_source/styles/components/_alerts.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    general alert notices
---------------------------------------------------------------- */
#alert {
  background: #e8c850;
  border-bottom: 0.125rem solid rgb(229.0378787879, 192.9166666667, 57.4621212121);
  color: #333333;
  padding: 0.9375rem 1.25rem;
  position: relative;
}
#alert p {
  color: #333333;
  margin: 0;
  padding-bottom: 0;
}
#alert a {
  color: #333333;
}
#alert a:hover, #alert a:focus {
  color: #333333;
}

/* ----------------------------------------------------------------
    blog
    (_source/styles/components/_blog.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    blog archive feed
---------------------------------------------------------------- */
.pcc-posts {
  margin-top: 1.25rem;
}
.pcc-posts .post {
  display: flex;
  margin-bottom: 1.875rem;
}

/* --------------------------------------
	images
-------------------------------------- */
.pcc-posts img {
  align-self: flex-start;
  padding-right: 1.25rem;
  width: 18.75rem;
}

/* --------------------------------------
	titles
-------------------------------------- */
.pcc-posts h4 {
  font-size: 1.375em;
  margin: 0;
}

/* --------------------------------------
	dates
-------------------------------------- */
.pcc-posts .date {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  color: #ffffff;
  font-size: 0.9375em;
  padding: 0.3125rem 0;
}

/* --------------------------------------
	blogs: medium screens
-------------------------------------- */
@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
  .pcc-posts img {
    width: 12.5rem;
  }
}
/* --------------------------------------
	blogs: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  .pcc-posts .post {
    flex-direction: column;
  }
  .pcc-posts img {
    padding: 0 0 1.25rem 0;
    width: 100%;
  }
}
/* ----------------------------------------------------------------
    buttons
    (_source/styles/components/_buttons.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    basic buttons
---------------------------------------------------------------- */
#main .button, #main button, #main input[type=submit] {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0.1875rem 0.1875rem rgb(216.75, 216.75, 216.75);
  background: #e8c850;
  border: 0.125rem solid #ffffff;
  border-radius: 0.25rem;
  color: rgb(138.9690721649, 71.2216494845, 29.5309278351);
  font-size: 1.0625rem;
  padding: 0.9375rem 1.875rem 1rem 1.25rem;
  text-decoration: none;
  text-shadow: none;
  transition: color 0s;
}
#main .button i, #main button i, #main input[type=submit] i {
  font-size: 0.8125em;
  position: relative;
  left: 0.625rem;
  transition: left 0.2s ease;
}
#main .button:hover, #main .button:focus, #main button:hover, #main button:focus, #main input[type=submit]:hover, #main input[type=submit]:focus {
  box-shadow: 0.1875rem 0.1875rem rgb(216.75, 216.75, 216.75);
  background: #878a31;
  border-color: #ffffff;
  color: #ffffff;
}
#main .button:hover i, #main .button:focus i, #main button:hover i, #main button:focus i, #main input[type=submit]:hover i, #main input[type=submit]:focus i {
  left: 0.9375rem;
  transition: left 0.2s ease;
}

#main .bg-pattern .button:hover, #main .bg-pattern .button:focus {
  background: linear-gradient(180deg, #97444f 0%, #a05222 100%);
  color: #ffffff;
}

#main input[type=submit] {
  padding-right: 1.25rem;
}

/* ----------------------------------------------------------------
    cards and card columns
    (_source/styles/components/_cards.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    card basics
---------------------------------------------------------------- */
/* ------------------------------------
    card container
------------------------------------ */
.card {
  box-shadow: 0.1875rem 0.1875rem rgb(98.2534246575, 44.2465753425, 51.404109589);
  background: rgb(249.7727272727, 242.5, 215.2272727273);
  border: none;
  border-radius: 0.25rem;
  color: #a83c27;
  clear: both;
  display: block;
  padding-bottom: 0.9375rem;
  padding-top: 0.625rem;
  position: relative;
  z-index: 2;
}
.card > * {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.card p {
  color: #a83c27;
  text-shadow: none;
}

/* ------------------------------------
    card headings
------------------------------------ */
.card h3, .card h4, .card h5, .card h6 {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #a83c27;
  font-size: 1.25em;
  margin-top: -0.625rem;
  padding-top: 0.9375rem;
  text-shadow: none;
  text-transform: none;
}

/* ------------------------------------
    special card content
------------------------------------ */
.card ul, .card ol {
  padding-bottom: 0.3125rem;
}

/* ----------------------------------------------------------------
    right-aligned cards
    medium and large screens
---------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  .card-50 {
    float: right;
    margin: 0.625rem 0 0.9375rem 1.25rem;
    width: 50%;
  }
}
/* ----------------------------------------------------------------
    cards that are links
---------------------------------------------------------------- */
.card-columns .card > a {
  color: #a83c27;
  display: block;
  height: calc(100% + 1.5625rem);
  margin-bottom: -1.5625rem;
  padding: 0 0 1.5625rem;
  position: relative;
  text-decoration: none;
}
.card-columns .card > a p, .card-columns .card > a ol, .card-columns .card > a ul {
  color: #a83c27;
  text-shadow: none;
}
.card-columns .card > a > *:not(img) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.card-columns .card > a::after {
  color: #a83c27;
  content: "\f105";
  font-family: FontAwesome;
  font-size: 0.75rem;
  bottom: 0.625rem;
  color: #a83c27;
  font-size: 1.625em;
  position: absolute;
  right: 1.125rem;
  text-shadow: none;
  transition: right 0.2s ease;
}
.card-columns .card > a:hover, .card-columns .card > a:focus {
  background: rgb(243.8484848485, 228.3333333333, 170.1515151515);
}
.card-columns .card > a:hover::after, .card-columns .card > a:focus::after {
  right: 0.75rem;
  transition: right 0.2s ease;
}
.card-columns .card > a:focus:not(:hover) {
  outline: 0.0625rem solid #a83c27 !important;
}

/* ----------------------------------------------------------------
    card icons
---------------------------------------------------------------- */
.card i.callout-icon {
  color: #a83c27;
  float: right;
  font-size: 2.875em;
  padding: 0.9375rem 1.25rem 0 0.625rem;
}
.card img.callout-icon {
  margin-right: 1.25rem;
}
.card img.callout-icon.alignright {
  float: right !important;
}
.card img.callout-icon.alignleft {
  float: left !important;
}

.card a .callout-icon {
  padding-right: 0;
}

/* ----------------------------------------------------------------
    card-columns
---------------------------------------------------------------- */
.card-columns {
  margin-bottom: 1.875rem;
  margin-top: 1.25rem;
}

h2 + .card-columns {
  margin-top: 3.125rem;
}

/* ------------------------------------
    cards with images
------------------------------------ */
/* ----- hero images ----- */
.card-columns .card img {
  border-radius: 0.25rem 0.25rem 0 0;
}
.card-columns .card img:not(.alignright):not(.alignleft) {
  margin: -0.625rem auto 0.625rem;
  padding: 0;
}
.card-columns .card a > br {
  display: none;
}

/* ----- logos ----- */
.card .icon {
  padding: 1.25rem 1.25rem 0 1.25rem !important;
}

/* ------------------------------------
    less space between cards - divide all defaults by 2
    medium and large screens
------------------------------------ */
@media print, screen and (min-width: 40em) {
  .card-columns.grid-margin-x {
    margin-left: -0.46875rem;
    margin-right: -0.46875rem;
  }
  .card-columns.grid-margin-x > .cell {
    width: calc(100% - 0.9375rem);
    margin-left: 0.46875rem;
    margin-right: 0.46875rem;
  }
  .card-columns.grid-margin-x > .small-1 {
    width: calc(8.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-2 {
    width: calc(16.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-3 {
    width: calc(25% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-4 {
    width: calc(33.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-5 {
    width: calc(41.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-6 {
    width: calc(50% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-7 {
    width: calc(58.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-8 {
    width: calc(66.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-9 {
    width: calc(75% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-10 {
    width: calc(83.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-11 {
    width: calc(91.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .small-12 {
    width: calc(100% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-1 {
    width: calc(8.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-2 {
    width: calc(16.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-3 {
    width: calc(25% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-4 {
    width: calc(33.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-5 {
    width: calc(41.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-6 {
    width: calc(50% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-7 {
    width: calc(58.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-8 {
    width: calc(66.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-9 {
    width: calc(75% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-10 {
    width: calc(83.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-11 {
    width: calc(91.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .medium-12 {
    width: calc(100% - 0.9375rem);
  }
}
/* ------------------------------------
    less space between cards - divide all defaults by 2
    large screens
------------------------------------ */
@media print, screen and (min-width: 64em) {
  .card-columns.grid-margin-x > .large-1 {
    width: calc(8.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-2 {
    width: calc(16.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-3 {
    width: calc(25% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-4 {
    width: calc(33.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-5 {
    width: calc(41.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-6 {
    width: calc(50% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-7 {
    width: calc(58.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-8 {
    width: calc(66.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-9 {
    width: calc(75% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-10 {
    width: calc(83.33333% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-11 {
    width: calc(91.66667% - 0.9375rem);
  }
  .card-columns.grid-margin-x > .large-12 {
    width: calc(100% - 0.9375rem);
  }
}
/* ----------------------------------------------------------------
    film grid styles
    (_source/styles/components/_film-grid.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    default film grid
---------------------------------------------------------------- */
/* --------------------------------------
	boxes
-------------------------------------- */
.film-grid .cell {
  box-shadow: 0.1875rem 0.1875rem rgb(98.2534246575, 44.2465753425, 51.404109589);
  background: #ffffff;
  border-radius: 0.25rem;
  margin-bottom: 1.875rem;
  text-align: center;
}
.film-grid .cell a {
  border-radius: 0.25rem;
  display: block;
  height: 100%;
  text-decoration: none;
}
.film-grid .cell a img {
  border-radius: 0.25rem 0.25rem 0 0;
}
.film-grid .cell a h3, .film-grid .cell a h4, .film-grid .cell a p {
  color: #a83c27 !important;
}
.film-grid .cell a:hover, .film-grid .cell a:focus {
  box-shadow: 0.1875rem 0.1875rem rgb(63.0890410959, 28.4109589041, 33.0068493151);
  background: #ffffff;
  color: #333333;
}
.film-grid .cell a:hover img, .film-grid .cell a:focus img {
  opacity: 0.8;
}
.film-grid .cell a:hover h3, .film-grid .cell a:hover h4, .film-grid .cell a:hover p, .film-grid .cell a:focus h3, .film-grid .cell a:focus h4, .film-grid .cell a:focus p {
  color: #333333 !important;
}

#film-grid-buttons {
  margin-top: 1.25rem;
}
#film-grid-buttons .button:first-of-type {
  margin-right: 0.3125rem;
}

/* --------------------------------------
	film info
-------------------------------------- */
.film-grid img {
  width: 100%;
}

.film-grid .film-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.875rem;
  min-height: 9.375rem;
}
.film-grid .film-info h3, .film-grid .film-info h4 {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 1.6875em;
  line-height: 1.2;
  margin-top: 0;
  text-shadow: none;
  text-transform: none;
}
.film-grid .film-info p {
  font-size: 1.0625em;
  margin-bottom: 0;
  padding-bottom: 0;
  text-shadow: none;
}

/* ----------------------------------------------------------------
    small film grid
---------------------------------------------------------------- */
/* --------------------------------------
	boxes
-------------------------------------- */
.film-grid.small .cell a {
  box-shadow: 0.1875rem 0.1875rem rgb(208.1439393939, 170.0833333333, 27.3560606061);
  background: #e8c850;
}
.film-grid.small .cell a:hover, .film-grid.small .cell a:focus {
  box-shadow: 0.1875rem 0.1875rem rgb(216.75, 216.75, 216.75);
  background: #ffffff;
  color: #333333 !important;
}

/* --------------------------------------
	film info
-------------------------------------- */
.film-grid.small .film-info h4 {
  color: rgb(126.6086956522, 45.2173913043, 29.3913043478) !important;
  font-size: 1.3125em;
  line-height: 1.2;
}

/* ----------------------------------------------------------------
    forms
    (_source/styles/components/_forms.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   general forms
---------------------------------------------------------------- */
/* --------------------------------------
	form groups
-------------------------------------- */
.form-group {
  margin-top: 1.875rem;
}

/* --------------------------------------
	labels and legends
-------------------------------------- */
form label, form legend {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #ffffff;
  font-size: 1em;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

form fieldset {
  margin-top: 1.875rem;
}

/* --------------------------------------
	inputs
-------------------------------------- */
form input:not([type=submit]), form textarea {
  background: #ffffff;
  border: 0.0625rem solid #ffffff;
  color: rgb(76.5, 76.5, 76.5);
  transition: all 0.2s;
}
form input:not([type=submit]):focus, form textarea:focus {
  background: #cccccc;
  border-color: #ffffff;
  box-shadow: none;
  transition: all 0.2s;
}

/* --------------------------------------
	selects
-------------------------------------- */
form select {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  background-color: #ffffff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2842, 24, 13%29"></polygon></svg>');
  border: 0.125rem solid #ffffff;
  border-radius: 0.25rem;
  color: #333333;
}
form select:hover, form select:focus {
  background-color: #e8c850;
  border: 0.125rem solid #ffffff;
  box-shadow: none;
  color: #333333;
  cursor: pointer;
}
form select:focus:not(:hover) {
  outline: 0.0625rem solid #ffffff;
  outline-offset: 0.3125rem;
}

#filter-films {
  margin-bottom: 3.125rem;
}

/* --------------------------------------
	checkboxes and radio buttons
-------------------------------------- */
.checkbox-radio-group label {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.3125rem 0.3125rem;
  vertical-align: text-top;
  width: 75%;
}

/* ----------------------------------------------------------------
    media
    (_source/styles/components/_media.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   images
---------------------------------------------------------------- */
/* --------------------------------------
	featured film image
-------------------------------------- */
img.featured-film {
  margin-bottom: 1.875rem;
}

/* --------------------------------------
	image alignment
-------------------------------------- */
.alignright {
  display: block;
  float: right;
  margin: 0.625rem 0 0.625rem 1.25rem;
}

.alignleft {
  display: block;
  float: left;
  margin: 0.625rem 1.25rem 0.625rem 0;
}

/* --------------------------------------
	image sizing
-------------------------------------- */
img.size-full {
  width: 100%;
}

img.size-large {
  width: 50%;
}

img.size-medium {
  width: 25%;
}

/* --------------------------------------
	images with captions
-------------------------------------- */
.wp-caption {
  max-width: 100%;
}

/* --------------------------------------
	images that are links
-------------------------------------- */
a:hover img, a:focus img {
  opacity: 0.8;
}

/* --------------------------------------
	images: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  .alignright {
    float: none;
    margin: 0 auto 1.25rem;
    max-width: 100%;
  }
  img.size-full, img.size-large, img.size-medium {
    width: 100%;
  }
}
/* ----------------------------------------------------------------
    image galleries
---------------------------------------------------------------- */
.gallery .gallery-item {
  margin-right: 1.25rem;
  width: calc(25% - 1.25rem) !important;
}
.gallery img {
  border: none !important;
}
.gallery .gallery-caption {
  color: #ffffff;
}

/* --------------------------------------
	images galleries: medium screens
-------------------------------------- */
@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
  .gallery .gallery-item {
    width: calc(50% - 1.25rem) !important;
  }
}
/* --------------------------------------
	images galleries: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  .gallery .gallery-item {
    margin: 0 0 0.625rem;
    width: 100% !important;
  }
}
/* ----------------------------------------------------------------
    YouTube embedded videos
---------------------------------------------------------------- */
.youtube-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 1.875rem;
  position: relative;
}
.youtube-container iframe, .youtube-container object, .youtube-container embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ----------------------------------------------------------------
    social media
---------------------------------------------------------------- */
#connect h4 {
  margin-bottom: 0.9375rem;
}

/* --------------------------------------
	icons
-------------------------------------- */
#social-icons a {
  display: inline-block;
}
#social-icons a i {
  color: #ffffff;
  font-size: 3.5em;
  padding: 0 0.625rem 0.625rem 0;
}
#social-icons a:focus i, #social-icons a:hover i {
  color: rgb(249.7727272727, 242.5, 215.2272727273);
}

/* --------------------------------------
	mastodon
-------------------------------------- */
a#mastodon:hover {
  cursor: pointer;
}

#modal-mastodon h1 {
  color: #333333;
  margin-top: 0;
}
#modal-mastodon p {
  color: #333333;
}

/* ----------------------------------------------------------------
    open sesame
    (_source/styles/components/_open_sesame.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   general
---------------------------------------------------------------- */
.open-sesame {
  margin: 0.9375rem 0;
}

/* ----------------------------------------------------------------
   top-level headings
---------------------------------------------------------------- */
.open-sesame > h3, .open-sesame > h4, .open-sesame > h5, .open-sesame > h6 {
  font-size: 1em;
  letter-spacing: 0;
  margin: 0.625rem 0 0 0.625rem !important;
}
.open-sesame > h3.open a, .open-sesame > h3.open a i, .open-sesame > h4.open a, .open-sesame > h4.open a i, .open-sesame > h5.open a, .open-sesame > h5.open a i, .open-sesame > h6.open a, .open-sesame > h6.open a i {
  color: white;
}
.open-sesame > h3 a, .open-sesame > h4 a, .open-sesame > h5 a, .open-sesame > h6 a {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
}
.open-sesame > h3 a i, .open-sesame > h4 a i, .open-sesame > h5 a i, .open-sesame > h6 a i {
  color: rgb(249.7727272727, 242.5, 215.2272727273);
  margin-left: -0.625rem;
  padding-right: 0.625rem;
  position: relative;
  text-decoration: none;
}
.open-sesame > h3 a i::before, .open-sesame > h4 a i::before, .open-sesame > h5 a i::before, .open-sesame > h6 a i::before {
  text-decoration: none;
}
.open-sesame > h3 a:hover i, .open-sesame > h3 a:focus i, .open-sesame > h4 a:hover i, .open-sesame > h4 a:focus i, .open-sesame > h5 a:hover i, .open-sesame > h5 a:focus i, .open-sesame > h6 a:hover i, .open-sesame > h6 a:focus i {
  color: white;
}
.open-sesame > h3 strong, .open-sesame > h4 strong, .open-sesame > h5 strong, .open-sesame > h6 strong {
  font-family: "nexa", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

/* ----------------------------------------------------------------
   expanded content
---------------------------------------------------------------- */
.open-sesame div {
  outline: none;
}
.open-sesame .hidden-content {
  padding-left: 1.25rem;
}
.open-sesame .hidden-content > *:not(.callout):not(form):not(.alignright):not(.aligncenter):not(.alignleft) {
  margin-left: 0;
  padding-left: 0;
}
.open-sesame .hidden-content h4, .open-sesame .hidden-content h5, .open-sesame .hidden-content h6 {
  margin-top: 0.625rem;
}
.open-sesame .hidden-content h4 {
  font-size: 1.25em;
}
.open-sesame .hidden-content h5 {
  font-size: 1.1875em;
}
.open-sesame .hidden-content h6 {
  font-size: 1.125em;
}
.open-sesame .hidden-content ul, .open-sesame .hidden-content ol {
  margin-left: 1.5625rem !important;
}
.open-sesame .hidden-content dl {
  margin-left: 0.625rem !important;
}
.open-sesame .hidden-content ul li p {
  margin: 0 !important;
}
.open-sesame .facade {
  margin-left: -3.125rem;
  padding-left: 3.125rem;
}