/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*, *:before, *::after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/* Utilities
-------------------------------------------------- */
.cf::after {
  content: "";
  display: table;
  clear: both;
}
.hidden {
  display: none;
}

/* Site
-------------------------------------------------- */
html {
  font-family: 'protogrotesk-regular' !important; /* 1 */
  font-size: 30px !important;
	-webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* Webfont
-------------------------------------------------- */

@font-face {
font-family: 'protogrotesk-bold';
    src: url('../fonts/protogroteskweb-bold.eot');
    src: url('../fonts/protogroteskweb-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/protogroteskweb-bold.woff') format('woff');
}
@font-face {
font-family: 'protogrotesk-regular';
    src: url('../fonts/protogroteskweb-regular.eot');
    src: url('../fonts/protogroteskweb-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/protogroteskweb-regular.woff') format('woff');
}
/* Typography
-------------------------------------------------- */
h1{
  text-align: center;
  margin: 0;
  font-size: 7.9vw;
  letter-spacing: -.1rem;
}

h1:empty {
  margin: 0;
}

h1.name:hover {
  letter-spacing: -.1.3rem;
  margin: 0 0 0 -.6vw;
  text-align: left;
  width: 105%;
  cursor: pointer;
}

h1.name:hover span {
  display: none;
}

h1.name:hover a:before {
  content: 'ENDLESS SHOUT';
}

section[data-title='home'] h1:nth-child(3){
  letter-spacing: -.1rem;
  margin: 0 0 -.5vw -.6vw;
  text-align: left;
  width: 105%;
}

section article h1:nth-child(2) {
  text-transform: uppercase;
}

nav li h2:first-child {
  text-transform: uppercase;
}

nav li h2:nth-child(2) {
  line-height: 1.2;
}

h2{
  font-size: 1rem;
  text-align: center;
}

.events h3{
    font-size: .75rem;
    line-height: 1.2;
    text-align: center;
}

.events h3.event-item{
  text-align: left;
  float: left;
  font-size: .5rem;
  text-transform: uppercase;
  margin: .5rem .5rem 0 0;
}

.events h3.event-item a:hover {
  text-decoration: underline;
}

.events p{
    font-size: .5rem;
}



p {
  line-height: 1.2;
}

p:not(:first-of-type) {
  margin-top: 1rem;
}

section {
  background-color: rgb(220,220,220);
  color:rgb(0,0,0);
  z-index: 0;
  position:fixed;
  top:0;
  width:100%;
  height:100%;
}

section.active {
  z-index: 2;
  overflow: scroll;
}

section.active.no-scrolling {
  /*overflow: hidden;
  z-index: 5;
  pointer-events: none;*/
}

section.active.no-scrolling .content {
  pointer-events: auto !important;
  /*overflow: hidden;*/
  /*z-index: 5;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);*/
}

section.active.no-scrolling aside {
  /*position: absolute;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  top: calc(50% + 60px);
  height: 100vh;*/
}

section.next {
  z-index: 1;
}

section::-webkit-scrollbar {
  display: none;
}

section#mobile-nav {
  display: none;
}

.trigger_container {
  position:fixed;
  top:0;
  width:100%;
  height:100%;
  overflow:scroll;
}

.trigger{
  background-color: none;
  width:100%;
}

.trigger.up {
  position: absolute;
  bottom: 100vh;
  background-color: green;
}

footer p{
  font-size: .5rem;
}

figcaption {
  font-size: .5rem;
  line-height: 1.2;
  text-align: left;
}

figcaption p{
  padding: 0 !important;
}

.events ul li{
  padding: 10px 0 0;
}

.events .date{
  text-transform: uppercase;
}

p em, h3 em{
 font-family: 'protogrotesk-bold';
}

/* Links
-------------------------------------------------- */

a, a:visited {
  text-decoration: none;
  color: inherit;
}


/* Main
-------------------------------------------------- */

#topnav{
  z-index: 1001;
  position: fixed;
  opacity: 0;
  pointer-events: auto;
}

figure img{
  margin: 0 0 0.25rem 0;
  opacity: 0;
}

figure{
  margin: 0 0 0.75rem 0;
  text-align: center;
}

/* Chrome SVG fix */

svg {
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
}

