/* ----------------------------------------------------------------
    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: "bufalino", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.0625rem;
  line-height: 1;
  margin: 2.5rem 0 0.3125rem;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: "bufalino", 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: "bufalino", 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: "bufalino", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

h3, h4, h5, h6 {
  color: #ffffff;
}

h3 {
  font-size: 3.5em;
}

h4 {
  font-size: 2.875em;
}

h5 {
  font-size: 2.25em;
}

h6 {
  font-size: 1.625em;
}

/* --------------------------------------
	main content headings
    (with decoration)
-------------------------------------- */
h2, body.home h3 {
  font-size: 4.125em;
  line-height: 1.2;
  margin: 0.625rem 0 1.875rem 3.4375rem;
}
h2::before, body.home 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: relative;
  top: 0.3125rem;
  width: 3.125rem;
}

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

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

/* --------------------------------------
	headings on pattern/no fill backgrounds
-------------------------------------- */
body.home .bg-pattern h3, .bg-pattern h3 {
  color: rgb(0, 63.9574468085, 100.2);
}
body.home .bg-pattern h3::before, .bg-pattern h3::before {
  background: url(../images/reel.png) no-repeat center center;
  background-size: 3.125rem;
}

/* --------------------------------------
    media queries - headings
-------------------------------------- */
/* small screens */
@media only screen and (max-width: 40em) {
  h2 {
    font-size: 3.5em;
  }
  h2, body.home h3 {
    margin: 3.125rem 0 1.25rem;
  }
  h2::before, body.home h3::before {
    left: 3.125rem;
    top: -3.4375rem;
  }
}
/* ----------------------------------------------------------------
    paragraphs
---------------------------------------------------------------- */
/* --------------------------------------
	basic paragraphs
-------------------------------------- */
p {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

em, i {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
}

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

/* ----------------------------------------------------------------
    links
---------------------------------------------------------------- */
/* --------------------------------------
	basic links
-------------------------------------- */
a {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(254.31875, 210.71875, 92.18125);
  font-size: 1.125rem;
  text-decoration: underline;
}
a:hover, a:visited:hover {
  color: rgb(254.6375, 231.4375, 168.3625);
}
a:focus, a:visited:focus {
  color: rgb(254.6375, 231.4375, 168.3625);
}
a:visited {
  color: rgb(254.2125, 203.8125, 66.7875);
}
a:active, a:visited:active {
  color: rgb(254.6375, 231.4375, 168.3625);
}
a:focus:not(:hover) {
  outline: 0.0625rem solid #ffffff;
  outline-offset: 0.3125rem;
}

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

/* --------------------------------------
	current links
    (.current added with javascript)
-------------------------------------- */
a.current {
  color: rgb(254.6375, 231.4375, 168.3625);
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  border-left: 0.0625rem solid #ffffff;
  color: #ffffff;
  margin: 0.9375rem;
  padding-left: 1.25rem;
}
blockquote p,
blockquote p p {
  border: none;
  margin: 0;
}

/* ----------------------------------------------------------------
    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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  background: #ee8633;
}

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

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

/* --------------------------------------
	body: large screens
-------------------------------------- */
@media only screen and (min-width: 64em) {
  body::before {
    background: url("../images/texture.png") repeat-x top left rgb(0, 80.2340425532, 125.7);
    background-size: 50rem;
    clip-path: polygon(-4% 0, 100% 0, 41.66667% 0, 21% 60%);
    content: "";
    display: block;
    height: 18.75rem;
    position: absolute;
    width: 100%;
  }
}
/* --------------------------------------
	content area
-------------------------------------- */
/* ----- content sections without backgrounds -----*/
.filled-bg {
  background-color: #ee8633;
  background-image: url("../images/texture.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 50rem;
}

/* ----- content sections with backgrounds -----*/
.filled-bg {
  background-color: rgb(0, 80.2340425532, 125.7);
}
.filled-bg .content.grid-container {
  margin-top: -0.9375rem;
  padding-top: 0;
}

/* ----- angles -----*/
.filled-bg::before {
  background: #ee8633;
  content: "";
  display: block;
  height: 6.25rem;
  position: relative;
  top: -0.0625rem;
  width: 100%;
}

.filled-bg::before {
  clip-path: polygon(0 0, 100% 0, 80% 50%, 41.66667% 0);
}

/* ----------------------------------------------------------------
    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;
}

/* ----------------------------------------------------------------
    header
    (_source/styles/layout/_header.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    general header
---------------------------------------------------------------- */
#header {
  background: none;
  height: auto;
}

/* --------------------------------------
	header: medium and large screens
-------------------------------------- */
@media only screen and (min-width: 40em) {
  #header {
    margin-bottom: -4.375rem;
    overflow: hidden;
    position: relative;
  }
}
/* ----------------------------------------------------------------
    branding
---------------------------------------------------------------- */
body.home .logo-horizontal {
  display: none;
}

