@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0; }

@font-face {
  font-family: 'SansRoman-Regular';
  src: url("/fonts/sansroman-regular-webfont.eot");
  src: url("/fonts/sansroman-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/sansroman-regular-webfont.woff") format("woff"), url("/fonts/sansroman-regular-webfont.ttf") format("truetype"), url("/fonts/sansroman-regular-webfont.svg#sans_romanregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'SansRoman-Rotalic';
  src: url("/fonts/sansroman-rotalic-webfont.eot");
  src: url("/fonts/sansroman-rotalic-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/sansroman-rotalic-webfont.woff") format("woff"), url("/fonts/sansroman-rotalic-webfont.ttf") format("truetype"), url("/fonts/sansroman-rotalic-webfont.svg#sans_romanrotalic") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Artisan-Regular';
  src: url("/fonts/artisan-regular-webfont.eot");
  src: url("/fonts/artisan-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/artisan-regular-webfont.woff2") format("woff2"), url("/fonts/artisan-regular-webfont.woff") format("woff"), url("/fonts/artisan-regular-webfont.ttf") format("truetype"), url("/fonts/artisan-regular-webfont.svg#artisanregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'RomanSque-Regular';
  src: url("/fonts/romansque-regular-webfont.eot");
  src: url("/fonts/romansque-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/romansque-regular-webfont.woff2") format("woff2"), url("/fonts/romansque-regular-webfont.woff") format("woff"), url("/fonts/romansque-regular-webfont.ttf") format("truetype"), url("/fonts/romansque-regular-webfont.svg#romansqueregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Shelter-Medium';
  src: url("/fonts/shelter-medium-webfont.eot");
  src: url("/fonts/shelter-medium-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/shelter-medium-webfont.woff2") format("woff2"), url("/fonts/shelter-medium-webfont.woff") format("woff"), url("/fonts/shelter-medium-webfont.ttf") format("truetype"), url("/fonts/shelter-medium-webfont.svg#sheltermedium") format("svg");
  font-weight: normal;
  font-style: normal; }

.theme-article {
  background-color: #ff1538; }

.red {
  color: #ff3c4f; }

/* Horizontal margins
----------------------------------------------------------------------------- */
/* Vertical margins -- normal
----------------------------------------------------------------------------- */
.content {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 120px;
  margin-bottom: 130px; }
  @media screen and (min-width: 670px) {
    .content {
      padding-left: 24px;
      padding-right: 24px; } }
  @media screen and (min-width: 900px) {
    .content {
      padding-left: 27px;
      padding-right: 27px; } }
  @media screen and (min-width: 1150px) {
    .content {
      padding-left: 32px;
      padding-right: 32px; } }
  @media screen and (min-width: 1500px) {
    .content {
      padding-left: 38px;
      padding-right: 38px; } }
  @media screen and (min-width: 670px) {
    .content {
      padding-top: 168px; } }
  @media screen and (min-width: 900px) {
    .content {
      padding-top: 189px; } }
  @media screen and (min-width: 1150px) {
    .content {
      padding-top: 224px; } }
  @media screen and (min-width: 1500px) {
    .content {
      padding-top: 266px; } }
  @media screen and (min-width: 670px) {
    .content {
      margin-bottom: 148px; } }
  @media screen and (min-width: 900px) {
    .content {
      margin-bottom: 162px; } }
  @media screen and (min-width: 1150px) {
    .content {
      margin-bottom: 184px; } }
  @media screen and (min-width: 1500px) {
    .content {
      margin-bottom: 200px; } }

.articles .content {
  padding-top: 203px; }
  @media screen and (min-width: 670px) {
    .articles .content {
      padding-top: 168px; } }
  @media screen and (min-width: 900px) {
    .articles .content {
      padding-top: 189px; } }
  @media screen and (min-width: 1150px) {
    .articles .content {
      padding-top: 224px; } }
  @media screen and (min-width: 1500px) {
    .articles .content {
      padding-top: 266px; } }

/* Font stack mixins
(so I don't have to keep typing this shit)
----------------------------------------------------------------------------- */
/* Font sizing
----------------------------------------------------------------------------- */
/* Basics - the foundational stuff
   This is just for setting up all the basic parts
   This is NOT for setting the size and fonts for every page type
   All of that stuff goes in the CSS for each kind of page
----------------------------------------------------------------------------- */
body {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 13px;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures; }
  @media screen and (min-width: 670px) {
    body {
      font-size: 14px; } }
  @media screen and (min-width: 900px) {
    body {
      font-size: 14px; } }
  @media screen and (min-width: 1150px) {
    body {
      font-size: 15px; } }
  @media screen and (min-width: 1500px) {
    body {
      font-size: 16px; } }

h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, blockquote, pre {
  font-weight: normal;
  font-size: 1em; }

h1 {
  font-size: 1.4em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ff3c4f;
  margin: 0;
  padding-bottom: 2em;
  padding-top: 2em; }
  h1:first-of-type {
    padding-top: 0; }

p {
  margin-top: 0;
  margin-bottom: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

.embiggen {
  font-size: 1.5em; }

.navigation {
  z-index: 100;
  font-family: 'RomanSque-Regular', Helvetica, Arial, sans-serif;
  padding-top: 20px;
  background-color: #fbfbfb;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0; }
  @media screen and (min-width: 670px) {
    .navigation {
      padding-top: 24px; } }
  @media screen and (min-width: 900px) {
    .navigation {
      padding-top: 27px; } }
  @media screen and (min-width: 1150px) {
    .navigation {
      padding-top: 32px; } }
  @media screen and (min-width: 1500px) {
    .navigation {
      padding-top: 38px; } }
  .navigation .nav-wrapper {
    padding-left: 20px;
    padding-right: 20px; }
    @media screen and (min-width: 670px) {
      .navigation .nav-wrapper {
        padding-left: 24px;
        padding-right: 24px; } }
    @media screen and (min-width: 900px) {
      .navigation .nav-wrapper {
        padding-left: 27px;
        padding-right: 27px; } }
    @media screen and (min-width: 1150px) {
      .navigation .nav-wrapper {
        padding-left: 32px;
        padding-right: 32px; } }
    @media screen and (min-width: 1500px) {
      .navigation .nav-wrapper {
        padding-left: 38px;
        padding-right: 38px; } }
  .navigation .nav-inner-wrapper {
    padding-bottom: 30px;
    border-bottom: 15px solid black; }
    @media screen and (min-width: 670px) {
      .navigation .nav-inner-wrapper {
        padding-bottom: 33px;
        border-bottom: 17px solid black; } }
    @media screen and (min-width: 900px) {
      .navigation .nav-inner-wrapper {
        padding-bottom: 36px;
        border-bottom: 18px solid black; } }
    @media screen and (min-width: 1150px) {
      .navigation .nav-inner-wrapper {
        padding-bottom: 40px;
        border-bottom: 20px solid black; } }
    @media screen and (min-width: 1500px) {
      .navigation .nav-inner-wrapper {
        padding-bottom: 42px;
        border-bottom: 20px solid black; } }
  .navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .navigation li {
    list-style: inline;
    float: left;
    padding-right: 25px;
    display: block; }
  .navigation li a {
    color: #000;
    text-decoration: none;
    text-align: center; }
  .navigation li a:hover {
    color: #0077ff; }
  .navigation li.nav-name {
    padding-right: 50px; }
  .navigation .nav-item {
    color: #999; }
  .navigation .nav-current {
    color: #000; }
  @media screen and (min-width: 670px) {
    .navigation .tiny-title {
      display: none; } }
  .navigation .menu-button {
    float: right;
    padding-right: 0; }
    @media screen and (min-width: 670px) {
      .navigation .menu-button {
        display: none; } }
  .navigation .hide-small {
    display: none; }
    @media screen and (min-width: 670px) {
      .navigation .hide-small {
        display: block; } }

.pushy li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 16px 0 18px 0;
  height: 19px; }
  .pushy li:first-of-type {
    margin-top: 105px;
    border-top: 1px solid rgba(0, 0, 0, 0.15); }

button {
  font-family: 'RomanSque-Regular', Helvetica, Arial, sans-serif;
  font-size: 13px;
  border: none;
  padding: 5px 0px 0px 0px;
  text-align: center; }
  @media screen and (min-width: 670px) {
    button {
      font-size: 14px; } }
  @media screen and (min-width: 900px) {
    button {
      font-size: 14px; } }
  @media screen and (min-width: 1150px) {
    button {
      font-size: 15px; } }
  @media screen and (min-width: 1500px) {
    button {
      font-size: 16px; } }

button.menu-button {
  background-color: #fbfbfb; }

button.close-button {
  background-color: #0077ff;
  float: right; }
  button.close-button:hover {
    color: #fff; }

/* The footer styles
----------------------------------------------------------------------------- */
.sticky-footer {
  height: 65px;
  background-color: #fbfbfb;
  position: fixed;
  bottom: 0;
  width: 100%;
  visibility: hidden; }
  @media screen and (min-width: 670px) {
    .sticky-footer {
      height: 74px; } }
  @media screen and (min-width: 900px) {
    .sticky-footer {
      height: 81px; } }
  @media screen and (min-width: 1150px) {
    .sticky-footer {
      height: 92px; } }
  @media screen and (min-width: 1500px) {
    .sticky-footer {
      height: 100px; } }
  @media screen and (min-width: 670px) {
    .sticky-footer {
      visibility: visible; } }

.sticky-footer-inner-1 {
  padding-left: 20px;
  padding-right: 20px; }
  @media screen and (min-width: 670px) {
    .sticky-footer-inner-1 {
      padding-left: 24px;
      padding-right: 24px; } }
  @media screen and (min-width: 900px) {
    .sticky-footer-inner-1 {
      padding-left: 27px;
      padding-right: 27px; } }
  @media screen and (min-width: 1150px) {
    .sticky-footer-inner-1 {
      padding-left: 32px;
      padding-right: 32px; } }
  @media screen and (min-width: 1500px) {
    .sticky-footer-inner-1 {
      padding-left: 38px;
      padding-right: 38px; } }

.sticky-footer-inner-2 {
  border-top: 20px solid #000; }

/*
Add styles for each of the page types
that are not covered elswhere
*/
html {
  background-color: #fbfbfb; }

/*
To do:
- set colours for each page, this includes the thick rule, etc.
*/
/*! Pushy - v1.1.0 - 2017-1-30
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
/* Menu Appearance */
.pushy {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: #0077ff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* enables momentum scrolling in iOS overflow elements */ }
  @media screen and (min-width: 670px) {
    .pushy {
      padding-left: 24px;
      padding-right: 24px; } }
  @media screen and (min-width: 900px) {
    .pushy {
      padding-left: 27px;
      padding-right: 27px; } }
  @media screen and (min-width: 1150px) {
    .pushy {
      padding-left: 32px;
      padding-right: 32px; } }
  @media screen and (min-width: 1500px) {
    .pushy {
      padding-left: 38px;
      padding-right: 38px; } }
  @media screen and (min-width: 670px) {
    .pushy {
      padding-top: 24px;
      padding-bottom: 24px; } }
  @media screen and (min-width: 900px) {
    .pushy {
      padding-top: 27px;
      padding-bottom: 27px; } }
  @media screen and (min-width: 1150px) {
    .pushy {
      padding-top: 32px;
      padding-bottom: 32px; } }
  @media screen and (min-width: 1500px) {
    .pushy {
      padding-top: 38px;
      padding-bottom: 38px; } }
  .pushy ul {
    margin-top: 0px;
    font-family: 'RomanSque-Regular', Helvetica, Arial, sans-serif;
    list-style-type: none; }
  .pushy li {
    list-style: inline; }
  .pushy a {
    display: block;
    color: #000;
    margin-bottom: 36px;
    text-decoration: none; }
  .pushy a:hover {
    color: #fff; }
  .pushy.pushy-left {
    left: 0; }
  .pushy.pushy-right {
    right: 0; }

.pushy-content {
  visibility: hidden; }

/* Menu Movement */
.pushy-left {
  -webkit-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

.pushy-open-left #container,
.pushy-open-left .push {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

.pushy-right {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

.pushy-open-right #container,
.pushy-open-right .push {
  -webkit-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

.pushy-open-left .pushy,
.pushy-open-right .pushy {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content {
  visibility: visible; }

/* Menu Transitions */
#container,
.pushy,
.push {
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

.pushy-content {
  transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

/* Site Overlay */
.site-overlay {
  display: none; }

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 500ms;
  animation: fade 500ms; }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* Submenu Appearance */
.pushy-submenu {
  /* Submenu Buttons */
  /* Submenu Icon */ }
  .pushy-submenu ul {
    transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out; }
    .pushy-submenu ul .pushy-link {
      transition: opacity 0.2s ease-in-out; }
  .pushy-submenu button {
    width: 100%;
    color: #b3b3b1;
    text-align: left;
    background: transparent;
    border: 0; }
    .pushy-submenu button:hover {
      color: #FFF; }
  .pushy-submenu > a,
  .pushy-submenu > button {
    position: relative; }
  .pushy-submenu > a::after,
  .pushy-submenu > button::after {
    content: '';
    display: block;
    height: 11px;
    width: 8px;
    position: absolute;
    top: 50%;
    right: 15px;
    background: url("../img/arrow.svg") no-repeat;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: transform 0.2s; }

/* Submenu Movement */
.pushy-submenu-closed ul {
  max-height: 0;
  overflow: hidden;
  visibility: hidden; }

.pushy-submenu-closed .pushy-link {
  opacity: 0; }

.pushy-submenu-open {
  /* Submenu Icon */ }
  .pushy-submenu-open ul {
    max-height: 1000px;
    visibility: visible; }
  .pushy-submenu-open .pushy-link {
    opacity: 1; }
  .pushy-submenu-open a::after,
  .pushy-submenu-open button::after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg); }

.go-to {
  padding-left: 20px;
  padding-right: 20px;
  font-family: 'RomanSque-Regular', Helvetica, Arial, sans-serif;
  margin-top: 65px;
  padding-top: 12px;
  color: #ff3c4f;
  position: absolute; }
  @media screen and (min-width: 670px) {
    .go-to {
      padding-left: 24px;
      padding-right: 24px; } }
  @media screen and (min-width: 900px) {
    .go-to {
      padding-left: 27px;
      padding-right: 27px; } }
  @media screen and (min-width: 1150px) {
    .go-to {
      padding-left: 32px;
      padding-right: 32px; } }
  @media screen and (min-width: 1500px) {
    .go-to {
      padding-left: 38px;
      padding-right: 38px; } }
  @media screen and (min-width: 670px) {
    .go-to {
      margin-top: 74px; } }
  @media screen and (min-width: 900px) {
    .go-to {
      margin-top: 81px; } }
  @media screen and (min-width: 1150px) {
    .go-to {
      margin-top: 92px; } }
  @media screen and (min-width: 1500px) {
    .go-to {
      margin-top: 100px; } }
  @media screen and (min-width: 670px) {
    .go-to {
      padding-top: 12px;
      position: fixed; } }
  @media screen and (min-width: 900px) {
    .go-to {
      padding-top: 14px; } }
  @media screen and (min-width: 1150px) {
    .go-to {
      padding-top: 17px; } }
  @media screen and (min-width: 1500px) {
    .go-to {
      padding-top: 18px; } }
  .go-to ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .go-to li {
    padding-right: 25px;
    display: block; }
    @media screen and (min-width: 670px) {
      .go-to li {
        list-style: inline;
        float: left; } }
  .go-to li a {
    color: #ff3c4f;
    text-decoration: none;
    text-align: center; }
  .go-to li a:hover {
    color: #0077ff; }

.go-to-heading {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic; }
  @media screen and (min-width: 670px) {
    .go-to-heading {
      margin-top: -1px; } }
  @media screen and (min-width: 1150px) {
    .go-to-heading {
      margin-top: -2px; } }

/*
this lets us set a custom position for the anchors
to accomodate the fixed page header
*/
a.anchor {
  display: block;
  position: relative;
  top: -230px;
  visibility: hidden; }

.article {
  margin-bottom: 3em; }
  .article a {
    color: #999;
    text-decoration: underline; }
    .article a:hover {
      color: #0077ff; }

.further {
  font-family: 'RomanSque-Regular', Helvetica, Arial, sans-serif;
  color: #999; }
  .further a {
    color: #999;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1px; }
    .further a:hover {
      color: #0077ff;
      border-color: #0077ff;
      transition: color 0.2s ease, border-bottom-color 0.2s ease; }

.call-out {
  color: #ff3c4f; }

.contributors,
.contributor-list {
  max-width: 720px; }

.excerpted-in, .contributors {
  padding-left: 1.25em; }

.excerpted, .contributor-list {
  padding-left: 2.5em; }

.criticism .content p {
  margin-top: 1em;
  margin-left: 0.4em; }

.criticism .content p:first-of-type {
  margin-top: 0; }

.criticism .content .excerpted-in {
  margin-top: 0; }

.criticism .content .excerpted {
  margin-top: 0; }
  .criticism .content .excerpted p {
    margin-top: 0; }

/*
Add negative margin to accomodate the quotation mark
*/
.curating .screenings {
  font-family: 'Libre Baskerville', Georgia, serif;
  padding-left: 1.25em; }

.curating-explanation {
  font-family: 'RomanSque-Regular', Helvetica, Arial, sans-serif;
  color: #000; }
  .curating-explanation a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #999;
    padding-bottom: 1px; }
    .curating-explanation a:hover {
      color: #0077ff;
      border-color: #0077ff;
      transition: color 0.2s ease, border-bottom-color 0.2s ease; }

.screening-items {
  padding-left: 2.5em; }
  .screening-items a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #999; }
    .screening-items a:hover {
      border-bottom: 1px solid #0077ff;
      transition: color 0.2s ease, border-bottom-color 0.2s ease; }

.curating .content p {
  margin-left: 0.4em;
  max-width: 720px; }

.extra-top-space {
  margin-top: 1em; }

.ongoing-with-divider {
  border-bottom: 1px solid #ff3c4f;
  padding-bottom: 3em; }

a.red-link {
  color: #ff3c4f;
  border-bottom: 1px solid #ff3c4f; }

.teaching .content ul {
  margin: 1em 0 0 0;
  padding: 0; }

.teaching .content li {
  list-style: none;
  margin-left: 0; }

.teaching .content li:before {
  content: "— "; }

.about p {
  font-size: 1.8em;
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 800px;
  margin-bottom: 0.5em; }
  @media screen and (min-width: 900px) {
    .about p {
      font-size: 2em;
      line-height: 1.45;
      letter-spacing: -0.013em; } }
  @media screen and (min-width: 1500px) {
    .about p {
      max-width: 880px; } }
  .about p a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #bbb; }
    .about p a:hover {
      color: #0077ff;
      border-bottom-color: #0077ff;
      transition: color 0.2s ease, border-bottom-color 0.2s ease; }

/*# sourceMappingURL=main.css.map */