.desc aside p{
  margin: 0 0 0.75rem 0;
}

.desc p:last-of-type, .events{
  padding-bottom: 1.5rem;
}

.desc:nth-of-type(2) figure {
  margin-top: 25px;
}

#topnav aside li a {
  pointer-events: auto;
  cursor: pointer;
}

aside{
  position:fixed;
  pointer-events: none;
  top:0;
  bottom:0;
  right:0;
  padding: 20px;
  overflow: hidden;
  /*margin-bottom: 30vh;*/
}

aside .ica {
  font-size: .5rem;
  position: absolute;
  bottom: 0;
}

aside .ica figure, aside .ica p {
  pointer-events: auto;
}

.event-cal-link {
  padding: .5rem 0 1rem 0;
  display: block;
}

.event-cal-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.lightbox {
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  top: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  display: table;
}

.lightbox figure {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  width: 100vw;
  text-align: center;
}

.lightbox figcaption {
  text-align: left;
  width: 75%;
  display: inline-block;
}

.lightbox figure img {
  opacity: 1;
  max-width: 75%;
  max-height: 85%;
  margin: 0;
}

.lightbox .close {
  position: absolute;
  top: .3rem;
  right: .3rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.lightbox .close::after {
  content: "\00D7";
}

iframe {
  margin-top: 1rem;
  margin-left: calc(50% - 320px);
}

/* Navigation / Footer (sidebar)
-------------------------------------------------- */

nav{
  position:absolute;
  left:0;
  right:40px;
  text-align: center;
}

nav ul li{
  margin: 0 0 0.5rem 0;
}

footer {
  left: 100vw;
  position: fixed;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 1002;
  height: 100%;
  font-size: .5rem;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  /*transition: width .15s ease-in-out, transform .15s ease-in-out;*/
  width: 40px;
  background-color: white;
}

footer ::selection {
  background: black;
  color: white;
}

footer ::-moz-selection {
  background: black;
  color: white;
}

footer .button.hinted {
  width: 50px !important;
}

footer .button {
  right: 0;
  top: 0;
  position: fixed;
  z-index: 1001;
  font-size: 1rem;
  line-height: 2;
  height: 100%;
  width: 40px;
  text-align: center;
  float: left;
  transition: left .15s ease-in-out, transform .15s ease-in-out, width .15s ease-in-out;
  -webkit-transition: left .15s ease-in-out, transform .15s ease-in-out, width .15s ease-in-out;
  -moz-transition: left .15s ease-in-out, transform .15s ease-in-out, width .15s ease-in-out;
  -ms-transition: left .15s ease-in-out, transform .15s ease-in-out, width .15s ease-in-out;
}

footer .button.open {
  font-size: 1.5rem;
  line-height: 2rem;
}

footer.opened {
  left: 67.6vw;
}

footer .credits {
  padding: 15px 90px 20px 0;
  width: 33vw;
  height: 100vh;
  background-color: white;
  margin-left: 40px;
  overflow: scroll;
  position: relative;
  z-index: 1000;
}

footer .credits.opened {
  margin-left: 20px;
}

footer .credits a:hover, .sponsor a:hover {
  text-decoration: underline;
}

footer .credits figure {
  text-align: left;
}

footer p:not(:first-of-type), .ica p:not(:first-of-type) {
  margin-top: .7rem;
}

footer figure {
  margin: 0;
}

footer img{
  max-height:120px;
}

.upper{
  text-transform: uppercase;
}

.fixed-bottom{
  overflow: hidden !important;
}

/*
 ██████  ██████  ██       ██████  ██████  ███████
██      ██    ██ ██      ██    ██ ██   ██ ██
██      ██    ██ ██      ██    ██ ██████  ███████
██      ██    ██ ██      ██    ██ ██   ██      ██
 ██████  ██████  ███████  ██████  ██   ██ ███████
*/

#projects section:nth-child(1){
  background-color: rgb(220,220,220);
  color: rgb(0,0,0);
}

#projects section:nth-child(1) .events ul li {
  border-bottom: 3px solid rgb(0,0,0);
}

#projects section:nth-child(1) ::selection {
  background: rgb(165,125,100);
  color: rgb(255,200,230);
}