/* --------------------------------------
	branding: medium and large screens
-------------------------------------- */
@media only screen and (min-width: 40em) {
  body:not(.home) .logo-stacked {
    display: none;
  }
  #branding h1 {
    align-items: center;
    display: flex;
    height: calc(100% - 6.25rem);
    margin-top: 0;
    padding-right: 3.125rem;
  }
  #branding .main-graphic {
    position: relative;
    top: -4.375rem;
  }
  body.home #branding .cell {
    width: 50%;
  }
  body.home #branding h1 {
    height: auto;
    margin-left: auto;
    max-width: 87%;
  }
}
/* --------------------------------------
	header and branding: medium screens
-------------------------------------- */
@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
  #header {
    margin-bottom: -1.25rem;
  }
  #branding h1 {
    height: calc(100% - 1.875rem);
  }
  #branding .main-graphic {
    top: -1.25rem;
  }
  body.home #branding h1 {
    max-width: 100%;
  }
}
/* --------------------------------------
	branding: small screens
-------------------------------------- */
@media only screen and (max-width: 39.9375em) {
  .logo-horizontal {
    display: none;
  }
  .logo-stacked {
    display: block;
  }
  #branding h1 {
    padding: 1.25rem 1.25rem 0.625rem 0;
  }
  #branding > .cell:first-of-type {
    align-items: end;
    display: flex;
  }
}
/* ----------------------------------------------------------------
    homepage intro section
---------------------------------------------------------------- */
/* --------------------------------------
	homepage about section
-------------------------------------- */
#about-homepage {
  font-size: 1.0625em;
}
#about-homepage h2 {
  color: #febe10;
  font-size: 3.75em;
}
#about-homepage h3, #about-homepage h4, #about-homepage h4 strong {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}
#about-homepage h3 {
  color: #ffffff;
  font-size: 1.625em;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 2.5rem;
}
#about-homepage h3::before {
  background: none;
  height: 0;
  margin: 0;
  width: 0;
}
#about-homepage h4 {
  font-size: 1.375em;
  margin-bottom: 1.875rem;
  margin-top: 1.875rem;
}
#about-homepage .button {
  margin-top: 1.25rem;
}

.divider {
  background: #333333;
  display: block;
  height: 0.0625rem;
  margin: 1.875rem auto 2.5rem;
  max-width: 100%;
  width: 12.5rem;
}

/* --------------------------------------
	homepage tagline
-------------------------------------- */
#tagline {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: start;
  position: absolute;
  right: 0;
}
#tagline::before {
  background: #ee8633;
  clip-path: polygon(25% 20%, 100% 20%, 100% 80%, 25% 80%, 0 50%);
  content: "";
  display: block;
  height: 100%;
  min-height: 46.875rem;
  position: absolute;
  width: 100%;
  z-index: 0;
}
#tagline p {
  font-family: "bufalino", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: rgb(0, 63.9574468085, 100.2);
  font-size: 4.75em;
  line-height: 1.4;
  padding: 0 0 0 25%;
  position: relative;
  text-align: right;
}
#tagline p span.through {
  display: block;
  font-size: 0.625em;
}
#tagline p span.lenses {
  display: block;
  line-height: 1;
}

