/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 10px;
  line-height: 1.4;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

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

/* Custom Font */
@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebasneue_regular-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Bebas-bold';
    src: url('../fonts/bebasneue_bold-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Bebas-thin';
    src: url('../fonts/bebasneue_thin-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Lubalin';
    src: url('../fonts/LubalinGraphStd-Book.eot');
    src: url('../fonts/LubalinGraphStd-Book.eot?#iefix') format('embedded-opentype'),
         url('../fonts/LubalinGraphStd-Book.woff') format('woff'),
         url('../fonts/LubalinGraphStd-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lubalin-bold';
    src: url('../fonts/LubalinGraphStd-Demi.eot');
    src: url('../fonts/LubalinGraphStd-Demi.eot?#iefix') format('embedded-opentype'),
         url('../fonts/LubalinGraphStd-Demi.woff') format('woff'),
         url('../fonts/LubalinGraphStd-Demi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Resets */
html, body, div, h1 {
  margin: 0;
  padding: 0;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Bebas', sans-serif;
  background-color: black;
  background-image: url('../images/bg-main.jpg');
  background-size: cover;
}

.page-outer {
  overflow: hidden;
}

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.valign-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.taped {
  background-color: #e1c592;
}

.taped:before, .taped:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 0.6%;
  background-repeat-y: no-repeat;
}

.taped:before {
  left: -.55%;
  background-image: url("../images/tape-left.png");
}

.taped:after {
  right: -.5%;
  background-image: url("../images/tape-right.png");
}

/* ----------------------
  INDIVIDUAL VIDEO SCREEN STYLES
------------------------- */

.shell-outer {
  width: 1080px;
  height: 1920px;
  position: relative;
  margin: 0 auto;
}

.shell-video {
  position: absolute;
  left: 0;
  padding: 5%;
  top: 0;
  transition: all 0.75s ease;
  transform: translate(0, 0);
}

.shell-video.offscreen {
  transform: translate(1080px, 0);
}

.shell-video .polaroid-large {
  position: absolute;
}

.polaroid-large .video-container {
  overflow: hidden;
  position: absolute;
  top: 2.25%;
  left: 3.5%;
  width: 93%;
  height: 79.5%;
}

.polaroid-large .video-container iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.polaroid-large .judge-info {
  position: absolute;
  left: 1.5%;
  width: 100%;
  bottom: 3%;
  z-index: 4;
  text-align: center;
}

.polaroid-large .judge-info h1 {
  font-family: 'Lubalin', serif;
  font-size: 2.5em;
  padding: 3% 5%;
  margin-top: 1%;
  transform: rotate(-2deg);
}

.polaroid-large .judge-info h2 {
  font-size: 4.5em;
  color: #9c1f24;
  padding: 0;
  margin: 0;
}

.polaroid-large .judge-info .job {
  font-size: 2em;
}

/*.polaroid-large .judge-fox video {
  left: -75%;
}

.polaroid-large .judge-roberts video {
  left: -63%;
}

.polaroid-large .judge-lavery video {
  left: -66%;
}*/

.btn-back {
  position: absolute;
  top: 82.5%;
  left: .5%;
  display: block;
  z-index: 5;
  width: 228px;
  height: 87px;
  background: url('../images/btn-back.png') no-repeat;
  cursor: pointer;
  transition: all 0.25s linear;
  transform: translate(0, 0);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Bebas', sans-serif;
  font-size: 35px;
  line-height: 1;
  padding: 26px 0;
  text-align: center;
  box-sizing: border-box;
}

@media screen and (min-width: 1080px) {
  .btn-back {
    top: 81%;
  }
}

.btn-back:hover {
  transform: translate(-1em, 0);
}

.questions {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1em;
  position: absolute;
  margin-top: 1%;
  line-height: 1.75;
}

.questions .question {
  background-color: #9c1f24;
  padding: 3%;
  color: #fff;
  text-align: center;
  vertical-align: top;
  font-family: 'Lubalin', serif;
  font-size: 1.75em;
  width: 30%;
  border-radius: .25em;
  -webkit-box-shadow: .25em .25em 0px 0px rgba(126,20,22,1);
  -moz-box-shadow: .25em .25em 0px 0px rgba(126,20,22,1);
  box-shadow: .25em .25em 0px 0px rgba(126,20,22,1);
  cursor: pointer;
  position: relative;
  top: 0;
  transition: all 0.25s linear;
  transform: translate(0, 0);
}

.questions .question:hover {
  transform: translate(0, -1em);
}

.questions .question h3 {
  font-family: 'Bebas', sans-serif;
  text-transform: uppercase;
  margin: 0;
  font-size: 2.5em;
}

.questions .question p {
  margin-top: .25%;
}

.questions .active {
  top: -1em !important;
  background-color: rgba(126,20,22,1);
  -webkit-box-shadow: .5% .5% 0px 0px rgba(0,0,0,1);
  -moz-box-shadow: .5% .5% 0px 0px rgba(0,0,0,1);
  box-shadow: .5% .5% 0px 0px rgba(0,0,0,1);
}

/* ----------------------
  INITIAL SCREEN STYLES
------------------------- */

.shell-main {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.75s ease;
  transform: translate(0, 0);
}

.shell-main.offscreen {
  transform: translate(-100%, 0);
}

.intro {
  width: 67.68%;
  height: 24.6%;
  padding: 3% 10%;
  position: relative;
  top: 1.4%;
  left: 3.7%;
  z-index: 9;
  background-image: url('../images/intro-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.intro h1 {
  color: #9c1f24;
  padding: 0 3%;
  margin: 0;
  text-transform: uppercase;
  font-family: 'Bebas', sans-serif;
  font-size: 4.75em;
  letter-spacing: .05em;
  display: inline-block;
  position: absolute;
  right: 8%;
  top: 15%;
  -ms-transform: rotate(2deg); /* IE 9 */
  -webkit-transform: rotate(2deg); /* Chrome, Safari, Opera */
  transform: rotate(2deg);
}

.intro-about {
  font-family: 'Lubalin', serif;
  padding-top: 25%;
  font-size: 1.5em;
  line-height: 2;
}

.intro-about p.bold {
  font-family: 'Lubalin-bold', serif;
  color: #9c1f24;
  padding-right: 38%;
}

.intro-instructions {
  width: 35%;
  height: 50%;
  padding: 1% 4%;
  position: absolute;
  bottom: -3%;
  right: 0;
  background-image: url(../images/sticky-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  -ms-transform: rotate(-7deg); /* IE 9 */
  -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  transform: rotate(-7deg);
}

.intro-instructions h2 {
  color: #9c1f24;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-family: 'Bebas', sans-serif;
  font-size: 2.5em;
  text-align: left;
}

.intro-instructions p {
  font-family: 'Lubalin', serif;
  line-height: 2;
  font-size: 1.5em;
  -ms-transform: rotate(-2deg); /* IE 9 */
  -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
  transform: rotate(-2deg);
}

.polaroids {
  position: relative;
  top: 4%;
  z-index: 3;
  width: 100%;
}

.polaroid {
  position: relative;
  cursor: pointer;
  transition: all 0.25s linear;
}

.polaroid .video-container {
  position: absolute;
  top: 5%;
  left: 5.6%;
  z-index: 2;
  width: 421px;
  height: 372px;
  overflow: hidden;
}

.polaroid .video-container iframe {
  position: absolute;
  top: -20%;
  left: -75%;
  height: 150%;
  width: 100%;
}

.polaroid img.frame {
  position: relative;
  z-index: 3;
}

.polaroid img.paper {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: .75%;
}


.paperclip {
  position: absolute;
  z-index: 9;
}

.judge-info {
  position: absolute;
  bottom: 7%;
  left: 6%;
  z-index: 4;
  width: 100%;
}

.judge-info h1 {
  padding: 0 .5em;
  margin-bottom: .25em;
  text-transform: uppercase;
  font-family: 'Bebas', sans-serif;
  font-size: 3.75em;
  letter-spacing: .05em;
  display: inline-block;
  position: relative;
  top: 0;
  color: #9c1f24;
  left: -.35em;
}

.judge-info .job {
  font-family: 'Lubalin', serif;
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: #2c2c29;
}

.judge-info .tenure {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #686453;
  margin-top: .25%;
  font-size: 1.5em;
  letter-spacing: .1%;
}

.judge-info .tenure strong {
  text-transform: uppercase;
}

.fox {
  z-index: 5;
  left: .25%;
  transform: rotate(-4deg) translate(0, 0);
}

.fox:hover {
  transform: rotate(-4deg) translate(0, -1em);
}

.fox img.paper {
  transform: rotate(1deg);
}

.fox img.paperclip {
  right: 2%;
  top: 71.5%;
  -ms-transform: rotate(-12deg); /* IE 9 */
  -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
  transform: rotate(-12deg);
}

.fox .video-container iframe {
  top: -24%;
  left: 3px;
  height: 152%;
}

.roberts {
  z-index: 4;
  right: -2%;
  transform: rotate(5deg) translate(0, 0);
}

.roberts:hover {
  transform: rotate(5deg) translate(0, -1em);
}

.roberts img.paper {
  top: 1.2%;
  left: 3%;
  -ms-transform: rotate(-2deg); /* IE 9 */
  -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
  transform: rotate(-2deg);
}

.roberts img.paperclip {
  right: 2%;
  top: 71%;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
  transform: rotate(20deg);
}

.roberts .video-container iframe {
  top: -32%;
  left: 0;
  height: 167%;
}

.skavdahl {
  top: 1.5%;
  left: 5%;
  z-index: 3;
  transform: rotate(7deg) translate(0, 0);
}

.skavdahl:hover {
  transform: rotate(7deg) translate(0, -1em);
}

.skavdahl img.paper {
  top: .75%;
  -ms-transform: rotate(3deg); /* IE 9 */
  -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
  transform: rotate(3deg);
}

.skavdahl img.paperclip {
  right: 2%;
  top: 70%;
  -ms-transform: rotate(-12deg); /* IE 9 */
  -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
  transform: rotate(-12deg);
}

.skavdahl .video-container iframe {
  top: -27%;
  left: 0%;
  height: 152%;
}

.lavery {
  z-index: 2;
  top: 1%;
  left: 5%;
  transform: rotate(-8deg) translate(0, 0);
}

.lavery:hover {
  transform: rotate(-8deg) translate(0, -1em);
}

.lavery img.paper {
  top: .75%;
  -ms-transform: rotate(3deg); /* IE 9 */
  -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
  transform: rotate(3deg);
}

.lavery img.paperclip {
  right: 2%;
  top: 73%;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
  transform: rotate(20deg);
}

.lavery .video-container iframe {
  top: -34%;
  left: 0%;
  height: 162%;
}

.folder {
  position: absolute;
  top: 1610px;
  left: 150px;
  z-index: 1;
}

.glasses {
  position: absolute;
  top: 1680px;
  right: 640px;
  z-index: 9;
}

.gavel {
  position: absolute;
  top: 52px;
  left: 722px;
  z-index: 10;
  pointer-events: none;
}


/* ----------------------
   Big-ass monitors
   ---------------------- */
@media (min-width: 2000px) {

}

/* ----------------------
   iPad
   ---------------------- */
@media (min-width: 600px) and (max-width: 1000px){

}

/* ------------------------------------
   Up to iPad
   ------------------------------------- */
@media screen and (max-width: 600px) {

}


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

.slide-loading {
  display: none;
  transition: none !important;
}