/* Standard Colors
----------------------------------------- */
/*
tint = lighten w/ white  shade = darken w/ black */
/* BLACK & WHITE */
/* PENN STATE BRAND BLUE */
/* ADJUSTED TO MATCH OLD GLORY NAVY */
/* #C3E2F8; */
/* #97BEE5; */
/* #205EA3; */
/* #1E417C; */
/* LIGHT ACCENTS */
/* DARK ACCENTS */
/* Fonts
----------------------------------------- */
/* 12, 14, 16, 20, 24, 28, 36, 48 */
@import url(http://fonts.googleapis.com/css?family=Lato:900,400,700,400italic,700italic,300);
@import url(http://fonts.googleapis.com/css?family=Martel:400,300,600);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?zgwf7z");
  src: url("../fonts/icomoon.eot?zgwf7z#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?zgwf7z") format("truetype"), url("../fonts/icomoon.woff?zgwf7z") format("woff"), url("../fonts/icomoon.svg?zgwf7z#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Defaults
----------------------------------------- */
/* Grids & Breakpoints
----------------------------------------- */
/*420*/
/*600*/
/*760 - imbetween b/c of wide mega menu */
/*900*/
/*1200*/
/*1400*/
/*1800*/
/* query for no padding beyond this width */
/* half of what you want margins to be */
/* ----------------------------------------------------------

STRIPPED DOWN RESET

---------------------------------------------------------- */
* {
  padding: 0;
  margin: 0;
  outline: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased; }

.clear:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

img {
  align-self: flex-start;
  flex-shrink: 0;
  /* IE 11 */
  min-height: 1px;
  /* IE 10 force resize */
  flex: none;
  /* IE 10 */ }

a img {
  border: none;
  /* IE 10 */ }

/* ----------------------------------------------------------

GENERAL BODY & CONTAINERS

---------------------------------------------------------- */
body {
  font-size: 80%;
  font-weight: 400;
  color: #0A1319;
  font-family: "Martel", serif;
  position: relative; }

@media (min-width: 37.5rem) {
  body {
    font-size: 85%; } }
@media (min-width: 56.25rem) {
  body {
    font-size: 90%; } }
@media (min-width: 75rem) {
  body {
    font-size: 95%; } }
@media (min-width: 87.5rem) {
  body {
    font-size: 100%; } }
@media (min-width: 112.5rem) {
  body {
    font-size: 105%; } }
/* ----------------------------------------------------------

UTILITY CLASSES

---------------------------------------------------------- */
/* Offscreen Elements
----------------------------------------- */
.element-invisible.mobile-only {
  height: auto;
  width: auto;
  left: auto;
  position: relative; }

.element-invisible {
  height: 0px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 0px; }
  .element-invisible:active, .element-invisible:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    width: auto; }

a.element-invisible:focus {
  background-color: #f4d94f;
  color: #FFF; }

@media (min-width: 37.5rem) {
  .element-invisible.mobile-only {
    height: 0px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 0px; } }
/* Formatting Utilities
----------------------------------------- */
.word-break {
  word-break: break-all; }

.no-margin {
  margin: 0; }

.no-margin-bottom {
  margin-bottom: 0; }

.no-margin-top {
  margin-top: 0; }

.no-padding {
  padding: 0; }

.no-padding-bottom {
  padding-bottom: 0; }

.no-padding-top {
  padding-top: 0; }

.img-rounded {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px; }

.img-circle {
  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;
  border: 0.5em solid rgba(255, 255, 255, 0.1); }

.text-left {
  text-align: left; }

.text-left-mobile-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-right-mobile-center {
  text-align: center; }

@media (min-width: 37.5rem) {
  .text-left-mobile-center {
    text-align: left; }

  .text-right-mobile-center {
    text-align: right; } }
.text-center {
  text-align: center; }

.float-right {
  float: right;
  margin-left: 1rem; }

.float-left {
  float: left;
  margin-right: 1rem; }

.small {
  font-size: 75%; }

.container-center,
.element-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

img.actual-size {
  width: auto;
  height: auto; }

.logo-ics img {
  width: 280px;
  height: auto;
  z-index: 9; }

.img-actual-size.zippo-logo {
  width: 90px;
  display: inline-block; }

@media (min-width: 37.5rem) {
  .img-actual-size.zippo-logo {
    width: 120px; } }
.reveal-me {
  opacity: 0; }

/* ----------------------------------------------------------

VIDEO

---------------------------------------------------------- */
.container-video,
.video-embed {
  position: relative;
  width: 100%;
  margin: 0; }
  .container-video::after,
  .video-embed::after {
    content: '';
    display: block;
    padding-bottom: 56.25%;
    height: 0; }
  .container-video.four-by-three::after,
  .video-embed.four-by-three::after {
    content: '';
    display: block;
    padding-bottom: 75%;
    height: 0;
    margin-top: 1rem; }
  .container-video iframe,
  .container-video object,
  .container-video embed,
  .video-embed iframe,
  .video-embed object,
  .video-embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* ----------------------------------------------------------

GENERAL STYLING

---------------------------------------------------------- */
img {
  width: 100%;
  height: auto;
  display: block;
  position: relative; }

h1, h2, h3, h4 {
  font-family: "Lato", "Bitter", sans-serif;
  line-height: 1.2;
  font-weight: 400; }

h1 {
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  font-weight: bolder;
  color: #192445;
  text-transform: uppercase;
  padding-top: 3rem;
  -webkit-mask-image: url(../images/text-texture.png);
  mask-image: url(../images/text-texture.png); }

h1.reverse-color {
  color: #E6E6D9; }

h2 {
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  font-weight: bolder;
  color: #192445;
  text-transform: uppercase;
  -webkit-mask-image: url(../images/text-texture.png);
  mask-image: url(../images/text-texture.png);
  margin-top: 3rem; }

.home h1 {
  color: #FFF;
  font-weight: lighter;
  text-shadow: 0.3vmin 0.3vmin 0 #0A1319;
  padding-top: 9vmin; }
.home h2 {
  margin-top: 6vmin;
  color: #FFF;
  font-family: "Martel", serif;
  font-weight: lighter; }

p.tagline {
  font-family: "Lato", "Bitter", sans-serif;
  color: #f4d94f;
  line-height: 1.2;
  font-size: 1.25rem;
  text-shadow: 0.2vmin 0.2vmin 0 #0A1319;
  width: 70%;
  margin-top: 2vmin;
  margin-left: 15%; }

@media (min-width: 37.5rem) {
  h1,
  .article-header h1 {
    font-size: 3.2rem; }

  h2 {
    font-size: 3.2rem; } }
.article-header {
  color: #fff;
  position: relative;
  z-index: 1; }
  .article-header .column {
    width: 100%;
    padding-bottom: 41.667%;
    /* consistent height with image-based version except m and above media query*/
    position: relative;
    padding-top: 0;
    background-color: rgba(10, 19, 25, 0.15); }
  .article-header.img-based-header .column {
    padding-bottom: 0;
    /* no resizing for img-based version */ }
  .article-header a.breadcrumb {
    display: none; }

.sub-navigation ul {
  list-style-type: none;
  font-size: 1rem;
  margin-left: 1.25%;
  border-left: 1px solid #efefef;
  padding-left: 2rem; }
.sub-navigation li {
  margin: 0.5rem 0; }

h3,
table caption {
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #2F437C;
  font-family: "Lato", "Bitter", sans-serif;
  letter-spacing: -0.015em;
  margin: 3rem 0 0.125rem 0;
  font-weight: bolder; }

@media (min-width: 37.5rem) {
  h3,
  table caption {
    font-size: 1.75rem; } }
table caption {
  text-align: center;
  margin-bottom: 0.5rem; }

h3 span {
  display: block;
  font-weight: bolder;
  font-family: "Martel", serif;
  color: rgba(10, 19, 25, 0.75);
  font-size: 80%; }

h4 {
  font-family: "Martel", serif;
  font-size: 1rem;
  font-weight: 400;
  margin: 1.75rem 0 0 0;
  text-align: left;
  font-style: italic;
  color: rgba(10, 19, 25, 0.8); }

@media (min-width: 37.5rem) {
  h4 {
    font-size: 1.25rem; } }
caption {
  font-family: "Martel", serif;
  font-size: 1rem;
  font-weight: 400;
  margin: 1rem 0 0 0;
  text-align: left; }

h4 + p {
  margin-top: 0.25rem; }

p {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin: 0.75rem 0 0.25rem 0;
  font-weight: lighter;
  font-family: "Martel", serif; }

p.nav-category {
  font-weight: 400; }

@media (min-width: 37.5rem) {
  p {
    line-height: 1.8; } }
@media (min-width: 37.5rem) {
  p {
    font-size: 1.25rem; }

  p.pullout {
    font-size: 1.5rem;
    margin: 3rem 4rem; } }
p.boxed {
  background-color: #222;
  padding: 2rem; }

p.category {
  margin-top: 0; }

.educational-materials {
  padding-top: 2rem;
  padding-bottom: 4rem; }
  .educational-materials h2 {
    padding-top: 5rem;
    /* offset for affixed nav */ }
  .educational-materials ul {
    list-style-type: none;
    font-family: "Lato", "Bitter", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding: 0; }
    .educational-materials ul li {
      margin: 1.5rem 0;
      border-bottom: 1px solid rgba(47, 67, 124, 0.75);
      padding-bottom: 1.5rem;
      line-height: 1.6; }
    .educational-materials ul li:last-of-type {
      border-bottom: none; }

@media (min-width: 37.5rem) {
  .educational-materials ul {
    padding: 0 1.5rem; } }
.credits img {
  max-width: 180px; }
.credits ul {
  list-style-type: none;
  font-family: "Lato", "Bitter", sans-serif;
  font-size: 1.25rem;
  color: rgba(10, 19, 25, 0.75); }
  .credits ul li {
    margin: 0.75rem 0; }

/* Links
----------------------------------------- */
a {
  /* normal, hover, active, visited, focus */
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  text-decoration: none;
  color: #2F437C; }
  a:visited {
    color: #2F437C; }
  a:focus {
    color: #2F437C; }
  a:hover {
    color: #131b32; }
  a:active {
    color: #2F437C; }

p a {
  padding: 0.1em;
  border-bottom: 1px solid #3DCBFF;
  box-shadow: inset 0 -2px 0 #3DCBFF;
  text-decoration: none; }

nav p a {
  border-bottom: 0;
  box-shadow: none;
  padding: 0; }

.theme-dark a {
  color: #FFF;
  text-decoration: none; }
  .theme-dark a:visited {
    color: #FFF; }
  .theme-dark a:focus {
    color: #FFF; }
  .theme-dark a:hover {
    color: #3DCBFF; }
  .theme-dark a:active {
    color: #3DCBFF; }

.theme-dark p a:hover {
  color: #3DCBFF; }

a:focus,
a:focus img,
li.active a,
nav li a:focus,
a:focus #nav-icon,
a.btn:focus,
button:focus,
input[type="submit"]:focus,
div:focus {
  outline: thin dotted;
  outline: 5px auto #3DCBFF;
  outline-offset: -2px;
  box-shadow: inset 0 0 3px 2px #3DCBFF; }

nav a:focus {
  outline: none; }

.modaal-wrapper:focus,
.modaal-video-wrap:focus {
  box-shadow: none;
  outline: none; }

/* ----------------------------------------------------------

LANDING

---------------------------------------------------------- */
header.universal {
  width: 100%;
  position: relative;
  display: block;
  z-index: 400;
  background: #0A1319;
  text-transform: uppercase;
  box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.2); }
  header.universal img {
    display: none;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    max-width: 100px;
    margin-right: 1rem; }
  header.universal img:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75; }
  header.universal a:link,
  header.universal a:visited {
    font-size: 0.9em;
    font-family: "Lato", "Bitter", sans-serif;
    color: #FFF;
    display: inline-block; }
  header.universal .btn {
    margin-top: 0;
    background-color: transparent;
    color: #FFF;
    font-size: 0.9em; }
    header.universal .btn:before {
      content: '\E5D2';
      font-family: 'Material Icons';
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      margin-right: 0.25rem;
      font-size: 1rem;
      display: inline-block;
      line-height: 0;
      position: relative;
      top: 0.125rem; }
  header.universal span.wpsu-text {
    color: #7FD4EF; }
  header.universal span.right {
    float: right; }
  header.universal span.right a {
    float: left;
    display: block; }
  header.universal a img {
    border: none; }

@media (min-width: 37.5rem) {
  header.universal
  img {
    display: inline-block; }

  header a:link, header a:visited, header .btn {
    font-size: 1rem; } }
/** --------------------------------------------------------------------

SECTIONS

--------------------------------------------------------------------- */
body {
  background: url(../images/bg-tan-texture-lt.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; }

body.home {
  background: #0A1319; }

body.home {
  background: #0A1319 url(../images/concrete-bg-large-even-darker.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed; }

.atth-introduction {
  background: #0A1319 url(../images/bg-atth-people-dark.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.atth-traveling-wall {
  background: #0A1319 url(../images/bg-wall-dark.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.ttlid-introduction {
  background: #0A1319 url(../images/concrete-bg-large-darkened.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.ttlid-introduction .audio-episode {
  padding: 1.5rem;
  background-color: #FFF;
  margin-bottom: 1em; }
.ttlid-introduction h2 {
  color: #2F437C;
  font-size: 1.5rem;
  margin-top: 0; }
.ttlid-introduction p {
  font-size: 1rem; }

@media (min-width: 56.25rem) {
  .atth-introduction {
    min-height: 85vh;
    background: #2D3741 url(../images/bg-atth-people-dark.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%; } }
img.atth-logo {
  mix-blend-mode: hard-light;
  width: 75%;
  margin-top: 2vh; }

img.ttlid-logo {
  mix-blend-mode: hard-light;
  width: 85%;
  margin-top: 2vh; }

.vinyl {
  width: 75%;
  margin-top: 2vh; }

.ttlid-introduction p.audio-intro {
  font-size: 1.5rem;
  color: #E6E6D9;
  text-shadow: 2px 2px 2px rgba(10, 19, 25, 0.85);
  line-height: 1.4; }
  .ttlid-introduction p.audio-intro + p.intro {
    margin-top: 1vh; }

p.intro {
  font-size: 1rem;
  color: #E6E6D9;
  text-shadow: 2px 2px 2px rgba(10, 19, 25, 0.85); }

.ttlid-introduction p.intro {
  margin-bottom: 2em; }

@media (min-width: 56.25rem) {
  .ttlid-introduction p.audio-intro {
    font-size: 1.75rem; }

  p.intro {
    font-size: 1.25rem; }

  img.atth-logo {
    width: 50%;
    margin-top: 5vh; }

  img.ttlid-logo {
    width: 70%;
    margin-top: 5vh; }

  .vinyl {
    width: 100%;
    margin-top: 5vh; }

  .ttlid-introduction p.audio-intro {
    margin-top: 5vh; } }
.air-dates-scroll {
  padding: 1em;
  overflow: auto;
  background-color: rgba(10, 19, 25, 0.5);
  margin-top: 1em; }
  .air-dates-scroll h2 {
    color: #E6E6D9;
    font-size: 2.25rem;
    margin-top: 1em;
    margin-bottom: 1em; }
  .air-dates-scroll .broadcast-dates p {
    font-size: 1.25rem;
    color: #E6E6D9;
    line-height: 1.4;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block; }
  .air-dates-scroll .broadcast-dates p span {
    font-family: "Lato", "Bitter", sans-serif;
    display: inline-block;
    line-height: 1.2;
    font-weight: 400;
    color: #7FD4EF;
    margin-right: 0.25em; }

@media (min-width: 26.25rem) {
  .broadcast-dates {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 2em;
    -webkit-column-gap: 2em;
    column-gap: 2em;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid; } }
@media (min-width: 56.25rem) {
  .broadcast-dates {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3; } }
@media (min-width: 87.5rem) {
  .broadcast-dates {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4; } }
/** --------------------------------------------------------------------

  Accessible Modal Dialog

--------------------------------------------------------------------- */
.modal-is-open,
.modal-is-open body {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%; }

.modal-is-open #a11y_body_wrap:after {
  background: rgba(0, 0, 0, 0.4);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.js .a11y-modal {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: opacity .2s ease-in-out;
  visibility: hidden;
  width: 100%;
  z-index: -1; }

.js .a11y-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 9999; }

.js .a11y-modal[aria-hidden="false"] .modal {
  transform: scale(1) translateY(0px); }

.modal {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  max-height: 90%;
  max-width: 800px;
  min-width: 220px;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
  transition: transform .3s ease-in-out;
  width: 100%; }

.modal--sm {
  max-width: 400px; }

.modal--full-width {
  max-width: 100%; }

.modal--take-over {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  background: rgba(122, 22, 41, 0.95);
  background: url(../images/concrete-bg-large-darkened-red.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center; }

div.modal--take-over:focus,
div.modal-black-bg:focus {
  outline: none;
  box-shadow: none; }

.modal.modal-black-bg {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  background: #000; }

.modal__intro__title {
  font-size: 32px;
  margin-top: 0; }

.modal__intro > :not(.modal__intro__title) {
  font-size: 0.825em; }

.modal__content {
  display: table;
  width: 95%;
  margin-left: 2.5%;
  height: 100vh;
  text-align: center; }

.modal__content ul {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  font-size: 1.75rem;
  font-family: 'Martel'; }
  .modal__content ul li {
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
    line-height: 1.0; }
  .modal__content ul li.context {
    margin-bottom: 1rem; }
  .modal__content ul li.small {
    font-size: 50%; }
  .modal__content ul li.context p {
    color: #fff;
    font-size: 1rem;
    font-family: 'Lato', sans-serif; }
  .modal__content ul i.context:after {
    border-bottom: transparent; }
  .modal__content ul li:last-of-type:after {
    content: "";
    position: absolute;
    left: 45%;
    bottom: 0;
    height: 1px;
    width: 10%;
    /* or 100px */
    border-bottom: 1px solid transparent; }
  .modal__content ul li a,
  .modal__content ul li a:visited {
    color: #fff;
    display: block;
    width: 100%;
    text-decoration: none;
    padding: 2.5%;
    -webkit-transition: all 0.25s linear; }
    .modal__content ul li a span,
    .modal__content ul li a:visited span {
      display: none; }
  .modal__content ul li a:hover {
    color: rgba(122, 22, 41, 0.95);
    background-color: #FFF; }

.modal__outro {
  margin-top: 20px; }

button.modal__outro__close {
  background: transparent;
  display: block;
  height: 32px;
  position: absolute;
  right: 24px;
  text-decoration: none;
  top: 24px;
  width: 32px;
  padding: 0;
  margin-top: 0; }

button.modal__outro__close svg {
  bottom: 0;
  fill: #fff;
  height: 100%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%; }

button.modal__outro__close:hover, button.modal__outro__close:focus {
  background-color: transparent; }

button.modal__outro__close:hover svg, button.modal__outro__close:focus svg {
  fill: #77DBFF;
  background-color: transparent; }

.js .modal {
  margin: auto;
  transform: scale(0.8) translateY(-30px); }

.no-js .no-js-hide,
.no-js button[data-action='modal-open'],
.no-js .modal__outro__close {
  display: none; }

.no-js .no-js-hide:target {
  display: block; }

.facebook-link,
.instagram-link {
  display: inline-block;
  margin-bottom: 1rem; }
  .facebook-link:hover,
  .instagram-link:hover {
    background: transparent; }

.facebook-link:before {
  content: "\ea91";
  color: #FFF;
  font-family: 'icomoon' !important;
  font-size: 1.75rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: relative;
  z-index: 99;
  top: 1rem;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.instagram-link:before {
  content: "\ea92";
  color: #FFF;
  font-family: 'icomoon' !important;
  font-size: 1.75rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: relative;
  z-index: 99;
  margin-left: 0.75rem;
  top: 1rem;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.facebook-link:hover:before,
.instagram-link:hover:before {
  color: rgba(255, 255, 255, 0.75); }

.modal__content .container.modal-documentary {
  height: 100vh; }

.modal__content .container.modal-with-intro {
  height: 90vh;
  text-align: center; }
  .modal__content .container.modal-with-intro ul li {
    text-align: center; }
  .modal__content .container.modal-with-intro p {
    color: #FFF;
    margin-top: 0;
    font-family: "Lato", "Bitter", sans-serif;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem; }
    .modal__content .container.modal-with-intro p a {
      display: inline; }

.modal .third {
  display: none; }

@media (min-width: 56.25rem) {
  .modal__content a.facebook-link:before,
  .modal__content a.instagram-link:before {
    font-size: 2.25rem; }

  .modal__content ul {
    font-size: 1.75rem; }

  .modal .third {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

  .social-links {
    margin-left: 2.5%; }

  .modal__content ul li a span,
  .modal__content ul li a:visited span {
    font-size: 60%;
    font-family: "Lato", "Bitter", sans-serif;
    text-transform: uppercase;
    color: #a9acaf;
    display: inline-block;
    margin-left: 0.5em; }

  .modal__content .container.modal-with-intro {
    text-align: left; }
    .modal__content .container.modal-with-intro .two-thirds {
      border-left: 1px solid #FFF; }
    .modal__content .container.modal-with-intro ul li {
      text-align: left; } }
@media (min-width: 87.5rem) {
  .modal__content ul {
    font-size: 2.25rem; } }
.modal__content .container.modal-with-intro p.modal-header {
  text-transform: uppercase;
  font-weight: bolder;
  margin-bottom: 0;
  border-top: 0.5rem solid rgba(189, 35, 64, 0.25);
  padding-top: 0.5rem;
  margin-top: 1rem; }

/* ----------------------------------------------------------

AUDIO

---------------------------------------------------------- */
.jwplayer {
  margin-top: 1rem !important; }

audio {
  width: 100%;
  margin-top: 1em; }

/* ----------------------------------------------------------

ARTICLE FORMATTTING

---------------------------------------------------------- */
.header-image {
  overflow: hidden;
  justify-content: center;
  /* allows image to crop center when combined with below media query */
  width: 100%; }

/* when page is 3/4 or narrower */
/* 
@media screen and  (max-aspect-ratio:1/1) { 
	.header-image img {
	height: 100%;
	width: auto;
}
	}

*/
article ul,
article ol {
  font-family: "Lato", "Bitter", sans-serif;
  font-size: 0.8rem;
  font-weight: lighter;
  padding: 0 1.5rem; }
  article ul li,
  article ol li {
    margin: 1.5rem 0;
    border-bottom: 1px solid rgba(127, 212, 239, 0.5);
    padding-bottom: 1.5rem;
    line-height: 1.6; }
  article ul li:last-of-type,
  article ol li:last-of-type {
    border-bottom: none; }
article ul#contributor-filter {
  padding: 0; }
article ul {
  list-style-type: disc; }
article ul.list-inline li {
  display: inline;
  border-bottom: none; }

.pbs:before {
  content: url(../images/pbs-icon.png);
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle; }

.pdf:before {
  content: "\eadf";
  font-family: 'icomoon';
  color: #BD2340;
  margin-right: 0.5rem; }

.link:before,
.more-info:before {
  content: "\ea3b";
  font-family: 'icomoon';
  color: #2F437C;
  margin-right: 0.5rem; }

@media (min-width: 37.5rem) {
  article ul,
  article ol {
    font-size: 1rem; } }
article h1 {
  font-size: 1.75rem;
  font-weight: lighter;
  color: #192445;
  margin-top: 3.3333rem;
  margin-bottom: 0;
  line-height: 1.2; }

@media (min-width: 37.5rem) {
  article h1 {
    font-size: 2.25rem; } }
p.page-subhead {
  margin-top: 1.75rem;
  font-weight: 400;
  font-size: 1.25rem;
  color: #2F437C;
  position: relative;
  line-height: 1.0;
  font-family: "Martel", serif;
  text-align: center;
  margin-bottom: 2rem; }

p.page-subhead:before {
  content: "";
  position: absolute;
  left: 45%;
  top: -1rem;
  display: block;
  width: 10%;
  /* or 100px */
  border-bottom: 3px solid #D2F0F9; }

/* ----------------------------------------------------------

FIGURE

---------------------------------------------------------- */
figure.top-offset {
  margin-top: 1.25rem; }

figure.third {
  display: block; }

.img-right,
.img-right-half,
.img-right.third,
.img-left,
.img-left-half,
.img-left.third {
  float: none;
  width: 100%;
  position: relative; }

@media (min-width: 37.5rem) {
  .img-right,
  .img-right-half,
  .img-right.third {
    float: right;
    width: 50%;
    position: relative;
    margin-left: 1.5rem; }

  .img-left,
  .img-left-half,
  .img-left.third {
    float: left;
    width: 50%;
    position: relative;
    margin-right: 1.5rem; } }
@media (min-width: 56.25rem) {
  .img-right.third,
  .img-left.third {
    width: 33.3333%; } }
figcaption {
  display: block;
  background-color: rgba(210, 240, 249, 0.5);
  padding: 1.5rem;
  font-size: 0.7rem;
  color: #0A1319;
  font-family: "Martel", serif;
  margin-bottom: 1.5rem; }

.news-index .img-right,
.news-index .img-right-half,
.news-index .img-right-third,
.news-index .img-left,
.news-index .img-left-half,
.news-index .img-left.third {
  width: 25%; }

/* ----------------------------------------------------------

SECTION NAVIGATION

---------------------------------------------------------- */
article.max-width.bio-block {
  margin-bottom: 5rem; }

article.no-header-image + aside {
  top: 0; }

.highlight-box {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center; }
  .highlight-box h2 {
    border-top: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1.5rem;
    background-color: #192445;
    color: #FFF;
    font-weight: lighter;
    display: inline-block;
    padding: 0.5rem 1rem; }
  .highlight-box img {
    position: absolute;
    z-index: 0; }
  .highlight-box .half, .highlight-box.third {
    background-color: #7dc2e8;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF7DC2E8', endColorstr='#FFAADD74');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYzJlOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhZGQ3NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #7dc2e8), color-stop(100%, #aadd74));
    background-image: -moz-linear-gradient(left top, #7dc2e8 0%, #aadd74 100%);
    background-image: -webkit-linear-gradient(left top, #7dc2e8 0%, #aadd74 100%);
    background-image: linear-gradient(to right bottom, #7dc2e8 0%, #aadd74 100%); }
    .highlight-box .half p, .highlight-box.third p {
      font-size: 1rem; }

.highlight-box.third {
  padding: 1.5rem; }
  .highlight-box.third p {
    font-size: 0.8rem; }
  .highlight-box.third a {
    background-color: rgba(255, 255, 255, 0.5); }

@media (min-width: 37.5rem) {
  .highlight-box.third {
    float: right;
    position: relative;
    width: 33.3333%;
    margin-left: 1.5rem; } }
/* ----------------------------------------------------------

SECTION NAVIGATION

---------------------------------------------------------- */
.category-navigation {
  margin-bottom: 3rem;
  position: relative;
  /* necessary b/c content block is offset */ }

ul#nav-sub,
ul#nav_categories {
  list-style-type: none;
  /*	@include column-count(1);
  	@include column-gap(2); */
  font-size: 1rem;
  margin-top: 1rem;
  /* padding-top: 1.25rem;
  border-top: 1px solid rgba($color-white,0.75); */ }
  ul#nav-sub li,
  ul#nav_categories li {
    /*	@include break-inside(avoid); */
    display: block;
    /* margin: 0 1rem 1.25rem 1rem; */
    position: relative; }
  ul#nav-sub li a,
  ul#nav_categories li a {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1rem 1rem 1rem 1.5rem;
    padding-left: 2.5rem;
    width: 100%;
    display: block;
    margin-bottom: 0.5rem; }
  ul#nav-sub li a:hover,
  ul#nav_categories li a:hover {
    background-color: #2F437C;
    color: #FFF; }
  ul#nav-sub li.active a,
  ul#nav_categories li.active a {
    outline: none;
    box-shadow: none;
    background-color: rgba(47, 67, 124, 0.75);
    color: #FFF; }
  ul#nav-sub li.active:before,
  ul#nav_categories li.active:before {
    content: "\ea3c";
    font-family: 'icomoon';
    margin-right: 0.25em;
    display: block;
    position: absolute;
    left: .75rem;
    top: 1.125rem;
    color: #c8e176; }

.accordion ul#nav-sub {
  /* overrides for student directory */
  margin-top: 0; }
  .accordion ul#nav-sub li a {
    padding: 0;
    padding-left: 0; }
  .accordion ul#nav-sub li a:hover {
    background-color: transparent;
    color: #131b32; }

.split-screen .category-navigation {
  /* landing block nav */
  margin-bottom: 0; }
  .split-screen .category-navigation ul a {
    padding-left: 1rem; }

	/*
@media (min-width: $breakpoint-medium) {

	.category-navigation ul {
		@include column-count(2);
		}
	}

@media (min-width: $breakpoint-large) {

	.category-navigation ul {
		@include column-count(3);
		}
	}
*/
article.no-header-image .category-navigation {
  top: 0; }

article {
  background-color: #FFF;
  position: relative; }

article.no-header-image {
  top: 0;
  margin-top: 0; }

@media (min-width: 1160px) {
  article.no-header-image {
    top: 0;
    margin-top: 3rem; } }
.preview-blocks .set-img-bg {
  overflow: hidden;
  background-color: #0A1319; }
.preview-blocks img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }
.preview-blocks a:hover img {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1); }

/* ----------------------------------------------------------

FLEX LAYOUT

---------------------------------------------------------- */
ul.list-inline.social-icons {
  display: block;
  margin-top: 1rem;
  padding-left: 0; }
  ul.list-inline.social-icons [class^="icon-"], ul.list-inline.social-icons [class*=" icon-"] {
    font-size: 1.75rem;
    margin: 0 1rem 0 0; }
    ul.list-inline.social-icons [class^="icon-"] li, ul.list-inline.social-icons [class*=" icon-"] li {
      margin-top: 1.5rem; }

/* ----------------------------------------------------------

CARDS

---------------------------------------------------------- */
.card {
  display: block;
  box-shadow: 0.75vmin 0.75vmin #f4d94f; }

.card-content {
  background-color: #CFDDE5;
  padding: 1rem;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }
  .card-content p {
    line-height: 1.2;
    font-size: 1rem;
    margin: 0; }

.card-image {
  position: relative;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.card-image-inset {
  position: relative;
  padding-bottom: 52.0833%;
  background-color: #0A1319; }
  .card-image-inset img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 75%;
    max-height: 75%;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }

.card:hover {
  box-shadow: 0.75vmin 0.75vmin #B1D43B; }
  .card:hover .card-content {
    background-color: #FFF; }
  .card:hover .card-image,
  .card:hover .card-image-inset img {
    -webkit-filter: none;
    -webkit-filter: sepia(0.25);
    filter: sepia(0.25); }

.card-date {
  position: absolute;
  bottom: 2.5%;
  z-index: 99;
  margin-left: 1.25%; }
  .card-date p {
    color: #FFF;
    background: #f4d94f;
    padding: 0.25rem 0.5rem;
    font-family: "Martel", serif;
    font-size: 0.8rem;
    position: relative;
    display: block; }

/* ----------------------------------------------------------

EVENT - COMPACT

---------------------------------------------------------- */
.event.compact {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .event.compact .event-divider {
    align-items: center;
    flex-direction: column; }
    .event.compact .event-divider p {
      font-style: italic;
      color: #f4d94f;
      margin-left: 0.375rem;
      margin-right: 0.375rem; }
  .event.compact .event-date {
    text-align: center; }
    .event.compact .event-date p {
      line-height: 1;
      font-size: 0.7rem; }
  .event.compact p span.event-month {
    font-family: "Martel", serif;
    text-transform: uppercase;
    display: block;
    font-weight: bolder; }
  .event.compact p span.event-day {
    font-size: 1.5rem; }
  .event.compact p span.event-month,
  .event.compact p span.event-day {
    color: #f4d94f; }
  .event.compact .event-content {
    margin-left: 1rem; }

/* ----------------------------------------------------------

CALL TO ACTION

---------------------------------------------------------- */
a.call-to-action {
  display: block;
  padding: 1.5rem 1rem;
  text-align: center;
  border-top: 0.5rem solid rgba(255, 255, 255, 0.5);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-top: 1rem;
  text-transform: uppercase;
  color: #FFF;
  font-size: 0.8rem; }
  a.call-to-action span {
    font-size: 1rem;
    display: block; }
  a.call-to-action:link, a.call-to-action:visited {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(100%, rgba(255, 255, 255, 0.05)));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%); }
  a.call-to-action:hover {
    background-image: none;
    background: rgba(177, 212, 59, 0.75); }

@media (min-width: 37.5rem) {
  a.call-to-action {
    font-size: 1rem; }
    a.call-to-action span {
      font-size: 1.25rem;
      display: inline; } }
/* ----------------------------------------------------------

FLEX LAYOUT

---------------------------------------------------------- */
.mobile-reorder {
  order: -1; }

@media (min-width: 37.5rem) {
  .mobile-reorder {
    order: unset;
    /*reset */ } }
/* -----
BASIC GRID CONTAINER 
-----  */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
    /*
	    width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  justify-content: space-between;
  */ }

.container.full-width {
  width: 100%; }

.container.max-width,
.container .column.max-width {
  max-width: 1440px;
  margin: 0 auto; }

.container.max-width-article {
  max-width: 1080px;
  margin: 0 auto; }

.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex: 0 0 100%;
  max-width: 100%;
  /* IE 10*/
  flex-direction: column;
  position: relative; }

@media (min-width: 56.25rem) {
  .fit-columns .column {
    flex: none; } }
.no-flex {
  display: block; }

.flex-centered {
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center; }

.flex-vertical-center {
  -ms-flex-align: center;
  /* IE 10 */
  -webkit-align-items: center;
  align-items: center;
  flex-direction: row;
  max-width: 100%;
  /* ? IE 10 */ }

.flex-vertical-top {
  -ms-flex-align: flex-start;
  /* IE 10 */
  -webkit-align-items: flex-start;
  align-items: flex-start;
  flex-direction: row; }

.flex-vertical-bottom {
  -ms-flex-align: flex-end;
  /* IE 10 */
  -webkit-align-items: flex-end;
  align-items: flex-end;
  flex-direction: row; }

.container .column.center {
  align-self: center; }

.padding-tb {
  padding-top: 2.5%;
  padding-bottom: 2.5%; }
  .padding-tb.padding-half {
    padding-top: 1.25%;
    padding-bottom: 1.25%; }

.padding-lr {
  padding-left: 2.5%;
  padding-right: 2.5%; }
  .padding-lr.padding-half {
    padding-left: 1.25%;
    padding-right: 1.25%; }

.margin-tb {
  margin-top: 1.25%;
  margin-bottom: 1.25%; }
  .margin-tb.margin-half {
    margin-top: 0.625%;
    margin-bottom: 0.625%; }

.margin-lr {
  margin-left: 1.25%;
  margin-right: 1.25%; }
  .margin-lr.margin-half {
    margin-left: 0.625%;
    margin-right: 0.625%; }

.container.columns-margined {
  /* 	justify-content: space-between; argh - this just causes layout issues - punting and trying explicit margins instead */ }

/* this will work universally, but not great for full width image + content 
.column.column-padding {
	padding: $padding;
	}
	*/
.column.column-padding {
  /* h1, h2, h3, h4, h5, h6, h7, h8, p,
  ul, ol {
  	margin-left: $padding*3;
  	margin-right: $padding*3;
  } */
  padding: 5%; }

.block-image {
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  position: relative; }

.block-image-positioner {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: block;
  /* no flex on single column */ }

/*
	
@media (min-width: $breakpoint-small) {
	.border-right:nth-of-type(odd) {
	border-right: 1px solid rgba($color-white,0.25);
	}	
	}

@media (min-width: $breakpoint-medium) {
	.border-right {
	border-right: 1px solid rgba($color-white,0.25);
	}	
	}

*/
/* use 100 minus the number of columns x 2 x margin% divided by number of columns */
/* works for equal column widths */
/* only time these will get used is with one margin gap - so use 100 - (margined smaller col + margin) */
/* full margin calculation */
.container.columns-margined .column {
  flex: 0 0 97.5%;
  max-width: 97.5%;
  margin: 1.25%;
  /* background-color: #efefef; */ }

.container.columns-padded .column {
  padding: 2.5%; }

.container.align-flex-start {
  /* unequal height columns */
  align-items: flex-start; }

@media (min-width: 37.5rem) {
  .container .column.sixth {
    flex: 0 0 33.3333%;
    max-width: 33.3333%; }
  .container.columns-margined .column.sixth {
    flex: 0 0 30.83333%;
    max-width: 30.83333%; }
  .container .column.fifth,
  .container .column.quarter,
  .container .column.half,
  .container .column.eighty {
    flex: 0 0 50%;
    max-width: 50%; }
  .container .column.half.break-the-grid {
    flex: 0 0 100%;
    max-width: 100%; }
  .container.columns-margined .column.fifth, .container.columns-margined .column.quarter, .container.columns-margined .column.half, .container.columns-margined .column.eighty {
    flex: 0 0 47.5%;
    max-width: 47.5%; }

  .cbp-hrsub .container.columns-margined .column.quarter {
    flex: 0 0 47.5%;
    max-width: 47.5%; } }
@media (min-width: 56.25rem) {
  .container {
    /* need max-width for IE to properly handle width */
    /* only time this will get used is with one margin gap - so use 100 - (margined quarter + margin) */
    /* only time this will get used is with one margin gap - so use 100 - (margined fifth + margin) */ }
    .container .column.sixth {
      flex: 0 0 25%;
      max-width: 25%; }
    .container.columns-margined .column.sixth {
      flex: 0 0 22.5%;
      max-width: 22.5%; }
    .container .column.fifth {
      flex: 0 0 20%;
      max-width: 20%; }
    .container.columns-margined .column.fifth {
      flex: 0 0 17.5%;
      max-width: 17.5%; }
    .container .column.quarter {
      flex: 0 0 25%;
      max-width: 25%; }
    .container.columns-margined .column.quarter {
      flex: 0 0 22.5%;
      max-width: 22.5%; }
    .container .column.third,
    .container .column.half,
    .container .column.two-thirds {
      flex: 0 0 50%;
      max-width: 50%; }
    .container.columns-margined .column.third, .container.columns-margined .column.half, .container.columns-margined .column.two-thirds {
      flex: 0 0 47.5%;
      max-width: 47.5%; }
    .container .column.three-quarters {
      flex: 0 0 75%;
      max-width: 75%; }
    .container.columns-margined .column.three-quarters {
      flex: 0 0 72.5%;
      max-width: 72.5%; }
    .container .column.eighty {
      flex: 0 0 80%;
      max-width: 80%; }
    .container.columns-margined .column.eighty {
      flex: 0 0 77.5%;
      max-width: 77.5%; }

  .reverse {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse; }

  .block-image-positioner {
    display: flex;
    /* box flexes but image inside does not */
    position: absolute; }

  .block-image img {
    /* use standard responsive img until 2 column layout */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%; }

  .cbp-hrsub .container.columns-margined .column.quarter {
    flex: 0 0 22.5%;
    max-width: 22.5%; } }
@media (min-width: 75rem) {
  .container {
    /* only time this will get used is with one margin gap - so use 100 - (margined third + margin) */ }
    .container .column.sixth {
      flex: 0 0 16.6667%;
      max-width: 16.6667%; }
    .container.columns-margined .column.sixth {
      flex: 0 0 14.16667%;
      max-width: 14.16667%; }
    .container .column.third {
      flex: 0 0 33.3333%;
      max-width: 33.3333%; }
    .container.columns-margined .column.third {
      flex: 0 0 30.83333%;
      max-width: 30.83333%; }
    .container .column.two-thirds {
      flex: 0 0 66.6667%;
      max-width: 66.6667%; }
    .container.columns-margined .column.two-thirds {
      flex: 0 0 64.16667%;
      max-width: 64.16667%; }
    .container .column.half.break-the-grid {
      flex: 0 0 50%;
      max-width: 50%; } }
/* ----------------------------------------------------------

CENTER TABLES

---------------------------------------------------------- */
.center-center {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; }

.hero.center-center {
  display: block;
  /* changed to fix FF bug - not sure if this will break something else? */ }

.center-center-cell {
  display: table-cell;
  position: relative;
  width: 100%;
  vertical-align: middle;
  text-align: center; }

/*------------------------------------------------

BUTTON

---------------------------------------------------------- */
button,
a.btn,
.theme-dark a.btn,
.btn {
  background: #efc903;
  color: #0A1319;
  text-align: center;
  line-height: 1.3;
  font-weight: 400;
  font-family: "Lato", "Bitter", sans-serif;
  border: none;
  margin-top: 1em;
  font-size: 1rem;
  display: inline-block;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  padding: 1em 2em;
  margin-left: 0.25rem;
  margin-right: 0.25rem; }
  button:hover,
  a.btn:hover,
  .theme-dark a.btn:hover,
  .btn:hover {
    background: #f4d94f;
    cursor: pointer;
    color: #0A1319; }

header button.btn {
  padding: 0; }

.no-flex .btn {
  margin-top: 0.5rem; }

@media (min-width: 37.5rem) {
  button,
  a.btn,
  .theme-dark a.btn,
  .btn {
    font-size: 1.25rem; } }
button.big-btn,
a.btn.big-btn,
.theme-dark a.btn.big-btn,
.btn.big-btn {
  margin-top: 2rem;
  padding: 2rem 4rem;
  font-size: 1.25rem; }

.btn.alt-btn,
a.btn.alt-btn,
.theme-dark a.btn.alt-btn {
  color: #FFF;
  background: #BD2340; }

.btn.alt-btn:hover,
a.btn.alt-btn:hover {
  background: #192445; }

.btn.small,
a.btn.small {
  font-size: 1rem;
  font-family: "Martel", serif;
  margin-top: 0; }

.toggle {
  /* Toggle is button w/ out background! */
  font-size: 0.7rem;
  border-bottom: 1px solid #3DCBFF;
  box-shadow: inset 0 -1px 0 #3DCBFF; }

@media (min-width: 37.5rem) {
  .toggle {
    font-size: 0.5rem; } }
.toggle:before {
  content: '+';
  margin-right: 0.125em; }

.toggle.toggle-opened:before {
  content: 'x';
  margin-right: 0.25em;
  position: relative;
  top: -0.05em;
  font-size: 75%; }

div.toggled-group {
  display: none;
  text-align: left; }
  div.toggled-group p {
    font-size: 0.8rem;
    margin-bottom: 1em; }

div.toggled-group.credits-text {
  background-color: #FFF;
  padding: 0.5em 0.5em 0 0.5em;
  position: absolute !important;
  bottom: 1.5em;
  right: 1em;
  z-index: 99999; }
  div.toggled-group.credits-text p {
    font-size: 0.5rem;
    color: #0A1319; }

.half div.toggled-group p {
  font-size: 0.7rem; }

.transcript-text {
  padding: 1em 0 0 0; }

.media-transcript + p,
.transcript-text + p {
  margin-top: 2em; }

/* ----------------------------------------------------------

FOOTER

---------------------------------------------------------- */
.divider {
  padding-bottom: 2rem; }
  .divider:after {
    content: '';
    display: block;
    width: 100%;
    height: 7px;
    background: #D2F0F9;
    margin-top: -33px; }

footer,
.project-components {
  /* background-color: $color-black; */
  padding: 0 0 2.5rem 0; }
  footer [class^="icon-"], footer [class*=" icon-"],
  .project-components [class^="icon-"],
  .project-components [class*=" icon-"] {
    font-size: 1.5rem;
    margin-right: 0.5rem; }
  footer h2,
  .project-components h2 {
    color: #7FD4EF;
    font-family: "Lato", "Bitter", sans-serif;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: lighter; }
  footer a.event-preview,
  .project-components a.event-preview {
    position: relative;
    display: block;
    flex-shrink: 0;
    /* IE 11 */ }
    footer a.event-preview img,
    .project-components a.event-preview img {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -moz-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out; }
    footer a.event-preview:hover p,
    .project-components a.event-preview:hover p {
      color: #7FD4EF;
      background: rgba(10, 19, 25, 0.5); }
    footer a.event-preview:hover img,
    .project-components a.event-preview:hover img {
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      transform: scale(1.05); }
  footer .genre-category,
  .project-components .genre-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.625rem 1rem 0.5rem 1rem;
    background-color: rgba(230, 230, 217, 0.9);
    color: #192445;
    z-index: 999;
    line-height: 1.0;
    font-size: 1.25rem; }
  footer footer .genre-category,
  .project-components footer .genre-category {
    font-size: 1rem; }
  footer p,
  .project-components p {
    padding: 1em;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.4;
    font-family: "Martel", serif;
    font-size: 1rem;
    color: #E6E6D9;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    background: rgba(10, 19, 25, 0.25); }
    footer p span,
    .project-components p span {
      color: #7FD4EF;
      font-family: "Lato", "Bitter", sans-serif;
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight: 400;
      display: block;
      margin-bottom: 0.25em;
      line-height: 1.2; }
    footer p span.learn-more,
    .project-components p span.learn-more {
      font-size: 1rem;
      color: #E6E6D9; }
  footer p.copyright,
  .project-components p.copyright {
    font-size: 1rem;
    background: transparent; }
    footer p.copyright a,
    .project-components p.copyright a {
      color: #E6E6D9;
      border-bottom: none;
      box-shadow: none; }
  footer ul,
  .project-components ul {
    font-size: 0.7rem;
    margin: 0;
    list-style-type: none;
    font-family: "Martel", serif; }
    footer ul li,
    .project-components ul li {
      color: #0A1319;
      margin: 0.25rem 0; }
  footer ul.legal li,
  .project-components ul.legal li {
    margin: 0 0.5rem; }

footer {
  background: url(../images/bg-moving-wall-dark.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  padding-top: 1rem;
  border-top: 1em solid rgba(61, 203, 255, 0.125); }
  footer p span {
    font-size: 1.25rem; }

@media (min-width: 37.5rem) {
  .genre-category {
    font-size: 0.8rem; }

  footer .genre-category {
    font-size: 0.8rem; }

  footer ul {
    font-size: 0.8rem; } }
.home footer h2,
footer h2 {
  color: #7FD4EF;
  font-family: "Martel", serif;
  font-style: italic;
  font-size: 2.25rem;
  text-transform: none;
  margin-top: 2.5rem;
  margin-bottom: 0;
  font-weight: lighter;
  display: inline-block; }

footer a.more-events:link,
footer a.more-events:visited {
  color: rgba(255, 255, 255, 0.75);
  display: inline-block;
  font-family: "Lato", "Bitter", sans-serif;
  text-transform: uppercase;
  margin-left: 1em; }
  footer a.more-events:link:hover,
  footer a.more-events:visited:hover {
    color: #FFF; }

/* ----------------------------------------------------------

FORMS

---------------------------------------------------------- */
form {
  width: 100%;
  font-face: "Martel", serif; }

form.flex-on-one-line {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

footer form {
  margin-top: 0.5rem; }

form div:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

input.txt:focus + .form-hint {
  display: block; }

fieldset {
  border: none; }

#freeform {
  counter-reset: label; }

#freeform label:before {
  content: counter(label) ". ";
  counter-increment: label; }

form .required {
  color: #BD2340; }

label {
  font-size: 1rem;
  display: block;
  color: #0A1319;
  margin-top: 1.75rem;
  margin-bottom: 0.375rem; }

label.header-label {
  display: none; }

label span {
  font-size: 0.8rem; }

article form ul li {
  list-style-type: none; }

/* alignment for radio buttons */
input[type=radio] {
  margin-left: 1rem;
  display: inline-block;
  vertical-align: middle; }

li label {
  display: inline;
  font-size: 1rem;
  font-style: italic;
  vertical-align: middle; }

li label:before {
  content: none;
  display: none; }

input, textarea {
  font-weight: normal;
  color: #0A1319; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
input.file {
  padding: 0.75rem;
  background-color: #C0F2FF;
  font-size: 0.8rem;
  border: none; }

input[type="search"] + button,
input[type="email"] + button {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-left: 0;
  margin-top: 0; }

input.file {
  display: block; }

select {
  color: #0A1319;
  margin: 0 0 1.25rem 0;
  border: 1px solid #a9acaf;
  float: left;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  padding: 0.25rem 0.25rem 0 0.75rem;
  background-color: #FFF;
  font-size: 1rem; }

#freeform select, .pages-section form select {
  float: none;
  display: block; }

select option {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem; }

select:hover {
  background-color: #D2F0F9; }

.header-label {
  font-size: 1.5rem;
  margin-top: 0.75rem; }

textarea:hover, textarea:focus,
input[type="text"]:hover, input[type="text"]:focus,
input[type="search"]:hover, input[type="search"]:focus,
input[type="email"]:hover, input[type="email"]:focus,
input[type="tel"]:hover, input[type="tel"]:focus
textarea:hover, textarea:focus,
input.file:hover, input.file:focus {
  background-color: #FFF;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.user-creation {
  float: left;
  font-size: 1.5rem;
  margin-left: 1.25rem;
  margin-top: 1.75rem; }

.form-current-photo {
  display: block;
  margin-left: 1.75rem; }

/* FORM ERROR MESSAGE */
label.error {
  display: block;
  color: red;
  font-style: italic;
  font-weight: normal; }

input.error {
  border: 2px solid red; }

/* FORM SUCCESS MESSAGE */
.form-success {
  background-color: #c8e176;
  font-size: 1.75rem;
  margin-top: 4rem;
  padding: 1.25rem;
  line-height: 1.4; }

.sm, a.sm {
  float: left;
  font-size: 1rem;
  padding: 0.25rem;
  background-color: #2F437C;
  border: none;
  text-decoration: none;
  color: #FFF;
  margin-left: 1.25rem;
  margin-top: 1rem; }

/* top search button */
input.btn {
  background-color: #C34123;
  color: #fff;
  text-decoration: none;
  text-align: center;
  -moz-transition: background-color 0.2s ease;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  padding: 5px 8px 3px 8px;
  font-size: 1.4em;
  border: 0;
  font-family: "Martel", serif;
  -webkit-appearance: none; }

/* top search button */
input.btn:hover {
  background-color: #2F437C;
  border: 0;
  cursor: pointer; }

textarea.txt textarea#note {
  padding: 0.25rem;
  margin: 0 0 0 1.25rem;
  border: 1px solid #a9acaf;
  border-top: 1px solid #474e53;
  background-color: #FFF;
  font-size: 1.25rem; }

input.txt {
  width: 50%; }

textarea.txt {
  width: 75%;
  height: 10rem; }

/* p.button paragraph buttons */
.button {
  width: 75%;
  text-align: center;
  margin: 1.5rem auto 0 auto;
  line-height: 1.2; }

.button.small-button {
  width: 75%;
  font-size: 1rem; }

@media (min-width: 37.5rem) {
  .button {
    width: 50%; }

  .button.small-button {
    width: 33.33%; } }
@media (min-width: 56.25rem) {
  .button {
    width: 33.33%; }

  .button.small-button {
    width: 25%; } }
.button a,
input.button {
  background: #f4d950;
  color: #0A1319;
  display: block;
  padding: 1rem 2rem;
  text-decoration: none;
  font-family: "Lato", "Bitter", sans-serif;
  font-size: 1.5rem;
  border: none;
  box-shadow: none;
  margin-top: 1.25rem;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.button a:hover, input.button:hover {
  background: #f4d94f; }

a.btn:focus,
button:focus,
input:focus,
textarea:focus,
radio {
  outline: 4px auto #3DCBFF;
  box-shadow: inset 0 0 2px 1px #3DCBFF; }

.hide,
.hide-mobile {
  display: none; }

.hide-desktop {
  display: inline-block; }

.flickr-list.btn {
  display: inline-block;
  margin-left: auto;
  margin-right: auto; }

.flickr-embed {
  display: none; }

.flickr-margin {
  margin: 2.5%; }

@media (min-width: 37.5rem) {
  .hide-mobile {
    display: block; }

  header .hide-mobile {
    display: none; }

  .hide-desktop {
    display: none; } }
@media (min-width: 47.5rem) {
  header .hide-mobile {
    display: block; }

  .flickr-list.btn {
    display: none; }

  .flickr-embed {
    display: block; } }
.positioner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15vh 7vw 3.5vw 7vw;
  z-index: 99;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: auto; }
  .positioner .project-title {
    mix-blend-mode: multiply; }
  .positioner p {
    color: #FFF; }

.ri-grid {
  margin: 0 auto;
  position: relative;
  height: auto;
  width: 100%;
  -moz-transform: rotate(-2deg) scale(1.07);
  transform: rotate(-2deg) scale(1.07);
  -webkit-transform: rotate(-2deg) scale(1.07);
  -ms-transform: rotate(0) scale(1);
  display: block;
  opacity: 0.4; }

.ri-grid ul {
  list-style: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0; }

/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.ri-grid ul:before,
.ri-grid ul:after {
  content: '';
  display: table; }

.ri-grid ul:after {
  clear: both; }

.ri-grid ul {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */ }

.ri-grid ul li {
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -o-perspective: 400px;
  -ms-perspective: 400px;
  perspective: 400px;
  margin: 0;
  padding: 0;
  float: left;
  position: relative;
  display: block;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden; }

.ri-grid ul li a {
  display: block;
  outline: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #333;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

.ri-grid-loading:after,
.ri-grid-loading:before {
  display: none; }

.ri-loading-image {
  display: none; }

.ri-grid-loading .ri-loading-image {
  position: relative;
  width: 30px;
  height: 30px;
  left: 50%;
  margin: 100px 0 0 -15px;
  display: block;
  display: none;
  /* hiding for now */ }

.home section.main {
  display: block;
  width: 100%;
  height: 85vh;
  overflow: hidden;
  position: relative; }

.junk h1 {
  font-family: 'Lato';
  font-weight: 900;
  text-transform: uppercase;
  font-size: 24vmin;
  line-height: 0.8;
  color: #192445;
  color: #BD2340;
  /* screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity */
  z-index: 99;
  text-shadow: 0.5vmin 0.5vmin 0 rgba(255, 255, 255, 0.75);
  -moz-transform: rotate(-2deg) scale(1.07);
  transform: rotate(-2deg) scale(1.07);
  -webkit-transform: rotate(-2deg) scale(1.07); }
.junk h1 span {
  color: #BD2340;
  color: #192445;
  font-size: 7.5vmin;
  display: block;
  margin-top: 2rem;
  color: #fff;
  z-index: 99;
  text-shadow: none;
  text-stroke: none;
  -webkit-text-stroke: none;
  margin-left: 3vw; }
.junk h1 span.adjust {
  font-size: 24vmin;
  display: inline;
  color: #BD2340;
  text-shadow: 0.25vmin 0.25vmin 0 rgba(255, 255, 255, 0.75);
  margin-left: 0;
  letter-spacing: -2vmin; }
.junk h1 span.h1-sm {
  color: #BD2340;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.75);
  font-size: 6vmin;
  margin-left: 0; }

p.student-project {
  font-family: "Lato", "Bitter", sans-serif;
  line-height: 1.2;
  font-size: 1rem;
  font-weight: bolder; }

/* ----------------------------------------------------------

SUBMIT CONTENT BUG

---------------------------------------------------------- */
.submit-bug {
  position: absolute;
  top: 1rem;
  left: 5%;
  background-color: #efc903;
  z-index: 99;
  padding: 0.5rem;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  max-width: 90%; }
  .submit-bug:hover {
    background-color: #f4d94f; }
  .submit-bug a,
  .submit-bug p a {
    text-decoration: none; }
  .submit-bug p {
    font-size: 0.8rem;
    color: #0A1319;
    margin-bottom: 0rem; }
  .submit-bug p.submit-bug-header {
    font-family: "Lato", "Bitter", sans-serif;
    font-size: 1rem;
    font-weight: 400; }
  .submit-bug p.submit-bug-header:after {
    content: "\ea3c";
    color: #0A1319;
    font-family: 'icomoon' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    margin-left: 0.25em;
    position: relative;
    top: 0.1rem; }

@media (min-width: 37.5rem) {
  .submit-bug {
    max-width: 33.33%;
    top: 1rem;
    right: 1rem;
    padding: 1rem; } }
.animation-1 {
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: 1;
  -o-animation-delay: 2s;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: 1;
  animation-delay: 2s;
  animation-duration: 4s;
  animation-iteration-count: 1; }

.animation-2 {
  -webkit-animation-delay: 2.5s;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-delay: 2.5s;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: 1;
  -o-animation-delay: 2.5s;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: 1;
  animation-delay: 2.5s;
  animation-duration: 5s;
  animation-iteration-count: 1; }

.animation-3 {
  -webkit-animation-delay: 3.5s;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-delay: 3.5s;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: 1;
  -o-animation-delay: 3.5s;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: 1;
  animation-delay: 3.5s;
  animation-duration: 5s;
  animation-iteration-count: 1; }

.animation-4 {
  -webkit-animation-delay: 4s;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-delay: 4s;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: 1;
  -o-animation-delay: 4s;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: 1;
  animation-delay: 4s;
  animation-duration: 5s;
  animation-iteration-count: 1; }

.animation-4 p {
  font-family: "Lato", "Bitter", sans-serif;
  font-size: 1rem;
  margin-bottom: 0;
  margin-top: 1em;
  letter-spacing: 0.025em; }

#community {
  background-image: url(../images/bg-community-submissions.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center; }
  #community h2 {
    text-align: center;
    font-family: "Lato", "Bitter", sans-serif; }
  #community p {
    color: #E6E6D9;
    text-align: center; }
  #community p.section-tagline {
    padding: 0.75em;
    background-color: rgba(0, 0, 0, 0.25);
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 2rem; }

.img-fill {
  overflow: hidden;
  background-color: #0A1319;
  min-height: 12.5rem;
  /* needed for old iphone which does not respect img height */ }
  .img-fill img.grid-bg-image {
    width: 100%;
    height: auto;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: 0.4;
    align-self: flex-start;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  .img-fill .center-center-block {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; }
  .img-fill h2 {
    font-family: "Lato", "Bitter", sans-serif;
    font-size: 3.2rem;
    text-transform: uppercase;
    /* word-break: break-all; */
    word-wrap: break-word;
    color: #FFF;
    line-height: 0.85;
    font-weight: bolder;
    mix-blend-mode: hard-light;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75;
    width: 100%;
    letter-spacing: -0.025em;
    text-align: center;
    border-top: none;
    padding: 0;
    margin: 0; }
    .img-fill h2 span {
      opacity: 0;
      -webkit-transform: translate3d(-20px, -20px, 0);
      transform: translate3d(-20px, -20px, 0);
      -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
      transition: transform 0.5s, opacity 0.5s;
      text-transform: none;
      font-size: 40%;
      font-family: "Martel", serif;
      display: block;
      position: relative;
      top: 1rem;
      text-align: right;
      margin-right: 2rem;
      font-weight: lighter;
      letter-spacing: 0;
      line-height: 1.2; }

a.img-fill:hover img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: sscale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05); }
a.img-fill:hover h2 {
  padding: 2rem 0.5rem;
  background-color: rgba(47, 67, 124, 0.75); }
  a.img-fill:hover h2.submit-header {
    background-color: rgba(189, 35, 64, 0.75); }
  a.img-fill:hover h2 span {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

/* GridTab v2.1.1*/
.gridtab,
.gridtab > dt,
.gridtab > dd {
  margin: 0;
  padding: 0;
  position: relative;
  border: 0 solid; }

.gridtab {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-bottom: 3rem; }

.gridtab * {
  box-sizing: border-box; }

.gridtab > dd {
  z-index: 1;
  display: none;
  min-width: 100%;
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%; }

.gridtab h3 {
  text-align: center;
  font-size: 3.2rem;
  color: #a9acaf;
  font-family: "Lato", "Bitter", sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  border-bottom: 3px solid rgba(119, 219, 255, 0.5);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  line-height: 1;
  display: inline-block; }

.gridtab > dd div {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto; }

.gridtab > dd > .gridtab__controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.gridtab > dd > .gridtab__controls > .gridtab__close {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  margin-left: 1px; }

.gridtab > dd > .gridtab__controls > .gridtab__next {
  margin-left: 1px; }

.gridtab > dd > .gridtab__controls > .gridtab__close:before,
.gridtab > dd > .gridtab__controls > .gridtab__close:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg); }

.gridtab > dd > .gridtab__controls > .gridtab__close:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg); }

.gridtab > dd > .gridtab__controls > .gridtab__arrow,
.gridtab > dd > .gridtab__controls > .gridtab__close {
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #BD2340;
  text-indent: -999px;
  position: relative; }

.gridtab > dd > .gridtab__controls > .gridtab__arrow {
  background: #efc903; }

.gridtab > dd > .gridtab__controls > .gridtab__arrow:before,
.gridtab > dd > .gridtab__controls > .gridtab__arrow:after,
.gridtab > dd > .gridtab__controls > .gridtab__close:before,
.gridtab > dd > .gridtab__controls > .gridtab__close:after {
  position: absolute;
  width: 3px;
  height: 13px;
  content: '';
  display: block;
  background: #FFF; }

.gridtab > dd > .gridtab__controls > .gridtab__arrow:before,
.gridtab > dd > .gridtab__controls > .gridtab__arrow:after {
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: right;
  transform-origin: right;
  margin: -7px 0 0 -3px;
  height: 10px;
  background: #0A1319; }

.gridtab > dd > .gridtab__controls > .gridtab__arrow:after {
  margin-top: -4px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.gridtab > dd > .gridtab__controls > .gridtab__arrow.is-disabled {
  opacity: 0.25; }

.gridtab > dd > .gridtab__controls > .gridtab__next {
  -webkit-transform: scale(-1);
  transform: scale(-1);
  -webkit-transform-origin: center;
  transform-origin: center; }

.gridtab > dt {
  transition: background 1s;
  /* background: #f2f2f2 */ }

.gridtab > dt:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0; }

.gridtab > dt.is-disabled {
  pointer-events: none; }

.gridtab > dt > img {
  max-width: 100%;
  float: left;
  height: auto;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  filter: grayscale(0.6);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.gridtab > dt:hover {
  cursor: pointer; }

.gridtab > dt > img:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  filter: grayscale(0); }

.gridtab > dt:focus > img {
  box-shadow: inset 0 0 2px 1px #3DCBFF;
  border: 3px solid #3DCBFF;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  filter: grayscale(0); }

.gridtab > dt.is-active > img {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  filter: grayscale(0); }

.gridtab > dt.is-active {
  z-index: 2; }

.gridtab[dir="rtl"] > dd > .gridtab__controls {
  right: auto;
  left: 5px; }

.gridtab[dir="rtl"] > dd > .gridtab__controls > .gridtab__next {
  -webkit-transform: none;
  transform: none; }

.gridtab[dir="rtl"] > dd > .gridtab__controls > .gridtab__prev {
  -webkit-transform: scale(-1);
  transform: scale(-1); }

.gridtab[dir="rtl"] > dd > .gridtab__controls > .gridtab__close {
  margin-right: 1px;
  margin-left: 0; }

.accordion {
  width: 100%;
  min-width: 270px;
  margin: 0 auto;
  font-weight: normal; }

article .accordion ul {
  padding: 0; }

.accordion h2 {
  font-size: 1.25rem; }

@media (min-width: 37.5rem) {
  .accordion h2 {
    font-size: 1.5rem; } }
.accordion ul li, .content .accordion ul li {
  height: 60px;
  overflow: hidden;
  margin-bottom: 15px;
  border-bottom: none;
  padding-bottom: 0; }

.accordion ul li ul {
  /* lists inside accordion */
  font-family: "Lato", "Bitter", sans-serif;
  font-weight: 400;
  padding: 0; }
  .accordion ul li ul li {
    list-style-type: disc;
    height: auto;
    margin: 1.5rem 0;
    padding-left: 1.0rem;
    line-height: 1.4;
    position: relative; }
    .accordion ul li ul li a {
      background-color: rgba(255, 255, 255, 0.5);
      padding: 0.2rem 0.6rem;
      display: inline-block;
      position: relative;
      left: -0.6rem; }
    .accordion ul li ul li.android-app, .accordion ul li ul li.app {
      display: inline; }
      .accordion ul li ul li.android-app a, .accordion ul li ul li.app a {
        background-color: transparent; }
  @media (min-width: 37.5rem) {
    .accordion ul li ul .accordion ul li ul {
      /* lists inside accordion */
      padding: 0 1.5rem; } }
  .accordion ul li ul li.li-header:before {
    content: none; }

ul.app-links {
  margin-top: 1rem; }
  ul.app-links li:before {
    content: none; }
  ul.app-links img {
    height: 60px;
    width: auto; }

.accordion ul li ul li.li-header {
  padding-left: 0;
  font-size: 1.4em;
  text-indent: 0;
  margin-bottom: 0;
  text-transform: none;
  font-weight: normal; }

.accordion h2 {
  margin-top: 0;
  padding-top: 25px;
  font-weight: normal;
  line-height: 1.5;
  padding-left: 20px; }

@media (min-width: 37.5rem) {
  .accordion h2 {
    padding-left: 40px; } }
.accordion ul li:first-child {
  border-top: none; }

.accordion ul li > h2 {
  text-transform: none;
  display: block;
  position: relative;
  line-height: 1.2;
  outline: none;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  border-top: 3px solid rgba(25, 36, 69, 0.25); }

.accordion.media-lab-research ul li > h2 {
  line-height: 1.2; }

.accordion ul li ul li > h2 {
  line-height: 1.3; }

.accordion ul li ul li > h2 {
  text-shadow: none;
  line-height: 1.4;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
  display: inline;
  height: auto; }

.accordion ul li > h2 span {
  height: 0px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 0px; }

.accordion ul li > h2 a:before {
  content: "\ea0a";
  font-family: 'icomoon';
  color: #7BAA59;
  font-weight: bold;
  position: absolute;
  left: 0; }

.accordion ul li > a:hover {
  color: #1693eb; }

.accordion ul li.st-open > h2 {
  color: #1693eb;
  padding-bottom: 0; }

.accordion ul li ul h3 {
  text-indent: 0; }

.accordion ul li.st-open > h2 a:before {
  content: "\ea0f";
  font-family: 'icomoon';
  color: #C34123;
  font-weight: bold;
  position: absolute;
  left: 0; }

.st-content {
  padding: 0.25rem 0 2rem 0; }

.st-content h3 {
  font-size: 1.5rem;
  text-transform: none;
  margin-bottom: 0;
  margin-top: 1rem;
  padding: 0;
  background-color: transparent;
  font-weight: normal; }

/* -------------------------------------------------------------------------- *\
 * Necessary styling for the dialog to work
 * -------------------------------------------------------------------------- */
.dialog[aria-hidden="true"] {
  display: none; }

/* -------------------------------------------------------------------------- *\
 * Styling to make the dialog look like a dialog
 * -------------------------------------------------------------------------- */
.dialog {
  z-index: 999;
  background: rgba(122, 22, 41, 0.95);
  background: url(../images/concrete-bg-large-darkened-red.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow-y: auto; }

.dialog-content {
  display: table;
  width: 100%;
  height: 100vh;
  text-align: center;
  padding: 2em 5em; }

.dialog-content.dialog-vimeo {
  width: 100%; }

.dialog-content .modal-documentary {
  height: 90vh; }

.modal-with-intro {
  height: 100vh; }
  .modal-with-intro p {
    color: #FFF; }
  .modal-with-intro p.modal-header {
    text-transform: uppercase;
    font-weight: bolder;
    margin-bottom: 0;
    border-top: 0.5rem solid rgba(189, 35, 64, 0.25);
    padding-top: 0.5rem;
    margin-top: 1rem; }

.dialog-content ul {
  font-size: 1.25rem;
  font-family: 'Martel'; }
  .dialog-content ul li {
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
    line-height: 1.0; }
  .dialog-content ul li.context {
    margin-bottom: 1rem; }
  .dialog-content ul li a,
  .dialog-content ul li a:visited {
    color: #fff;
    display: block;
    width: 100%;
    text-decoration: none;
    padding: 3%;
    -webkit-transition: all 0.25s linear; }
    .dialog-content ul li a span,
    .dialog-content ul li a:visited span {
      display: none; }
  .dialog-content ul li a:hover {
    color: rgba(122, 22, 41, 0.95);
    background-color: #FFF; }

.dialog-content {
  text-align: center; }
  .dialog-content ul li {
    text-align: center; }
  .dialog-content p {
    color: #FFF;
    margin-top: 0;
    font-family: "Lato", "Bitter", sans-serif;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem; }
    .dialog-content p a {
      display: inline; }

.dialog-content .third {
  display: none; }

.dialog-content .container.modal-with-intro {
  height: 90vh;
  text-align: center; }
  .dialog-content .container.modal-with-intro ul li {
    text-align: center; }
  .dialog-content .container.modal-with-intro p {
    color: #FFF;
    margin-top: 0;
    font-family: "Lato", "Bitter", sans-serif;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem; }
    .dialog-content .container.modal-with-intro p a {
      display: inline; }

@media (min-width: 56.25rem) {
  .dialog-content a.facebook-link:before,
  .dialog-content a.instagram-link:before {
    font-size: 2.25rem; }

  .dialog-content ul {
    font-size: 1.75rem; }

  .dialog-content .third {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

  .social-links {
    margin-left: 2.5%; }

  .dialog-content ul li a span,
  .dialog-content ul li a:visited span {
    font-size: 60%;
    font-family: "Lato", "Bitter", sans-serif;
    text-transform: uppercase;
    color: #a9acaf;
    display: inline-block;
    margin-left: 0.5em; }

  .dialog-content .container.modal-with-intro {
    text-align: left; }
    .dialog-content .container.modal-with-intro .two-thirds {
      border-left: 1px solid #FFF; }
    .dialog-content .container.modal-with-intro ul li {
      text-align: left; } }
@media (min-width: 87.5rem) {
  .dialog-content ul {
    font-size: 2.25rem; } }
button.dialog-close {
  position: absolute;
  margin: 0;
  top: 0;
  right: 0;
  border: 0;
  padding: 0;
  background-color: transparent;
  font-size: 3.33em;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
  color: #FFF;
  line-height: 1;
  font-weight: lighter;
  z-index: 9999; }
  button.dialog-close:hover {
    color: #77dbff; }

@media (min-width: 56.25rem) {
  button.dialog-close {
    font-size: 5em;
    width: 1.2em;
    height: 1.2em; } }
#edu-nav {
  display: none;
  text-align: center;
  margin: 0 auto; }
  #edu-nav ul {
    display: inline-block;
    padding: 0.5rem;
    font-size: 1rem; }
    #edu-nav ul li {
      display: inline-block;
      margin: 1rem 0.75rem;
      font-family: "Lato", "Bitter", sans-serif; }

@media (min-width: 56.25rem) {
  #edu-nav {
    display: block; } }
#edu-nav ul li {
  display: inline-block; }

.affix#edu-nav {
  position: relative; }
  .affix#edu-nav ul {
    font-size: 1rem; }

@media (min-width: 56.25rem) {
  #edu-nav ul {
    font-size: 1.25rem; }

  .affix#edu-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 15px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 15px 5px;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 15px 5px;
    background-color: #BD2340; }
    .affix#edu-nav a {
      padding: 0.5rem;
      color: #FFF; }
    .affix#edu-nav a:hover {
      outline: 1px solid #FFF;
      color: #FFF; }
    .affix#edu-nav a:focus,
    .affix#edu-nav li.active a,
    .affix#edu-nav li.active a:focus,
    .affix#edu-nav nav li a:focus {
      outline: 1px solid #FFF;
      box-shadow: none; }
    .affix#edu-nav li.learn {
      display: none; } }
@media (min-width: 87.5rem) {
  .affix#edu-nav ul {
    font-size: 1.25rem; } }
.callout-box {
  border: 1rem solid rgba(127, 212, 239, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 1rem;
  margin-top: 1rem;
  width: 100%; }

@media (min-width: 37.5rem) {
  .callout-box {
    width: 90%;
    margin-left: 5%; } }
.educational-materials h3 {
  text-transform: none; }