::-moz-selection {
  background: #fcd700;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #fcd700;
  color: #fff;
  text-shadow: none; }

a:link {
  -webkit-tap-highlight-color: #ff2d55; }

html, body {
  height: 100%; }

#stream-wrapper {
  position: relative;
  height: calc(100% - 3em); }

body {
  font-size: 24px;
  font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B';
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  padding: 1.25em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: black; }
  body a {
    text-decoration: none; }
  body #stream-header {
    margin-top: 1em;
    margin-bottom: 1em; }
  body header {
    text-align: center; }
    body header #air-symbol {
      width: 3em;
      height: 3em;
      display: inline-block;
      vertical-align: middle;
      fill: white; }
    body header h1 {
      font-size: 2em;
      font-weight: 600;
      display: inline-block;
      vertical-align: middle;
      padding-bottom: 0.16em;
      margin-top: 0; }
    body header #simple-word-link {
      display: none; }
    body header a, body header a:hover, body header a:active, body header a:visited {
      color: rgba(255, 255, 255, 0.9); }
    body header #air-logo {
      fill: rgba(255, 255, 255, 0.9); }
  body footer {
    width: 100%;
    margin-top: 3em;
    padding: 0 1em;
    text-align: center; }
    body footer p {
      vertical-align: middle;
      display: inline-block;
      padding: 1em 0.6em 1em 0;
      font-size: 1.2em; }
  body #app-store-button {
    vertical-align: middle;
    display: inline-block;
    width: 7.25 em;
    height: 2em;
    margin-bottom: 1em; }
  body #app-store-button-background {
    fill: rgba(0, 0, 0, 0.2);
    stroke-width: 0.05em;
    stroke: #FFFFFF; }
  body #userProfile {
    width: 100%;
    min-height: 100%;
    height: 100%; }
  body #past-profile {
    position: relative;
    top: calc(50% - 2em);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
    body #past-profile #app-store-button {
      width: 8.75em;
      height: 2.5em; }
  body h1 {
    font-size: 1.4em;
    font-weight: 500;
    margin-top: 0.6em; }
  body p {
    font-size: 0.84em; }
  body #cta {
    font-size: 1.4em;
    margin: 0 auto;
    padding: 2em 1em 1em; }
  body .user-image {
    width: 3.75em;
    height: 3.75em;
    border-radius: 50%;
    background-position: center center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle; }
  body #user-profile #text {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    padding: 0 0.5em; }
    body #user-profile #text h1 {
      margin-top: 0; }
  body .stream-box {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); }
    body .stream-box #social-stuff-side {
      position: absolute;
      left: -2.8em; }
      body .stream-box #social-stuff-side svg {
        width: 2em;
        height: 2em;
        opacity: 0.6;
        display: block; }
      body .stream-box #social-stuff-side #twitter-button {
        margin-bottom: 0.6em; }
    body .stream-box #past-stream-background {
      width: 20em;
      height: 20em;
      background: gray;
      position: relative;
      display: inline-block;
      float: left;
      background-image: url(/air-streampage/assets/css/selfie.jpg);
      background-position: center center;
      background-size: cover; }
      body .stream-box #past-stream-background #blur-layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-position: center center !important;
        background-size: cover; }
    body .stream-box #past-stream-data, body .stream-box #past-stream-data-separate {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.3);
      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); }
      body .stream-box #past-stream-data .user-image, body .stream-box #past-stream-data-separate .user-image {
        width: 3.85em;
        height: 3.85em;
        margin: 2.8em auto 0 auto; }
      body .stream-box #past-stream-data h1, body .stream-box #past-stream-data-separate h1 {
        font-size: 0.92em;
        font-weight: 500; }
      body .stream-box #past-stream-data p, body .stream-box #past-stream-data-separate p {
        font-size: 1.125em;
        width: 95%;
        margin: 1em auto 0 auto; }
        body .stream-box #past-stream-data p em, body .stream-box #past-stream-data-separate p em {
          font-weight: 500;
          font-style: normal; }
      body .stream-box #past-stream-data p.small, body .stream-box #past-stream-data-separate p.small {
        font-size: 0.66em;
        margin: 0.8em auto 0 auto; }
        body .stream-box #past-stream-data p.small svg, body .stream-box #past-stream-data-separate p.small svg {
          width: 0.9em;
          height: 1em;
          fill: rgba(255, 255, 255, 0.9);
          vertical-align: top;
          margin-top: 0.1em; }
      body .stream-box #past-stream-data p#time-ago, body .stream-box #past-stream-data-separate p#time-ago {
        text-align: right;
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        padding: 1.35em 1.35em 0 0; }
      body .stream-box #past-stream-data #counters, body .stream-box #past-stream-data-separate #counters {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 1em 1em 0; }
        body .stream-box #past-stream-data #counters p.small, body .stream-box #past-stream-data-separate #counters p.small {
          display: inline;
          padding-left: 1em; }
        body .stream-box #past-stream-data #counters svg, body .stream-box #past-stream-data-separate #counters svg {
          width: 1.2em;
          height: 1.2em;
          vertical-align: sub; }
        body .stream-box #past-stream-data #counters svg#like-icon, body .stream-box #past-stream-data-separate #counters svg#like-icon {
          fill: none;
          stroke: rgba(255, 255, 255, 0.9); }
  body #live {
    width: 100%;
    text-align: left; }
    body #live #video {
      width: 35.625em;
      height: 20em;
      position: relative;
      margin-left: auto;
      margin-right: auto; }
      body #live #video #past-stream-data {
        background-color: rgba(0, 0, 0, 0.15);
        text-align: left; }
        body #live #video #past-stream-data .user-image {
          width: 2.6em;
          height: 2.6em;
          margin: 1em 0 0 1em;
          display: inline-block; }
        body #live #video #past-stream-data #user-text {
          display: inline-block;
          width: 50%;
          vertical-align: top;
          margin: 0.8em 0 0 0.4em; }
          body #live #video #past-stream-data #user-text h1 {
            font-size: 0.8em;
            font-weight: 500;
            display: inline-block;
            margin: 0; }
          body #live #video #past-stream-data #user-text p {
            font-size: 0.875em;
            margin: 0.4em 0 0 0;
            display: inline-block; }
          body #live #video #past-stream-data #user-text p.small {
            font-size: 0.66em; }
        body #live #video #past-stream-data #watchers-counter {
          margin: 0;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 0 0 1.6em 1.5em; }
        body #live #video #past-stream-data p#time-ago {
          display: none; }
    body #live #past-stream-data-separate {
      display: none;
      position: static;
      padding-bottom: 1em;
      z-index: 2;
      background-color: white;
      font-size: 16px;
      text-shadow: none;
      width: 100%; }
      body #live #past-stream-data-separate .user-image {
        width: 2.6em;
        height: 2.6em;
        margin: 1em 0 0 1em;
        display: inline-block; }
      body #live #past-stream-data-separate #user-text {
        display: inline-block;
        width: 78%;
        vertical-align: top;
        margin: 0.8em 0 0 0.4em;
        color: #4d4d4d; }
        body #live #past-stream-data-separate #user-text h1 {
          font-size: 0.8em;
          font-weight: 500;
          display: inline-block;
          margin: 0; }
        body #live #past-stream-data-separate #user-text p {
          font-size: 0.875em;
          margin: 0.4em 0 0 0;
          display: inline-block; }
        body #live #past-stream-data-separate #user-text p.small {
          font-size: 0.66em; }
        body #live #past-stream-data-separate #user-text svg {
          fill: #4d4d4d; }