#projects section:nth-child(1) ::-moz-selection{
  background: rgb(165,125,100);
  color: rgb(255,200,230);
}

#projects section:nth-child(2){
  background-color: rgb(165,125,100);
  color: rgb(255,200,230);
}

#projects section:nth-child(2) .events ul li {
  border-bottom: 3px solid rgb(255,200,230);
}

#projects section:nth-child(2) ::selection {
  background: rgb(86,49,112);
  color: rgb(255,243,119);
}

#projects section:nth-child(2) ::-moz-selection{
  background: rgb(86,49,112);
  color: rgb(255,243,119);
}

#projects section:nth-child(3){
  background-color: rgb(86,49,112);
  color: rgb(255,243,119);
}

#projects section:nth-child(3) .events ul li {
  border-bottom: 3px solid rgb(255,243,119);
}

#projects section:nth-child(3) ::selection {
  background: rgb(90,190,240);
  color: rgb(32,64,49);
}

#projects section:nth-child(3) ::-moz-selection{
  background: rgb(90,190,240);
  color: rgb(32,64,49);
}

#projects section:nth-child(4){
  background-color: rgb(90,190,240);
  color: rgb(32,64,49);
}

#projects section:nth-child(4) .events ul li {
  border-bottom: 3px solid rgb(32,64,49);
}

#projects section:nth-child(4) ::selection {
  background: rgb(255,255,255);
  color: rgb(0,169,87);
}

#projects section:nth-child(4) ::-moz-selection{
  background: rgb(255,255,255);
  color: rgb(0,169,87);
}

#projects section:nth-child(5){
  background-color: rgb(255,255,255);
  color: rgb(0,169,87);
}

#projects section:nth-child(5) .events ul li {
  border-bottom: 3px solid rgb(0,169,87);
}

#projects section:nth-child(5) ::selection {
  background: rgb(210,35,42);
  color: rgb(190,190,190);
}

#projects section:nth-child(5) ::-moz-selection{
  background: rgb(210,35,42);
  color: rgb(190,190,190);
}

#projects section:nth-child(6){
  background-color: rgb(210,35,42);
  color: rgb(190,190,190);
}

#projects section:nth-child(6) .events ul li {
  border-bottom: 3px solid rgb(190,190,190);
}

#projects section:nth-child(6) ::selection {
  background: rgb(10,10,10);
  color: rgb(150,130,90);
}

#projects section:nth-child(6) ::-moz-selection{
  background: rgb(10,10,10);
  color: rgb(150,130,90);
}

#projects section:nth-child(7){
  background-color: rgb(10,10,10);
  color: rgb(150,130,90);
}

#projects section:nth-child(7) .events ul li {
  border-bottom: 3px solid rgb(150,130,90);
}

#projects section:nth-child(7) ::selection {
  background-color: rgb(220,220,220);
  color: rgb(0,0,0);
}

#projects section:nth-child(7) ::-moz-selection{
  background-color: rgb(220,220,220);
  color: rgb(0,0,0);
}

.rotate{
  -ms-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -moz-tranform: rotate(-1deg);
  transform: rotate(-1deg);
  height:calc(100% + 40px) !important;
  top: -20px !important;
  width:calc(100% + 20px) !important;
  left: -10px !important;
}

article img{
  max-width:100%;
  max-height: 600px;
}