/*----- large screens -----*/
@media only screen and (min-width: 64em) {
  #tagline {
    padding: 0;
  }
}
/*----- medium and small screens -----*/
@media only screen and (max-width: 63.9375em) {
  #tagline {
    margin: 3.125rem 0;
    position: relative;
  }
  #tagline::before {
    clip-path: polygon(25% 20%, 100% 20%, 100% 80%, 25% 80%, 10% 50%);
  }
  #tagline p {
    padding-left: 30%;
  }
}
/*----- small screens -----*/
@media only screen and (max-width: 39.9375em) {
  #tagline {
    justify-content: end;
    right: -1.25rem;
  }
  #tagline::before {
    right: 0;
  }
  #tagline p {
    padding-left: 0;
    padding-right: 1.875rem;
  }
}
/* ----------------------------------------------------------------
    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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: rgb(0, 47.6808510638, 74.7);
  font-size: 1.0625em;
  margin: 0;
  padding: 0.9375rem 0.9375rem;
}
.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(0, 31.4042553191, 49.2);
  text-decoration: underline;
}
.top-bar .dropdown.menu li a:focus:not(:hover) {
  outline: 0.0625rem solid rgb(0, 47.6808510638, 74.7);
}
.top-bar .dropdown.menu li.is-active a {
  color: rgb(0, 31.4042553191, 49.2);
}
.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: #febe10;
    border: none;
    border-bottom: 0.3125rem solid #febe10;
    border-top: 0.3125rem solid #febe10;
    list-style: none;
  }
  .top-bar .dropdown.menu .submenu::before {
    color: #febe10;
    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(0, 80.2340425532, 125.7);
    margin-top: 0;
    padding: 0.9375rem 1.0625rem;
  }
  .top-bar .dropdown.menu .submenu li a:hover, .top-bar .dropdown.menu .submenu li a:focus {
    background: #2c6c90;
    color: #ffffff;
    text-decoration: none;
  }
}
/* ----------------------------------------------------------------
    donate
---------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  .top-bar .dropdown.menu > li:last-of-type a {
    color: rgb(0, 47.6808510638, 74.7);
  }
  .top-bar .dropdown.menu > li:last-of-type a:hover, .top-bar .dropdown.menu > li:last-of-type a:focus {
    color: rgb(0, 31.4042553191, 49.2);
  }
}
/* --------------------------------------
	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;
    margin-top: 5.625rem;
    position: relative;
    z-index: 1;
  }
  #global-nav::before {
    color: #febe10;
    content: "\f0d8";
    font-family: FontAwesome;
    font-size: 2.875em;
    position: absolute;
    right: 2.3125rem;
    top: -2.125rem;
  }
  .top-bar ul {
    background: #febe10;
    padding: 0.9375rem 0;
  }
  .top-bar ul li a {
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 900;
    background: none;
    color: rgb(0, 80.2340425532, 125.7);
    display: block;
    margin-top: 0;
    padding: 0.75rem 1.25rem;
  }
  .top-bar ul li a:hover, .top-bar ul li a:focus {
    background: #2c6c90;
    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(0, 80.2340425532, 125.7) !important;
  }
  .drilldown .is-drilldown-submenu {
    background: #febe10;
  }
  .drilldown .is-drilldown-submenu .js-drilldown-back > a::before {
    border-color: transparent rgb(0, 80.2340425532, 125.7) 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;
}
.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: rgb(0, 47.6808510638, 74.7);
  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: #ee8633;
}
.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: rgb(254.6375, 231.4375, 168.3625);
  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: rgb(254.6375, 231.4375, 168.3625);
}
#sidebar ul li.current_page_item::before {
  color: rgb(254.6375, 231.4375, 168.3625);
  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 .content.grid-container {
  padding: 0.625rem 1.875rem;
}

/* ----------------------------------------------------------------
    alert notices
    (_source/styles/components/_alerts.scss)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
    general alert notices
---------------------------------------------------------------- */
#alert {
  background: #febe10;
  border-bottom: 0.125rem solid rgb(243.48125, 178.28125, 1.01875);
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0.1875rem 0.1875rem rgb(216.75, 216.75, 216.75);
  background: #febe10;
  border: 0.125rem solid #ffffff;
  border-radius: 0.25rem;
  color: rgb(0, 63.9574468085, 100.2);
  font-size: 1.0625rem;
  padding: 0.9375rem 1.875rem 1rem 1.25rem;
  text-decoration: 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: #ee8633;
  border-color: #ffffff;
  color: rgb(0, 47.6808510638, 74.7);
}
#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: rgb(0, 80.2340425532, 125.7);
  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(216.75, 216.75, 216.75);
  background: #ffffff;
  border: none;
  border-radius: 0.25rem;
  color: rgb(0, 80.2340425532, 125.7);
  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 headings
