/* Mixins */
/* Global classes */
* {
  box-sizing: border-box; }

.credit {
  color: #666;
  font-size: .75em;
  letter-spacing: .5px;
  padding: .5em;
  text-align: center; }
  .credit a {
    font-weight: 700; }

.input-hidden {
  position: absolute;
  height: 1px;
  left: -9999px;
  visibility: hidden;
  width: 1px; }

.light {
  font-size: .75rem; }

.vertical-outer {
  display: table;
  height: 92%;
  width: 100%; }

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

.vertical-inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

body {
  background-color: #000;
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300; }

a {
  border-bottom: 1px solid;
  color: inherit;
  text-decoration: none; }
  a:visited {
    opacity: .75; }

p {
  margin: .5em; }

/* Top-level IDs */
#scrim {
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  height: 74vh;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 10; }

#main {
  height: 92vh;
  z-index: 1; }

#meta {
  margin-top: 2em;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 90%; }
  #meta .response-query {
    font-size: .75em;
    font-style: italic;
    margin: 0; }
  #meta .response-caption {
    font-size: 1.5em;
    margin: 0 0 .125em; }
  #meta .response-source {
    font-size: .75rem;
    font-style: italic;
    font-weight: 300;
    margin: 0; }

#social {
  text-align: center; }
  #social > * {
    display: inline-block; }
  #social .twitter,
  #social .facebook {
    opacity: .25; }
    #social .twitter:hover,
    #social .facebook:hover {
      opacity: 1; }

/* Secondary-level IDs */
#question-container {
  font-size: 1.8em;
  margin-left: auto;
  margin-right: auto;
  width: 80%; }
  #question-container .vin-face {
    height: 2em;
    margin-left: .125em;
    margin-right: .125em; }
  #question-container .input-label {
    display: inline-block;
    float: left;
    text-align: center;
    width: 250px; }
  #question-container .input-container {
    margin-left: 250px;
    position: relative; }
    #question-container .input-container input {
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      border-radius: 3px;
      background-color: rgba(255, 255, 255, 0.15);
      border: 0;
      color: rgba(255, 255, 255, 0.8);
      padding: .25em;
      width: 100%; }
    #question-container .input-container .return-arrow {
      color: rgba(255, 255, 255, 0.8);
      font-size: .75em;
      padding-top: .625em;
      position: absolute;
      top: 0;
      right: .25em;
      visibility: hidden; }
      #question-container .input-container .return-arrow.ready {
        visibility: visible; }
  #question-container p {
    text-align: right; }

.player-wrapper {
  position: relative;
  height: 80%; }
  .player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; }

/* Media queries */
@media (max-width: 1080px) {
  #question-container .input-label {
    margin-left: 0;
    text-align: center;
    width: 100%; }
  #question-container .input-container {
    margin-left: 0;
    width: 100%; }
  #question-container p {
    text-align: center; }

  .return-arrow.ready {
    visibility: hidden !important; } }