/*
 ██████  ██████  ██ ██████
██       ██   ██ ██ ██   ██
██   ███ ██████  ██ ██   ██
██    ██ ██   ██ ██ ██   ██
 ██████  ██   ██ ██ ██████
*/

    [class*='col-'] {
      float: left;
    }
    .grid{
      padding:20px;
    }

    .ica .grid {
      position: relative;
      padding: 0 0 20px;
      margin-right: 40px;
    }

    .ica .grid figure {
      text-align: center;
    }

    .ica .grid figure, .ica .grid .sponsor {
      display: table-cell;
      vertical-align: bottom;
      margin: 0;
    }

    .ica .grid figure img {
      max-width: 95%;
      margin: 0;
    }

    .ica .grid .col-1-2 {
      padding-right: 10px;
    }

    .ica .grid .col-1-4, .ica .grid .col-1-2, .ica .grid .col-2-3, .ica .grid .col-1-3 {
      display: table;
      vertical-align: bottom;
      height: 50vh;
    }

    .ica .grid .col-1-4 img.pew-logo {
      margin-bottom: -10px;
    }

    .events .grid{
      padding: .5rem 0 .5rem 0;
    }

    .events {
      padding-bottom: 4rem;
    }

    .events [class*='col-'] {
    padding-right: 1rem;
    }

    .events [class*='col-']:last-of-type {
      padding-right: 0;
    }

    .grid:after {
      content: "";
      display: table;
      clear: both;
    }
    .col-2-3 {width: 66.66%;}
    .col-1-3 {width: 33.33%;}
    .col-1-2 {width: 50%;}
    .col-1-4 {width: 25%;}
    .col-7-10 {width: 70%;}
    .col-3-10 {width: 30%;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
    Media Queries for Responsive Design.
   ========================================================================== */

/* XL */
@media screen and (min-width: 1400px), screen and (min-height: 1200px) {
  html {
    font-size: 35px !important;
  }
  figcaption, footer p, .sponsor p{
    font-size: .45rem;
  }
}

/* LAPTOP */
@media screen and (max-width: 1280px), screen and (max-height: 800px) {
  html {
    font-size: 25px !important;
  }
  nav ul li{
    margin: 0 0 0.5rem 0;
  }
  footer img{
    max-height:100px;
  }
  .ica .grid figure img{
    max-height: 140px;
  }
}
/* TABLET */

@media screen and (max-width: 960px), screen and (max-height: 600px) {
  /*main content column 90% width to accomdate info tab*/
  .col-2-3{
    width:90%;
  }
  /*for events–full width*/
  .col-1-4, .col-1-2 {
    width:100%;
  }
  #topnav{
    display:none;
  }
  aside{
    display:none;
  }
}
/* PHONE */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  html {
    font-size: 20px !important;
  }
  figcaption, footer p, .sponsor p{
    font-size: .55rem;
  }
  .desc p, .footnote p {
    font-size: .8rem;
  }
  iframe {
    width: 100%;
    height: 100%;
    margin-left: auto;
  }
  section#mobile-nav {
  }
  section#mobile-nav.open {
    z-index: 6;
    display: block;
  }
section[data-title='home'] h1:nth-child(3) {
    letter-spacing: -.05rem;
    margin: 0 0 0 -.2rem;
    text-align: center;
    width: 103% !important;
    font-size: 9.8vw;
  }
  section[data-title='home'] h1:first-of-type{
    margin: 0;
  }
  section h1{
    font-size: 9.8vw;
  }
  section h1:first-of-type{
    letter-spacing: -.05rem;
    margin: 0 0 15px -.2rem;
    text-align: center;
    width: 103%;
    cursor: pointer;
    font-size: 9.8vw;
  }
  section article header h1:first-of-type::after {
    content: "Endless Shout";
    text-transform: uppercase;
  }
  h1.name:hover {
    margin: 0;
    text-align: center;
    width: 100%;
  }
  h1.name:hover span {
    display: inherit;
  }

  h1.name:hover a:before {
    content: '';
  }
  section:first-of-type article header h1:first-of-type::after {
    content: "";
  }
  section h1:nth-child(2) {
    text-transform: uppercase;
  }
  section#mobile-nav h2 {
    font-size: 9.8vw;
  }
  section#mobile-nav li h2:first-of-type {
    text-transform: uppercase;
  }
  section#mobile-nav li {
    margin: 20px 0 0;
  }
  section#mobile-nav li:first-child {
    margin: 10px 0 0;
  }
  section.active {
    -webkit-overflow-scrolling: touch;
  }
  .trigger_container {
    -webkit-overflow-scrolling: touch;
  }
  footer, footer .button {
    /*-webkit-overflow-scrolling: touch;*/
    width: 9%;
  }
  footer.opened {
    left: 0;
  }
  footer .button {
    line-height: 3;
  }
  footer .credits {
    padding: 15px 70px 60px 0;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
  }
  footer .button.hinted {
    width: 9% !important;
  }
  .events [class*='col-'] {
    padding: 0;
  }
  .events ul .grid .col-1-4:nth-of-type(2) {
    padding: .5rem 0 .5rem 0;
  }
}