------------------------------------ */
.card h3, .card h4, .card h5, .card h6 {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: rgb(0, 80.2340425532, 125.7);
  font-size: 1.25em;
  margin-top: -0.625rem;
  padding-top: 0.9375rem;
  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: rgb(0, 80.2340425532, 125.7);
  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: rgb(0, 80.2340425532, 125.7);
}
.card-columns .card > a > *:not(img) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.card-columns .card > a::after {
  color: rgb(0, 80.2340425532, 125.7);
  content: "\f105";
  font-family: FontAwesome;
  font-size: 0.75rem;
  bottom: 0.625rem;
  color: rgb(0, 80.2340425532, 125.7);
  font-size: 1.625em;
  position: absolute;
  right: 1.125rem;
  transition: right 0.2s ease;
}
.card-columns .card > a:hover, .card-columns .card > a:focus {
  background: rgb(229.5, 229.5, 229.5);
}
.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 rgb(0, 80.2340425532, 125.7) !important;
}

/* ----------------------------------------------------------------
    card icons
---------------------------------------------------------------- */
.card i.callout-icon {
  color: rgb(0, 80.2340425532, 125.7);
  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(216.75, 216.75, 216.75);
  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: rgb(0, 80.2340425532, 125.7) !important;
}
.film-grid .cell a:hover, .film-grid .cell a:focus {
  box-shadow: 0.1875rem 0.1875rem rgb(216.75, 216.75, 216.75);
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 1.6875em;
  line-height: 1.2;
  margin-top: 0;
  text-transform: none;
}
.film-grid .film-info p {
  font-size: 1.0625em;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ----------------------------------------------------------------
    small film grid
---------------------------------------------------------------- */
/* --------------------------------------
	boxes
-------------------------------------- */
.film-grid.small .cell a {
  box-shadow: 0.1875rem 0.1875rem rgb(192.69375, 141.09375, 0.80625);
  background: #febe10;
}
.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(0, 47.6808510638, 74.7) !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: "proxima-nova", 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: "proxima-nova", 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: #febe10;
  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: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  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
---------------------------------------------------------------- */
/* --------------------------------------
	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: #ee8633;
}

/* --------------------------------------
	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: rgb(254.6375, 231.4375, 168.3625);
}
.open-sesame > h3 a, .open-sesame > h4 a, .open-sesame > h5 a, .open-sesame > h6 a {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  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(254.31875, 210.71875, 92.18125);
  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: rgb(254.6375, 231.4375, 168.3625);
}
.open-sesame > h3 strong, .open-sesame > h4 strong, .open-sesame > h5 strong, .open-sesame > h6 strong {
  font-family: "proxima-nova", 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;
}