body::after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: -1; }

#play-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0icGxheS1idXR0b24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMzQgMTUwLjkgNTI2IDUzNCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuOSkiIHN0cm9rZS13aWR0aD0iMTYiIGQ9Ik0yOTcsNjcwLjljMTM5LjksMCwyNTMtMTEzLjEsMjUzLTI1M3MtMTEzLjEtMjUzLTI1My0yNTNTNDQsMjc4LDQ0LDQxNy45UzE1Ny4xLDY3MC45LDI5Nyw2NzAuOXogTTIyMS42LDUzOVYyOTYuOWwyMDQuNCwxMjFMMjIxLjYsNTM5eiIvPjwvc3ZnPg==);
  background-size: 4em 4em;
  background-position: center center;
  background-repeat: no-repeat; }

.no-touch #play-button {
  display: none; }

/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (max-width: 1018px) {
  body .stream-box #social-stuff-side {
    display: none; }
 }

@media screen and (max-width: 900px) {
  body .stream-box {
    width: 20em; }
    body .stream-box #past-stream-background {
      display: block;
      float: none; }
  body #live {
    max-width: 29.5em; }
    body #live #video {
      width: 100%;
      height: auto; }
      body #live #video #past-stream-data .user-image, body #live #video #past-stream-data #user-text {
        display: none; }
    body #live #past-stream-data-separate {
      display: inherit; }

  body header {
    font-size: 20px; }
    body header #air-logo {
      height: 2.9em;
      width: 6.6em; }
    body header #simple-word-link {
      font-weight: 500;
      text-decoration: underline;
      font-size: 0.75em;
      float: right;
      margin-top: 1.1em;
      color: rgba(255, 255, 255, 0.9); }
 }

@media screen and (max-width: 600px) {
  body .user-image {
    margin: 1em 0; }
  body #user-profile #text {
    text-align: center;
    width: 100%; }
 }

@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
    padding: 0;
    /*
			width: 100%;
			
			top: auto;
			-webkit-transform: translateY(0);
			-moz-transform: translateY(0);
			transform: translateY(0);
			
			margin-top: 1em;
			
			box-shadow: none;
		
*/ }
    body header {
      padding: 1em 1em 0 1em; }
      body header #app-store-button {
        display: none; }
      body header #simple-word-link {
        display: inline;
        font-weight: 500;
        text-decoration: underline;
        font-size: 0.75em;
        float: right;
        margin-top: 1.1em; }
    body #cta {
      padding: 1em 0 1.2em;
      width: 100%;
      font-size: 1.2em; }
    body #past-stream-background {
      width: 100%;
      height: 100vw;
      font-size: 20px; }
    body #app-store-button {
      width: 10.875em;
      height: 3em; }
    body footer {
      margin-top: 1em; }

  body {
    font-size: 16px; }
    body header {
      font-size: inherit; }
 }

@media screen and (max-width: 370px) {
  body .stream-box #past-stream-background {
    font-size: 18px; }
 }

@media screen and (max-width: 330px) {
  body .stream-box #past-stream-background {
    font-size: 16px; }
 }