@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700);
.toast-title {
  font-weight: bold;
  font-size: 24px; }

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  font-size: 16px; }

.toast-message a,
.toast-message label {
  color: #ffffff; }

.toast-message a:hover {
  color: #cccccc;
  text-decoration: none; }

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%; }

.toast-bottom-center {
  bottom: 16px;
  right: calc(50% - 250px);
  width: 500px; }

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%; }

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%; }

.toast-top-left {
  top: 12px;
  left: 12px; }

.toast-top-right {
  top: 12px;
  right: 12px; }

.toast-bottom-right {
  right: 12px;
  bottom: 12px; }

.toast-bottom-left {
  bottom: 12px;
  left: 12px; }

#toast-container {
  position: fixed;
  z-index: 9999;
  /*overrides*/ }

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#toast-container > div {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  /*-moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;*/
  background-position: 15px center;
  background-repeat: no-repeat;
  color: #ffffff; }

#toast-container > :hover {
  cursor: pointer; }

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  max-width: 500px;
  margin: auto; }

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 100%;
  margin: auto;
  text-align: center !important; }
  #toast-container.toast-top-full-width > div .toast,
  #toast-container.toast-bottom-full-width > div .toast {
    text-align: center !important; }

.toast {
  background-color: none; }

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40); }

/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em; } }
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em; } }
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em; } }
/*
 * qTip2 - Pretty powerful tooltips - v2.2.1
 * http://qtip2.com
 *
 * Copyright (c) 2014 
 * Released under the MIT licenses
 * http://jquery.org/license
 *
 * Date: Sat Sep 6 2014 06:25 EDT-0400
 * Plugins: tips viewport imagemap svg modal ie6
 * Styles: core basic css3
 */
.qtip {
  position: absolute;
  left: -28000px;
  top: -28000px;
  display: none;
  max-width: 280px;
  min-width: 50px;
  font-size: 10.5px;
  line-height: 12px;
  direction: ltr;
  box-shadow: none;
  padding: 0; }

.qtip-content {
  position: relative;
  padding: 5px 9px;
  overflow: hidden;
  text-align: left;
  word-wrap: break-word; }

.qtip-titlebar {
  position: relative;
  padding: 5px 35px 5px 10px;
  overflow: hidden;
  border-width: 0 0 1px;
  font-weight: bold; }

.qtip-titlebar + .qtip-content {
  border-top-width: 0 !important; }

/* Default close button class */
.qtip-close {
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 11;
  /* Overlap .qtip-tip */
  cursor: pointer;
  outline: medium none;
  border: 1px solid transparent; }

.qtip-titlebar .qtip-close {
  right: 4px;
  top: 50%;
  margin-top: -9px; }

* html .qtip-titlebar .qtip-close {
  top: 16px; }

/* IE fix */
.qtip-titlebar .ui-icon,
.qtip-icon .ui-icon {
  display: block;
  text-indent: -1000em;
  direction: ltr; }

.qtip-icon, .qtip-icon .ui-icon {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none; }

.qtip-icon .ui-icon {
  width: 18px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  text-indent: 0;
  font: normal bold 10px/13px Tahoma,sans-serif;
  color: inherit;
  background: transparent none no-repeat -100em -100em; }

/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
/* Default tooltip style */
.qtip-default {
  border: 1px solid #F1D031;
  background-color: #FFFFA3;
  color: #555; }

.qtip-default .qtip-titlebar {
  background-color: #FFEF93; }

.qtip-default .qtip-icon {
  border-color: #CCC;
  background: #F1F1F1;
  color: #777; }

.qtip-default .qtip-titlebar .qtip-close {
  border-color: #AAA;
  color: #111; }

/*! Light tooltip style */
.qtip-light {
  background-color: white;
  border-color: #E2E2E2;
  color: #454545; }

.qtip-light .qtip-titlebar {
  background-color: #f1f1f1; }

/*! Dark tooltip style */
.qtip-dark {
  background-color: #505050;
  border-color: #303030;
  color: #f3f3f3; }

.qtip-dark .qtip-titlebar {
  background-color: #404040; }

.qtip-dark .qtip-icon {
  border-color: #444; }

.qtip-dark .qtip-titlebar .ui-state-hover {
  border-color: #303030; }

/*! Cream tooltip style */
.qtip-cream {
  background-color: #FBF7AA;
  border-color: #F9E98E;
  color: #A27D35; }

.qtip-cream .qtip-titlebar {
  background-color: #F0DE7D; }

.qtip-cream .qtip-close .qtip-icon {
  background-position: -82px 0; }

/*! Red tooltip style */
.qtip-red {
  background-color: #F78B83;
  border-color: #D95252;
  color: #912323; }

.qtip-red .qtip-titlebar {
  background-color: #F06D65; }

.qtip-red .qtip-close .qtip-icon {
  background-position: -102px 0; }

.qtip-red .qtip-icon {
  border-color: #D95252; }

.qtip-red .qtip-titlebar .ui-state-hover {
  border-color: #D95252; }

/*! Green tooltip style */
.qtip-green {
  background-color: #CAED9E;
  border-color: #90D93F;
  color: #3F6219; }

.qtip-green .qtip-titlebar {
  background-color: #B0DE78; }

.qtip-green .qtip-close .qtip-icon {
  background-position: -42px 0; }

/*! Blue tooltip style */
.qtip-blue {
  background-color: #E5F6FE;
  border-color: #ADD9ED;
  color: #5E99BD; }

.qtip-blue .qtip-titlebar {
  background-color: #D0E9F5; }

.qtip-blue .qtip-close .qtip-icon {
  background-position: -2px 0; }

.qtip-shadow {
  -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); }

/* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.qtip-rounded,
.qtip-tipsy,
.qtip-bootstrap {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

.qtip-rounded .qtip-titlebar {
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0; }

/* Youtube tooltip style */
.qtip-youtube {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 3px #333;
  -moz-box-shadow: 0 0 3px #333;
  box-shadow: 0 0 3px #333;
  color: white;
  border: 0 solid transparent;
  background: #4A4A4A;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A4A4A), color-stop(100%, black));
  background-image: -webkit-linear-gradient(top, #4A4A4A 0, black 100%);
  background-image: -moz-linear-gradient(top, #4A4A4A 0, black 100%);
  background-image: -ms-linear-gradient(top, #4A4A4A 0, black 100%);
  background-image: -o-linear-gradient(top, #4A4A4A 0, black 100%); }

.qtip-youtube .qtip-titlebar {
  background-color: #4A4A4A;
  background-color: transparent; }

.qtip-youtube .qtip-content {
  padding: .75em;
  font: 12px arial,sans-serif;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"; }

.qtip-youtube .qtip-icon {
  border-color: #222; }

.qtip-youtube .qtip-titlebar .ui-state-hover {
  border-color: #303030; }

/* jQuery TOOLS Tooltip style */
.qtip-jtools {
  background: #232323;
  background: rgba(0, 0, 0, 0.7);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
  background-image: -moz-linear-gradient(top, #717171, #232323);
  background-image: -webkit-linear-gradient(top, #717171, #232323);
  background-image: -ms-linear-gradient(top, #717171, #232323);
  background-image: -o-linear-gradient(top, #717171, #232323);
  border: 2px solid #ddd;
  border: 2px solid #f1f1f1;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 12px #333;
  -moz-box-shadow: 0 0 12px #333;
  box-shadow: 0 0 12px #333; }

/* IE Specific */
.qtip-jtools .qtip-titlebar {
  background-color: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"; }

.qtip-jtools .qtip-content {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"; }

.qtip-jtools .qtip-titlebar,
.qtip-jtools .qtip-content {
  background: transparent;
  color: white;
  border: 0 dashed transparent; }

.qtip-jtools .qtip-icon {
  border-color: #555; }

.qtip-jtools .qtip-titlebar .ui-state-hover {
  border-color: #333; }

/* Cluetip style */
.qtip-cluetip {
  -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  background-color: #D9D9C2;
  color: #111;
  border: 0 dashed transparent; }

.qtip-cluetip .qtip-titlebar {
  background-color: #87876A;
  color: white;
  border: 0 dashed transparent; }

.qtip-cluetip .qtip-icon {
  border-color: #808064; }

.qtip-cluetip .qtip-titlebar .ui-state-hover {
  border-color: #696952;
  color: #696952; }

/* Tipsy style */
.qtip-tipsy {
  background: black;
  background: rgba(0, 0, 0, 0.87);
  color: white;
  border: 0 solid transparent;
  font-size: 11px;
  font-family: 'Lucida Grande', sans-serif;
  font-weight: bold;
  line-height: 16px;
  text-shadow: 0 1px black; }

.qtip-tipsy .qtip-titlebar {
  padding: 6px 35px 0 10px;
  background-color: transparent; }

.qtip-tipsy .qtip-content {
  padding: 6px 10px; }

.qtip-tipsy .qtip-icon {
  border-color: #222;
  text-shadow: none; }

.qtip-tipsy .qtip-titlebar .ui-state-hover {
  border-color: #303030; }

/* Tipped style */
.qtip-tipped {
  border: 3px solid #959FA9;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #F9F9F9;
  color: #454545;
  font-weight: normal;
  font-family: serif; }

.qtip-tipped .qtip-titlebar {
  border-bottom-width: 0;
  color: white;
  background: #3A79B8;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
  background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
  background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
  background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
  background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"; }

.qtip-tipped .qtip-icon {
  border: 2px solid #285589;
  background: #285589; }

.qtip-tipped .qtip-icon .ui-icon {
  background-color: #FBFBFB;
  color: #555; }

/**
 * Twitter Bootstrap style.
 *
 * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
 * Does not work with IE 7.
 */
.qtip-bootstrap {
  /** Taken from Bootstrap body */
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  /** Taken from Bootstrap .popover */
  padding: 1px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box; }

.qtip-bootstrap .qtip-titlebar {
  /** Taken from Bootstrap .popover-title */
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0; }

.qtip-bootstrap .qtip-titlebar .qtip-close {
  /**
   * Overrides qTip2:
   * .qtip-titlebar .qtip-close{
   *   [...]
   *   right: 4px;
   *   top: 50%;
   *   [...]
   *   border-style: solid;
   * }
   */
  right: 11px;
  top: 45%;
  border-style: none; }

.qtip-bootstrap .qtip-content {
  /** Taken from Bootstrap .popover-content */
  padding: 9px 14px; }

.qtip-bootstrap .qtip-icon {
  /**
   * Overrides qTip2:
   * .qtip-default .qtip-icon {
   *   border-color: #CCC;
   *   background: #F1F1F1;
   *   color: #777;
   * }
   */
  background: transparent; }

.qtip-bootstrap .qtip-icon .ui-icon {
  /**
   * Overrides qTip2:
   * .qtip-icon .ui-icon{
   *   width: 18px;
   *   height: 14px;
   * }
   */
  width: auto;
  height: auto;
  /* Taken from Bootstrap .close */
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 18px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20); }

.qtip-bootstrap .qtip-icon .ui-icon:hover {
  /* Taken from Bootstrap .close:hover */
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40); }

/* IE9 fix - removes all filters */
.qtip:not(.ie9haxors) div.qtip-content,
.qtip:not(.ie9haxors) div.qtip-titlebar {
  filter: none;
  -ms-filter: none; }

.qtip .qtip-tip {
  margin: 0 auto;
  overflow: hidden;
  z-index: 10; }

/* Opera bug #357 - Incorrect tip position
https://github.com/Craga89/qTip2/issues/367 */
x:-o-prefocus, .qtip .qtip-tip {
  visibility: hidden; }

.qtip .qtip-tip,
.qtip .qtip-tip .qtip-vml,
.qtip .qtip-tip canvas {
  position: absolute;
  color: #123456;
  background: transparent;
  border: 0 dashed transparent; }

.qtip .qtip-tip canvas {
  top: 0;
  left: 0; }

.qtip .qtip-tip .qtip-vml {
  behavior: url(#default#VML);
  display: inline-block;
  visibility: visible; }

#qtip-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

/* Applied to modals with show.modal.blur set to true */
#qtip-overlay.blurs {
  cursor: pointer; }

/* Change opacity of overlay here */
#qtip-overlay div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }

.qtipmodal-ie6fix {
  position: absolute !important; }

/*!
 * Copyright (c) 2014 TokBox, Inc.
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 * 2.7.2
 */
/**
 * OT Base styles
 */
/* Root OT object, this is where our CSS reset happens */
.OT_root,
.OT_root * {
  color: #ffffff;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: baseline; }

/**
 * Specific Element Reset
 */
.OT_root h1,
.OT_root h2,
.OT_root h3,
.OT_root h4,
.OT_root h5,
.OT_root h6 {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-weight: bold; }

.OT_root strong {
  font-weight: bold; }

.OT_root em {
  font-style: italic; }

.OT_root a,
.OT_root a:link,
.OT_root a:visited,
.OT_root a:hover,
.OT_root a:active {
  font-family: Arial, Helvetica, sans-serif; }

.OT_root ul, .OT_root ol {
  margin: 1em 1em 1em 2em; }

.OT_root ol {
  list-style: decimal outside; }

.OT_root ul {
  list-style: disc outside; }

.OT_root dl {
  margin: 4px; }

.OT_root dl dt,
.OT_root dl dd {
  float: left;
  margin: 0;
  padding: 0; }

.OT_root dl dt {
  clear: left;
  text-align: right;
  width: 50px; }

.OT_root dl dd {
  margin-left: 10px; }

.OT_root img {
  border: 0 none; }

/* Modal dialog styles */
/* Modal dialog styles */
.OT_dialog-centering {
  display: table;
  width: 100%;
  height: 100%; }

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

.OT_dialog {
  position: relative;
  box-sizing: border-box;
  max-width: 576px;
  margin-right: auto;
  margin-left: auto;
  padding: 36px;
  text-align: center;
  /* centers all the inline content */
  background-color: #363636;
  color: #fff;
  box-shadow: 2px 4px 6px #999;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 13px;
  line-height: 1.4; }

.OT_dialog * {
  font-family: inherit;
  box-sizing: inherit; }

.OT_closeButton {
  color: #999999;
  cursor: pointer;
  font-size: 32px;
  line-height: 36px;
  position: absolute;
  right: 18px;
  top: 0; }

.OT_dialog-messages {
  text-align: center; }

.OT_dialog-messages-main {
  margin-bottom: 36px;
  line-height: 36px;
  font-weight: 300;
  font-size: 24px; }

.OT_dialog-messages-minor {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 18px;
  color: #A4A4A4; }

.OT_dialog-messages-minor strong {
  color: #ffffff; }

.OT_dialog-actions-card {
  display: inline-block; }

.OT_dialog-button-title {
  margin-bottom: 18px;
  line-height: 18px;
  font-weight: 300;
  text-align: center;
  font-size: 14px;
  color: #999999; }

.OT_dialog-button-title label {
  color: #999999; }

.OT_dialog-button-title a,
.OT_dialog-button-title a:link,
.OT_dialog-button-title a:active {
  color: #02A1DE; }

.OT_dialog-button-title strong {
  color: #ffffff;
  font-weight: 100;
  display: block; }

.OT_dialog-button {
  display: inline-block;
  margin-bottom: 18px;
  padding: 0 1em;
  background-color: #1CA3DC;
  text-align: center;
  cursor: pointer; }

.OT_dialog-button.OT_dialog-button-disabled {
  cursor: not-allowed;
  opacity: 0.5; }

.OT_dialog-button-large {
  line-height: 36px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-weight: 100;
  font-size: 24px; }

.OT_dialog-button-small {
  line-height: 18px;
  padding-top: 9px;
  padding-bottom: 9px;
  background-color: #444444;
  color: #999999;
  font-size: 16px; }

.OT_dialog-progress-bar {
  display: inline-block;
  /* prevents margin collapse */
  width: 100%;
  margin-top: 5px;
  margin-bottom: 41px;
  border: 1px solid #4E4E4E;
  height: 8px; }

.OT_dialog-progress-bar-fill {
  height: 100%;
  background-color: #29A4DA; }

.OT_dialog-plugin-upgrading .OT_dialog-plugin-upgrade-percentage {
  line-height: 54px;
  font-size: 48px;
  font-weight: 100; }

/* Helpers */
.OT_centered {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: 0; }

.OT_dialog-hidden {
  display: none; }

.OT_dialog-button-block {
  display: block; }

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

/* Publisher and Subscriber styles */
.OT_publisher, .OT_subscriber {
  position: relative;
  min-width: 48px;
  min-height: 48px; }

.OT_publisher .OT_video-element,
.OT_subscriber .OT_video-element {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0; }

/* Styles that are applied when the video element should be mirrored */
.OT_publisher.OT_mirrored .OT_video-element {
  transform: scale(-1, 1);
  transform-origin: 50% 50%; }

.OT_subscriber_error {
  background-color: #000;
  color: #fff;
  text-align: center; }

.OT_subscriber_error > p {
  padding: 20px; }

/* The publisher/subscriber name/mute background */
.OT_publisher .OT_bar,
.OT_subscriber .OT_bar,
.OT_publisher .OT_name,
.OT_subscriber .OT_name,
.OT_publisher .OT_archiving,
.OT_subscriber .OT_archiving,
.OT_publisher .OT_archiving-status,
.OT_subscriber .OT_archiving-status,
.OT_publihser .OT_archiving-light-box,
.OT_subscriber .OT_archiving-light-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 34px;
  position: absolute; }

.OT_publisher .OT_bar,
.OT_subscriber .OT_bar {
  background: rgba(0, 0, 0, 0.4); }

.OT_publisher .OT_edge-bar-item,
.OT_subscriber .OT_edge-bar-item {
  z-index: 1;
  /* required to get audio level meter underneath */ }

/* The publisher/subscriber name panel/archiving status bar */
.OT_publisher .OT_name,
.OT_subscriber .OT_name {
  background-color: transparent;
  color: #ffffff;
  font-size: 15px;
  line-height: 34px;
  font-weight: normal;
  padding: 0 4px 0 36px; }

.OT_publisher .OT_archiving-status,
.OT_subscriber .OT_archiving-status {
  background: rgba(0, 0, 0, 0.4);
  top: auto;
  bottom: 0;
  left: 34px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 34px;
  font-weight: normal; }

.OT_micro .OT_archiving-status,
.OT_micro:hover .OT_archiving-status,
.OT_mini .OT_archiving-status,
.OT_mini:hover .OT_archiving-status {
  display: none; }

.OT_publisher .OT_archiving-light-box,
.OT_subscriber .OT_archiving-light-box {
  background: rgba(0, 0, 0, 0.4);
  top: auto;
  bottom: 0;
  right: auto;
  width: 34px;
  height: 34px; }

.OT_archiving-light {
  width: 7px;
  height: 7px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: #575757;
  -webkit-box-shadow: 0 0 5px 1px #575757;
  -moz-box-shadow: 0 0 5px 1px #575757;
  box-shadow: 0 0 5px 1px #575757; }

.OT_archiving-light.OT_active {
  background-color: #970d13;
  -webkit-animation: OT_pulse 1.3s ease-in;
  -moz-animation: OT_pulse 1.3s ease-in;
  -webkit-animation: OT_pulse 1.3s ease-in;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; }

@-moz-keyframes OT_pulse {
  0% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  30% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  50% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  80% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  100% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; } }
@-webkit-keyframes OT_pulse {
  0% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  30% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  50% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  80% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  100% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; } }
@-o-keyframes OT_pulse {
  0% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  30% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  50% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  80% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  100% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; } }
@-ms-keyframes OT_pulse {
  0% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  30% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  50% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  80% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  100% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; } }
@-webkit-keyframes OT_pulse {
  0% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  30% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  50% {
    -webkit-box-shadow: 0 0 5px 1px #c70019;
    -moz-box-shadow: 0 0 5px 1px #c70019;
    box-shadow: 0 0 5px 1px #c70019; }
  80% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; }
  100% {
    -webkit-box-shadow: 0 0 0px 0px #c70019;
    -moz-box-shadow: 0 0 0px 0px #c70019;
    box-shadow: 0 0 0px 0px #c70019; } }
.OT_mini .OT_bar,
.OT_bar.OT_mode-mini,
.OT_bar.OT_mode-mini-auto {
  bottom: 0;
  height: auto; }

.OT_mini .OT_name.OT_mode-off,
.OT_mini .OT_name.OT_mode-on,
.OT_mini .OT_name.OT_mode-auto,
.OT_mini:hover .OT_name.OT_mode-auto {
  display: none; }

.OT_publisher .OT_name,
.OT_subscriber .OT_name {
  left: 10px;
  right: 37px;
  height: 34px;
  padding-left: 0; }

.OT_publisher .OT_mute,
.OT_subscriber .OT_mute {
  border: none;
  cursor: pointer;
  display: block;
  position: absolute;
  text-align: center;
  text-indent: -9999em;
  background-color: transparent;
  background-repeat: no-repeat; }

.OT_publisher .OT_mute,
.OT_subscriber .OT_mute {
  right: 0;
  top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  height: 36px;
  width: 37px; }

.OT_mini .OT_mute,
.OT_publisher.OT_mini .OT_mute.OT_mode-auto.OT_mode-on-hold,
.OT_subscriber.OT_mini .OT_mute.OT_mode-auto.OT_mode-on-hold {
  top: 50%;
  left: 50%;
  right: auto;
  margin-top: -18px;
  margin-left: -18.5px;
  border-left: none; }

.OT_publisher .OT_mute {
  background-position: 9px 5px; }

.OT_publisher .OT_mute.OT_active {
  background-position: 9px 4px; }

.OT_subscriber .OT_mute {
  background-position: 8px 7px; }

.OT_subscriber .OT_mute.OT_active {
  background-position: 7px 7px; }

/**
 * Styles for display modes
 *
 * Note: It's important that these completely control the display and opacity
 * attributes, no other selectors should atempt to change them.
 */
/* Default display mode transitions for various chrome elements */
.OT_publisher .OT_edge-bar-item,
.OT_subscriber .OT_edge-bar-item {
  transition-property: top, bottom, opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease-in; }

.OT_publisher .OT_edge-bar-item.OT_mode-off,
.OT_subscriber .OT_edge-bar-item.OT_mode-off,
.OT_publisher .OT_edge-bar-item.OT_mode-auto,
.OT_subscriber .OT_edge-bar-item.OT_mode-auto,
.OT_publisher .OT_edge-bar-item.OT_mode-mini-auto,
.OT_subscriber .OT_edge-bar-item.OT_mode-mini-auto {
  top: -25px;
  opacity: 0; }

.OT_mini .OT_mute.OT_mode-auto,
.OT_publisher .OT_mute.OT_mode-mini-auto,
.OT_subscriber .OT_mute.OT_mode-mini-auto {
  top: 50%; }

.OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-off,
.OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-off,
.OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto,
.OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto,
.OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-mini-auto,
.OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-mini-auto {
  top: auto;
  bottom: -25px; }

.OT_publisher .OT_edge-bar-item.OT_mode-on,
.OT_subscriber .OT_edge-bar-item.OT_mode-on,
.OT_publisher .OT_edge-bar-item.OT_mode-auto.OT_mode-on-hold,
.OT_subscriber .OT_edge-bar-item.OT_mode-auto.OT_mode-on-hold,
.OT_publisher:hover .OT_edge-bar-item.OT_mode-auto,
.OT_subscriber:hover .OT_edge-bar-item.OT_mode-auto,
.OT_publisher:hover .OT_edge-bar-item.OT_mode-mini-auto,
.OT_subscriber:hover .OT_edge-bar-item.OT_mode-mini-auto {
  top: 0;
  opacity: 1; }

.OT_mini .OT_mute.OT_mode-on,
.OT_mini:hover .OT_mute.OT_mode-auto,
.OT_mute.OT_mode-mini,
.OT_root:hover .OT_mute.OT_mode-mini-auto {
  top: 50%; }

.OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-on,
.OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-on,
.OT_publisher:hover .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto,
.OT_subscriber:hover .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto {
  top: auto;
  bottom: 0;
  opacity: 1; }

/* Contains the video element, used to fix video letter-boxing */
.OT_widget-container {
  position: absolute;
  background-color: #000000;
  overflow: hidden; }

.OT_hidden-audio {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important; }

/* Load animation */
.OT_root .OT_video-loading {
  display: none;
  position: absolute;
  width: 32px;
  height: 32px;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px; }

.OT_publisher.OT_loading .OT_video-loading,
.OT_subscriber.OT_loading .OT_video-loading {
  display: block; }

.OT_publisher.OT_loading .OT_video-element,
.OT_subscriber.OT_loading .OT_video-element {
  /*display: none;*/ }

.OT_video-centering {
  display: table;
  width: 100%;
  height: 100%; }

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

.OT_video-poster {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: none;
  opacity: .25;
  background-repeat: no-repeat;
  background-size: auto 76%; }

.OT_fit-mode-cover .OT_video-element {
  object-fit: cover; }

.OT_fit-mode-contain .OT_video-element {
  object-fit: contain; }

.OT_fit-mode-cover .OT_video-poster {
  background-position: center bottom; }

.OT_fit-mode-contain .OT_video-poster {
  background-position: center; }

.OT_audio-level-meter {
  position: absolute;
  width: 25%;
  max-width: 224px;
  min-width: 21px;
  top: 0;
  right: 0;
  overflow: hidden; }

.OT_audio-level-meter:before {
  /* makes the height of the container equals its width */
  content: '';
  display: block;
  padding-top: 100%; }

.OT_audio-level-meter__bar {
  position: absolute;
  width: 192%;
  /* meter value can overflow of 8% */
  height: 192%;
  top: -96%;
  right: -96%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8); }

.OT_audio-level-meter__audio-only-img {
  position: absolute;
  top: 22%;
  right: 15%;
  width: 40%;
  opacity: .7; }

.OT_audio-level-meter__audio-only-img:before {
  /* makes the height of the container equals its width */
  content: '';
  display: block;
  padding-top: 100%; }

.OT_audio-level-meter__value {
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(circle, #97ce00 0%, rgba(151, 206, 0, 0) 100%); }

.OT_audio-level-meter.OT_mode-off {
  display: none; }

.OT_audio-level-meter.OT_mode-on,
.OT_audio-only .OT_audio-level-meter.OT_mode-auto {
  display: block; }

.OT_audio-only.OT_publisher .OT_video-element,
.OT_audio-only.OT_subscriber .OT_video-element {
  display: none; }

.OT_video-disabled-indicator {
  opacity: 1;
  border: none;
  display: none;
  position: absolute;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: bottom right;
  top: 0;
  left: 0;
  bottom: 3px;
  right: 3px; }

.OT_video-disabled {
  background-size: 33px auto; }

.OT_video-disabled-warning {
  background-size: 33px auto; }

.OT_video-disabled-indicator.OT_active {
  display: block; }

.OT_hide-forced {
  display: none; }

.marvel-device {
  display: inline-block;
  position: relative;
  box-sizing: content-box !important; }
  .marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    color: white;
    z-index: 2;
    text-align: center;
    display: block;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111; }
  .marvel-device .top-bar, .marvel-device .bottom-bar {
    height: 3px;
    background: black;
    width: 100%;
    display: block; }
  .marvel-device .middle-bar {
    width: 3px;
    height: 4px;
    top: 0px;
    left: 90px;
    background: black;
    position: absolute; }
  .marvel-device.iphone6 {
    width: 375px;
    height: 667px;
    padding: 105px 24px;
    background: #d9dbdc;
    -webkit-border-radius: 56px;
    border-radius: 56px;
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone6:before {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      position: absolute;
      top: 6px;
      content: '';
      left: 6px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background: #f8f8f8;
      z-index: 1; }
    .marvel-device.iphone6:after {
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      position: absolute;
      top: 8px;
      content: '';
      left: 8px;
      -webkit-border-radius: 48px;
      border-radius: 48px;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      z-index: 2; }
    .marvel-device.iphone6 .home {
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 68px;
      height: 68px;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 22px;
      z-index: 3;
      background: #303233;
      background: -moz-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #303233), color-stop(50%, #b5b7b9), color-stop(69%, #f0f2f2), color-stop(100%, #303233));
      background: -webkit-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -o-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -ms-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303233', endColorstr='#303233',GradientType=1 ); }
      .marvel-device.iphone6 .home:before {
        background: #f8f8f8;
        position: absolute;
        content: '';
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px; }
    .marvel-device.iphone6 .top-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      top: 68px;
      left: 0; }
    .marvel-device.iphone6 .bottom-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      bottom: 68px;
      left: 0; }
    .marvel-device.iphone6 .sleep {
      position: absolute;
      top: 190px;
      right: -4px;
      width: 4px;
      height: 66px;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px;
      background: #d9dbdc; }
    .marvel-device.iphone6 .volume {
      position: absolute;
      left: -4px;
      top: 188px;
      z-index: 0;
      height: 66px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #d9dbdc; }
      .marvel-device.iphone6 .volume:before {
        position: absolute;
        left: 2px;
        top: -78px;
        height: 40px;
        width: 2px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone6 .volume:after {
        position: absolute;
        left: 0px;
        top: 82px;
        height: 66px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone6 .camera {
      background: #3c3d3d;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 24px;
      left: 50%;
      margin-left: -6px;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      z-index: 3; }
    .marvel-device.iphone6 .sensor {
      background: #3c3d3d;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 49px;
      left: 134px;
      z-index: 3;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.iphone6 .speaker {
      background: #292728;
      width: 70px;
      height: 6px;
      position: absolute;
      top: 54px;
      left: 50%;
      margin-left: -35px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      z-index: 3; }
    .marvel-device.iphone6.gold {
      background: #f9e7d3; }
      .marvel-device.iphone6.gold .top-bar, .marvel-device.iphone6.gold .bottom-bar {
        background: white; }
      .marvel-device.iphone6.gold .sleep, .marvel-device.iphone6.gold .volume {
        background: #f9e7d3; }
      .marvel-device.iphone6.gold .home {
        background: #cebba9;
        background: -moz-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #cebba9), color-stop(50%, #f9e7d3), color-stop(100%, #cebba9));
        background: -webkit-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -o-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -ms-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebba9', endColorstr='#cebba9',GradientType=1 ); }
    .marvel-device.iphone6.black {
      background: #464646;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7);
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); }
      .marvel-device.iphone6.black:before {
        background: #080808; }
      .marvel-device.iphone6.black:after {
        -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121; }
      .marvel-device.iphone6.black .top-bar, .marvel-device.iphone6.black .bottom-bar {
        background: #212121; }
      .marvel-device.iphone6.black .volume, .marvel-device.iphone6.black .sleep {
        background: #464646; }
      .marvel-device.iphone6.black .camera {
        background: #080808; }
      .marvel-device.iphone6.black .home {
        background: #080808;
        background: -moz-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #080808), color-stop(50%, #464646), color-stop(100%, #080808));
        background: -webkit-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -o-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -ms-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080808', endColorstr='#080808',GradientType=1 ); }
        .marvel-device.iphone6.black .home:before {
          background: #080808; }
    .marvel-device.iphone6.landscape {
      padding: 24px 105px;
      height: 375px;
      width: 667px; }
      .marvel-device.iphone6.landscape .sleep {
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;
        right: 190px;
        height: 4px;
        width: 66px; }
      .marvel-device.iphone6.landscape .volume {
        width: 66px;
        height: 4px;
        top: -4px;
        left: calc(100% - 188px - 66px);
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6.landscape .volume:before {
          width: 40px;
          height: 2px;
          top: 2px;
          right: -78px;
          left: auto;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6.landscape .volume:after {
          left: -82px;
          width: 66px;
          height: 4px;
          top: 0;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone6.landscape .top-bar {
        width: 14px;
        height: 100%;
        left: calc(100% - 68px -  14px);
        top: 0; }
      .marvel-device.iphone6.landscape .bottom-bar {
        width: 14px;
        height: 100%;
        left: 68px;
        top: 0; }
      .marvel-device.iphone6.landscape .home {
        top: 50%;
        margin-top: -34px;
        margin-left: 0;
        left: 22px; }
      .marvel-device.iphone6.landscape .sensor {
        top: 134px;
        left: calc(100% - 49px - 16px); }
      .marvel-device.iphone6.landscape .speaker {
        height: 70px;
        width: 6px;
        left: calc(100% - 54px - 6px);
        top: 50%;
        margin-left: 0px;
        margin-top: -35px; }
      .marvel-device.iphone6.landscape .camera {
        left: calc(100% - 32px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone6plus {
    width: 414px;
    height: 736px;
    padding: 112px 26px;
    background: #d9dbdc;
    -webkit-border-radius: 56px;
    border-radius: 56px;
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone6plus:before {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      position: absolute;
      top: 6px;
      content: '';
      left: 6px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background: #f8f8f8;
      z-index: 1; }
    .marvel-device.iphone6plus:after {
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      position: absolute;
      top: 8px;
      content: '';
      left: 8px;
      -webkit-border-radius: 48px;
      border-radius: 48px;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      z-index: 2; }
    .marvel-device.iphone6plus .home {
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 68px;
      height: 68px;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 24px;
      z-index: 3;
      background: #303233;
      background: -moz-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #303233), color-stop(50%, #b5b7b9), color-stop(69%, #f0f2f2), color-stop(100%, #303233));
      background: -webkit-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -o-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -ms-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303233', endColorstr='#303233',GradientType=1 ); }
      .marvel-device.iphone6plus .home:before {
        background: #f8f8f8;
        position: absolute;
        content: '';
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px; }
    .marvel-device.iphone6plus .top-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      top: 68px;
      left: 0; }
    .marvel-device.iphone6plus .bottom-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      bottom: 68px;
      left: 0; }
    .marvel-device.iphone6plus .sleep {
      position: absolute;
      top: 190px;
      right: -4px;
      width: 4px;
      height: 66px;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px;
      background: #d9dbdc; }
    .marvel-device.iphone6plus .volume {
      position: absolute;
      left: -4px;
      top: 188px;
      z-index: 0;
      height: 66px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #d9dbdc; }
      .marvel-device.iphone6plus .volume:before {
        position: absolute;
        left: 2px;
        top: -78px;
        height: 40px;
        width: 2px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone6plus .volume:after {
        position: absolute;
        left: 0px;
        top: 82px;
        height: 66px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone6plus .camera {
      background: #3c3d3d;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 29px;
      left: 50%;
      margin-left: -6px;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      z-index: 3; }
    .marvel-device.iphone6plus .sensor {
      background: #3c3d3d;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 54px;
      left: 154px;
      z-index: 3;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.iphone6plus .speaker {
      background: #292728;
      width: 70px;
      height: 6px;
      position: absolute;
      top: 59px;
      left: 50%;
      margin-left: -35px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      z-index: 3; }
    .marvel-device.iphone6plus.gold {
      background: #f9e7d3; }
      .marvel-device.iphone6plus.gold .top-bar, .marvel-device.iphone6plus.gold .bottom-bar {
        background: white; }
      .marvel-device.iphone6plus.gold .sleep, .marvel-device.iphone6plus.gold .volume {
        background: #f9e7d3; }
      .marvel-device.iphone6plus.gold .home {
        background: #cebba9;
        background: -moz-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #cebba9), color-stop(50%, #f9e7d3), color-stop(100%, #cebba9));
        background: -webkit-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -o-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -ms-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebba9', endColorstr='#cebba9',GradientType=1 ); }
    .marvel-device.iphone6plus.black {
      background: #464646;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7);
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); }
      .marvel-device.iphone6plus.black:before {
        background: #080808; }
      .marvel-device.iphone6plus.black:after {
        -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121; }
      .marvel-device.iphone6plus.black .top-bar, .marvel-device.iphone6plus.black .bottom-bar {
        background: #212121; }
      .marvel-device.iphone6plus.black .volume, .marvel-device.iphone6plus.black .sleep {
        background: #464646; }
      .marvel-device.iphone6plus.black .camera {
        background: #080808; }
      .marvel-device.iphone6plus.black .home {
        background: #080808;
        background: -moz-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #080808), color-stop(50%, #464646), color-stop(100%, #080808));
        background: -webkit-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -o-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -ms-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080808', endColorstr='#080808',GradientType=1 ); }
        .marvel-device.iphone6plus.black .home:before {
          background: #080808; }
    .marvel-device.iphone6plus.landscape {
      padding: 26px 112px;
      height: 414px;
      width: 736px; }
      .marvel-device.iphone6plus.landscape .sleep {
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;
        right: 190px;
        height: 4px;
        width: 66px; }
      .marvel-device.iphone6plus.landscape .volume {
        width: 66px;
        height: 4px;
        top: -4px;
        left: calc(100% - 188px - 66px);
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6plus.landscape .volume:before {
          width: 40px;
          height: 2px;
          top: 2px;
          right: -78px;
          left: auto;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6plus.landscape .volume:after {
          left: -82px;
          width: 66px;
          height: 4px;
          top: 0;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone6plus.landscape .top-bar {
        width: 14px;
        height: 100%;
        left: calc(100% - 68px -  14px);
        top: 0; }
      .marvel-device.iphone6plus.landscape .bottom-bar {
        width: 14px;
        height: 100%;
        left: 68px;
        top: 0; }
      .marvel-device.iphone6plus.landscape .home {
        top: 50%;
        margin-top: -34px;
        margin-left: 0;
        left: 24px; }
      .marvel-device.iphone6plus.landscape .sensor {
        top: 154px;
        left: calc(100% - 54px - 16px); }
      .marvel-device.iphone6plus.landscape .speaker {
        height: 70px;
        width: 6px;
        left: calc(100% - 59px - 6px);
        top: 50%;
        margin-left: 0px;
        margin-top: -35px; }
      .marvel-device.iphone6plus.landscape .camera {
        left: calc(100% - 29px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone5s, .marvel-device.iphone5c {
    padding: 105px 22px;
    background: #2c2b2c;
    width: 320px;
    height: 568px;
    -webkit-border-radius: 50px;
    border-radius: 50px; }
    .marvel-device.iphone5s:before, .marvel-device.iphone5c:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      content: '';
      left: 4px;
      -webkit-border-radius: 46px;
      border-radius: 46px;
      background: #1e1e1e;
      z-index: 1; }
    .marvel-device.iphone5s .sleep, .marvel-device.iphone5c .sleep {
      position: absolute;
      top: -4px;
      right: 60px;
      width: 60px;
      height: 4px;
      -webkit-border-radius: 2px 2px 0px 0px;
      border-radius: 2px 2px 0px 0px;
      background: #282727; }
    .marvel-device.iphone5s .volume, .marvel-device.iphone5c .volume {
      position: absolute;
      left: -4px;
      top: 180px;
      z-index: 0;
      height: 27px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #282727; }
      .marvel-device.iphone5s .volume:before, .marvel-device.iphone5c .volume:before {
        position: absolute;
        left: 0px;
        top: -75px;
        height: 35px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone5s .volume:after, .marvel-device.iphone5c .volume:after {
        position: absolute;
        left: 0px;
        bottom: -64px;
        height: 27px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone5s .camera, .marvel-device.iphone5c .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 32px;
      left: 50%;
      margin-left: -5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.iphone5s .sensor, .marvel-device.iphone5c .sensor {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 60px;
      left: 160px;
      z-index: 3;
      margin-left: -32px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.iphone5s .speaker, .marvel-device.iphone5c .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 60px;
      left: 50%;
      margin-left: -32px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.iphone5s.landscape, .marvel-device.iphone5c.landscape {
      padding: 22px 105px;
      height: 320px;
      width: 568px; }
      .marvel-device.iphone5s.landscape .sleep, .marvel-device.iphone5c.landscape .sleep {
        right: -4px;
        top: calc(100% - 120px);
        height: 60px;
        width: 4px;
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.iphone5s.landscape .volume, .marvel-device.iphone5c.landscape .volume {
        width: 27px;
        height: 4px;
        top: -4px;
        left: calc(100% - 180px);
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone5s.landscape .volume:before, .marvel-device.iphone5c.landscape .volume:before {
          width: 35px;
          height: 4px;
          top: 0px;
          right: -75px;
          left: auto;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone5s.landscape .volume:after, .marvel-device.iphone5c.landscape .volume:after {
          bottom: 0px;
          left: -64px;
          z-index: 999;
          height: 4px;
          width: 27px;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone5s.landscape .sensor, .marvel-device.iphone5c.landscape .sensor {
        top: 160px;
        left: calc(100% - 60px);
        margin-left: 0px;
        margin-top: -32px; }
      .marvel-device.iphone5s.landscape .speaker, .marvel-device.iphone5c.landscape .speaker {
        height: 64px;
        width: 10px;
        left: calc(100% - 60px);
        top: 50%;
        margin-left: 0px;
        margin-top: -32px; }
      .marvel-device.iphone5s.landscape .camera, .marvel-device.iphone5c.landscape .camera {
        left: calc(100% - 32px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone5s .home {
    -moz-border-radius: 36px;
    -webkit-border-radius: 36px;
    border-radius: 36px;
    width: 68px;
    -webkit-box-shadow: inset 0 0 0 4px #2c2b2c;
    box-shadow: inset 0 0 0 4px #2c2b2c;
    height: 68px;
    position: absolute;
    left: 50%;
    margin-left: -34px;
    bottom: 19px;
    z-index: 3; }
  .marvel-device.iphone5s .top-bar {
    top: 70px;
    position: absolute;
    left: 0; }
  .marvel-device.iphone5s .bottom-bar {
    bottom: 70px;
    position: absolute;
    left: 0; }
  .marvel-device.iphone5s.landscape .home {
    left: 19px;
    bottom: 50%;
    margin-bottom: -34px;
    margin-left: 0px; }
  .marvel-device.iphone5s.landscape .top-bar {
    left: 70px;
    top: 0px;
    width: 3px;
    height: 100%; }
  .marvel-device.iphone5s.landscape .bottom-bar {
    right: 70px;
    left: auto;
    bottom: 0px;
    width: 3px;
    height: 100%; }
  .marvel-device.iphone5s.silver {
    background: #bcbcbc; }
    .marvel-device.iphone5s.silver:before {
      background: #fcfcfc; }
    .marvel-device.iphone5s.silver .volume, .marvel-device.iphone5s.silver .sleep {
      background: #d6d6d6; }
    .marvel-device.iphone5s.silver .top-bar, .marvel-device.iphone5s.silver .bottom-bar {
      background: #eaebec; }
    .marvel-device.iphone5s.silver .home {
      -webkit-box-shadow: inset 0 0 0 4px #bcbcbc;
      box-shadow: inset 0 0 0 4px #bcbcbc; }
  .marvel-device.iphone5s.gold {
    background: #f9e7d3; }
    .marvel-device.iphone5s.gold:before {
      background: #fcfcfc; }
    .marvel-device.iphone5s.gold .volume, .marvel-device.iphone5s.gold .sleep {
      background: #f9e7d3; }
    .marvel-device.iphone5s.gold .top-bar, .marvel-device.iphone5s.gold .bottom-bar {
      background: white; }
    .marvel-device.iphone5s.gold .home {
      -webkit-box-shadow: inset 0 0 0 4px #f9e7d3;
      box-shadow: inset 0 0 0 4px #f9e7d3; }
  .marvel-device.iphone5c {
    background: white;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone5c .top-bar, .marvel-device.iphone5c .bottom-bar {
      display: none; }
    .marvel-device.iphone5c .home {
      background: #242324;
      -moz-border-radius: 36px;
      -webkit-border-radius: 36px;
      border-radius: 36px;
      width: 68px;
      height: 68px;
      z-index: 3;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 19px; }
      .marvel-device.iphone5c .home:after {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px; }
    .marvel-device.iphone5c.landscape .home {
      left: 19px;
      bottom: 50%;
      margin-bottom: -34px;
      margin-left: 0px; }
    .marvel-device.iphone5c .volume, .marvel-device.iphone5c .sleep {
      background: #dddddd; }
    .marvel-device.iphone5c.red {
      background: #f96b6c; }
      .marvel-device.iphone5c.red .volume, .marvel-device.iphone5c.red .sleep {
        background: #ed5758; }
    .marvel-device.iphone5c.yellow {
      background: #f2dc60; }
      .marvel-device.iphone5c.yellow .volume, .marvel-device.iphone5c.yellow .sleep {
        background: #e5ce4c; }
    .marvel-device.iphone5c.green {
      background: #97e563; }
      .marvel-device.iphone5c.green .volume, .marvel-device.iphone5c.green .sleep {
        background: #85d94d; }
    .marvel-device.iphone5c.blue {
      background: #33a2db; }
      .marvel-device.iphone5c.blue .volume, .marvel-device.iphone5c.blue .sleep {
        background: #2694cd; }
  .marvel-device.iphone4s {
    padding: 129px 27px;
    width: 320px;
    height: 480px;
    background: #686868;
    -webkit-border-radius: 54px;
    border-radius: 54px; }
    .marvel-device.iphone4s:before {
      content: '';
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
      z-index: 1;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background: #1e1e1e; }
    .marvel-device.iphone4s .top-bar {
      top: 60px;
      position: absolute;
      left: 0; }
    .marvel-device.iphone4s .bottom-bar {
      bottom: 90px;
      position: absolute;
      left: 0; }
    .marvel-device.iphone4s .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 72px;
      left: 134px;
      z-index: 3;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.iphone4s .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 72px;
      left: 50%;
      z-index: 3;
      margin-left: -32px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.iphone4s .sensor {
      background: #292728;
      width: 40px;
      height: 10px;
      position: absolute;
      top: 36px;
      left: 50%;
      z-index: 3;
      margin-left: -20px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.iphone4s .home {
      background: #242324;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 72px;
      height: 72px;
      z-index: 3;
      position: absolute;
      left: 50%;
      margin-left: -36px;
      bottom: 30px; }
      .marvel-device.iphone4s .home:after {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px; }
    .marvel-device.iphone4s .sleep {
      position: absolute;
      top: -4px;
      right: 60px;
      width: 60px;
      height: 4px;
      -webkit-border-radius: 2px 2px 0px 0px;
      border-radius: 2px 2px 0px 0px;
      background: #4D4D4D; }
    .marvel-device.iphone4s .volume {
      position: absolute;
      left: -4px;
      top: 160px;
      height: 27px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #4D4D4D; }
      .marvel-device.iphone4s .volume:before {
        position: absolute;
        left: 0px;
        top: -70px;
        height: 35px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone4s .volume:after {
        position: absolute;
        left: 0px;
        bottom: -64px;
        height: 27px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone4s.landscape {
      padding: 27px 129px;
      height: 320px;
      width: 480px; }
      .marvel-device.iphone4s.landscape .bottom-bar {
        left: 90px;
        bottom: 0px;
        height: 100%;
        width: 3px; }
      .marvel-device.iphone4s.landscape .top-bar {
        left: calc(100% - 60px);
        top: 0px;
        height: 100%;
        width: 3px; }
      .marvel-device.iphone4s.landscape .camera {
        top: 134px;
        left: calc(100% - 72px);
        margin-left: 0; }
      .marvel-device.iphone4s.landscape .speaker {
        top: 50%;
        margin-left: 0;
        margin-top: -32px;
        left: calc(100% - 72px);
        width: 10px;
        height: 64px; }
      .marvel-device.iphone4s.landscape .sensor {
        height: 40px;
        width: 10px;
        left: calc(100% - 36px);
        top: 50%;
        margin-left: 0;
        margin-top: -20px; }
      .marvel-device.iphone4s.landscape .home {
        left: 30px;
        bottom: 50%;
        margin-left: 0;
        margin-bottom: -36px; }
      .marvel-device.iphone4s.landscape .sleep {
        height: 60px;
        width: 4px;
        right: -4px;
        top: calc(100% - 120px);
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.iphone4s.landscape .volume {
        top: -4px;
        left: calc(100% - 187px);
        height: 4px;
        width: 27px;
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone4s.landscape .volume:before {
          right: -70px;
          left: auto;
          top: 0px;
          width: 35px;
          height: 4px;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone4s.landscape .volume:after {
          width: 27px;
          height: 4px;
          bottom: 0px;
          left: -64px;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
    .marvel-device.iphone4s.silver {
      background: #bcbcbc; }
      .marvel-device.iphone4s.silver:before {
        background: #fcfcfc; }
      .marvel-device.iphone4s.silver .home {
        background: #fcfcfc;
        -webkit-box-shadow: inset 0 0 0 1px #bcbcbc;
        box-shadow: inset 0 0 0 1px #bcbcbc; }
        .marvel-device.iphone4s.silver .home:after {
          border: 1px solid rgba(0, 0, 0, 0.2); }
      .marvel-device.iphone4s.silver .volume, .marvel-device.iphone4s.silver .sleep {
        background: #d6d6d6; }
  .marvel-device.nexus5 {
    padding: 50px 15px 50px 15px;
    width: 320px;
    height: 568px;
    background: #1e1e1e;
    -webkit-border-radius: 20px;
    border-radius: 20px; }
    .marvel-device.nexus5:before {
      -webkit-border-radius: 600px / 50px;
      border-radius: 600px / 50px;
      background: inherit;
      content: '';
      top: 0;
      position: absolute;
      height: 103.1%;
      width: calc(100% - 26px);
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%); }
    .marvel-device.nexus5 .top-bar {
      width: calc(100% - 8px);
      height: calc(100% - 6px);
      position: absolute;
      top: 3px;
      left: 4px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      background: #181818; }
      .marvel-device.nexus5 .top-bar:before {
        -webkit-border-radius: 600px / 50px;
        border-radius: 600px / 50px;
        background: inherit;
        content: '';
        top: 0;
        position: absolute;
        height: 103.0%;
        width: calc(100% - 26px);
        top: 50%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%); }
    .marvel-device.nexus5 .bottom-bar {
      display: none; }
    .marvel-device.nexus5 .sleep {
      width: 3px;
      position: absolute;
      left: -3px;
      top: 110px;
      height: 100px;
      background: inherit;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px; }
    .marvel-device.nexus5 .volume {
      width: 3px;
      position: absolute;
      right: -3px;
      top: 70px;
      height: 45px;
      background: inherit;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px; }
    .marvel-device.nexus5 .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 18px;
      left: 50%;
      z-index: 3;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
      .marvel-device.nexus5 .camera:before {
        background: #3c3d3d;
        width: 6px;
        height: 6px;
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        left: -100px;
        z-index: 3;
        -webkit-border-radius: 100%;
        border-radius: 100%; }
    .marvel-device.nexus5.landscape {
      padding: 15px 50px 15px 50px;
      height: 320px;
      width: 568px; }
      .marvel-device.nexus5.landscape:before {
        width: 103.1%;
        height: calc(100% - 26px);
        -webkit-border-radius: 50px / 600px;
        border-radius: 50px / 600px; }
      .marvel-device.nexus5.landscape .top-bar {
        left: 3px;
        top: 4px;
        height: calc(100% - 8px);
        width: calc(100% - 6px); }
        .marvel-device.nexus5.landscape .top-bar:before {
          width: 103%;
          height: calc(100% - 26px);
          -webkit-border-radius: 50px / 600px;
          border-radius: 50px / 600px; }
      .marvel-device.nexus5.landscape .sleep {
        height: 3px;
        width: 100px;
        left: calc(100% - 210px);
        top: -3px;
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
      .marvel-device.nexus5.landscape .volume {
        height: 3px;
        width: 45px;
        right: 70px;
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px; }
      .marvel-device.nexus5.landscape .camera {
        top: 50%;
        left: calc(100% - 18px);
        margin-left: 0;
        margin-top: -5px; }
        .marvel-device.nexus5.landscape .camera:before {
          top: -100px;
          left: 2px; }
  .marvel-device.s5 {
    padding: 60px 18px;
    -webkit-border-radius: 42px;
    border-radius: 42px;
    width: 320px;
    height: 568px;
    background: #bcbcbc; }
    .marvel-device.s5:before, .marvel-device.s5:after {
      width: calc(100% - 52px);
      content: '';
      display: block;
      height: 26px;
      background: inherit;
      position: absolute;
      -webkit-border-radius: 500px / 40px;
      border-radius: 500px / 40px;
      left: 50%;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .marvel-device.s5:before {
      top: -7px; }
    .marvel-device.s5:after {
      bottom: -7px; }
    .marvel-device.s5 .bottom-bar {
      display: none; }
    .marvel-device.s5 .top-bar {
      -webkit-border-radius: 37px;
      border-radius: 37px;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      top: 5px;
      left: 5px;
      background: radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px;
      background-color: white;
      background-size: 4px 4px;
      background-position: center;
      z-index: 2;
      position: absolute; }
      .marvel-device.s5 .top-bar:before, .marvel-device.s5 .top-bar:after {
        width: calc(100% - 48px);
        content: '';
        display: block;
        height: 26px;
        background: inherit;
        position: absolute;
        -webkit-border-radius: 500px / 40px;
        border-radius: 500px / 40px;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
      .marvel-device.s5 .top-bar:before {
        top: -7px; }
      .marvel-device.s5 .top-bar:after {
        bottom: -7px; }
    .marvel-device.s5 .sleep {
      width: 3px;
      position: absolute;
      left: -3px;
      top: 100px;
      height: 100px;
      background: #cecece;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px; }
    .marvel-device.s5 .speaker {
      width: 68px;
      height: 8px;
      position: absolute;
      top: 20px;
      display: block;
      z-index: 3;
      left: 50%;
      margin-left: -34px;
      background-color: #bcbcbc;
      background-position: top left;
      -webkit-border-radius: 4px;
      border-radius: 4px; }
    .marvel-device.s5 .sensor {
      display: block;
      position: absolute;
      top: 20px;
      right: 110px;
      background: #3c3d3d;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      z-index: 3; }
      .marvel-device.s5 .sensor:after {
        display: block;
        content: '';
        position: absolute;
        top: 0px;
        right: 12px;
        background: #3c3d3d;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        z-index: 3; }
    .marvel-device.s5 .camera {
      display: block;
      position: absolute;
      top: 24px;
      right: 42px;
      background: black;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 10px;
      height: 10px;
      z-index: 3; }
      .marvel-device.s5 .camera:before {
        width: 4px;
        height: 4px;
        background: #3c3d3d;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -2px;
        margin-left: -2px; }
    .marvel-device.s5 .home {
      position: absolute;
      z-index: 3;
      bottom: 17px;
      left: 50%;
      width: 70px;
      height: 20px;
      background: white;
      -webkit-border-radius: 18px;
      border-radius: 18px;
      display: block;
      margin-left: -35px;
      border: 2px solid black; }
    .marvel-device.s5.landscape {
      padding: 18px 60px;
      height: 320px;
      width: 568px; }
      .marvel-device.s5.landscape:before, .marvel-device.s5.landscape:after {
        height: calc(100% - 52px);
        width: 26px;
        -webkit-border-radius: 40px / 500px;
        border-radius: 40px / 500px;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .marvel-device.s5.landscape:before {
        top: 50%;
        left: -7px; }
      .marvel-device.s5.landscape:after {
        top: 50%;
        left: auto;
        right: -7px; }
      .marvel-device.s5.landscape .top-bar:before, .marvel-device.s5.landscape .top-bar:after {
        width: 26px;
        height: calc(100% - 48px);
        -webkit-border-radius: 40px / 500px;
        border-radius: 40px / 500px;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .marvel-device.s5.landscape .top-bar:before {
        right: -7px;
        top: 50%;
        left: auto; }
      .marvel-device.s5.landscape .top-bar:after {
        left: -7px;
        top: 50%;
        right: auto; }
      .marvel-device.s5.landscape .sleep {
        height: 3px;
        width: 100px;
        left: calc(100% - 200px);
        top: -3px;
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
      .marvel-device.s5.landscape .speaker {
        height: 68px;
        width: 8px;
        left: calc(100% - 20px);
        top: 50%;
        margin-left: 0;
        margin-top: -34px; }
      .marvel-device.s5.landscape .sensor {
        right: 20px;
        top: calc(100% - 110px); }
        .marvel-device.s5.landscape .sensor:after {
          left: -12px;
          right: 0px; }
      .marvel-device.s5.landscape .camera {
        top: calc(100% - 42px);
        right: 24px; }
      .marvel-device.s5.landscape .home {
        width: 20px;
        height: 70px;
        bottom: 50%;
        margin-bottom: -35px;
        margin-left: 0;
        left: 17px; }
    .marvel-device.s5.black {
      background: #1e1e1e; }
      .marvel-device.s5.black .speaker {
        background: black; }
      .marvel-device.s5.black .sleep {
        background: #1e1e1e; }
      .marvel-device.s5.black .top-bar {
        background: radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px;
        background-color: #2c2b2c;
        background-size: 4px 4px; }
      .marvel-device.s5.black .home {
        background: #2c2b2c; }
  .marvel-device.lumia920 {
    padding: 80px 35px 125px 35px;
    background: #ffdd00;
    width: 320px;
    height: 533px;
    -moz-border-radius: 40px / 3px;
    -webkit-border-radius: 40px / 3px;
    border-radius: 40px / 3px; }
    .marvel-device.lumia920 .bottom-bar {
      display: none; }
    .marvel-device.lumia920 .top-bar {
      width: calc(100% - 24px);
      height: calc(100% - 32px);
      position: absolute;
      top: 16px;
      left: 12px;
      -moz-border-radius: 24px;
      -webkit-border-radius: 24px;
      border-radius: 24px;
      background: black;
      z-index: 1; }
      .marvel-device.lumia920 .top-bar:before {
        background: #1e1e1e;
        display: block;
        content: '';
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        top: 2px;
        left: 2px;
        position: absolute;
        -moz-border-radius: 22px;
        -webkit-border-radius: 22px;
        border-radius: 22px; }
    .marvel-device.lumia920 .volume {
      width: 3px;
      position: absolute;
      top: 130px;
      height: 100px;
      background: #1e1e1e;
      right: -3px;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px; }
      .marvel-device.lumia920 .volume:before {
        width: 3px;
        position: absolute;
        top: 190px;
        content: '';
        display: block;
        height: 50px;
        background: inherit;
        right: 0px;
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.lumia920 .volume:after {
        width: 3px;
        position: absolute;
        top: 460px;
        content: '';
        display: block;
        height: 50px;
        background: inherit;
        right: 0px;
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
    .marvel-device.lumia920 .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 34px;
      right: 130px;
      z-index: 5;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.lumia920 .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 38px;
      left: 50%;
      margin-left: -32px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.lumia920.landscape {
      padding: 35px 80px 35px 125px;
      height: 320px;
      width: 568px;
      -moz-border-radius: 2px / 100px;
      -webkit-border-radius: 2px / 100px;
      border-radius: 2px / 100px; }
      .marvel-device.lumia920.landscape .top-bar {
        height: calc(100% - 24px);
        width: calc(100% - 32px);
        left: 16px;
        top: 12px; }
      .marvel-device.lumia920.landscape .volume {
        height: 3px;
        right: 130px;
        width: 100px;
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px; }
        .marvel-device.lumia920.landscape .volume:before {
          height: 3px;
          right: 190px;
          top: 0px;
          width: 50px;
          -webkit-border-radius: 0px 0px 2px 2px;
          border-radius: 0px 0px 2px 2px; }
        .marvel-device.lumia920.landscape .volume:after {
          height: 3px;
          right: 430px;
          top: 0px;
          width: 50px;
          -webkit-border-radius: 0px 0px 2px 2px;
          border-radius: 0px 0px 2px 2px; }
      .marvel-device.lumia920.landscape .camera {
        right: 30px;
        top: calc(100% - 140px); }
      .marvel-device.lumia920.landscape .speaker {
        width: 10px;
        height: 64px;
        top: 50%;
        margin-left: 0;
        margin-top: -32px;
        left: calc(100% - 48px); }
    .marvel-device.lumia920.black {
      background: black; }
    .marvel-device.lumia920.white {
      background: white;
      -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.lumia920.blue {
      background: #00acdd; }
    .marvel-device.lumia920.red {
      background: #CC3E32; }
  .marvel-device.htc-one {
    padding: 72px 25px 100px 25px;
    width: 320px;
    height: 568px;
    background: #bebebe;
    -webkit-border-radius: 34px;
    border-radius: 34px; }
    .marvel-device.htc-one:before {
      content: '';
      display: block;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      position: absolute;
      top: 2px;
      left: 2px;
      background: #adadad;
      -webkit-border-radius: 32px;
      border-radius: 32px; }
    .marvel-device.htc-one:after {
      content: '';
      display: block;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
      background: #eeeeee;
      -webkit-border-radius: 30px;
      border-radius: 30px; }
    .marvel-device.htc-one .top-bar {
      width: calc(100% - 4px);
      height: 635px;
      position: absolute;
      background: #424242;
      top: 50px;
      z-index: 1;
      left: 2px; }
      .marvel-device.htc-one .top-bar:before {
        content: '';
        position: absolute;
        width: calc(100% - 4px);
        height: 100%;
        position: absolute;
        background: black;
        top: 0px;
        z-index: 1;
        left: 2px; }
    .marvel-device.htc-one .bottom-bar {
      display: none; }
    .marvel-device.htc-one .speaker {
      height: 16px;
      width: 216px;
      display: block;
      position: absolute;
      top: 22px;
      z-index: 2;
      left: 50%;
      margin-left: -108px;
      background: radial-gradient(#343434 25%, transparent 50%) 0 0, radial-gradient(#343434 25%, transparent 50%) 4px 4px;
      background-size: 4px 4px;
      background-position: top left; }
      .marvel-device.htc-one .speaker:after {
        content: '';
        height: 16px;
        width: 216px;
        display: block;
        position: absolute;
        top: 676px;
        z-index: 2;
        left: 50%;
        margin-left: -108px;
        background: inherit; }
    .marvel-device.htc-one .camera {
      display: block;
      position: absolute;
      top: 18px;
      right: 38px;
      background: #3c3d3d;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 24px;
      height: 24px;
      z-index: 3; }
      .marvel-device.htc-one .camera:before {
        width: 8px;
        height: 8px;
        background: black;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -4px; }
    .marvel-device.htc-one .sensor {
      display: block;
      position: absolute;
      top: 29px;
      left: 60px;
      background: #3c3d3d;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      z-index: 3; }
      .marvel-device.htc-one .sensor:after {
        display: block;
        content: '';
        position: absolute;
        top: 0px;
        right: 12px;
        background: #3c3d3d;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        z-index: 3; }
    .marvel-device.htc-one.landscape {
      padding: 25px 72px 25px 100px;
      height: 320px;
      width: 568px; }
      .marvel-device.htc-one.landscape .top-bar {
        height: calc(100% - 4px);
        width: 635px;
        left: calc(100% - 685px);
        top: 2px; }
      .marvel-device.htc-one.landscape .speaker {
        width: 16px;
        height: 216px;
        left: calc(100% - 38px);
        top: 50%;
        margin-left: 0px;
        margin-top: -108px; }
        .marvel-device.htc-one.landscape .speaker:after {
          width: 16px;
          height: 216px;
          left: calc(100% - 692px);
          top: 50%;
          margin-left: 0;
          margin-top: -108px; }
      .marvel-device.htc-one.landscape .camera {
        right: 18px;
        top: calc(100% - 38px); }
      .marvel-device.htc-one.landscape .sensor {
        left: calc(100% - 29px);
        top: 60px; }
        .marvel-device.htc-one.landscape .sensor :after {
          right: 0;
          top: -12px; }
  .marvel-device.ipad {
    width: 576px;
    height: 768px;
    padding: 90px 25px;
    background: #242324;
    -webkit-border-radius: 44px;
    border-radius: 44px; }
    .marvel-device.ipad:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      content: '';
      display: block;
      top: 4px;
      left: 4px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      background: #1e1e1e; }
    .marvel-device.ipad .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 44px;
      left: 50%;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.ipad .top-bar, .marvel-device.ipad .bottom-bar {
      display: none; }
    .marvel-device.ipad .home {
      background: #242324;
      -webkit-border-radius: 36px;
      border-radius: 36px;
      width: 50px;
      height: 50px;
      position: absolute;
      left: 50%;
      margin-left: -25px;
      bottom: 22px; }
      .marvel-device.ipad .home:after {
        width: 15px;
        height: 15px;
        margin-top: -8px;
        margin-left: -8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%; }
    .marvel-device.ipad.landscape {
      height: 576px;
      width: 768px;
      padding: 25px 90px; }
      .marvel-device.ipad.landscape .camera {
        left: calc(100% - 44px);
        top: 50%;
        margin-left: 0;
        margin-top: -5px; }
      .marvel-device.ipad.landscape .home {
        top: 50%;
        left: 22px;
        margin-left: 0;
        margin-top: -25px; }
    .marvel-device.ipad.silver {
      background: #bcbcbc; }
      .marvel-device.ipad.silver:before {
        background: #fcfcfc; }
      .marvel-device.ipad.silver .home {
        background: #fcfcfc;
        -webkit-box-shadow: inset 0 0 0 1px #bcbcbc;
        box-shadow: inset 0 0 0 1px #bcbcbc; }
        .marvel-device.ipad.silver .home:after {
          border: 1px solid rgba(0, 0, 0, 0.2); }
  .marvel-device.macbook {
    width: 960px;
    height: 600px;
    padding: 44px 44px 76px;
    margin: 0 auto;
    background: #bebebe;
    -webkit-border-radius: 34px;
    border-radius: 34px; }
    .marvel-device.macbook:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      content: '';
      display: block;
      top: 4px;
      left: 4px;
      -webkit-border-radius: 30px;
      border-radius: 30px;
      background: #1e1e1e; }
    .marvel-device.macbook .top-bar {
      width: calc(100% + 2 * 70px);
      height: 40px;
      position: absolute;
      content: '';
      display: block;
      top: 680px;
      left: -70px;
      border-bottom-left-radius: 90px 18px;
      border-bottom-right-radius: 90px 18px;
      background: #bebebe;
      -webkit-box-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);
      -moz-box-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);
      box-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6); }
      .marvel-device.macbook .top-bar:before {
        width: 100%;
        height: 24px;
        content: '';
        display: block;
        top: 0;
        left: 0;
        background: #f0f0f0;
        border-bottom: 2px solid #aaa;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        position: relative; }
      .marvel-device.macbook .top-bar:after {
        width: 16%;
        height: 14px;
        content: '';
        display: block;
        top: 0;
        background: #ddd;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        -webkit-border-radius: 0 0 20px 20px;
        border-radius: 0 0 20px 20px;
        -webkit-box-shadow: inset 0px -3px 10px #999;
        -moz-box-shadow: inset 0px -3px 10px #999;
        box-shadow: inset 0px -3px 10px #999; }
    .marvel-device.macbook .bottom-bar {
      background: transparent;
      width: calc(100% + 2 * 70px);
      height: 26px;
      position: absolute;
      content: '';
      display: block;
      top: 680px;
      left: -70px; }
      .marvel-device.macbook .bottom-bar:before, .marvel-device.macbook .bottom-bar:after {
        height: calc(100% - 2px);
        width: 80px;
        content: '';
        display: block;
        top: 0;
        position: absolute; }
      .marvel-device.macbook .bottom-bar:before {
        left: 0;
        background: #f0f0f0;
        background: -moz-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, #747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), color-stop(100%, #f0f0f0));
        background: -webkit-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);
        background: -o-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);
        background: -ms-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);
        background: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#747474', endColorstr='#f0f0f0', GradientType=1); }
      .marvel-device.macbook .bottom-bar:after {
        right: 0;
        background: #f0f0f0;
        background: -moz-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), color-stop(100%, #747474));
        background: -webkit-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
        background: -o-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
        background: -ms-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
        background: linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#747474', GradientType=1); }
    .marvel-device.macbook .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.macbook .home {
      display: none; }

break_cache_version {
  color: #000001; }

.firefox-error-page {
  width: 600px !important;
  max-width: 95% !important; }

.firefox-error-page p {
  line-height: 1.5;
  font-size: 15px; }
  .firefox-error-page p b {
    font-weight: 600; }

.firefox-error-page img {
  max-width: 100%; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  line-height: 1.25;
  font: inherit;
  vertical-align: baseline;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size-adjust: 0.5; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-y: scroll;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }

body {
  min-height: 100vh; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

a, a:hover, a:focus, a:active {
  text-decoration: none; }

.cf, .feed-item, .feed-item .activity, .channel-item-admin .admin-controls, .user-card-modal .user-card-header, .user-card-modal .activity, .user-card-list .user-card-header, .user-card-list .activity, .qtip .user-card-qtip .user-card-header, .qtip .user-card-qtip .activity, .hero .wrapper, .main-content, .feed section > ul, .profile .feed .grid, .user-block, .site-header, .nav-site, .nav-site > div, .nav-user ul {
  zoom: 1; }
  .cf:before, .feed-item:before, .feed-item .activity:before, .channel-item-admin .admin-controls:before, .user-card-modal .user-card-header:before, .user-card-modal .activity:before, .user-card-list .user-card-header:before, .user-card-list .activity:before, .qtip .user-card-qtip .user-card-header:before, .qtip .user-card-qtip .activity:before, .hero .wrapper:before, .main-content:before, .feed section > ul:before, .profile .feed .grid:before, .user-block:before, .site-header:before, .nav-site:before, .nav-site > div:before, .nav-user ul:before, .cf:after, .feed-item:after, .feed-item .activity:after, .channel-item-admin .admin-controls:after, .user-card-modal .user-card-header:after, .user-card-modal .activity:after, .user-card-list .user-card-header:after, .user-card-list .activity:after, .qtip .user-card-qtip .user-card-header:after, .qtip .user-card-qtip .activity:after, .hero .wrapper:after, .main-content:after, .feed section > ul:after, .profile .feed .grid:after, .user-block:after, .site-header:after, .nav-site:after, .nav-site > div:after, .nav-user ul:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  .cf:after, .feed-item:after, .feed-item .activity:after, .channel-item-admin .admin-controls:after, .user-card-modal .user-card-header:after, .user-card-modal .activity:after, .user-card-list .user-card-header:after, .user-card-list .activity:after, .qtip .user-card-qtip .user-card-header:after, .qtip .user-card-qtip .activity:after, .hero .wrapper:after, .main-content:after, .feed section > ul:after, .profile .feed .grid:after, .user-block:after, .site-header:after, .nav-site:after, .nav-site > div:after, .nav-user ul:after {
    clear: both; }

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

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none; }

*:focus {
  outline: 0; }

::selection {
  background: #d8caf8;
  /* WebKit/Blink Browsers */ }

::-moz-selection {
  background: #d8caf8;
  /* Gecko Browsers */ }

.inline-icon, .widget-card-ph button .icon, .widget-card-ph.answered .state .answered-indicator span, .widget-modal .widget-container .widget-remove span, .widget-card-twitter .actions-block .action, .embed-live-meta--title .blip, .info-block .info-layer .stats-block span .icon, .left-sidebar .sidebar-widget header .pull-down a .icon, .left-sidebar .sidebar-widget header .widget-menu a .icon, .left-sidebar .info-block .info-layer .share-block .twitter-share span, .left-sidebar .info-block .info-layer .share-block .facebook-share span, .left-sidebar .info-block .info-layer .share-block .embed-share span, .left-sidebar .info-block .info-layer .share-block .capture-moment span, .tweet-item .card span .icon, .facebook-item .card span .icon {
  vertical-align: middle;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.contain-image, .header--nav-actions--logo .logo, .permission-tip--action, .meta-link--twitter, .channel--header-profile--cover .settings span, .permissions-gcm--skip, .tag-card--info--selected-mark, .suggested-card--image--img, .props-animation-ex--hands, .btn-dismiss-toast span, .ui-profile-card-actions--follow, .ui-profile-card-actions--more, .ui-profile-card--twitter-link, .card-meta--watchedTime--icon, .card--more-options .icon, .feed-item-card .card-meta--watchedTime--icon, .feed-item-card .card--more-options, .widget-card-ph .user-info-block .upvote .upvote-count .icon, .widget-modal .widget-icon-badge, .close-widget, .widget-card-twitter .user-info-block .user-info .twitter-icon, .widget-card-twitter .actions-block .action, #tweetGifHolder.is-loading, .info-block .info-layer .stats-block span .icon, .embed-control-action span, .icon-camera, .left-sidebar .sidebar-widget header .customize .icon, .left-sidebar .sidebar-widget header .widget-menu .icon, .left-sidebar .sidebar-widget header .widget-menu .widget-icon, .left-sidebar .info-block .info-layer header .edit span, .left-sidebar .info-block .info-layer header .settings span, .left-sidebar .record-button .pause-icon .icon, .chat-message .chat-message-wrapper .avatar-block .messageBadge, .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .floating-star, .floating-star, .tweet-item .card span .icon, .facebook-item .card span .icon, .caller-feels .hands-icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.flex-center, .btn-more, .channel-scrolled--header--more-button, .upcoming-stream--item, .permission-center, .channel-scrolled--header, .channel--header-profile--cover .settings, .fake-notification--graphic, .tag-card--info, .suggested-card--image, .modal, .modal--full-width, .toast-actionable--art, .btn-dismiss-toast, .scheduled-subscribers-attending, .widget-modal, .circle-btn, .circle-btn-red, .legacy-modal-widget, .legacy-modal-widget .widget-modal, .legacy-modal-embed, .legacy-modal-embed .legacy-modal-embed-card, .stream-scheduled, .scheduled-actions, .stream-ended, .info-block .info-layer .topic-block, .embed-control-action, .square-open-seat, .circle-button, .left-sidebar .sidebar-widget header .pull-down, .left-sidebar .sidebar-widget header .customize, .left-sidebar .sidebar-widget header .widget-menu, .left-sidebar .info-block .info-layer header .edit, .left-sidebar .info-block .info-layer header .settings, .left-sidebar .info-block .info-layer .topic-block, .left-sidebar .info-block .info-layer .share-block .embed-share, .left-sidebar .record-button .pause-icon, .right-sidebar .sidebar-header .chat-filters li, .right-sidebar .chat-input .emoji-picker {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.u-cover-image, .channel--header-profile--cover--imageOg,
.channel--header-profile--cover--imageBlurred,
.channel--header-profile--cover--darkenedOverlay {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }

.u-right {
  float: right; }

.u-left {
  float: left; }

.u-clear {
  clear: both; }

.u-last {
  margin-right: 0; }

.no-overflow {
  overflow-y: hidden !important; }

.u-bold {
  font-weight: 600; }

body {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  background-color: transparent;
  overflow: hidden; }

body.embed {
  background-color: black; }

body {
  line-height: 1.25;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f1f1f;
  font-weight: 400;
  word-wrap: break-word; }

.font-size-gargantuan, .hero h1, .legacy-modal-create .close, .create-form .time-container .time-fields input, .legacy-modal-profile .close {
  font-size: 3.75rem; }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-gargantuan, .hero h1, .legacy-modal-create .close, .create-form .time-container .time-fields input, .legacy-modal-profile .close {
      font-size: 2.25rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-gargantuan, .hero h1, .legacy-modal-create .close, .create-form .time-container .time-fields input, .legacy-modal-profile .close {
      font-size: 2rem; } }

.font-size-giant, h1, .create-form .time-container .time-fields, #stream-ended-container .table #ending-info h1, #scheduled-placeholder .table .timer {
  font-size: 2.875rem; }
  @media screen and (min-width: 71.25rem) and (max-width: 90.0625rem) {
    .font-size-giant, h1, .create-form .time-container .time-fields, #stream-ended-container .table #ending-info h1, #scheduled-placeholder .table .timer {
      font-size: 2.25rem; } }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-giant, h1, .create-form .time-container .time-fields, #stream-ended-container .table #ending-info h1, #scheduled-placeholder .table .timer {
      font-size: 2rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-giant, h1, .create-form .time-container .time-fields, #stream-ended-container .table #ending-info h1, #scheduled-placeholder .table .timer {
      font-size: 1.5625rem; } }

.font-size-large, h2, .permission-center--text--action, .welcome-body--subheader--text, .feed-item-card.scheduled-size .title-layer h2, .table-cell .signup h1 {
  font-size: 1.75rem; }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-large, h2, .permission-center--text--action, .welcome-body--subheader--text, .feed-item-card.scheduled-size .title-layer h2, .table-cell .signup h1 {
      font-size: 1.625rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-large, h2, .permission-center--text--action, .welcome-body--subheader--text, .feed-item-card.scheduled-size .title-layer h2, .table-cell .signup h1 {
      font-size: 1.375rem; } }

.font-size-mediumlarge, .channel--header-profile--meta--name, .tag-card--info--name, .profile-user-info .profile-header .username, .blab-info-block .text h1, .create-form .days-container .days-select label, .stream-ended-processing--title, #stream-ended-container .table #ending-info h3, #stream-ended-container .table #ending-info h2 {
  font-size: 1.5rem; }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-mediumlarge, .channel--header-profile--meta--name, .tag-card--info--name, .profile-user-info .profile-header .username, .blab-info-block .text h1, .create-form .days-container .days-select label, .stream-ended-processing--title, #stream-ended-container .table #ending-info h3, #stream-ended-container .table #ending-info h2 {
      font-size: 1.375rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-mediumlarge, .channel--header-profile--meta--name, .tag-card--info--name, .profile-user-info .profile-header .username, .blab-info-block .text h1, .create-form .days-container .days-select label, .stream-ended-processing--title, #stream-ended-container .table #ending-info h3, #stream-ended-container .table #ending-info h2 {
      font-size: 1.375rem; } }

.font-size-medium, h3, h4, .btn-ghost-white, .upcoming-stream--item--title, .popover-dropin-recording-toast p, .welcome-body--subheader--header, .permissions-gcm--actions--btn, .fake-notification--body--title, .step-footer--content--text, .step-footer--content--action, .suggested-card--meta--title, .ios-step--heading--title, .user-card-modal .stats ul li a span, .qtip .user-card-qtip .stats ul li a span, .hero h2, .profile-user-info .stats li a, .profile-navigation li a, .blab-info-block .text h2, .youtube-button.big-button, .user-card-modal .activity .youtube-button.button, .user-card-modal .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-modal .activity button.youtube-button, .user-card-modal .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.feed-item-card--subscribe-button, .user-card-modal .activity .youtube-button.scheduled-action--start-now, .user-card-modal .activity .youtube-button.scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.button-follow, .user-card-list .activity .youtube-button.button, .user-card-list .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-list .activity button.youtube-button, .user-card-list .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.feed-item-card--subscribe-button, .user-card-list .activity .youtube-button.scheduled-action--start-now, .user-card-list .activity .youtube-button.scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.button-follow, .qtip .user-card-qtip .activity .youtube-button.button, .qtip .user-card-qtip .activity .widget-card-ph button.youtube-button, .widget-card-ph .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--start-now, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.button-follow, .profile-user-info .youtube-button.button-follow,
.profile-user-info gs.youtube-button.edit-settin, .chat-input-container textarea, .create-form > ul > li p, .create-form .topic-input, #modal-signup button, .notify-followers-toast .info-block .info p, .notify-followers-toast .notify-success h2, .open-seat-wrapper p, .pending-caller-cell h1, .square-open-seat p {
  font-size: 1.0625rem; }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-medium, h3, h4, .btn-ghost-white, .upcoming-stream--item--title, .popover-dropin-recording-toast p, .welcome-body--subheader--header, .permissions-gcm--actions--btn, .fake-notification--body--title, .step-footer--content--text, .step-footer--content--action, .suggested-card--meta--title, .ios-step--heading--title, .user-card-modal .stats ul li a span, .qtip .user-card-qtip .stats ul li a span, .hero h2, .profile-user-info .stats li a, .profile-navigation li a, .blab-info-block .text h2, .youtube-button.big-button, .user-card-modal .activity .youtube-button.button, .user-card-modal .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-modal .activity button.youtube-button, .user-card-modal .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.feed-item-card--subscribe-button, .user-card-modal .activity .youtube-button.scheduled-action--start-now, .user-card-modal .activity .youtube-button.scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.button-follow, .user-card-list .activity .youtube-button.button, .user-card-list .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-list .activity button.youtube-button, .user-card-list .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.feed-item-card--subscribe-button, .user-card-list .activity .youtube-button.scheduled-action--start-now, .user-card-list .activity .youtube-button.scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.button-follow, .qtip .user-card-qtip .activity .youtube-button.button, .qtip .user-card-qtip .activity .widget-card-ph button.youtube-button, .widget-card-ph .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--start-now, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.button-follow, .profile-user-info .youtube-button.button-follow,
    .profile-user-info gs.youtube-button.edit-settin, .chat-input-container textarea, .create-form > ul > li p, .create-form .topic-input, #modal-signup button, .notify-followers-toast .info-block .info p, .notify-followers-toast .notify-success h2, .open-seat-wrapper p, .pending-caller-cell h1, .square-open-seat p {
      font-size: 1rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-medium, h3, h4, .btn-ghost-white, .upcoming-stream--item--title, .popover-dropin-recording-toast p, .welcome-body--subheader--header, .permissions-gcm--actions--btn, .fake-notification--body--title, .step-footer--content--text, .step-footer--content--action, .suggested-card--meta--title, .ios-step--heading--title, .user-card-modal .stats ul li a span, .qtip .user-card-qtip .stats ul li a span, .hero h2, .profile-user-info .stats li a, .profile-navigation li a, .blab-info-block .text h2, .youtube-button.big-button, .user-card-modal .activity .youtube-button.button, .user-card-modal .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-modal .activity button.youtube-button, .user-card-modal .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.feed-item-card--subscribe-button, .user-card-modal .activity .youtube-button.scheduled-action--start-now, .user-card-modal .activity .youtube-button.scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.button-follow, .user-card-list .activity .youtube-button.button, .user-card-list .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-list .activity button.youtube-button, .user-card-list .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.feed-item-card--subscribe-button, .user-card-list .activity .youtube-button.scheduled-action--start-now, .user-card-list .activity .youtube-button.scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.button-follow, .qtip .user-card-qtip .activity .youtube-button.button, .qtip .user-card-qtip .activity .widget-card-ph button.youtube-button, .widget-card-ph .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--start-now, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.button-follow, .profile-user-info .youtube-button.button-follow,
    .profile-user-info gs.youtube-button.edit-settin, .chat-input-container textarea, .create-form > ul > li p, .create-form .topic-input, #modal-signup button, .notify-followers-toast .info-block .info p, .notify-followers-toast .notify-success h2, .open-seat-wrapper p, .pending-caller-cell h1, .square-open-seat p {
      font-size: 1rem; } }

.font-size-default, h5, .btn, .btn-more, .channel-scrolled--header--more-button, .upcoming-stream--item--notify, .btn-alert, .popover-cancel, .btn-submit, .popover-action, .popover-continue, .alert-dark, .widget-search-linksearch, .popover-dropin, .popover-dropin-recording, .btn-subscribe, .btn-subscribe-large, .channel-scrolled--header--subscribe-button, .widget-search-searchTerm, .header--nav-actions--logo .beta-label, .popover-users--list--item--name, .popover-dropdown--list--item--action, .permission-tip--body--text, .permission-center--text--subline, .channel--header-profile--meta--username, .channel--header-profile--meta--bio, .channel--header-profile--meta--subscribeCount, .tag-card--info--desc, .suggested-card--meta--tag, .suggested-card--meta--description, .suggested-card--actions--follow-btn, .ios-step--heading--text, .ios-step--actions--btn, .toast-actionable--content--text, .btn-toast, .ui-profile-card--fullname, .feed-item .stream-details .info .title, .user-card-modal .bio, .feed-item-small .card .info-layer h2, .user-card-list .bio, .qtip .user-card-qtip .bio, .scheduled-subscribers-attending--text, .widget-card-ph .text p, .widget-card-ph.answered .state .answered-indicator, .widget-card-ph.answered .state .pin-host, .widget-action-button, .hero .twitter-signup, .profile-user-info .bio, .adult-content-warning-container .wrapper .warning-copy-container p, .blab-info-block .text .callers-list, .blab-info-block .text ul li, .blab-info-block .text ul span, .stats-card nav ul li, .button, .widget-card-ph button, .notify-followers-toast .info-block .actions button, .cohost-toast .info-block .actions button, .feed-item-card--subscribe-button, .scheduled-action--start-now, .scheduled-action--edit, .pending-caller-cell .button-container button, .rounded-button, .legacy-popover li a, .dropdown li a, .channel--header-profile--cover .settings .stream-settings-dropdown li a, .scheduled-actions-calendar ul li a, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li a, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li a, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li a, .legacy-modal-url .card textarea, .legacy-modal-settings .settings input,
.legacy-modal-settings .settings label,
.legacy-modal-settings .settings h2, .create-form .error-message:before, .qtip.tool-tip p, .stream-scheduled-datestamp, .stream-ended-processing--text, #stream-ended-container .table #ending-info ul li a, #stream-ended-container .table #ending-info ul li .feels-count, .left-sidebar .sidebar-widget header .twitter-button, .left-sidebar .sidebar-widget header .facebook-button, .left-sidebar .sidebar-widget header .pull-down a, .left-sidebar .sidebar-widget header .widget-menu a, .left-sidebar #widget-settings label, .left-sidebar #widget-settings input, .chat-message .chat-message-wrapper .message-block .actions-block .username, .chat-message .chat-message-wrapper .message-block .text, .topic-item .card p, .right-sidebar .sidebar-header .chat-filters li span, .right-sidebar .chat-input .textarea-wrapper .chat-textarea, .right-sidebar .missed-messages-container .missed-wrapper span {
  font-size: 0.9375rem;
  font-weight: 400; }
  @media screen and (min-width: 37.5rem) and (max-width: 90.0625rem) {
    .font-size-default, h5, .btn, .btn-more, .channel-scrolled--header--more-button, .upcoming-stream--item--notify, .btn-alert, .popover-cancel, .btn-submit, .popover-action, .popover-continue, .alert-dark, .widget-search-linksearch, .popover-dropin, .popover-dropin-recording, .btn-subscribe, .btn-subscribe-large, .channel-scrolled--header--subscribe-button, .widget-search-searchTerm, .header--nav-actions--logo .beta-label, .popover-users--list--item--name, .popover-dropdown--list--item--action, .permission-tip--body--text, .permission-center--text--subline, .channel--header-profile--meta--username, .channel--header-profile--meta--bio, .channel--header-profile--meta--subscribeCount, .tag-card--info--desc, .suggested-card--meta--tag, .suggested-card--meta--description, .suggested-card--actions--follow-btn, .ios-step--heading--text, .ios-step--actions--btn, .toast-actionable--content--text, .btn-toast, .ui-profile-card--fullname, .feed-item .stream-details .info .title, .user-card-modal .bio, .feed-item-small .card .info-layer h2, .user-card-list .bio, .qtip .user-card-qtip .bio, .scheduled-subscribers-attending--text, .widget-card-ph .text p, .widget-card-ph.answered .state .answered-indicator, .widget-card-ph.answered .state .pin-host, .widget-action-button, .hero .twitter-signup, .profile-user-info .bio, .adult-content-warning-container .wrapper .warning-copy-container p, .blab-info-block .text .callers-list, .blab-info-block .text ul li, .blab-info-block .text ul span, .stats-card nav ul li, .button, .widget-card-ph button, .notify-followers-toast .info-block .actions button, .cohost-toast .info-block .actions button, .feed-item-card--subscribe-button, .scheduled-action--start-now, .scheduled-action--edit, .pending-caller-cell .button-container button, .rounded-button, .legacy-popover li a, .dropdown li a, .channel--header-profile--cover .settings .stream-settings-dropdown li a, .scheduled-actions-calendar ul li a, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li a, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li a, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li a, .legacy-modal-url .card textarea, .legacy-modal-settings .settings input,
    .legacy-modal-settings .settings label,
    .legacy-modal-settings .settings h2, .create-form .error-message:before, .qtip.tool-tip p, .stream-scheduled-datestamp, .stream-ended-processing--text, #stream-ended-container .table #ending-info ul li a, #stream-ended-container .table #ending-info ul li .feels-count, .left-sidebar .sidebar-widget header .twitter-button, .left-sidebar .sidebar-widget header .facebook-button, .left-sidebar .sidebar-widget header .pull-down a, .left-sidebar .sidebar-widget header .widget-menu a, .left-sidebar #widget-settings label, .left-sidebar #widget-settings input, .chat-message .chat-message-wrapper .message-block .actions-block .username, .chat-message .chat-message-wrapper .message-block .text, .topic-item .card p, .right-sidebar .sidebar-header .chat-filters li span, .right-sidebar .chat-input .textarea-wrapper .chat-textarea, .right-sidebar .missed-messages-container .missed-wrapper span {
      font-size: 0.875rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-default, h5, .btn, .btn-more, .channel-scrolled--header--more-button, .upcoming-stream--item--notify, .btn-alert, .popover-cancel, .btn-submit, .popover-action, .popover-continue, .alert-dark, .widget-search-linksearch, .popover-dropin, .popover-dropin-recording, .btn-subscribe, .btn-subscribe-large, .channel-scrolled--header--subscribe-button, .widget-search-searchTerm, .header--nav-actions--logo .beta-label, .popover-users--list--item--name, .popover-dropdown--list--item--action, .permission-tip--body--text, .permission-center--text--subline, .channel--header-profile--meta--username, .channel--header-profile--meta--bio, .channel--header-profile--meta--subscribeCount, .tag-card--info--desc, .suggested-card--meta--tag, .suggested-card--meta--description, .suggested-card--actions--follow-btn, .ios-step--heading--text, .ios-step--actions--btn, .toast-actionable--content--text, .btn-toast, .ui-profile-card--fullname, .feed-item .stream-details .info .title, .user-card-modal .bio, .feed-item-small .card .info-layer h2, .user-card-list .bio, .qtip .user-card-qtip .bio, .scheduled-subscribers-attending--text, .widget-card-ph .text p, .widget-card-ph.answered .state .answered-indicator, .widget-card-ph.answered .state .pin-host, .widget-action-button, .hero .twitter-signup, .profile-user-info .bio, .adult-content-warning-container .wrapper .warning-copy-container p, .blab-info-block .text .callers-list, .blab-info-block .text ul li, .blab-info-block .text ul span, .stats-card nav ul li, .button, .widget-card-ph button, .notify-followers-toast .info-block .actions button, .cohost-toast .info-block .actions button, .feed-item-card--subscribe-button, .scheduled-action--start-now, .scheduled-action--edit, .pending-caller-cell .button-container button, .rounded-button, .legacy-popover li a, .dropdown li a, .channel--header-profile--cover .settings .stream-settings-dropdown li a, .scheduled-actions-calendar ul li a, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li a, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li a, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li a, .legacy-modal-url .card textarea, .legacy-modal-settings .settings input,
    .legacy-modal-settings .settings label,
    .legacy-modal-settings .settings h2, .create-form .error-message:before, .qtip.tool-tip p, .stream-scheduled-datestamp, .stream-ended-processing--text, #stream-ended-container .table #ending-info ul li a, #stream-ended-container .table #ending-info ul li .feels-count, .left-sidebar .sidebar-widget header .twitter-button, .left-sidebar .sidebar-widget header .facebook-button, .left-sidebar .sidebar-widget header .pull-down a, .left-sidebar .sidebar-widget header .widget-menu a, .left-sidebar #widget-settings label, .left-sidebar #widget-settings input, .chat-message .chat-message-wrapper .message-block .actions-block .username, .chat-message .chat-message-wrapper .message-block .text, .topic-item .card p, .right-sidebar .sidebar-header .chat-filters li span, .right-sidebar .chat-input .textarea-wrapper .chat-textarea, .right-sidebar .missed-messages-container .missed-wrapper span {
      font-size: 0.8125rem; } }

.font-size-small, p, .header--nav-actions--home,
.header--nav-actions--subscriptions, .header--search-form--field, .header--user-actions--create .icon, .upcoming-stream--startTime, .upcoming-stream--show-all, .popover-users--list--item--username, .fake-notification--body--text, .card-meta--watchedTime--count, .feed-item .on-air, .feed-item .button, .feed-item .widget-card-ph button, .widget-card-ph .feed-item button, .feed-item .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .feed-item button, .feed-item .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .feed-item button, .feed-item .feed-item-card--subscribe-button, .feed-item .scheduled-action--start-now, .feed-item .scheduled-action--edit, .feed-item .pending-caller-cell .button-container button, .pending-caller-cell .button-container .feed-item button, .feed-item .stream-details .tag-list .tag-item, .feed-item .small-button, .feed-item-small .meta .tags .tag, .user-card-mini .activity .action .list-more li, .feed-item-card .card-meta--watchedTime--count, .widget-card-ph .user-info-block .user-info .name-title .name,
.widget-card-ph .user-info-block .user-info .name-title .title, .widget-card-ph .user-info-block .upvote .upvote-count, .widget-card-question .text a, .youtube-button, .user-block .button, .user-block .widget-card-ph button, .widget-card-ph .user-block button, .user-block .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-block button, .user-block .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-block button, .user-block .feed-item-card--subscribe-button, .user-block .scheduled-action--start-now, .user-block .scheduled-action--edit, .user-block .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-block button, .page-title, .nav-site .phone-navigation li a, .search input[type="text"], .nav-user .nav-user-newblab .button, .nav-user .nav-user-newblab .widget-card-ph button, .widget-card-ph .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .feed-item-card--subscribe-button, .nav-user .nav-user-newblab .scheduled-action--start-now, .nav-user .nav-user-newblab .scheduled-action--edit, .nav-user .nav-user-newblab .pending-caller-cell .button-container button, .pending-caller-cell .button-container .nav-user .nav-user-newblab button, .nav-blabs ul li a, .nav-tags h3, .breadcrumbs, .legacy-modal-settings .settings input[type='email'],
.legacy-modal-settings .settings input[type='text'],
.legacy-modal-settings .settings textarea, .legacy-modal-settings .settings input[type='submit'], .create-form .ghost-button, .create-form .error-message, .info-block .info-layer .stats-block span, .pending-caller-cell > p, #stream-ended-container .table #ending-info ul li .username, .audio-box > p, .precall-test, .left-sidebar .info-block .info-layer .topic-block .record-label, .left-sidebar .info-block .info-layer .share-block .twitter-share, .left-sidebar .info-block .info-layer .share-block .facebook-share, .left-sidebar .info-block .info-layer .share-block .capture-moment, .left-sidebar .info-block .info-layer .change-topic-button, .left-sidebar .record-button, .chat-message .chat-message-wrapper .avatar-block .timestamp-tip span, .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .favorite-count, .joined-item .card span, .tweet-item .card span, .topic-item .card span, .facebook-item .card span {
  font-weight: 400;
  font-size: 0.75rem; }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-small, p, .header--nav-actions--home,
    .header--nav-actions--subscriptions, .header--search-form--field, .header--user-actions--create .icon, .upcoming-stream--startTime, .upcoming-stream--show-all, .popover-users--list--item--username, .fake-notification--body--text, .card-meta--watchedTime--count, .feed-item .on-air, .feed-item .button, .feed-item .widget-card-ph button, .widget-card-ph .feed-item button, .feed-item .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .feed-item button, .feed-item .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .feed-item button, .feed-item .feed-item-card--subscribe-button, .feed-item .scheduled-action--start-now, .feed-item .scheduled-action--edit, .feed-item .pending-caller-cell .button-container button, .pending-caller-cell .button-container .feed-item button, .feed-item .stream-details .tag-list .tag-item, .feed-item .small-button, .feed-item-small .meta .tags .tag, .user-card-mini .activity .action .list-more li, .feed-item-card .card-meta--watchedTime--count, .widget-card-ph .user-info-block .user-info .name-title .name,
    .widget-card-ph .user-info-block .user-info .name-title .title, .widget-card-ph .user-info-block .upvote .upvote-count, .widget-card-question .text a, .youtube-button, .user-block .button, .user-block .widget-card-ph button, .widget-card-ph .user-block button, .user-block .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-block button, .user-block .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-block button, .user-block .feed-item-card--subscribe-button, .user-block .scheduled-action--start-now, .user-block .scheduled-action--edit, .user-block .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-block button, .page-title, .nav-site .phone-navigation li a, .search input[type="text"], .nav-user .nav-user-newblab .button, .nav-user .nav-user-newblab .widget-card-ph button, .widget-card-ph .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .feed-item-card--subscribe-button, .nav-user .nav-user-newblab .scheduled-action--start-now, .nav-user .nav-user-newblab .scheduled-action--edit, .nav-user .nav-user-newblab .pending-caller-cell .button-container button, .pending-caller-cell .button-container .nav-user .nav-user-newblab button, .nav-blabs ul li a, .nav-tags h3, .breadcrumbs, .legacy-modal-settings .settings input[type='email'],
    .legacy-modal-settings .settings input[type='text'],
    .legacy-modal-settings .settings textarea, .legacy-modal-settings .settings input[type='submit'], .create-form .ghost-button, .create-form .error-message, .info-block .info-layer .stats-block span, .pending-caller-cell > p, #stream-ended-container .table #ending-info ul li .username, .audio-box > p, .precall-test, .left-sidebar .info-block .info-layer .topic-block .record-label, .left-sidebar .info-block .info-layer .share-block .twitter-share, .left-sidebar .info-block .info-layer .share-block .facebook-share, .left-sidebar .info-block .info-layer .share-block .capture-moment, .left-sidebar .info-block .info-layer .change-topic-button, .left-sidebar .record-button, .chat-message .chat-message-wrapper .avatar-block .timestamp-tip span, .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .favorite-count, .joined-item .card span, .tweet-item .card span, .topic-item .card span, .facebook-item .card span {
      font-size: 0.6875rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-small, p, .header--nav-actions--home,
    .header--nav-actions--subscriptions, .header--search-form--field, .header--user-actions--create .icon, .upcoming-stream--startTime, .upcoming-stream--show-all, .popover-users--list--item--username, .fake-notification--body--text, .card-meta--watchedTime--count, .feed-item .on-air, .feed-item .button, .feed-item .widget-card-ph button, .widget-card-ph .feed-item button, .feed-item .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .feed-item button, .feed-item .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .feed-item button, .feed-item .feed-item-card--subscribe-button, .feed-item .scheduled-action--start-now, .feed-item .scheduled-action--edit, .feed-item .pending-caller-cell .button-container button, .pending-caller-cell .button-container .feed-item button, .feed-item .stream-details .tag-list .tag-item, .feed-item .small-button, .feed-item-small .meta .tags .tag, .user-card-mini .activity .action .list-more li, .feed-item-card .card-meta--watchedTime--count, .widget-card-ph .user-info-block .user-info .name-title .name,
    .widget-card-ph .user-info-block .user-info .name-title .title, .widget-card-ph .user-info-block .upvote .upvote-count, .widget-card-question .text a, .youtube-button, .user-block .button, .user-block .widget-card-ph button, .widget-card-ph .user-block button, .user-block .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-block button, .user-block .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-block button, .user-block .feed-item-card--subscribe-button, .user-block .scheduled-action--start-now, .user-block .scheduled-action--edit, .user-block .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-block button, .page-title, .nav-site .phone-navigation li a, .search input[type="text"], .nav-user .nav-user-newblab .button, .nav-user .nav-user-newblab .widget-card-ph button, .widget-card-ph .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .feed-item-card--subscribe-button, .nav-user .nav-user-newblab .scheduled-action--start-now, .nav-user .nav-user-newblab .scheduled-action--edit, .nav-user .nav-user-newblab .pending-caller-cell .button-container button, .pending-caller-cell .button-container .nav-user .nav-user-newblab button, .nav-blabs ul li a, .nav-tags h3, .breadcrumbs, .legacy-modal-settings .settings input[type='email'],
    .legacy-modal-settings .settings input[type='text'],
    .legacy-modal-settings .settings textarea, .legacy-modal-settings .settings input[type='submit'], .create-form .ghost-button, .create-form .error-message, .info-block .info-layer .stats-block span, .pending-caller-cell > p, #stream-ended-container .table #ending-info ul li .username, .audio-box > p, .precall-test, .left-sidebar .info-block .info-layer .topic-block .record-label, .left-sidebar .info-block .info-layer .share-block .twitter-share, .left-sidebar .info-block .info-layer .share-block .facebook-share, .left-sidebar .info-block .info-layer .share-block .capture-moment, .left-sidebar .info-block .info-layer .change-topic-button, .left-sidebar .record-button, .chat-message .chat-message-wrapper .avatar-block .timestamp-tip span, .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .favorite-count, .joined-item .card span, .tweet-item .card span, .topic-item .card span, .facebook-item .card span {
      font-size: 0.625rem; } }

.font-size-tiny, small, .typeahead-container .typeahead-header, .channel--header-profile--meta--follow-you, .ui-profile-card--username, .feed-item .stream-details .host-list .host, .feed-item .stream-details .host-list .host .host-name, .feed-item .meta, .feed-item .participant-count, .feed-item .live-count, .feed-item .time, .old-feed-item.scheduled .scheduled-time span, .scheduled-time span, .user-card-modal .activity .follows-you, .user-card-modal .stats ul li a, .feed-item-small .card .info-layer .live-label, .feed-item-small .card .info-layer .stats, .user-card-list .activity .follows-you, .user-card-mini .follows-you, .qtip .user-card-qtip .activity .follows-you, .qtip .user-card-qtip .stats ul li a, .widget-card-twitter .text .time-created, #browse .copyright-links, .profile-user-info .stats li a span, .profile-user-info .follows-you, .user-block .bio, .nav-site .phone-navigation li a .count, .nav-blabs ul li a .count, .nav-tags .tag-cloud li a, .site-footer .copyright-links, .legacy-modal-settings .settings .checkbox-container div label, .legacy-modal-settings .settings #profile-image, .create-form .days-container .days-select label .month, .next-stream-container .up-next-label {
  font-size: 0.6875rem; }
  @media screen and (min-width: 37.5rem) and (max-width: 71.25rem) {
    .font-size-tiny, small, .typeahead-container .typeahead-header, .channel--header-profile--meta--follow-you, .ui-profile-card--username, .feed-item .stream-details .host-list .host, .feed-item .stream-details .host-list .host .host-name, .feed-item .meta, .feed-item .participant-count, .feed-item .live-count, .feed-item .time, .old-feed-item.scheduled .scheduled-time span, .scheduled-time span, .user-card-modal .activity .follows-you, .user-card-modal .stats ul li a, .feed-item-small .card .info-layer .live-label, .feed-item-small .card .info-layer .stats, .user-card-list .activity .follows-you, .user-card-mini .follows-you, .qtip .user-card-qtip .activity .follows-you, .qtip .user-card-qtip .stats ul li a, .widget-card-twitter .text .time-created, #browse .copyright-links, .profile-user-info .stats li a span, .profile-user-info .follows-you, .user-block .bio, .nav-site .phone-navigation li a .count, .nav-blabs ul li a .count, .nav-tags .tag-cloud li a, .site-footer .copyright-links, .legacy-modal-settings .settings .checkbox-container div label, .legacy-modal-settings .settings #profile-image, .create-form .days-container .days-select label .month, .next-stream-container .up-next-label {
      font-size: 0.625rem; } }
  @media screen and (max-width: 37.5rem) {
    .font-size-tiny, small, .typeahead-container .typeahead-header, .channel--header-profile--meta--follow-you, .ui-profile-card--username, .feed-item .stream-details .host-list .host, .feed-item .stream-details .host-list .host .host-name, .feed-item .meta, .feed-item .participant-count, .feed-item .live-count, .feed-item .time, .old-feed-item.scheduled .scheduled-time span, .scheduled-time span, .user-card-modal .activity .follows-you, .user-card-modal .stats ul li a, .feed-item-small .card .info-layer .live-label, .feed-item-small .card .info-layer .stats, .user-card-list .activity .follows-you, .user-card-mini .follows-you, .qtip .user-card-qtip .activity .follows-you, .qtip .user-card-qtip .stats ul li a, .widget-card-twitter .text .time-created, #browse .copyright-links, .profile-user-info .stats li a span, .profile-user-info .follows-you, .user-block .bio, .nav-site .phone-navigation li a .count, .nav-blabs ul li a .count, .nav-tags .tag-cloud li a, .site-footer .copyright-links, .legacy-modal-settings .settings .checkbox-container div label, .legacy-modal-settings .settings #profile-image, .create-form .days-container .days-select label .month, .next-stream-container .up-next-label {
      font-size: 0.5625rem; } }

@media screen and (max-width: 70.3125rem) {
  .embed .font-size-medium, .embed h3, .embed h4, .embed .btn-ghost-white, .embed .upcoming-stream--item--title, .embed .popover-dropin-recording-toast p, .popover-dropin-recording-toast .embed p, .embed .welcome-body--subheader--header, .embed .permissions-gcm--actions--btn, .embed .fake-notification--body--title, .embed .step-footer--content--text, .embed .step-footer--content--action, .embed .suggested-card--meta--title, .embed .ios-step--heading--title, .embed .user-card-modal .stats ul li a span, .user-card-modal .stats ul li a .embed span, .embed .qtip .user-card-qtip .stats ul li a span, .qtip .user-card-qtip .stats ul li a .embed span, .embed .hero h2, .hero .embed h2, .embed .profile-user-info .stats li a, .profile-user-info .stats li .embed a, .embed .profile-navigation li a, .profile-navigation li .embed a, .embed .blab-info-block .text h2, .blab-info-block .text .embed h2, .embed .youtube-button.big-button, .embed .user-card-modal .activity .youtube-button.button, .user-card-modal .activity .embed .youtube-button.button, .embed .user-card-modal .activity .widget-card-ph button.youtube-button, .user-card-modal .activity .widget-card-ph .embed button.youtube-button, .embed .widget-card-ph .user-card-modal .activity button.youtube-button, .widget-card-ph .user-card-modal .activity .embed button.youtube-button, .embed .user-card-modal .activity .notify-followers-toast .info-block .actions button.youtube-button, .user-card-modal .activity .notify-followers-toast .info-block .actions .embed button.youtube-button, .embed .notify-followers-toast .info-block .actions .user-card-modal .activity button.youtube-button, .notify-followers-toast .info-block .actions .user-card-modal .activity .embed button.youtube-button, .embed .user-card-modal .activity .cohost-toast .info-block .actions button.youtube-button, .user-card-modal .activity .cohost-toast .info-block .actions .embed button.youtube-button, .embed .cohost-toast .info-block .actions .user-card-modal .activity button.youtube-button, .cohost-toast .info-block .actions .user-card-modal .activity .embed button.youtube-button, .embed .user-card-modal .activity .youtube-button.feed-item-card--subscribe-button, .user-card-modal .activity .embed .youtube-button.feed-item-card--subscribe-button, .embed .user-card-modal .activity .youtube-button.scheduled-action--start-now, .user-card-modal .activity .embed .youtube-button.scheduled-action--start-now, .embed .user-card-modal .activity .youtube-button.scheduled-action--edit, .user-card-modal .activity .embed .youtube-button.scheduled-action--edit, .embed .user-card-modal .activity .pending-caller-cell .button-container button.youtube-button, .user-card-modal .activity .pending-caller-cell .button-container .embed button.youtube-button, .embed .pending-caller-cell .button-container .user-card-modal .activity button.youtube-button, .pending-caller-cell .button-container .user-card-modal .activity .embed button.youtube-button, .embed .user-card-modal .activity .youtube-button.button-follow, .user-card-modal .activity .embed .youtube-button.button-follow, .embed .user-card-list .activity .youtube-button.button, .user-card-list .activity .embed .youtube-button.button, .embed .user-card-list .activity .widget-card-ph button.youtube-button, .user-card-list .activity .widget-card-ph .embed button.youtube-button, .embed .widget-card-ph .user-card-list .activity button.youtube-button, .widget-card-ph .user-card-list .activity .embed button.youtube-button, .embed .user-card-list .activity .notify-followers-toast .info-block .actions button.youtube-button, .user-card-list .activity .notify-followers-toast .info-block .actions .embed button.youtube-button, .embed .notify-followers-toast .info-block .actions .user-card-list .activity button.youtube-button, .notify-followers-toast .info-block .actions .user-card-list .activity .embed button.youtube-button, .embed .user-card-list .activity .cohost-toast .info-block .actions button.youtube-button, .user-card-list .activity .cohost-toast .info-block .actions .embed button.youtube-button, .embed .cohost-toast .info-block .actions .user-card-list .activity button.youtube-button, .cohost-toast .info-block .actions .user-card-list .activity .embed button.youtube-button, .embed .user-card-list .activity .youtube-button.feed-item-card--subscribe-button, .user-card-list .activity .embed .youtube-button.feed-item-card--subscribe-button, .embed .user-card-list .activity .youtube-button.scheduled-action--start-now, .user-card-list .activity .embed .youtube-button.scheduled-action--start-now, .embed .user-card-list .activity .youtube-button.scheduled-action--edit, .user-card-list .activity .embed .youtube-button.scheduled-action--edit, .embed .user-card-list .activity .pending-caller-cell .button-container button.youtube-button, .user-card-list .activity .pending-caller-cell .button-container .embed button.youtube-button, .embed .pending-caller-cell .button-container .user-card-list .activity button.youtube-button, .pending-caller-cell .button-container .user-card-list .activity .embed button.youtube-button, .embed .user-card-list .activity .youtube-button.button-follow, .user-card-list .activity .embed .youtube-button.button-follow, .embed .qtip .user-card-qtip .activity .youtube-button.button, .qtip .user-card-qtip .activity .embed .youtube-button.button, .embed .qtip .user-card-qtip .activity .widget-card-ph button.youtube-button, .qtip .user-card-qtip .activity .widget-card-ph .embed button.youtube-button, .embed .widget-card-ph .qtip .user-card-qtip .activity button.youtube-button, .widget-card-ph .qtip .user-card-qtip .activity .embed button.youtube-button, .embed .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.youtube-button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions .embed button.youtube-button, .embed .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity .embed button.youtube-button, .embed .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.youtube-button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions .embed button.youtube-button, .embed .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity .embed button.youtube-button, .embed .qtip .user-card-qtip .activity .youtube-button.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .embed .youtube-button.feed-item-card--subscribe-button, .embed .qtip .user-card-qtip .activity .youtube-button.scheduled-action--start-now, .qtip .user-card-qtip .activity .embed .youtube-button.scheduled-action--start-now, .embed .qtip .user-card-qtip .activity .youtube-button.scheduled-action--edit, .qtip .user-card-qtip .activity .embed .youtube-button.scheduled-action--edit, .embed .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.youtube-button, .qtip .user-card-qtip .activity .pending-caller-cell .button-container .embed button.youtube-button, .embed .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.youtube-button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity .embed button.youtube-button, .embed .qtip .user-card-qtip .activity .youtube-button.button-follow, .qtip .user-card-qtip .activity .embed .youtube-button.button-follow, .embed .profile-user-info .youtube-button.button-follow, .profile-user-info .embed .youtube-button.button-follow,
  .embed .profile-user-info gs.youtube-button.edit-settin,
  .profile-user-info .embed gs.youtube-button.edit-settin, .embed .chat-input-container textarea, .chat-input-container .embed textarea, .embed .create-form > ul > li p, .create-form > ul > li .embed p, .embed .create-form .topic-input, .create-form .embed .topic-input, .embed #modal-signup button, #modal-signup .embed button, .embed .notify-followers-toast .info-block .info p, .notify-followers-toast .info-block .info .embed p, .embed .notify-followers-toast .notify-success h2, .notify-followers-toast .notify-success .embed h2, .embed .open-seat-wrapper p, .open-seat-wrapper .embed p, .embed .pending-caller-cell h1, .pending-caller-cell .embed h1, .embed .square-open-seat p, .square-open-seat .embed p {
    font-size: 0.9375rem; } }

h1 {
  font-weight: 800;
  hyphens: auto; }

h2 {
  font-weight: 700; }

h3 {
  font-weight: 700;
  color: #252525; }

h4 {
  font-weight: 400; }

h5 {
  font-weight: 400; }

p {
  font-weight: 400; }

a {
  color: #A787E0;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s; }
  a:hover {
    color: #986EDF; }

em {
  font-style: italic; }

strong {
  font-weight: 700; }

button {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  cursor: pointer !important; }

textarea, input {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

h1, h2, p, h3 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

.scheduled-countdown {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  color: white;
  margin-top: 25px;
  text-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }

.scheduled-countdown--counter {
  -webkit-flex-basis: 128px;
  -moz-flex-basis: 128px;
  flex-basis: 128px;
  -ms-flex-preferred-size: 128px; }
  @media screen and (max-width: 90.0625rem) {
    .scheduled-countdown--counter {
      -webkit-flex-basis: 90px;
      -moz-flex-basis: 90px;
      flex-basis: 90px;
      -ms-flex-preferred-size: 90px; } }

.scheduled-countdown--counter--digit-group {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 0.3125rem; }

.scheduled-cdountdown--counter--digit,
.scheduled-countdown--counter--spacer {
  font-size: 40px;
  color: #FFFFFF; }

.scheduled-countdown--counter--digit {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin: 0 3px;
  color: #FFF;
  font-size: 50px;
  font-weight: 400;
  height: 70px;
  line-height: 72px; }
  @media screen and (max-width: 90.0625rem) {
    .scheduled-countdown--counter--digit {
      font-size: 30px;
      height: 50px;
      line-height: 51px; } }

.scheduled-countdown--counter--type {
  padding-top: 0.3125rem;
  color: rgba(255, 255, 255, 0.6); }
  @media screen and (max-width: 90.0625rem) {
    .scheduled-countdown--counter--type {
      font-size: 0.6875rem; } }

.scheduled-countdown--spacer {
  color: #FFF;
  font-size: 50px;
  font-weight: 200;
  height: 70px;
  line-height: 35px;
  -webkit-flex-basis: 20px;
  -moz-flex-basis: 20px;
  flex-basis: 20px;
  -ms-flex-preferred-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400; }
  @media screen and (max-width: 90.0625rem) {
    .scheduled-countdown--spacer {
      font-size: 30px;
      -webkit-flex-basis: 10px;
      -moz-flex-basis: 10px;
      flex-basis: 10px;
      -ms-flex-preferred-size: 10px;
      height: 50px;
      line-height: 25px; } }

@media screen and (max-width: 70.3125rem) {
  .embed .scheduled-countdown {
    margin-bottom: 0.9375rem; }
  .embed .scheduled-countdown--counter--spacer {
    font-size: 22px;
    height: 50px;
    line-height: 51px; }
  .embed .scheduled-countdown--counter {
    -webkit-flex-basis: 80px;
    -moz-flex-basis: 80px;
    flex-basis: 80px;
    -ms-flex-preferred-size: 80px; }
  .embed .scheduled-cdountdown--counter--digit {
    font-size: 22px;
    height: 36px;
    line-height: 22px; } }

.bg-composedImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
  z-index: 300; }

.bg-composedImage--overlay {
  background-color: rgba(16, 16, 16, 0.88);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 400; }
  .bg-composedImage--overlay.darker {
    background-color: rgba(0, 0, 0, 0.88); }
  .bg-composedImage--overlay.softer {
    background-color: rgba(16, 16, 16, 0.63); }
  .bg-composedImage--overlay.superSoft {
    background-color: rgba(16, 16, 16, 0.4); }

.bg-composedImage--images {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0; }
  .bg-composedImage--images.grid-1 .bg-composedImage--image {
    width: 100%;
    height: 100%; }
  .bg-composedImage--images.grid-2 .bg-composedImage--image {
    width: 50%;
    height: 100%; }
  .bg-composedImage--images.grid-3 .bg-composedImage--image {
    height: 50%;
    width: 50%; }
    .bg-composedImage--images.grid-3 .bg-composedImage--image:first-child {
      height: 100%; }
  .bg-composedImage--images.grid-4 .bg-composedImage--image {
    width: 50%;
    height: 50%; }

.bg-composedImage--image {
  float: left;
  position: relative;
  display: inline-block;
  overflow: hidden; }
  .bg-composedImage--image.no-edges {
    overflow: inherit; }

.bg-composedImage--image--ogImage {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center; }

.embed .bg-composedImage--image--ogImage {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center; }

.btn, .btn-more, .channel-scrolled--header--more-button, .upcoming-stream--item--notify {
  padding: 0.3125rem 0.75rem;
  border-radius: 4px;
  display: inline-block;
  text-align: center; }

.btn-wide {
  width: 95%; }

.btn-ghost-twitter {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: rgba(85, 172, 238, 0.09);
  color: #55acee;
  border: 1px solid #55acee; }
  .btn-ghost-twitter:hover {
    background-color: #55acee;
    color: #FFF; }
  .btn-ghost-twitter.is-active {
    background-color: #55acee;
    color: #FFF; }

.btn-ghost-recording {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: rgba(243, 73, 73, 0.09);
  color: #f34949;
  border: 1px solid #f34949; }
  .btn-ghost-recording:hover {
    background-color: #f34949;
    color: #FFF; }
  .btn-ghost-recording.is-active {
    background-color: #f34949;
    color: #FFF; }

.btn-ghost-darkblack {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: rgba(30, 30, 30, 0.09);
  color: #1e1e1e;
  border: 1px solid #1e1e1e; }
  .btn-ghost-darkblack:hover {
    background-color: #1e1e1e;
    color: #FFF; }
  .btn-ghost-darkblack.is-active {
    background-color: #1e1e1e;
    color: #FFF; }

.btn-ghost-white {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: rgba(255, 255, 255, 0.09);
  color: #FFF;
  border: 1px solid #FFF; }
  .btn-ghost-white:hover {
    background-color: #FFF;
    color: #FFF; }
  .btn-ghost-white.is-active {
    background-color: #FFF;
    color: #FFF; }
  .btn-ghost-white.is-active {
    color: #1f1f1f;
    background-color: #FFF; }
  .btn-ghost-white.is-active:hover {
    background-color: #F8F8F8; }

.btn-ghost-purple {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: rgba(154, 129, 243, 0.09);
  color: #9A81F3;
  border: 1px solid #9A81F3; }
  .btn-ghost-purple:hover {
    background-color: #9A81F3;
    color: #FFF; }
  .btn-ghost-purple.is-active {
    background-color: #9A81F3;
    color: #FFF; }

.btn-filled-purple {
  background-color: #9A81F3;
  color: #FFF; }
  .btn-filled-purple:hover {
    background-color: #8b6ef1;
    color: #FFF; }

.btn-filled-white {
  background-color: #FFF;
  color: #1f1f1f; }
  .btn-filled-white:hover {
    background-color: whitesmoke; }

.btn-alert, .popover-cancel {
  background: #f34949;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 1;
  font-weight: 700;
  color: #ffffff;
  padding: 0.5625rem 0;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 100ms;
  -moz-transition: all 100ms;
  transition: all 100ms; }
  .btn-alert:hover, .popover-cancel:hover {
    background: #f56161; }

.btn-submit, .popover-action, .popover-continue {
  background: #01c270;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 0px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 0px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 0px rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1;
  font-weight: 700;
  color: #ffffff;
  padding: 0.5625rem 0;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 100ms;
  -moz-transition: all 100ms;
  transition: all 100ms; }
  .btn-submit:hover, .popover-action:hover, .popover-continue:hover {
    background: #01db7f; }

.alert, .popover-dropin-recording-toast {
  background: #f34949;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  color: #ffffff; }

.alert-dark, .widget-search-linksearch, .popover-dropin, .popover-dropin-recording {
  background: #323232;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.2); }

.btn-subscribe, .btn-subscribe-large, .channel-scrolled--header--subscribe-button {
  height: 40px;
  width: 135px;
  font-size: 1rem;
  color: #000;
  border-radius: 4px;
  background-color: transparent;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.75); }
  .btn-subscribe .btn-subscribe--icon, .btn-subscribe-large .btn-subscribe--icon, .channel-scrolled--header--subscribe-button .btn-subscribe--icon {
    margin-right: 5px; }
    .btn-subscribe .btn-subscribe--icon svg path, .btn-subscribe-large .btn-subscribe--icon svg path, .channel-scrolled--header--subscribe-button .btn-subscribe--icon svg path {
      fill: #000; }
  .btn-subscribe .icon-following, .btn-subscribe-large .icon-following, .channel-scrolled--header--subscribe-button .icon-following {
    display: none; }
  .btn-subscribe .text-following, .btn-subscribe-large .text-following, .channel-scrolled--header--subscribe-button .text-following {
    display: none; }
  .btn-subscribe:hover, .btn-subscribe-large:hover, .channel-scrolled--header--subscribe-button:hover {
    border: 2px solid rgba(0, 0, 0, 0.9);
    color: #000; }
  @media screen and (max-width: 37.5rem) {
    .btn-subscribe, .btn-subscribe-large, .channel-scrolled--header--subscribe-button {
      width: 110px;
      height: 35px;
      font-size: 14px; } }

.btn-subscribe--text {
  opacity: 1; }

.btn-subscribe.is-subscribed, .is-subscribed.btn-subscribe-large, .is-subscribed.channel-scrolled--header--subscribe-button {
  background-color: rgba(0, 0, 0, 0.95); }
  .btn-subscribe.is-subscribed .icon-following, .is-subscribed.btn-subscribe-large .icon-following, .is-subscribed.channel-scrolled--header--subscribe-button .icon-following {
    display: inline-block; }
  .btn-subscribe.is-subscribed .text-following, .is-subscribed.btn-subscribe-large .text-following, .is-subscribed.channel-scrolled--header--subscribe-button .text-following {
    display: inline-block; }
  .btn-subscribe.is-subscribed .text-follow, .is-subscribed.btn-subscribe-large .text-follow, .is-subscribed.channel-scrolled--header--subscribe-button .text-follow {
    display: none; }
  .btn-subscribe.is-subscribed .icon-follow, .is-subscribed.btn-subscribe-large .icon-follow, .is-subscribed.channel-scrolled--header--subscribe-button .icon-follow {
    display: none; }
  .btn-subscribe.is-subscribed .btn-subscribe--text-following, .is-subscribed.btn-subscribe-large .btn-subscribe--text-following, .is-subscribed.channel-scrolled--header--subscribe-button .btn-subscribe--text-following {
    display: block; }
  .btn-subscribe.is-subscribed .btn-subscribe--text, .is-subscribed.btn-subscribe-large .btn-subscribe--text, .is-subscribed.channel-scrolled--header--subscribe-button .btn-subscribe--text {
    color: #FFF; }
  .btn-subscribe.is-subscribed span svg path, .is-subscribed.btn-subscribe-large span svg path, .is-subscribed.channel-scrolled--header--subscribe-button span svg path {
    fill: #FFF; }

.btn-subscribe-large span {
  margin-right: 3px; }

.btn-subscribe-mini {
  width: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 20px;
  padding: 0;
  border-radius: 2px; }
  .btn-subscribe-mini .btn-subscribe--icon svg path {
    fill: #FFF; }
  .btn-subscribe-mini .icon-following {
    display: none; }
  .btn-subscribe-mini .icon-follow {
    display: block; }

.btn-subscribe-mini:hover {
  background-color: black; }

.btn-subscribe-mini.is-subscribed {
  background-color: black; }
  .btn-subscribe-mini.is-subscribed .icon-follow {
    display: none; }
  .btn-subscribe-mini.is-subscribed .icon-following {
    display: block; }

.btn-more, .channel-scrolled--header--more-button {
  width: 40px;
  height: 40px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: top;
  margin-left: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: transparent; }
  .btn-more .icon-more, .channel-scrolled--header--more-button .icon-more {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; }
    .btn-more .icon-more svg path, .channel-scrolled--header--more-button .icon-more svg path {
      fill: rgba(0, 0, 0, 0.5); }
  .btn-more:hover, .channel-scrolled--header--more-button:hover {
    border: 1px solid rgba(0, 0, 0, 0.2); }

.circle-btn, .circle-btn-red {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: center;
  -moz-box-orient: center;
  box-orient: center;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: center;
  -moz-flex-direction: center;
  flex-direction: center;
  -ms-flex-direction: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }
  .circle-btn .circle-btn--icon, .circle-btn-red .circle-btn--icon {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; }

.peeek-loading {
  z-index: 1050;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%; }

.peeek-loading ul {
  position: absolute;
  left: calc(50% - 0.7em);
  top: calc(50% - 4.2em);
  display: inline-block;
  text-indent: 2.8em; }

.peeek-loading ul li:after,
.peeek-loading ul:after {
  width: 1.4em;
  height: 1.4em;
  background-color: #fff;
  border-radius: 100%; }

.peeek-loading ul li:after,
.peeek-loading ul:after {
  content: "";
  display: block; }

.peeek-loading ul:after {
  position: absolute;
  top: 2.8em; }

.peeek-loading li {
  position: absolute;
  padding-bottom: 5.6em;
  top: 0;
  left: 0; }

.peeek-loading li:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: 0.125s; }

.peeek-loading li:nth-child(1):after {
  animation-delay: 0.125s; }

.peeek-loading li:nth-child(2) {
  transform: rotate(36deg);
  animation-delay: 0.25s; }

.peeek-loading li:nth-child(2):after {
  animation-delay: 0.25s; }

.peeek-loading li:nth-child(3) {
  transform: rotate(72deg);
  animation-delay: 0.375s; }

.peeek-loading li:nth-child(3):after {
  animation-delay: 0.375s; }

.peeek-loading li:nth-child(4) {
  transform: rotate(108deg);
  animation-delay: 0.5s; }

.peeek-loading li:nth-child(4):after {
  animation-delay: 0.5s; }

.peeek-loading li:nth-child(5) {
  transform: rotate(144deg);
  animation-delay: 0.625s; }

.peeek-loading li:nth-child(5):after {
  animation-delay: 0.625s; }

.peeek-loading li:nth-child(6) {
  transform: rotate(180deg);
  animation-delay: 0.75s; }

.peeek-loading li:nth-child(6):after {
  animation-delay: 0.75s; }

.peeek-loading li:nth-child(7) {
  transform: rotate(216deg);
  animation-delay: 0.875s; }

.peeek-loading li:nth-child(7):after {
  animation-delay: 0.875s; }

.peeek-loading li:nth-child(8) {
  transform: rotate(252deg);
  animation-delay: 1s; }

.peeek-loading li:nth-child(8):after {
  animation-delay: 1s; }

.peeek-loading li:nth-child(9) {
  transform: rotate(288deg);
  animation-delay: 1.125s; }

.peeek-loading li:nth-child(9):after {
  animation-delay: 1.125s; }

.peeek-loading li:nth-child(10) {
  transform: rotate(324deg);
  animation-delay: 1.25s; }

.peeek-loading li:nth-child(10):after {
  animation-delay: 1.25s; }

.peeek-loading li {
  animation: dotAnimation 2.5s infinite; }

@keyframes dotAnimation {
  0%, 55%, 100% {
    padding: 0 0 5.6em 0; }
  5%,50% {
    padding: 2.8em 0; } }
.peeek-loading li:after {
  animation: dotAnimationTwo 2.5s infinite; }

@-webkit-keyframes dotAnimationTwo {
  0%, 55%, 100% {
    opacity: 1;
    transform: scale(1); }
  5%,50% {
    opacity: .5;
    transform: scale(0.5); } }
.peeek-loading--dark ul li:after,
.peeek-loading--dark ul:after {
  width: 1.4em;
  height: 1.4em;
  background-color: #383838;
  border-radius: 100%; }

.avatar-circle, .header--user-actions--profile--avatar, .popover-users--list--item--avatar, .channel--header-profile--meta--avatar, .channel-scrolled--header--avatar, .ui-profile-card--avatar, .card-meta-creator--avatar, .card-creator--avatar, .feed-item-card .card-meta-creator--avatar, .feed-item-card .card-creator--avatar {
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.1); }

@-webkit-keyframes enter {
  0% {
    opacity: 0;
    left: -10px;
    @media screen and (max-width: 70.3125rem) {
      left: -8px; } }
  10% {
    opacity: 1;
    left: 0px; }
  90.9% {
    opacity: 1;
    left: 0px; }
  90.9% {
    opacity: 0;
    left: 10px;
    @media screen and (max-width: 70.3125rem) {
      left: 8px; } } }
@-moz-keyframes enter {
  0% {
    opacity: 0;
    left: -10px;
    @media screen and (max-width: 70.3125rem) {
      left: -8px; } }
  10% {
    opacity: 1;
    left: 0px; }
  90.9% {
    opacity: 1;
    left: 0px; }
  90.9% {
    opacity: 0;
    left: 10px;
    @media screen and (max-width: 70.3125rem) {
      left: 8px; } } }
@keyframes enter {
  0% {
    opacity: 0;
    left: -10px;
    @media screen and (max-width: 70.3125rem) {
      left: -8px; } }
  10% {
    opacity: 1;
    left: 0px; }
  90.9% {
    opacity: 1;
    left: 0px; }
  90.9% {
    opacity: 0;
    left: 10px;
    @media screen and (max-width: 70.3125rem) {
      left: 8px; } } }
.square-loader {
  position: relative; }

.square-loader-precall {
  position: fixed;
  left: 15%; }

.square-loader--square-precall {
  background: rgba(255, 255, 255, 0.9);
  width: 10px;
  height: 10px;
  float: left;
  left: -3px;
  margin-right: 4px;
  margin-bottom: 5px;
  position: relative;
  opacity: 0;
  -webkit-animation: enter 1.1s infinite;
  -moz-animation: enter 1.1s infinite;
  animation: enter 1.1s infinite; }
  @media screen and (max-width: 70.3125rem) {
    .square-loader--square-precall {
      width: 5px;
      height: 5px; } }

.square-loader--square-precall:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s; }

.square-loader--square-precall:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.square-loader--square-precall:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.square-loader--square-precall:nth-child(4) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.square-loader--square {
  background: rgba(255, 255, 255, 0.9);
  width: 25px;
  height: 25px;
  float: left;
  left: -10px;
  margin-right: 8px;
  margin-top: 5px;
  position: relative;
  opacity: 0;
  -webkit-animation: enter 1.1s infinite;
  -moz-animation: enter 1.1s infinite;
  animation: enter 1.1s infinite; }
  @media screen and (max-width: 70.3125rem) {
    .square-loader--square {
      width: 15px;
      height: 15px; } }

.enter {
  left: 0px;
  opacity: 1; }

.square-loader--square:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s; }

.square-loader--square:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.square-loader--square:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.square-loader--square:nth-child(4) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.typeahead-container {
  width: 96%;
  background-color: #363636;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 2%;
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  cursor: pointer;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid  #414141;
  box-shadow: 1px 1px 1px 4px rgba(0, 0, 0, 0.2); }
  .typeahead-container .typeahead-header {
    padding: 8px 5px;
    color: white;
    border-bottom: 1px solid  #414141;
    background-color: #3E3E3E; }
    .typeahead-container .typeahead-header .typeahead-instructions {
      float: right; }
  .typeahead-container .typeahead-option {
    padding: 7px 8px;
    font-size: 12px;
    border-left: 2px solid transparent; }
    .typeahead-container .typeahead-option .typeahead-command {
      color: white;
      margin-right: 5px;
      font-weight: 500; }
    .typeahead-container .typeahead-option .typeahead-sub {
      color: white;
      opacity: .3; }
    .typeahead-container .typeahead-option .typeahead-description {
      text-align: right;
      float: right;
      color: white;
      opacity: .6; }
    .typeahead-container .typeahead-option.selected {
      background-color: #333333;
      border-left: 2px solid #9A81F3; }
      .typeahead-container .typeahead-option.selected .typeahead-description {
        color: #9A81F3;
        opacity: 1; }
  .typeahead-container .typeahead-option:hover {
    background-color: #5C4C91; }
  .typeahead-container .typeahead-option.selected:hover {
    background-color: #9A7DF6; }

.shared--blurred-background {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-size: cover;
  background-position: center; }

.sideScrollingList {
  position: relative;
  width: 100%;
  height: 150px;
  padding: 20px; }
  .sideScrollingList.in-body {
    padding: 0; }
  .sideScrollingList .scroll-horizontal {
    margin: 0 auto;
    padding: 0 3%;
    display: block;
    white-space: nowrap; }
    @media screen and (max-width: 37.5rem) {
      .sideScrollingList .scroll-horizontal {
        padding: 0 10%; } }
    .sideScrollingList .scroll-horizontal .sectionHeader {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.3125rem 0.125rem 0.625rem;
      font-size: 16px;
      padding-top: 0; }
    .sideScrollingList .scroll-horizontal .stream-list--item {
      opacity: 0.3;
      cursor: default;
      display: inline-block;
      vertical-align: top;
      padding: 0 6px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
      -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
      transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
      .sideScrollingList .scroll-horizontal .stream-list--item .action {
        position: absolute;
        margin: 0.3rem 0.15rem;
        padding: 0 0.5rem;
        z-index: 2;
        opacity: 0;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        pointer-events: none; }
        .sideScrollingList .scroll-horizontal .stream-list--item .action .on-air {
          text-transform: uppercase;
          font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 700;
          color: white;
          background: rgba(243, 73, 73, 0.85);
          padding: .25rem 0.25rem;
          border-radius: 2px;
          margin-top: 0;
          display: block;
          font-size: 12px; }
        .sideScrollingList .scroll-horizontal .stream-list--item .action .scheduled {
          background: #191919;
          font-size: 12px;
          color: #fff;
          line-height: 20px;
          padding: 0 5px;
          font-weight: 700; }
      .sideScrollingList .scroll-horizontal .stream-list--item.is-active {
        opacity: 1; }
      .sideScrollingList .scroll-horizontal .stream-list--item:only-child {
        margin: auto; }
      .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-wrapper {
        width: 100%;
        padding-top: 45%;
        position: relative;
        background-color: #000; }
      .sideScrollingList .scroll-horizontal .stream-list--item .stream-card-images {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
        height: 100%;
        -webkit-box-align: stretch;
        -moz-box-align: stretch;
        box-align: stretch;
        -webkit-align-items: stretch;
        -moz-align-items: stretch;
        -ms-align-items: stretch;
        -o-align-items: stretch;
        align-items: stretch;
        -ms-flex-align: stretch;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -moz-box-pack: start;
        box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -o-justify-content: flex-start;
        justify-content: flex-start;
        -ms-flex-pack: start;
        opacity: 1;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-card-images .stream-card-image {
          width: 100%;
          height: 100%;
          position: relative;
          display: inline-block;
          float: left;
          overflow: hidden; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-card-images .stream-card-image .full-img {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
            position: absolute;
            top: 0;
            left: -2%;
            right: -2%; }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-card-images.grid-2 .stream-card-image {
          display: inline-block;
          float: left;
          width: 50%;
          height: 100%; }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-card-images.grid-3 .stream-card-image {
          width: calc(100% / 3);
          height: 100%; }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-card-images.grid-4 .stream-card-image {
          width: 25%;
          height: 100%; }
      .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--topic-wrapper {
        height: 28px;
        overflow: hidden;
        margin-top: 5px;
        width: 90%;
        max-width: 250px;
        white-space: normal;
        opacity: 1;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--topic-wrapper .stream-list--item--topic {
          color: #fff;
          font-weight: 400;
          font-size: 12px;
          line-height: 14px;
          -webkit-transition: all 0.4s;
          -moz-transition: all 0.4s;
          transition: all 0.4s;
          -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
          -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
          transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
      .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper {
        height: 33%;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 2;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
        background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
        background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face {
          height: 1.5625rem;
          width: 1.5625rem;
          background-size: cover;
          border-radius: 50%;
          margin: auto -15px auto 5px;
          -webkit-transition: all 0.4s;
          -moz-transition: all 0.4s;
          transition: all 0.4s;
          -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
          -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
          transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(1) {
            z-index: 4; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(2) {
            z-index: 3; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(3) {
            z-index: 2; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(4) {
            z-index: 1; }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--card-footer--wrapper:hover .stream-list--item--card-footer--face {
          margin: auto -5px auto 5px; }
      .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.66) 0%, transparent 35%, transparent 66%, rgba(0, 0, 0, 0.66) 100%);
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.66) 0%, transparent 35%, transparent 66%, rgba(0, 0, 0, 0.66) 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, transparent 35%, transparent 66%, rgba(0, 0, 0, 0.66) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8000000', endColorstr='#a8000000',GradientType=0 ); }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay:after {
          content: '';
          background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/play-button-cf2cb3ded3.svg");
          background-size: 15%;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0; }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay .statsContainer {
          position: absolute;
          top: 0;
          right: 0;
          text-align: right;
          color: #fff;
          padding: 5px; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay .statsContainer .totalViews {
            font-weight: 700;
            font-size: 12px; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay .statsContainer .currentViews {
            font-size: 12px; }
        .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay .topicContainer {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 90%;
          max-width: 250px;
          padding: 15px 5px 10px;
          z-index: 5; }
          .sideScrollingList .scroll-horizontal .stream-list--item .stream-list--item--overlay .topicContainer .stream-list--item--topic--hover {
            font-weight: 700;
            line-height: 14px;
            max-height: 28px;
            letter-spacing: -0.1px;
            color: #ffffff;
            overflow: hidden;
            font-size: 12px;
            max-width: 100%;
            white-space: normal; }
  .sideScrollingList .sledContainer {
    position: absolute;
    width: 100%;
    left: 0;
    padding: 0 3%; }
  .sideScrollingList .arrow-btn-wrapper {
    position: absolute;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    height: calc(100% - 33px);
    opacity: 0;
    -webkit-transition: opacity 150ms;
    -moz-transition: opacity 150ms;
    transition: opacity 150ms;
    cursor: pointer;
    max-width: 10%;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    -o-user-select: none;
    user-select: none; }
    .sideScrollingList .arrow-btn-wrapper .arrow-btn {
      margin: auto;
      padding-top: 100%;
      width: 66%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: transparent;
      border: none; }
    .sideScrollingList .arrow-btn-wrapper .arrow-btn--right {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/right-arrow-f5a119e8bf.svg"); }
    .sideScrollingList .arrow-btn-wrapper .arrow-btn--left {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/left-arrow-9fcb0e9aa7.svg"); }
  .sideScrollingList:hover .arrow-btn-wrapper {
    opacity: 0; }
    .sideScrollingList:hover .arrow-btn-wrapper:hover {
      opacity: 1; }
  .sideScrollingList .arrow-btn-wrapper--left {
    width: calc((100% - 1160px) / 2);
    left: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3); }
  .sideScrollingList .arrow-btn-wrapper--right {
    width: calc((100% - 1160px) / 2);
    right: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3); }

.stream-list--item {
  opacity: 0.3;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  padding: 0 6px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
  -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
  .stream-list--item .action {
    position: absolute;
    margin: 0.3rem 0.15rem;
    padding: 0 0.5rem;
    z-index: 2;
    opacity: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    pointer-events: none; }
    .stream-list--item .action .on-air {
      text-transform: uppercase;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 700;
      color: white;
      background: #e6554f;
      padding: .25rem 0.25rem;
      border-radius: 2px;
      margin-top: 0;
      display: block;
      font-size: 12px; }
  .stream-list--item.is-active {
    opacity: 1; }
  .stream-list--item:only-child {
    margin-left: 0 !important; }
  .stream-list--item .stream-list--item--card-wrapper {
    width: 100%;
    padding-top: 45%;
    position: relative;
    background-color: #000; }
  .stream-list--item .stream-card-images {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    -o-align-items: stretch;
    align-items: stretch;
    -ms-flex-align: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-pack: start;
    opacity: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
    .stream-list--item .stream-card-images .stream-card-image {
      width: 100%;
      height: 100%;
      position: relative;
      display: inline-block;
      float: left;
      overflow: hidden; }
      .stream-list--item .stream-card-images .stream-card-image .full-img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        position: absolute;
        top: 0;
        left: -2%;
        right: -2%; }
    .stream-list--item .stream-card-images.grid-2 .stream-card-image {
      display: inline-block;
      float: left;
      width: 50%;
      height: 100%; }
    .stream-list--item .stream-card-images.grid-3 .stream-card-image {
      width: calc(100% / 3);
      height: 100%; }
    .stream-list--item .stream-card-images.grid-4 .stream-card-image {
      width: 25%;
      height: 100%; }
  .stream-list--item .stream-list--item--topic-wrapper {
    height: 28px;
    overflow: hidden;
    margin-top: 5px;
    width: 90%;
    max-width: 250px;
    white-space: normal;
    opacity: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
    .stream-list--item .stream-list--item--topic-wrapper .stream-list--item--topic {
      color: #fff;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
      -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
      -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
      transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
  .stream-list--item .stream-list--item--card-footer--wrapper {
    height: 33%;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 2;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
    .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face {
      height: 1.5625rem;
      width: 1.5625rem;
      background-size: cover;
      border-radius: 50%;
      margin: auto -15px auto 5px;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
      -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
      -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
      transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
      .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(1) {
        z-index: 4; }
      .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(2) {
        z-index: 3; }
      .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(3) {
        z-index: 2; }
      .stream-list--item .stream-list--item--card-footer--wrapper .stream-list--item--card-footer--face:nth-child(4) {
        z-index: 1; }
    .stream-list--item .stream-list--item--card-footer--wrapper:hover .stream-list--item--card-footer--face {
      margin: auto -5px auto 5px; }
  .stream-list--item .stream-list--item--overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.66) 0%, transparent 35%, transparent 66%, rgba(0, 0, 0, 0.66) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.66) 0%, transparent 35%, transparent 66%, rgba(0, 0, 0, 0.66) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, transparent 35%, transparent 66%, rgba(0, 0, 0, 0.66) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8000000', endColorstr='#a8000000',GradientType=0 ); }
    .stream-list--item .stream-list--item--overlay:after {
      content: '';
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/play-button-cf2cb3ded3.svg");
      background-size: 15%;
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0; }
    .stream-list--item .stream-list--item--overlay .statsContainer {
      position: absolute;
      top: 0;
      right: 0;
      text-align: right;
      color: #fff;
      padding: 5px; }
      .stream-list--item .stream-list--item--overlay .statsContainer .totalViews {
        font-weight: 700;
        font-size: 12px; }
      .stream-list--item .stream-list--item--overlay .statsContainer .currentViews {
        font-size: 12px; }
    .stream-list--item .stream-list--item--overlay .topicContainer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 90%;
      max-width: 250px;
      padding: 15px 5px 10px;
      z-index: 5; }
      .stream-list--item .stream-list--item--overlay .topicContainer .stream-list--item--topic--hover {
        font-weight: 700;
        line-height: 14px;
        max-height: 28px;
        letter-spacing: -0.1px;
        color: #ffffff;
        overflow: hidden;
        font-size: 12px;
        max-width: 100%;
        white-space: normal; }

.in-body .scroll-horizontal, .row-of-blabs .scroll-horizontal {
  padding-top: 16px; }
.in-body .stream-list--item, .row-of-blabs .stream-list--item {
  opacity: 1 !important;
  margin-bottom: 20px !important; }
  .in-body .stream-list--item .stream-list--item--card-wrapper .hidden-overlay, .row-of-blabs .stream-list--item .stream-list--item--card-wrapper .hidden-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 500;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .in-body .stream-list--item .stream-list--item--card-wrapper .hidden-overlay:after, .row-of-blabs .stream-list--item .stream-list--item--card-wrapper .hidden-overlay:after {
      content: 'This blab is currently hidden and only visible to you.';
      margin: auto;
      color: #fff;
      max-width: 80%; }
  .in-body .stream-list--item.is-hidden, .row-of-blabs .stream-list--item.is-hidden {
    -webkit-filter: grayscale(1);
    filter: grayscale(1); }
    .in-body .stream-list--item.is-hidden .stream-list--item--card-wrapper .hidden-overlay, .row-of-blabs .stream-list--item.is-hidden .stream-list--item--card-wrapper .hidden-overlay {
      opacity: 1;
      pointer-events: all; }
.in-body .stream-list--item--topic-wrapper .stream-list--item--topic, .row-of-blabs .stream-list--item--topic-wrapper .stream-list--item--topic {
  color: #191919 !important; }

.widget-search-linksearch {
  width: 92%;
  position: relative;
  height: 2.375rem;
  margin: 0 auto;
  border-radius: 2px; }

.widget-search-searchTerm {
  float: left;
  width: 87%;
  border: 0;
  padding: 5px 10px;
  height: 2.25rem;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: white;
  background-color: transparent; }

.widget-search-searchTerm:focus {
  color: white; }

.widget-search-searchButton {
  position: absolute;
  width: 14%;
  height: 2.375rem;
  right: 0;
  border: 0;
  border-radius: 0 2px 2px 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  background-position: center;
  background-color: #01c270;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/submit-arrow-b34784b0ab.svg);
  background-size: 0.9375rem;
  background-repeat: no-repeat; }

/*Resize the wrap to see the search bar change!*/
.widget-search-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3.125rem; }

.sk-folding-cube {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  margin: 6em auto;
  width: 40px;
  height: 40px;
  position: relative; }

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); }

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9659F4;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg); }

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg); }

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg); }

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s; }

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0; }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1; }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0; } }
@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0; }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1; }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0; } }
.hls-spinner {
  height: 100%;
  width: 100%;
  background-color: #000000;
  position: absolute;
  z-index: 1; }
  .hls-spinner .spinner-container {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px); }
  .hls-spinner .sk-folding-cube {
    margin: 0; }

.m-quart {
  border-radius: 50px;
  border: 4px solid rgba(255, 255, 255, 0.4); }
  .m-quart:after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border-radius: 50px;
    border: 4px solid transparent;
    border-top-color: #FFF;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite; }

.circle-loader {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 38px;
  vertical-align: middle;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

.circle-loader.is-hidden {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-moz-keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
.input-toggle {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  padding-right: 10px; }
  .input-toggle__handle {
    cursor: pointer;
    position: absolute;
    visibility: hidden; }
    .input-toggle__handle:checked + .input-toggle__container::before {
      box-shadow: inset 0px 0px 0px 20px #55acee; }
    .input-toggle__handle:checked + .input-toggle__container::after {
      margin-left: 18px; }
  .input-toggle__container {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: block;
    width: 48px;
    height: 25px;
    background-color: #C8C8C8;
    border-radius: 20px; }
    .input-toggle__container::before, .input-toggle__container::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
    .input-toggle__container::before {
      -webkit-transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
      -moz-transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
      border-radius: 60px; }
    .input-toggle__container::after {
      -webkit-transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
      -moz-transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
      top: -2px;
      width: 30px;
      height: 30px;
      background-image: -webkit-linear-gradient(#fff, #e3e7e7);
      background-image: linear-gradient(#fff, #e3e7e7);
      border-radius: 50px; }

.map-notice {
  position: absolute;
  bottom: 0px;
  border: 2px solid #6BE586;
  border-radius: 10px;
  width: 100%;
  padding: 5px 10px 5px 10px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 1;
  transition: 1s ease; }
  .map-notice h3 {
    color: white; }
  .map-notice p {
    color: white;
    font-size: 1em; }
  .map-notice.hid {
    bottom: -130px;
    opacity: 0; }
  .map-notice .wel-button {
    color: white;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 3px;
    padding: 5px;
    width: 110;
    margin: 0 auto;
    margin-top: 10;
    margin-bottom: 10;
    text-align: center; }
    .map-notice .wel-button:hover {
      background-color: rgba(255, 255, 255, 0.1); }

.more-info {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/admin_title_button-cfb19dbc12.svg");
  background-size: 20px 20px;
  height: 20px;
  width: 20px;
  position: absolute;
  bottom: 5px;
  right: 10px;
  opacity: 1;
  cursor: pointer; }
  .more-info:hover {
    opacity: .8; }

.mapboxgl-map {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent; }

.mapboxgl-canvas-container.mapboxgl-interactive,
.mapboxgl-ctrl-nav-compass {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab; }

.mapboxgl-canvas-container.mapboxgl-interactive:active,
.mapboxgl-ctrl-nav-compass:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing; }

.mapboxgl-ctrl-top-left,
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  position: absolute; }

.mapboxgl-ctrl-top-left {
  top: 0;
  left: 0; }

.mapboxgl-ctrl-top-right {
  top: 0;
  right: 0; }

.mapboxgl-ctrl-bottom-left {
  bottom: 0;
  left: 0; }

.mapboxgl-ctrl-bottom-right {
  right: 0;
  bottom: 0; }

.mapboxgl-ctrl {
  clear: both; }

.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
  margin: 10px 0 0 10px;
  float: left; }

.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
  margin: 10px 10px 0 0;
  float: right; }

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
  margin: 0 0 10px 10px;
  float: left; }

.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
  margin: 0 10px 10px 0;
  float: right; }

.mapboxgl-ctrl-group {
  border-radius: 4px;
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff; }

.mapboxgl-ctrl-group > button {
  width: 30px;
  height: 30px;
  display: block;
  padding: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer; }

/* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
.mapboxgl-ctrl > button::-moz-focus-inner {
  border: 0;
  padding: 0; }

.mapboxgl-ctrl > button:last-child {
  border-bottom: 0; }

.mapboxgl-ctrl > button:hover {
  background-color: rgba(0, 0, 0, 0.05); }

.mapboxgl-ctrl-icon,
.mapboxgl-ctrl-icon > div.arrow {
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
  padding: 5px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }

.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
  padding: 5px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }

.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > div.arrow {
  width: 20px;
  height: 20px;
  margin: 5px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23333333%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat; }

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  padding: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0; }

.mapboxgl-ctrl-attrib a {
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none; }

.mapboxgl-ctrl-attrib a:hover {
  color: inherit;
  text-decoration: underline; }

.mapboxgl-ctrl-attrib .mapbox-improve-map {
  font-weight: bold;
  margin-left: 2px; }

.mapboxgl-popup {
  position: absolute;
  display: -webkit-flex;
  display: flex;
  will-change: transform;
  pointer-events: none; }

.mapboxgl-popup-anchor-top,
.mapboxgl-popup-anchor-top-left,
.mapboxgl-popup-anchor-top-right {
  -webkit-flex-direction: column;
  flex-direction: column; }

.mapboxgl-popup-anchor-bottom,
.mapboxgl-popup-anchor-bottom-left,
.mapboxgl-popup-anchor-bottom-right {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.mapboxgl-popup-anchor-left {
  -webkit-flex-direction: row;
  flex-direction: row; }

.mapboxgl-popup-anchor-right {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.mapboxgl-popup-tip {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  z-index: 1; }

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  -webkit-align-self: center;
  align-self: center;
  border-top: none;
  border-bottom-color: #fff; }

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  border-top: none;
  border-left: none;
  border-bottom-color: #fff; }

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  border-top: none;
  border-right: none;
  border-bottom-color: #fff; }

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  -webkit-align-self: center;
  align-self: center;
  border-bottom: none;
  border-top-color: #fff; }

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  border-bottom: none;
  border-left: none;
  border-top-color: #fff; }

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  border-bottom: none;
  border-right: none;
  border-top-color: #fff; }

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  -webkit-align-self: center;
  align-self: center;
  border-left: none;
  border-right-color: #fff; }

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  -webkit-align-self: center;
  align-self: center;
  border-right: none;
  border-left-color: #fff; }

.mapboxgl-popup-close-button {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  border-radius: 0 3px 0 0;
  cursor: pointer;
  background-color: transparent; }

.mapboxgl-popup-close-button:hover {
  background-color: rgba(0, 0, 0, 0.05); }

.mapboxgl-popup-content {
  position: relative;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 15px;
  pointer-events: auto; }

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
  border-top-left-radius: 0; }

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
  border-top-right-radius: 0; }

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
  border-bottom-left-radius: 0; }

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
  border-bottom-right-radius: 0; }

.mapboxgl-crosshair,
.mapboxgl-crosshair .mapboxgl-interactive,
.mapboxgl-crosshair .mapboxgl-interactive:active {
  cursor: crosshair; }

.mapboxgl-boxzoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: #fff;
  border: 2px dotted #202020;
  opacity: 0.5; }

@media print {
  .mapbox-improve-map {
    display: none; } }
.tiny-iframe {
  position: absolute;
  top: -50px;
  right: 50%;
  border-radius: 5px;
  height: 500px;
  border: none;
  background-image: url("./img/ny-times.png");
  -webkit-box-shadow: 3px 3px 55px -13px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 55px -13px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 55px -13px rgba(0, 0, 0, 0.75); }

.right-container {
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
  border-radius: 5px;
  width: 50%;
  height: 500px;
  padding-top: 60px; }

.right-container h1 {
  font-size: 6em; }

.right-container h1 span {
  font-size: .5em;
  font-weight: 500;
  line-height: 0px;
  letter-spacing: 7px; }

.right-container h4 {
  font-size: 1em;
  padding: 5px;
  background-color: #E8544A;
  color: white;
  border-radius: 3px;
  width: 200px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 30px; }

.right-container .headline {
  margin: 0 auto;
  width: 300px;
  font-size: 1.4em; }

.tiny-top {
  background-color: #F7F7F7;
  height: 400px;
  margin-top: -10px; }

.tiny-mid {
  padding-top: 90px;
  padding-bottom: 90px;
  text-align: center; }

.try-your {
  line-height: 70px;
  font-size: 1.8em;
  font-style: italic;
  color: green; }

.tiny-mid input {
  border: none;
  background-color: #EAEAEA;
  padding: 8px;
  width: 400px;
  border-radius: 5px;
  margin: 5px;
  font-size: 1.4em; }

.tiny--main-iframe {
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 5px;
  width: 80%;
  height: 800px;
  background-color: black;
  -webkit-box-shadow: 3px 3px 55px -13px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 55px -13px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 55px -13px rgba(0, 0, 0, 0.75); }

.tiny-dark-section {
  height: 400px;
  background-color: #60439E;
  width: 100%; }

.header-nav {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 700;
  padding: 0 0.625rem;
  height: 46px;
  background-color: transparent;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }

.header-nav.m-welcome {
  position: relative; }

.header--bg-gradient {
  opacity: 1;
  position: absolute;
  background-color: #141414;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; }

.header-nav.is-scrolled {
  background-color: rgba(0, 0, 0, 0.9); }
  .header-nav.is-scrolled.header--bg-gradient {
    opacity: 0; }

.header--nav-actions {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  width: 50%; }

.header--nav-actions.m-welcome {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }

.header--nav-actions--logo {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }
  .header--nav-actions--logo .logo {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_logo/ondarkbackground_owl-b82ea75288.svg");
    width: 1.875rem;
    height: 1.875rem;
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px; }
  .header--nav-actions--logo .beta-label {
    color: #FFF;
    vertical-align: middle;
    display: inline-block; }

.header--nav-actions--home,
.header--nav-actions--subscriptions {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }
  .header--nav-actions--home.hover, .header--nav-actions--home:active,
  .header--nav-actions--subscriptions.hover,
  .header--nav-actions--subscriptions:active {
    color: white; }

.header--nav-actions--home {
  margin: 0 30px; }

.header--search-form {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 350px;
  border-radius: 4px;
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.2);
  position: relative; }
  @media screen and (max-width: 37.5rem) {
    .header--search-form {
      display: none; } }

.header--search-form--field {
  width: 100%;
  padding: 8px 10px;
  padding-left: 30px;
  background-color: transparent;
  border: none;
  color: #FFF; }
  .header--search-form--field::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .header--search-form--field::-moz-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .header--search-form--field:-moz-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .header--search-form--field:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5); }

.header--search-form--label {
  position: absolute;
  left: 8px;
  top: 7px; }

.header--user-actions {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  width: 50%;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  box-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
  justify-content: flex-end;
  -ms-flex-pack: end; }

.header--user-actions--profile,
.header--user-actions--create {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.header--user-actions--create {
  color: #FFF;
  background: #323232;
  padding: 0 16px;
  margin-right: 0.625rem;
  border-radius: 0;
  line-height: 30px;
  font-weight: 600;
  font-size: 14px;
  -webkit-transition: all 150ms;
  -moz-transition: all 150ms;
  transition: all 150ms; }
  .header--user-actions--create:hover {
    background: #434343; }
  .header--user-actions--create.signup-button {
    background: #a282ff;
    padding: 0 21px; }
    .header--user-actions--create.signup-button:hover {
      background: #955ff1; }
  .header--user-actions--create .icon {
    vertical-align: middle; }
    .header--user-actions--create .icon svg {
      margin-left: 5px;
      fill: #fff; }

.header--user-actions--about {
  color: #818181;
  font-size: 13px;
  font-weight: 400;
  margin-right: 20px;
  -webkit-transition: all 150ms;
  -moz-transition: all 150ms;
  transition: all 150ms; }
  .header--user-actions--about:hover {
    color: #bcbcbc; }

.header--user-actions--channel {
  cursor: pointer; }

.header--user-actions--profile--avatar {
  width: 1.875rem;
  height: 1.875rem;
  margin: 0 10px;
  display: inline-block;
  background-color: transparent;
  cursor: pointer; }

.header--user-actions--profile--carret svg {
  vertical-align: text-top; }

.header--search-wrapper {
  margin-left: 60px;
  height: 30px;
  background: #323232;
  position: relative;
  width: 180px; }

.header--search-container {
  width: 100%;
  height: 100%;
  background: url("https://cf-cdn-01.blab-img.com/static/img/_icons/search-5e881b1ba1.svg");
  background-repeat: no-repeat;
  background-size: 8%;
  background-position: 4% center; }

.header--search-input {
  height: 100%;
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 0 30px;
  line-height: 30px;
  color: #818181;
  font-size: 12px; }

.react-site-footer {
  width: 100%;
  min-height: 120px;
  background: #f2f2f2;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .react-site-footer.fixed {
    position: fixed;
    bottom: 0;
    left: 0; }
  .react-site-footer .footer-item-list {
    margin: auto;
    text-align: center; }
  .react-site-footer .footer-item {
    display: inline-block;
    margin: 5px 10px;
    vertical-align: middle;
    text-transform: capitalize;
    color: #818181;
    font-size: 15px; }
    .react-site-footer .footer-item a {
      color: inherit; }
      .react-site-footer .footer-item a:hover {
        color: #565656; }
  .react-site-footer .logo {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_logo/ondarkbackground_owl-b82ea75288.svg");
    width: 1.875rem;
    height: 1.875rem;
    margin: 5px 20px 5px 0; }
  .react-site-footer .blab-inc {
    margin: 5px 0 5px 20px; }

.subFooter {
  width: 1260px;
  position: relative;
  text-align: center;
  margin: 50px auto;
  max-width: 95%; }
  .subFooter .subFooter--bigText-container {
    position: relative; }
    .subFooter .subFooter--bigText-container hr {
      position: absolute;
      top: 12px;
      height: 1px;
      width: 100%;
      margin: 0;
      z-index: -1;
      color: #191919; }
  .subFooter .subFooter-bigText {
    background: #fff;
    display: inline;
    padding: 0 20px;
    font-size: 24px;
    color: #191919;
    line-height: 25px; }
  .subFooter .subFooter-description-container {
    margin-top: 3px; }
  .subFooter .subFooter-description {
    color: #474747;
    font-size: 18px; }
  .subFooter .subFooter-signIn--button {
    margin: 13px auto;
    border-radius: 2px; }

.upcoming-streams-list {
  margin: 1.25rem auto;
  text-align: center; }

.upcoming-streams-list--item {
  text-align: center;
  display: inline-block;
  margin: 0.3125rem auto; }

.upcoming-stream--item {
  display: inline-block;
  max-width: 95%;
  width: 760px;
  padding: 8px;
  border: 1px solid rgba(81, 81, 81, 0.15);
  background-color: #F8F8F8;
  text-align: left;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.upcoming-stream--item--card {
  width: 137px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.upcoming-stream--startTime {
  color: rgba(94, 94, 94, 0.68);
  display: inline-block;
  padding-bottom: 10px; }
  .upcoming-stream--startTime b {
    font-weight: 600;
    color: #000; }

.upcoming-stream--show-all {
  padding-top: 10px;
  color: gray;
  display: block;
  cursor: pointer; }
  .upcoming-stream--show-all:hover {
    color: black; }

.upcoming-stream--item--title {
  padding: 0 10px;
  color: #464646;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }
  .upcoming-stream--item--title:hover {
    color: #000; }

.upcoming-stream--item--notify {
  padding: 10px 20px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: #000;
  color: #FFF; }

.stream-card--action {
  position: absolute;
  margin: 0.3rem 0.15rem;
  padding: 0 0.5rem;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
  -moz-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
  pointer-events: none; }
  .stream-card--action .on-air {
    text-transform: uppercase;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
    background: rgba(243, 73, 73, 0.85);
    padding: .25rem 0.25rem;
    border-radius: 2px;
    margin-top: 0;
    display: block;
    font-size: 12px; }
  .stream-card--action .scheduled {
    background: #191919;
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    padding: 0 5px;
    font-weight: 700; }

.popover {
  position: absolute;
  bottom: 10px;
  text-align: left;
  left: -90px;
  z-index: 1000000;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  opacity: 0; }

.popover.is-visible {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.popover--carret {
  width: 0;
  height: 0;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px; }
  .popover--carret:after {
    position: absolute;
    content: '';
    display: block;
    left: -12;
    margin-left: 0px; }

.popover.fromTop {
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -ms-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0); }
  .popover.fromTop .popover--carret {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ADADAD;
    bottom: -10px; }
    .popover.fromTop .popover--carret:after {
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 12px solid white;
      bottom: 2px; }

.popover.fromBottom {
  -webkit-transform: translate3d(0, 10px, 0);
  -moz-transform: translate3d(0, 10px, 0);
  -ms-transform: translate3d(0, 10px, 0);
  -o-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0); }
  .popover.fromBottom .popover--carret {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ADADAD;
    top: -10px; }
    .popover.fromBottom .popover--carret:after {
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-bottom: 12px solid white; }

.popover.fromBottomRight {
  -webkit-transform: translate3d(0, 10px, 0);
  -moz-transform: translate3d(0, 10px, 0);
  -ms-transform: translate3d(0, 10px, 0);
  -o-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  top: 40px;
  left: inherit;
  right: 10px; }
  .popover.fromBottomRight.narrow {
    top: 32px;
    right: -6px; }
  .popover.fromBottomRight .popover--carret {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ADADAD;
    top: -10px; }
    .popover.fromBottomRight .popover--carret:after {
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-bottom: 12px solid white; }

.popover.carret-left .popover--carret {
  left: 20px;
  right: auto; }

.popover.carret-right .popover--carret {
  right: 10px;
  left: auto; }

.popover-actions {
  padding: 0.3125rem;
  background-color: #FFF;
  min-width: 200px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  border: 1px solid #f2f2f2; }

.popover-tooltip {
  padding: 0.3125rem;
  background-color: #FFF;
  min-width: 200px;
  padding: 0;
  background: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: 4px; }

.popover-users {
  padding: 0.3125rem;
  background-color: #FFF;
  min-width: 230px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  border: 1px solid #f2f2f2; }

.popover-users--list {
  list-style-type: none; }

.popover-users--list--item {
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 5px;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  border-bottom: 1px solid #F4F4F4; }
  .popover-users--list--item:last-child {
    border-bottom: none; }

.popover-users--list--item--avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: red; }

.popover-users--list--item--info-wrapper {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

.popover-users--list--item--name {
  display: block;
  color: #000; }

.popover-users--list--item--username {
  display: block;
  color: rgba(0, 0, 0, 0.65); }

.popover-users--list--item--btn-subscribe {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  float: right; }

.popover-channel-actions {
  left: 70%; }

.popover-dropdown {
  padding: 0.3125rem;
  background-color: #FFF;
  min-width: 200px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  border: 1px solid #f2f2f2; }

.popover-dropdown--list {
  list-style-type: none; }

.popover-dropdown--list--item {
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 5px;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  border-bottom: 1px solid #F4F4F4; }
  .popover-dropdown--list--item:last-child {
    border-bottom: none; }

.popover-dropdown--list--item--icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.popover-dropdown--list--item--action {
  display: block;
  color: #000; }

.new-blab-link .popover-dropdown--list--item--action {
  color: #8E4DF3; }

.popover-dropin {
  border-radius: 0.125rem;
  text-align: center;
  width: 92%;
  position: absolute;
  left: 50%;
  margin-left: -46%;
  bottom: 4.375rem; }
  @media screen and (max-width: 60rem) {
    .popover-dropin {
      display: none; } }
  .popover-dropin p {
    text-align: center;
    padding: 1.25rem 2.1875rem;
    width: auto !important; }
  .popover-dropin .close {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg);
    background-repeat: no-repeat;
    background-size: 0.9375rem 0.9375rem;
    background-position: center;
    cursor: pointer;
    opacity: 1;
    pointer-events: all !important; }

.popover-action {
  position: relative;
  border-radius: 0 0 0.125rem 0.125rem;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2); }
  .popover-action:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(1, 194, 112, 0);
    border-top-color: #01c270;
    border-width: 14px;
    margin-left: -14px; }

.popover-dropin-recording {
  border-radius: 0.125rem;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  margin-left: -40%;
  margin-top: -40%;
  height: 80%;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/meta-meta-flag-27676573cf.svg);
  background-repeat: no-repeat;
  background-size: 2.8125rem 2.5rem;
  background-position: center 20%;
  padding: 32% 5% 20%;
  z-index: 2; }
  @media screen and (min-width: 60rem) and (max-width: 90.0625rem) {
    .popover-dropin-recording {
      padding: 37% 5%;
      width: 92%;
      margin-left: -46%;
      margin-top: -46%;
      height: 92%; } }
  @media screen and (max-width: 60rem) {
    .popover-dropin-recording {
      background-image: none;
      padding: 8% 5%;
      width: 92%;
      margin-left: -46%;
      margin-top: -46%;
      height: 92%; } }

.popover-cancel {
  background-color: #323232;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 0;
  border-radius: 0 0 0 2px; }
  .popover-cancel:hover {
    background: #3f3f3f; }

.popover-continue {
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 50%;
  border-radius: 0 0 2px 0; }

.popover-dropin-recording-toast {
  border-radius: 2px;
  position: absolute;
  z-index: 5000;
  bottom: 5%;
  width: 92%;
  left: 50%;
  margin-left: -46%;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/meta-meta-flag-27676573cf.svg);
  background-repeat: no-repeat;
  background-size: 0.875rem 0.75rem;
  background-position: 0.9375rem 1.25rem;
  padding: 0.9375rem 2.5rem; }
  @media screen and (max-width: 60rem) {
    .popover-dropin-recording-toast {
      padding: 0.9375rem 1.875rem 0.9375rem 2.5rem; } }
  .popover-dropin-recording-toast .close {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg);
    background-repeat: no-repeat;
    background-size: 0.9375rem 0.9375rem;
    background-position: center;
    cursor: pointer;
    opacity: 1;
    pointer-events: all !important; }

.permission-tip {
  background-color: #9675EC;
  width: 290px;
  border-radius: 4px;
  position: fixed;
  box-shadow: 1px 0px 1px 2px rgba(0, 0, 0, 0.15); }

.permission-tip--carret {
  width: 0;
  height: 0;
  position: absolute;
  bottom: -10px;
  left: 60px;
  margin-left: -5px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #9675EC;
  top: -10px; }
  .permission-tip--carret:after {
    position: absolute;
    content: '';
    display: block;
    left: -12;
    margin-left: 0px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #9675EC; }

.permission-tip--body {
  display: block;
  width: 100%;
  padding: 15px 10px; }

.permission-tip--body--text {
  color: #FFF;
  font-weight: 600;
  line-height: 1.7; }

.permission-tip--action {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 10px;
  width: 10px;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg");
  opacity: 0.4;
  cursor: pointer; }

.permission-tip--action:hover {
  opacity: 0.8; }

.permission-center {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0; }

.permission-center--text {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.permission-center--text--action {
  color: #FFF;
  display: block;
  margin-bottom: 20px; }

.permission-center--text--subline {
  display: block;
  color: #FFF; }

.channel-header {
  width: 100%;
  z-index: 100; }

.channel--header-profile--cover {
  min-height: 320px;
  width: 100%;
  background-color: #E4E4E4;
  overflow: hidden;
  position: relative;
  padding-bottom: 1.25rem;
  padding-top: 50px; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--cover {
      min-height: 180px; } }

.channel--header-profile--featured {
  display: block;
  position: relative;
  z-index: 500;
  margin: 0 auto;
  width: 640px;
  height: 480px; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--featured {
      display: none; } }

.channel--header-profile--cover--imageOg,
.channel--header-profile--cover--imageBlurred,
.channel--header-profile--cover--darkenedOverlay {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0; }

.channel--header-profile--cover--darkenedOverlay {
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 400; }

.channel--header-profile--cover--imageBlurred {
  z-index: 300; }

.channel--header-profile--meta {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-left: 166px;
  padding-right: 8px; }
  @media screen and (max-width: 71.25rem) {
    .channel--header-profile--meta {
      padding-left: 120px; } }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta {
      padding-left: 8px; } }

.channel--header-profile--meta--avatar {
  width: 149px;
  height: 149px;
  background-color: #FFF;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: -74px;
  left: 8px;
  z-index: 600;
  overflow: hidden; }
  @media screen and (max-width: 71.25rem) {
    .channel--header-profile--meta--avatar {
      width: 100px;
      height: 100px;
      top: -50px; } }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta--avatar {
      width: 80px;
      height: 80px;
      top: -40px; } }

.channel--header-profile--meta--days-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: opacity 150ms;
  -moz-transition: opacity 150ms;
  transition: opacity 150ms;
  cursor: default; }
  .channel--header-profile--meta--days-container .channel--header-profile--meta--days {
    margin: auto;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 0;
    line-height: 1;
    font-weight: 700;
    cursor: default; }
  .channel--header-profile--meta--days-container .channel--header-profile--meta--on-blab {
    margin: auto;
    margin-top: 0;
    color: #fff;
    font-weight: 700;
    cursor: default; }

.channel--header-profile--meta--avatar:hover .channel--header-profile--meta--days-container {
  opacity: 1; }

.channel--header-profile--meta--follow-you {
  display: inline-block;
  background: #b1b1b1;
  color: #474747;
  text-transform: uppercase;
  padding: 0.3125rem;
  margin-left: 0.4375rem;
  font-size: 0.65rem; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta--follow-you {
      font-size: 9px;
      display: none; } }

.channel--header-profile--meta-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta-wrapper {
      padding-left: 90px; } }

.channel--header-profile--meta-info {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: left; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta-info {
      margin-bottom: 5px; } }

.channel--header-profile--meta--name {
  display: inline-block;
  cursor: pointer;
  margin-top: 0.3125rem; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta--name {
      margin-top: 0;
      font-size: 15px; } }

.channel--header-profile--meta--username {
  display: inline-block;
  margin-left: 5px;
  color: #6B6B6B; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta--username {
      margin: 0;
      padding-bottom: 5px;
      font-size: 11px;
      display: block; } }

.channel--header-profile--meta--bio {
  padding-right: 12.5rem;
  display: block;
  color: #8F8F8F; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta--bio {
      text-align: left;
      padding: 10px 0; } }

.channel--header-profile--meta--social {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 0.625rem;
  padding: 5px 0; }

.meta-link--twitter {
  width: 18px;
  height: 18px;
  display: block;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/twitter_dark-3848deefcc.svg");
  opacity: 0.3; }
  .meta-link--twitter:hover {
    opacity: 0.5; }

.channel--header-profile--meta-actions {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-top: 0.625rem; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta-actions {
      margin-top: 0; } }

.channel--header-profile--meta-info {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

.meta-actions--subscribe-btn {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.meta-actions--more-btn {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-top: 0.625rem; }

.channel--header-profile--meta--subscribeCount {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  color: rgba(0, 0, 0, 0.55); }
  .channel--header-profile--meta--subscribeCount .count {
    font-weight: 800;
    padding-right: 5px; }
  @media screen and (max-width: 37.5rem) {
    .channel--header-profile--meta--subscribeCount {
      font-size: 15px; } }
  .channel--header-profile--meta--subscribeCount.active {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px; }

.channel-scrolled--header {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  height: 45px;
  top: 46px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  z-index: 600;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .channel-scrolled--header.is-scrolled {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

.channel-scrolled--header-container {
  max-width: 1080px;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 0 5px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.channel-scrolled--header--avatar {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px; }

.channel-scrolled--header--name {
  font-size: 1rem;
  vertical-align: middle;
  color: #000;
  padding-top: 0.625rem; }

.channel-scrolled--header-name {
  float: right;
  display: inline-block; }

.channel-scrolled--header-actions {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

.channel-scrolled--header--subscribe-button {
  float: right;
  margin-right: 10px; }

.channel-scrolled--header--more-button {
  float: right; }

.channel-section {
  width: 100%;
  background-color: #FFF;
  min-height: 100vh; }

.channel--content-nav {
  width: 100%;
  display: block;
  padding-bottom: 8px;
  border-bottom: 2px solid #f2f2f2; }

.content-nav--item {
  padding: 0 10px;
  padding-bottom: 8px;
  color: rgba(0, 0, 0, 0.2);
  margin-right: 15px;
  cursor: pointer; }
  .content-nav--item:hover {
    color: rgba(0, 0, 0, 0.4); }
  .content-nav--item.is-selected {
    border-bottom: 2px solid black;
    color: black; }

.channel--content {
  max-width: 67.5rem;
  margin: 0 auto;
  display: block;
  padding: 0 8px;
  margin-top: 2.5rem; }
  @media screen and (max-width: 37.5rem) {
    .channel--content {
      margin-top: 20px; } }

.channel-content--group {
  margin-top: 2.5rem; }

.grid--rows {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: rows;
  -moz-box-orient: rows;
  box-orient: rows;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: rows;
  -moz-flex-direction: rows;
  flex-direction: rows;
  -ms-flex-direction: rows;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify;
  margin-bottom: 1.25rem;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media screen and (max-width: 67.5rem) {
    .grid--rows {
      display: inline-block;
      text-align: center;
      width: 100%; } }

.channel-stream--item.row-1 {
  width: 49%; }
  .channel-stream--item.row-1:first-child {
    margin-left: 5px !important;
    padding-bottom: 25px; }
  .channel-stream--item.row-1:last-child {
    padding-bottom: 25px; }
  @media screen and (max-width: 37.5rem) {
    .channel-stream--item.row-1 {
      width: 100%; } }

.channel-stream--item.row-2 {
  width: 49%; }
  .channel-stream--item.row-2:first-child {
    padding-bottom: 25px; }
  .channel-stream--item.row-2:last-child {
    padding-bottom: 25px; }
  @media screen and (max-width: 37.5rem) {
    .channel-stream--item.row-2 {
      width: 100%; } }

.channel-stream--item.row-3 {
  width: 32%;
  padding: 0;
  padding-bottom: 25px; }
  @media screen and (max-width: 56.25rem) {
    .channel-stream--item.row-3 {
      width: 49%; } }
  @media screen and (max-width: 37.5rem) {
    .channel-stream--item.row-3 {
      width: 100%;
      padding-bottom: 25px; } }

.channel-stream--item.row-4 {
  width: 23%;
  padding: 0;
  padding-bottom: 25px; }
  @media screen and (max-width: 56.25rem) {
    .channel-stream--item.row-4 {
      width: 49%; } }
  @media screen and (max-width: 37.5rem) {
    .channel-stream--item.row-4 {
      width: 100%;
      padding-bottom: 25px; } }

.channel--header-profile--cover .settings {
  cursor: pointer;
  position: absolute;
  top: 30px;
  left: 0px;
  z-index: 1000 !important;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 2.8125rem;
  height: 2.8125rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 90.0625rem) {
    .channel--header-profile--cover .settings {
      width: 2.5rem;
      height: 2.5rem; } }
  .channel--header-profile--cover .settings span {
    opacity: 0.9;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem; }
  .channel--header-profile--cover .settings:hover span {
    opacity: 1; }
  .channel--header-profile--cover .settings .stream-settings-dropdown {
    top: 2.5rem;
    position: absolute;
    z-index: 100;
    left: 100px;
    margin-left: -6.25rem;
    display: block; }
    .channel--header-profile--cover .settings .stream-settings-dropdown.dont-show {
      display: none; }

.react-hero {
  max-height: 44.375rem; }

.live-cell {
  background-color: red;
  padding: 0.3125rem;
  text-align: center;
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 3.5rem;
  border-radius: 0.1875rem;
  color: white;
  z-index: 100;
  font-weight: 900; }

.featured--home {
  background: rgba(20, 20, 20, 0.9);
  margin-top: 2.875rem;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  padding: 0 0 0.625rem 0; }
  .featured--home .featured--home-topSection {
    padding: 0.625rem 0.75rem;
    margin: 0 auto;
    width: 72.5rem;
    max-width: 90%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 0;
    position: relative; }
  .featured--home .topSection--meta-container {
    margin: auto;
    margin-left: 0;
    padding-right: 3vw; }
    .featured--home .topSection--meta-container .topSection--featured--topic {
      font-size: 2vw;
      line-height: 1.3;
      font-weight: 400;
      margin: 0;
      color: #fff; }
    .featured--home .topSection--meta-container .topSection--featured--header {
      font-size: 4vw;
      line-height: 1;
      font-weight: 400;
      margin: 0;
      margin-top: 0.625rem;
      color: #fff; }
    .featured--home .topSection--meta-container .topSection--featured--sub {
      font-size: 1.5vw;
      line-height: 1.3;
      font-weight: 400;
      margin: 0;
      margin-bottom: 1.25rem;
      color: #fff; }
    .featured--home .topSection--meta-container .topSection--featured-callers {
      margin-top: 1.125rem;
      margin-bottom: 2.75rem;
      font-size: 1.2vw;
      color: #fff; }
    .featured--home .topSection--meta-container .topSection--actionBlock-wrapper .topSection--button {
      padding: 0.625rem 1.25rem;
      background: #474747;
      color: #fff;
      font-size: 0.9375rem;
      cursor: pointer;
      font-weight: 700;
      border-radius: 2px; }
    .featured--home .topSection--meta-container .topSection--actionBlock-wrapper .topSection--button-main-CTA {
      background: #a282ff;
      margin-right: 1.25rem;
      -webkit-transition: all 150ms;
      -moz-transition: all 150ms;
      transition: all 150ms; }
      .featured--home .topSection--meta-container .topSection--actionBlock-wrapper .topSection--button-main-CTA:hover {
        background: #955ff1; }
  .featured--home .featured-home--player {
    margin: auto 0;
    width: 640px;
    height: 480px;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    flex-shrink: 0;
    -ms-flex-negative: 0;
    position: relative; }
  .featured--home .playerControls {
    position: absolute;
    bottom: 0;
    left: -35px;
    text-align: right;
    color: #ffffff;
    cursor: pointer;
    padding: 5px;
    opacity: .5;
    -webkit-transition: all 150ms;
    -moz-transition: all 150ms;
    transition: all 150ms; }
    .featured--home .playerControls:hover {
      opacity: 1; }
    .featured--home .playerControls .pauseButton {
      max-width: 20px; }

.body--home {
  margin-top: 46px; }
  .body--home .row--wrapper {
    display: block;
    margin: 0 auto 100px; }
    .body--home .row--wrapper .grid--rows {
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify; }
    .body--home .row--wrapper .row--meta {
      margin-bottom: 6px; }
      .body--home .row--wrapper .row--meta .row--title {
        color: #A282FF;
        font-weight: 600;
        -webkit-transition: 150ms all;
        -moz-transition: 150ms all;
        transition: 150ms all;
        text-transform: capitalize; }
        .body--home .row--wrapper .row--meta .row--title:hover {
          color: #955ff1; }
      .body--home .row--wrapper .row--meta .row--description {
        color: rgba(0, 0, 0, 0.7);
        margin-left: 10px;
        font-weight: 400;
        font-size: 75%; }
    .body--home .row--wrapper .row--inner {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: rows;
      -moz-box-orient: rows;
      box-orient: rows;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: rows;
      -moz-flex-direction: rows;
      flex-direction: rows;
      -ms-flex-direction: rows;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      box-lines: multiple;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .body--home .row-of-blabs {
    width: 1160px;
    max-width: 94%; }
  .body--home .horizontal-list-of-blabs {
    width: 100%;
    padding: 40px 0 55px;
    background: #F2F2F2; }
    .body--home .horizontal-list-of-blabs .row--meta {
      margin: 0 auto;
      max-width: 94%; }
  .body--home .blab--card--dummy-container {
    margin: auto;
    margin-bottom: 20px; }
  .body--home .blab--card-dummy--inner {
    width: 100%;
    padding: 45% 0 0;
    background: #141414; }
  .body--home .blab--card-dummy--description .blab--card-dummy--first-line {
    background: rgba(0, 0, 0, 0.2);
    width: 90%;
    padding-top: 4%;
    display: block;
    margin: 6px 0; }
  .body--home .blab--card-dummy--description .blab--card-dummy--second-line {
    background: rgba(0, 0, 0, 0.1);
    width: 66%;
    padding-top: 3%;
    display: block;
    margin: 0 0 6px 0; }
  .body--home .blab--card-dummy--description .blab--card-dummy--third-line {
    background: rgba(0, 0, 0, 0.1);
    width: 50%;
    padding-top: 3%;
    display: block;
    margin: 0 0 6px 0; }

.stream-in-body--meta-wrapper {
  padding: 6px 0;
  text-align: left; }
  .stream-in-body--meta-wrapper .stream-in-body-topic {
    font-size: 14px;
    color: #191919;
    font-weight: 600;
    line-height: 19px; }
    .stream-in-body--meta-wrapper .stream-in-body-topic a {
      color: inherit; }
  .stream-in-body--meta-wrapper .stream-in-body-callers {
    color: #474747;
    font-size: 13px;
    line-height: 18px; }
    .stream-in-body--meta-wrapper .stream-in-body-callers a {
      color: inherit; }
      .stream-in-body--meta-wrapper .stream-in-body-callers a:hover {
        color: #7d43df; }
  .stream-in-body--meta-wrapper .stream-in-body-stats {
    color: #474747;
    font-size: 13px;
    line-height: 18px; }

.row--footer {
  text-align: right; }
  .row--footer a {
    color: #a282ff;
    font-size: 16px;
    line-height: 1;
    text-transform: capitalize; }
    .row--footer a:hover {
      color: #A787E0; }

.search-body {
  margin-top: 80px; }

.home--searchHeader-container {
  margin-top: 46px;
  height: 60px;
  background: #a282ff;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .home--searchHeader-container .searchTerm {
    color: #fff;
    margin: auto;
    font-size: 32px;
    font-weight: 400;
    line-height: 1; }

.list-of-blabs--item {
  display: flex !important;
  padding: 2px !important;
  margin-bottom: 16px !important;
  -webkit-transition: all 150ms;
  -moz-transition: all 150ms;
  transition: all 150ms; }
  .list-of-blabs--item a {
    color: inherit; }
  .list-of-blabs--item:hover {
    background: #F2F2F2; }

.list-of-blabs--item--card-wrapper {
  width: 252px;
  height: 114px;
  position: relative;
  background-color: #000;
  margin: auto 0; }

.list-of-blabs--item--meta-wrapper {
  margin: auto;
  text-align: left;
  margin-left: 18px; }

.list-of-blabs--item--callers-faces-wrapper {
  z-index: 2;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  transition: all 0.15s;
  padding-right: 25px; }
  .list-of-blabs--item--callers-faces-wrapper .stream-list--item--card-footer--face {
    height: 2.5rem;
    width: 2.5rem;
    background-size: cover;
    border-radius: 50%;
    margin: auto -25px auto 10px;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    transition: all 0.15s; }
    .list-of-blabs--item--callers-faces-wrapper .stream-list--item--card-footer--face:nth-child(1) {
      z-index: 1;
      margin: auto -25px auto 10px !important; }
    .list-of-blabs--item--callers-faces-wrapper .stream-list--item--card-footer--face:nth-child(2) {
      z-index: 2; }
    .list-of-blabs--item--callers-faces-wrapper .stream-list--item--card-footer--face:nth-child(3) {
      z-index: 3; }
    .list-of-blabs--item--callers-faces-wrapper .stream-list--item--card-footer--face:nth-child(4) {
      z-index: 4; }
  .list-of-blabs--item--callers-faces-wrapper:hover .stream-list--item--card-footer--face {
    margin: auto -10px auto 10px; }

.list-of-blabs--item--meta-topic {
  color: #191919;
  font-size: 20px;
  font-weight: 600; }

.list-of-blabs--item--meta-callers {
  color: #474747;
  font-size: 16px;
  line-height: 24px; }
  .list-of-blabs--item--meta-callers a {
    -webkit-transition: all 150ms;
    -moz-transition: all 150ms;
    transition: all 150ms; }
    .list-of-blabs--item--meta-callers a:hover {
      color: #7d43df !important; }

.no-results {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .no-results .no-results-wrapper {
    margin: auto;
    text-align: center; }
  .no-results .no-results-image {
    height: 60px;
    width: 60px;
    margin: 0 auto 10px;
    background: url("https://cf-cdn-01.blab-img.com/static/img/_logo/fail-owl-c530ef44bd.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
  .no-results .no-results-text {
    font-size: 18px;
    font-weight: 400;
    color: #474747; }

.welcome--step-container {
  max-width: 100%;
  width: 1080px;
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: 0 10px;
  padding-bottom: 131px; }

.welcome-body {
  margin: 160px auto 30px;
  max-width: 90%;
  width: 1160px;
  min-height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row; }
  .welcome-body .welcome--side-bar {
    display: inline-block;
    margin: 0 auto 20px;
    margin-left: 0;
    max-width: 100%;
    background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
    z-index: 2; }
    @media screen and (max-width: 78.8125rem) {
      .welcome-body .welcome--side-bar {
        width: 100%; } }
    .welcome-body .welcome--side-bar .welcome-box {
      width: 300px;
      text-align: center;
      background: #A282FF;
      padding: 50px 30px; }
      @media screen and (max-width: 78.8125rem) {
        .welcome-body .welcome--side-bar .welcome-box {
          width: 100%; } }
    .welcome-body .welcome--side-bar .continue-button-wrapper {
      margin-top: 20px; }
      .welcome-body .welcome--side-bar .continue-button-wrapper .continue-button {
        background: #b1b1b1;
        border: none;
        color: #fff;
        font-size: 15px;
        line-height: 20px;
        padding: 7px 22px;
        font-weight: 600;
        -webkit-transition: all 150ms;
        -moz-transition: all 150ms;
        transition: all 150ms; }
        .welcome-body .welcome--side-bar .continue-button-wrapper .continue-button:hover {
          background: #979797; }
      .welcome-body .welcome--side-bar .continue-button-wrapper .highlighted {
        background: #A282FF; }
        .welcome-body .welcome--side-bar .continue-button-wrapper .highlighted:hover {
          background: #955ff1; }
      .welcome-body .welcome--side-bar .continue-button-wrapper .continue-helper-text {
        color: #7A7A7A;
        font-style: italic;
        margin-top: 10px; }
  .welcome-body .welcome--side-bar-text {
    font-size: 35px;
    font-weight: 700;
    color: #ffffff;
    line-height: 46px;
    margin-bottom: 10px; }
  .welcome-body .welcome--side-bar-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6); }
  .welcome-body .welcome--tag-selection-wrapper {
    position: relative;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    max-width: calc(100% - 320px);
    margin: auto;
    margin-right: 0;
    margin-top: 0; }
    @media screen and (max-width: 78.8125rem) {
      .welcome-body .welcome--tag-selection-wrapper {
        max-width: 100%; } }

@-webkit-keyframes checkMarkAppear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  65.5% {
    opacity: .9;
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-moz-keyframes checkMarkAppear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  65.5% {
    opacity: .9;
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); } }
@keyframes checkMarkAppear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  65.5% {
    opacity: .9;
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-webkit-keyframes tagFlyOut {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0); } }
@-moz-keyframes tagFlyOut {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0); } }
@keyframes tagFlyOut {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0); } }
.welcome-subHeader {
  position: fixed;
  top: 46px;
  width: 100%;
  background: #fff;
  z-index: 3; }
  .welcome-subHeader .welcome-subHeader--wrapper {
    width: 1160px;
    margin: 0 auto;
    padding: 30px 0;
    border-bottom: 1px solid #f2f2f2;
    max-width: 90%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
  .welcome-subHeader .selectedTags-wrapper {
    margin: auto auto auto 0; }
    @media screen and (max-width: 62.5625rem) {
      .welcome-subHeader .selectedTags-wrapper {
        display: none; } }
  .welcome-subHeader .continue-button-wrapper {
    margin: auto 0 auto auto;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    flex-shrink: 0;
    -ms-flex-negative: 0;
    height: 44px;
    width: 118px;
    background: #b1b1b1;
    position: relative;
    -webkit-transition: all 150ms;
    -moz-transition: all 150ms;
    transition: all 150ms; }
    @media screen and (max-width: 62.5625rem) {
      .welcome-subHeader .continue-button-wrapper {
        margin: auto;
        width: 100%; } }
    .welcome-subHeader .continue-button-wrapper.eyeCatcher {
      -webkit-animation: eyeCatcher 0.3s normal forwards ease-in-out;
      -moz-animation: eyeCatcher 0.3s normal forwards ease-in-out;
      animation: eyeCatcher 0.3s normal forwards ease-in-out;
      -webkit-animation-iteration-count: 1;
      -moz-animation-iteration-count: 1;
      animation-iteration-count: 1; }
    .welcome-subHeader .continue-button-wrapper .continue-button--background {
      background: #955ff1;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0%;
      z-index: 1;
      -webkit-transition: all 150ms;
      -moz-transition: all 150ms;
      transition: all 150ms; }
    .welcome-subHeader .continue-button-wrapper .continue-button {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      bottom: 0;
      z-index: 2;
      background: transparent;
      color: #ffffff;
      font-size: 15px;
      font-weight: 600;
      -webkit-transition: all 150ms;
      -moz-transition: all 150ms;
      transition: all 150ms; }
    .welcome-subHeader .continue-button-wrapper:hover .continue-button--background {
      background: #955ff1; }

@-webkit-keyframes eyeCatcher {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }
  100% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-moz-keyframes eyeCatcher {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }
  100% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); } }
@keyframes eyeCatcher {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }
  100% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); } }
.welcome-body--subheader {
  width: 100%;
  display: block;
  text-align: center; }

.welcome-body--subheader--text {
  padding: 40px 10px;
  font-weight: 200;
  display: inline-block; }

.welcome-body--subheader--header {
  padding: 10px 10px;
  font-weight: 400;
  display: block;
  margin: 0 auto;
  padding-top: 40px; }

.welcome-body--twitter {
  padding: 20px 0;
  width: 100%;
  border: 1px solid #E3E3E3;
  background-color: #FDFDFD;
  border-radius: 5px;
  max-width: 600px;
  margin: 15px auto; }

.welcome-body--twitter--text {
  margin-right: 15px; }

.permissions-gcm-container {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: transparent;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
  .permissions-gcm-container .permissions-gcm--skip {
    display: none; }

.permissions-gcm {
  padding-right: 5%;
  padding-top: 4%;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in; }
  @media screen and (max-width: 37.5rem) {
    .permissions-gcm {
      width: 95%;
      left: 2.5%;
      padding: 0; } }

.tester {
  display: inline-block;
  width: 100%; }
  .tester:before {
    content: '';
    float: left;
    padding-bottom: 54.24214%; }
  .tester:after {
    content: '';
    display: table;
    clear: both; }

.permissions-gcm--body {
  text-align: center;
  display: block;
  float: right;
  position: relative;
  width: 500px; }
  @media screen and (max-width: 37.5rem) {
    .permissions-gcm--body {
      width: 85%;
      top: 15%;
      float: none;
      left: 6.5%; } }
  @media screen and (max-width: 25rem) {
    .permissions-gcm--body {
      width: 94%;
      left: 3%; } }

.permissions-gcm--body--headline {
  text-align: center;
  font-weight: 400;
  color: #FFF;
  -webkit-transition: all 0.2s ease-in 0.4s;
  -moz-transition: all 0.2s ease-in 0.4s;
  transition: all 0.2s ease-in 0.4s;
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -ms-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  opacity: 0; }

.permissions-gcm--body--notification {
  width: 460px;
  margin: 30px 0;
  display: inline-block;
  -webkit-transform: translate3d(-20px, 0, 0);
  -moz-transform: translate3d(-20px, 0, 0);
  -ms-transform: translate3d(-20px, 0, 0);
  -o-transform: translate3d(-20px, 0, 0);
  transform: translate3d(-20px, 0, 0);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in 0.1s;
  -moz-transition: all 0.2s ease-in 0.1s;
  transition: all 0.2s ease-in 0.1s; }
  @media screen and (max-width: 37.5rem) {
    .permissions-gcm--body--notification {
      width: 100%; } }

.permissions-gcm--body--subline {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  line-height: 2;
  -webkit-transition: all 0.2s ease-in 0.4s;
  -moz-transition: all 0.2s ease-in 0.4s;
  transition: all 0.2s ease-in 0.4s;
  -webkit-transform: translate3d(0, 10px, 0);
  -moz-transform: translate3d(0, 10px, 0);
  -ms-transform: translate3d(0, 10px, 0);
  -o-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  opacity: 0;
  width: 80%; }

.permissions-gcm--actions {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify;
  position: fixed;
  right: 0;
  display: block;
  bottom: 50px;
  width: 100%;
  text-align: center;
  -webkit-transition: all 0.2s ease-in 0.4s;
  -moz-transition: all 0.2s ease-in 0.4s;
  transition: all 0.2s ease-in 0.4s;
  -webkit-transform: translate3d(0, 10px, 0);
  -moz-transform: translate3d(0, 10px, 0);
  -ms-transform: translate3d(0, 10px, 0);
  -o-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  opacity: 0; }

.permissions-gcm--actions--btn {
  color: #FFF;
  display: inline-block;
  font-weight: 600;
  padding: 15px;
  max-width: 350px;
  width: 90%;
  border-radius: 4px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  cursor: pointer; }

.m-btn-transparent {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease; }
  .m-btn-transparent:hover {
    color: white; }

.m-btn-green {
  background-color: #49A576;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease; }
  .m-btn-green:hover {
    background-color: #449a6e; }

.permissions-gcm--skip {
  width: 16px;
  height: 16px;
  top: 20px;
  right: 20px;
  position: absolute;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg");
  opacity: 0.4;
  background-color: transparent;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }

.permissions-gcm--skip:hover {
  opacity: 1; }

.permissions-device--graphic {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_images/macbook-06bb8a2295.png");
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: top right;
  z-index: -1;
  -webkit-transform: translate3d(-10px, 0, 0);
  -moz-transform: translate3d(-10px, 0, 0);
  -ms-transform: translate3d(-10px, 0, 0);
  -o-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
  @media screen and (max-width: 37.5rem) {
    .permissions-device--graphic {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/_images/android-phone-a706115bd4.png");
      background-position: top center; } }

.permissions-device--graphic--gradient {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20%;
  background-image: -webkit-linear-gradient(transparent, black);
  background-image: linear-gradient(transparent, black);
  background-color: transparent; }

.permissions-gcm.is-visible .permissions-device--graphic {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 0.28; }
.permissions-gcm.is-visible .permissions-gcm--body--notification {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }
.permissions-gcm.is-visible .permissions-gcm--body--headline {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }
.permissions-gcm.is-visible .permissions-gcm--body--subline,
.permissions-gcm.is-visible .permissions-gcm--actions {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.permissions-gcm.is-blurred {
  opacity: 0.8; }

.permissions-gcm-container.is-poppedIn {
  background-color: black; }
  .permissions-gcm-container.is-poppedIn .permissions-gcm--skip {
    display: block; }

.fake-notification {
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  background-color: #FFF;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.25);
  position: relative;
  text-align: left;
  border-radius: 3px;
  overflow: hidden; }
  .fake-notification:before {
    content: '';
    float: left;
    padding-bottom: 28.26087%; }
  .fake-notification:after {
    content: '';
    display: table;
    clear: both; }
  @media screen and (max-width: 60rem) {
    .fake-notification {
      width: 400px;
      margin: 0 auto; } }
  @media screen and (max-width: 37.5rem) {
    .fake-notification {
      width: 100%;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      padding: 0 10px; }
      .fake-notification:before {
        content: '';
        float: left;
        padding-bottom: 19.23077%; }
      .fake-notification:after {
        content: '';
        display: table;
        clear: both; } }

.fake-notification--graphic {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-right: 1px solid #EEEEEE;
  width: 28%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 37.5rem) {
    .fake-notification--graphic {
      width: 22%;
      border-right: none; }
      .fake-notification--graphic:before {
        content: '';
        float: left;
        padding-bottom: 100%; }
      .fake-notification--graphic:after {
        content: '';
        display: table;
        clear: both; } }

.fake-notification--graphic--img {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 60px; }

.fake-notification--body {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 15px;
  color: #000; }

.fake-notification--body--title {
  display: block;
  max-width: 100%;
  margin-bottom: 10px;
  font-weight: 600;
  color: #000; }
  @media screen and (max-width: 37.5rem) {
    .fake-notification--body--title {
      margin-bottom: 5px;
      font-size: 13px; } }

.fake-notification--body--title--time-label {
  opacity: 0.2;
  display: none;
  float: right;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8); }
  @media screen and (max-width: 37.5rem) {
    .fake-notification--body--title--time-label {
      display: inline-block; } }

.fake-notification--body--text {
  display: inline-block;
  font-weight: 200;
  color: #414141;
  line-height: 1.7; }

.fake-notifcation.m-mobile:before {
  content: '';
  float: left;
  padding-bottom: 33.02326%; }
.fake-notifcation.m-mobile:after {
  content: '';
  display: table;
  clear: both; }

.tag-card {
  width: 320px;
  background-color: white;
  margin: 10px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer; }
  .tag-card:before {
    content: '';
    float: left;
    padding-bottom: 49.17355%; }
  .tag-card:after {
    content: '';
    display: table;
    clear: both; }
  @media screen and (max-width: 37.5rem) {
    .tag-card {
      width: 95%; } }

.tag-card--info {
  position: absolute;
  color: #FFF;
  width: 90%;
  height: 84%;
  top: 8%;
  left: 5%;
  border: 1px solid #FFF;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  z-index: 5;
  background-color: transparent;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }

.tag-card--info--name {
  text-transform: uppercase;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);
  font-weight: 400;
  color: #FFF;
  margin-bottom: 4px;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  -webkit-transform: translate3d(0, 30px, 0);
  -moz-transform: translate3d(0, 30px, 0);
  -ms-transform: translate3d(0, 30px, 0);
  -o-transform: translate3d(0, 30px, 0);
  transform: translate3d(0, 30px, 0); }
  @media screen and (max-width: 37.5rem) {
    .tag-card--info--name {
      font-size: 25px;
      -webkit-transform: translate3d(0, 20px, 0);
      -moz-transform: translate3d(0, 20px, 0);
      -ms-transform: translate3d(0, 20px, 0);
      -o-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0); } }

.tag-card--info--selected-mark {
  width: 24px;
  height: 24px;
  margin-top: 10px;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform: translate3d(0, 17px, 0);
  -moz-transform: translate3d(0, 17px, 0);
  -ms-transform: translate3d(0, 17px, 0);
  -o-transform: translate3d(0, 17px, 0);
  transform: translate3d(0, 17px, 0);
  opacity: 0;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/check-tag-green-20354f6bba.svg"); }

.tag-card--info--desc {
  color: #8f8f8f;
  opacity: 0;
  max-width: 90%;
  max-height: 19px;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  -webkit-transform: translate3d(0, 17px, 0);
  -moz-transform: translate3d(0, 17px, 0);
  -ms-transform: translate3d(0, 17px, 0);
  -o-transform: translate3d(0, 17px, 0);
  transform: translate3d(0, 17px, 0); }
  @media screen and (max-width: 37.5rem) {
    .tag-card--info--desc {
      opacity: 1;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2); } }

.tag-card--bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2; }

.tag-card--bg--overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }

.tag-card--bg--img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  -webkit-transition: 0.4s all ease;
  -moz-transition: 0.4s all ease;
  transition: 0.4s all ease;
  top: 0;
  left: 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  background-size: cover;
  background-position: center; }

.tag-card:hover .tag-card--info {
  background-color: #FFF; }
.tag-card:hover .tag-card--info--name {
  color: black;
  text-shadow: 0 0 0 #000;
  -webkit-transform: translate3d(0, 17px, 0);
  -moz-transform: translate3d(0, 17px, 0);
  -ms-transform: translate3d(0, 17px, 0);
  -o-transform: translate3d(0, 17px, 0);
  transform: translate3d(0, 17px, 0); }
.tag-card:hover .tag-card--info--desc {
  opacity: 1;
  -webkit-transform: translate3d(0, 17px, 0);
  -moz-transform: translate3d(0, 17px, 0);
  -ms-transform: translate3d(0, 17px, 0);
  -o-transform: translate3d(0, 17px, 0);
  transform: translate3d(0, 17px, 0); }
  @media screen and (max-width: 37.5rem) {
    .tag-card:hover .tag-card--info--desc {
      color: #8f8f8f;
      text-shadow: 0 0 0 #000; } }
.tag-card:hover .tag-card--bg--img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2); }

.tag-card.is-selected .tag-card--info {
  background-color: #FFF;
  border-color: #FFF; }
.tag-card.is-selected .tag-card--info--name {
  color: black;
  text-shadow: 0 0 0 #000;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
.tag-card.is-selected .tag-card--info--desc {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  color: #8f8f8f;
  max-height: 30px; }
.tag-card.is-selected .tag-card--bg--overlay {
  background: rgba(0, 0, 0, 0.65); }
.tag-card.is-selected .tag-card--info--selected-mark {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.step-footer {
  width: 100%;
  background: rgba(112, 71, 238, 0.95);
  position: fixed;
  z-index: 500;
  text-align: center;
  color: #FFF;
  bottom: 0;
  padding: 40px 0;
  box-shadow: 0px -2px 1px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  min-height: 0vh; }
  @media screen and (max-width: 100rem) {
    .step-footer {
      padding: 15px 0; } }
  .step-footer.is-expanding {
    -webkit-transition: all 600ms ease-in;
    -moz-transition: all 600ms ease-in;
    transition: all 600ms ease-in;
    background: #000;
    min-height: 100vh;
    z-index: 800; }
  .step-footer.is-expanded {
    background: #000;
    height: 100vh;
    z-index: 800; }

.step-footer.is-visible {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.step-footer--content {
  display: inline-block;
  transition: all 500ms ease;
  width: 100%; }

.step-footer--content--text {
  display: inline-block;
  vertical-align: middle;
  padding: 15px 0;
  color: #FFF; }
  @media screen and (max-width: 37.5rem) {
    .step-footer--content--text {
      margin-bottom: 15px; } }

.step-footer--content--text b {
  font-weight: 700; }

.step-footer--content--action {
  vertical-align: middle;
  display: inline-block;
  border-radius: 4px;
  padding: 10px 20px;
  min-width: 150px;
  background-color: #49A576;
  color: #FFF;
  font-weight: 600;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }
  @media screen and (max-width: 37.5rem) {
    .step-footer--content--action {
      width: 95%;
      display: block;
      margin: 0 auto; } }

.step-footer--content--action.m-leftMargin {
  margin-left: 15px; }
  @media screen and (max-width: 37.5rem) {
    .step-footer--content--action.m-leftMargin {
      margin-left: 0; } }

.step-footer--content--action:hover {
  box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.3);
  background-color: #43976c;
  color: #FFF; }

.step-footer--content--spinner--loader {
  padding: 15px 0;
  position: relative;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.step-footer--content--spinner--success {
  width: 38px;
  height: 38px;
  position: absolute;
  background-color: red;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: translate3d(-38px, 0, 0) scale(1);
  -moz-transform: translate3d(-38px, 0, 0) scale(1);
  -ms-transform: translate3d(-38px, 0, 0) scale(1);
  -o-transform: translate3d(-38px, 0, 0) scale(1);
  transform: translate3d(-38px, 0, 0) scale(1);
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; }

.step-footer--content--spinner--success-text {
  -webkit-transform: scale(1.3) translate3d(0, -40px, 0);
  -moz-transform: scale(1.3) translate3d(0, -40px, 0);
  -ms-transform: scale(1.3) translate3d(0, -40px, 0);
  -o-transform: scale(1.3) translate3d(0, -40px, 0);
  transform: scale(1.3) translate3d(0, -40px, 0);
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.step-footer--content--spinner {
  padding: 10px 0; }

.step-footer--content--spinner.is-done .step-footer--content--spinner--success {
  -webkit-transform: translate3d(-38px, 0, 0) scale(1);
  -moz-transform: translate3d(-38px, 0, 0) scale(1);
  -ms-transform: translate3d(-38px, 0, 0) scale(1);
  -o-transform: translate3d(-38px, 0, 0) scale(1);
  transform: translate3d(-38px, 0, 0) scale(1);
  opacity: 1; }
.step-footer--content--spinner.is-done .step-footer--content--spinner--loader {
  -webkit-animation: loader 0.5s ease-in;
  -moz-animation: loader 0.5s ease-in;
  animation: loader 0.5s ease-in; }
@-webkit-keyframes loader {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    -moz-transform: translate3d(0, 0, 0) scale(0);
    -ms-transform: translate3d(0, 0, 0) scale(0);
    -o-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 0; } }
@-moz-keyframes loader {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    -moz-transform: translate3d(0, 0, 0) scale(0);
    -ms-transform: translate3d(0, 0, 0) scale(0);
    -o-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 0; } }
@keyframes loader {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    -moz-transform: translate3d(0, 0, 0) scale(0);
    -ms-transform: translate3d(0, 0, 0) scale(0);
    -o-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 0; } }
.step-footer--content--slide-up {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center; }

.step-footer--content--slide-up--toggle {
  display: inline-block; }

.step-footer--content--slide-up--text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.8); }

.suggested-card {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  border-bottom: 1px solid #EBEBEB;
  padding: 20px 0; }
  @media screen and (max-width: 37.5rem) {
    .suggested-card {
      padding: 20px 10px; } }

.suggested-card:last-child {
  border-bottom: none; }

.suggested-card--image {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 80px; }

.suggested-card--image--img {
  width: 60px;
  height: 60px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }
  @media screen and (max-width: 37.5rem) {
    .suggested-card--image--img {
      width: 45px;
      height: 45px; } }

.suggested-card--meta {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: left;
  padding: 0 10px;
  padding-right: 15px; }

.suggested-card--meta--tag {
  border-radius: 30px;
  color: #000;
  display: inline-block;
  vertical-align: middle;
  background-color: #F2F2F2;
  margin-left: 10px;
  padding: 2px 8px; }

.suggested-card--meta--title {
  font-weight: 600;
  vertical-align: middle;
  margin-bottom: 5px; }

.suggested-card--actions {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 10px 0; }

.suggested-card--actions--follow-btn {
  width: 40px;
  height: 40px;
  color: #000;
  background-color: transparent;
  display: inline-block;
  font-weight: 400; }

.suggested-card--actions--follow-btn:hover .suggested-card--actions--action--add .system-icons {
  fill: #9F74FF; }

.ios-step--device {
  -webkit-transform: scale(0.7) translate3d(0, 20%, 0);
  -moz-transform: scale(0.7) translate3d(0, 20%, 0);
  -ms-transform: scale(0.7) translate3d(0, 20%, 0);
  -o-transform: scale(0.7) translate3d(0, 20%, 0);
  transform: scale(0.7) translate3d(0, 20%, 0);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  opacity: 0; }
  .ios-step--device .screen {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_images/liveux-view-a08292eaad.png");
    background-size: contain; }

.ios-step--device.ipad {
  position: absolute;
  left: 50%;
  margin-left: -318px;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  top: 20%; }
  .ios-step--device.ipad .screen {
    background-image: url("../img/_images/ios-default-ipad.png"); }

.ios-step--device.iphone6plus {
  position: absolute;
  left: 50%;
  margin-left: -232px;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -o-transform: scale(0.75);
  transform: scale(0.75);
  top: 10%; }

.ios-step--device.iphone6 {
  position: absolute;
  left: 50%;
  margin-left: -210px; }

.ios-step--device.iphone5s {
  position: absolute;
  left: 50%;
  margin-left: -180px;
  top: 10%; }

.ios-step--heading {
  display: block;
  width: 100%;
  position: absolute;
  top: 30px;
  opacity: 0;
  -webkit-transform: translate3d(0, -10%, 0);
  -moz-transform: translate3d(0, -10%, 0);
  -ms-transform: translate3d(0, -10%, 0);
  -o-transform: translate3d(0, -10%, 0);
  transform: translate3d(0, -10%, 0);
  -webkit-transition: all 0.15s ease-in 0.1s;
  -moz-transition: all 0.15s ease-in 0.1s;
  transition: all 0.15s ease-in 0.1s; }

.ios-step--heading--title {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  color: #FFF;
  text-align: center; }

.ios-step--heading--text {
  margin: 10px auto;
  text-align: center;
  width: 80%;
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8); }

.ios-step--actions {
  padding-top: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  background-image: -webkit-linear-gradient( top , transparent, black);
  background-image: linear-gradient(to bottom, transparent, black);
  -webkit-transition: all 0.14s ease-in 0.12s;
  -moz-transition: all 0.14s ease-in 0.12s;
  transition: all 0.14s ease-in 0.12s;
  opacity: 0;
  -webkit-transform: translate3d(0, 20%, 0);
  -moz-transform: translate3d(0, 20%, 0);
  -ms-transform: translate3d(0, 20%, 0);
  -o-transform: translate3d(0, 20%, 0);
  transform: translate3d(0, 20%, 0); }

.ios-step--actions--btn {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-bottom: 10px;
  width: 90%;
  max-width: 600px;
  height: 50px;
  font-weight: 600;
  color: #FFF;
  border-radius: 4px; }

.ios-step-3.is-visible .permissions-device--graphic {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 0.28; }
.ios-step-3.is-visible .ios-step--heading {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }
.ios-step-3.is-visible .ios-step--device {
  -webkit-transform: translate3d(0, 0, 0) scale(0.7);
  -moz-transform: translate3d(0, 0, 0) scale(0.7);
  -ms-transform: translate3d(0, 0, 0) scale(0.7);
  -o-transform: translate3d(0, 0, 0) scale(0.7);
  transform: translate3d(0, 0, 0) scale(0.7);
  opacity: 1; }
.ios-step-3.is-visible .ios-step--actions {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.permissions-gcm-container.is-poppedIn {
  background-color: black; }

.modal-anchor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500; }

.modal {
  z-index: 500;
  position: fixed;
  top: 0;
  left: 0;
  display: Flex;
  width: 100%;
  height: 100%; }

.modal--full-width {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.modal--full-width.m-white {
  background-color: rgba(255, 255, 255, 0.95); }

.modal--full-width.m-black {
  background-color: rgba(0, 0, 0, 0.95); }

.modal--full-width--close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: block; }

.modal--full-width--close--icon {
  display: inline-block; }

.modal--slide-in {
  height: 100%;
  position: absolute; }

.modal--slide-in.m-right {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

.modal-slide-in.m-left {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

.modal--slide-in.is-visible {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.modal--standard {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.toast-container {
  position: fixed;
  width: 100%;
  bottom: 50px;
  left: 0;
  pointer-events: none;
  z-index: 100000000; }

.toast-actionable {
  margin: 10px auto;
  width: 590px;
  max-width: 95%;
  border-radius: 6px;
  pointer-events: all !important;
  background-color: #FBFBFB;
  -webkit-transform: translate3d(0, 20%, 0);
  -moz-transform: translate3d(0, 20%, 0);
  -ms-transform: translate3d(0, 20%, 0);
  -o-transform: translate3d(0, 20%, 0);
  transform: translate3d(0, 20%, 0);
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  box-shadow: 0px 2px 11px 4px rgba(0, 0, 0, 0.31);
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  opacity: 0; }

.toast-actioanble--content {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
  max-width: 390px;
  border-right: 1px solid #B8B8B8; }

.toast-actionable--content--text {
  line-height: 1.5; }

.toast-actionable--action {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.toast-actionable--art {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .toast-actionable--art span {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    padding: 10px; }

.props-animation-ex {
  position: relative; }
  .props-animation-ex .feels {
    display: block;
    left: 10px;
    top: -10px;
    background-color: red;
    position: absolute; }

.props-animation-ex.is-animating .feels:nth-child(1) {
  -webkit-animation: animateUp-4 1.5s ease-in-out infinite;
  -moz-animation: animateUp-4 1.5s ease-in-out infinite;
  animation: animateUp-4 1.5s ease-in-out infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none; }
.props-animation-ex.is-animating .feels:nth-child(2) {
  -webkit-animation: animateUp-2 1.5s ease-in-out infinite;
  -moz-animation: animateUp-2 1.5s ease-in-out infinite;
  animation: animateUp-2 1.5s ease-in-out infinite;
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none; }
.props-animation-ex.is-animating .feels:nth-child(3) {
  -webkit-animation: animateUp-4 1.5s ease-in-out infinite;
  -moz-animation: animateUp-4 1.5s ease-in-out infinite;
  animation: animateUp-4 1.5s ease-in-out infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }
.props-animation-ex.is-animating .feels:nth-child(4) {
  -webkit-animation: animateUp-3 1.2s ease-in-out infinite;
  -moz-animation: animateUp-3 1.2s ease-in-out infinite;
  animation: animateUp-3 1.2s ease-in-out infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s; }
.props-animation-ex.is-animating .feels:nth-child(5) {
  -webkit-animation: animateUp-4 1.3s ease-in-out infinite;
  -moz-animation: animateUp-4 1.3s ease-in-out infinite;
  animation: animateUp-4 1.3s ease-in-out infinite;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none; }
.props-animation-ex.is-animating .feels:nth-child(6) {
  -webkit-animation: animateUp-2 1.5s ease-in-out infinite;
  -moz-animation: animateUp-2 1.5s ease-in-out infinite;
  animation: animateUp-2 1.5s ease-in-out infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s; }

.props-animation-ex--hands {
  width: 100%;
  height: 100%;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/handsUp-95fb1189b6.png"); }

.btn-toast {
  background: transparent;
  width: 120px;
  text-align: center;
  padding: 10px 0;
  color: #767676; }
  .btn-toast:hover {
    color: black; }

.btn-dismiss-toast {
  width: 22px;
  height: 22px;
  background-color: #4A4A4A;
  border-radius: 50%;
  position: absolute;
  z-index: 100;
  top: -10px;
  right: -10px;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .btn-dismiss-toast span {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg");
    opacity: 0.7; }
    .btn-dismiss-toast span:hover {
      opacity: 1; }

.toast-actionable.is-slided-in {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.toast-actionable:hover .btn-dismiss-toast {
  opacity: 1;
  -webkit-transform: translate3d(0, 10%, 0);
  -moz-transform: translate3d(0, 10%, 0);
  -ms-transform: translate3d(0, 10%, 0);
  -o-transform: translate3d(0, 10%, 0);
  transform: translate3d(0, 10%, 0); }

.vjs-control-bar,
.vjs-big-play-button,
.vjs-caption-settings,
.vjs-error-display,
.vjs-text-track-display,
.vjs-loading-spinner {
  display: none !important; }

.OT_archiving {
  display: none;
  visibility: hidden; }

.OT_subscriber,
.OT_publisher {
  display: inline-block;
  height: 100%;
  width: 100%; }

.changelog-badge {
  color: #955ff1 !important; }

#banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 100000000; }

.banner {
  width: 100%;
  height: 20%;
  min-height: 90px;
  max-height: 90px;
  display: table;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .banner .wrapper {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row; }
  .banner .text-wrapper {
    display: table;
    height: 100%;
    width: 100%;
    height: 100px; }
    .banner .text-wrapper h1 {
      font-size: 1.6em;
      display: table-cell;
      vertical-align: middle;
      color: #FFF;
      width: 100%;
      text-align: left;
      font-weight: 600; }
      .banner .text-wrapper h1 button {
        cursor: pointer;
        margin-left: 60px;
        font-size: 0.8em;
        padding: 10px 20px;
        border-radius: 30px;
        color: #FFF;
        border: 1px solid #FFF;
        font-weight: 400;
        background: transparent;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
  .banner .image {
    width: 20%;
    max-width: 200px;
    min-width: 80px;
    height: 100px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat; }
  .banner .close {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 32px;
    top: 50%;
    margin-top: -16px;
    background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/close.png);
    background-size: contain; }

.banner.outro {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

.banner-notication {
  background: rgba(120, 74, 216, 0.97); }
  .banner-notication .image {
    background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/notify_web_icon.png); }
  .banner-notication button:hover {
    background-color: #FFF !important;
    color: #784ad8 !important; }

.twitter-notication {
  background: #00ACEE; }
  .twitter-notication .image {
    background-position: center !important;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter_notifcaton-8436954a9a.png); }
  .twitter-notication button:hover {
    background-color: #FFF !important;
    color: #00ACEE !important; }

.ios.fill {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #7E58D6; }

.ios .text {
  display: table;
  width: 100%;
  top: 0;
  height: 45%;
  position: absolute;
  color: #FFF; }
  .ios .text .cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
    .ios .text .cell h1 {
      width: 100%;
      text-align: center;
      padding: 1em;
      margin: 0; }
    .ios .text .cell button {
      display: inline-block;
      margin: 0 auto;
      padding: 0.6em 2em;
      border-radius: 40px;
      font-weight: 500;
      font-size: 1.5em;
      color: #7E58D6;
      background: #FFF;
      outline: none;
      letter-spacing: 1.1;
      border: none; }
    .ios .text .cell .icon-app {
      height: 4em;
      width: 90%;
      margin: 0 5%;
      display: inline-block;
      background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/text-icon-logo.png);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; }
.ios .image-app {
  height: 55%;
  bottom: 0;
  width: 100%;
  position: absolute;
  background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/cap_beta.png);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat; }

.not_compatible.fill {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat; }

.browser-support-text {
  font-size: 1.5rem; }
  @media screen and (max-width: 90.0625rem) {
    .browser-support-text {
      font-size: 1.25rem; } }
  @media screen and (max-width: 70.3125rem) {
    .browser-support-text {
      font-size: 0.9375rem; } }

.not_compatible .text {
  position: absolute;
  display: table;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 45%;
  color: #FFF; }
  .not_compatible .text .cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
    .not_compatible .text .cell h1 {
      width: 100%;
      text-align: center;
      padding: 1em;
      margin: 0;
      font-weight: 400;
      font-size: 3.5vh; }
    .not_compatible .text .cell button {
      display: inline-block;
      margin: 0 auto;
      padding: 0.6em 2em;
      border-radius: 40px;
      font-weight: 500;
      font-size: 1.5em;
      color: #242B34;
      background: #EFEFEF;
      outline: none;
      letter-spacing: 1.1;
      border: none; }
    .not_compatible .text .cell .chrome-icon {
      height: 161px;
      width: 161px;
      margin: 0 5%;
      display: inline-block;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/chrome_logo-21fb28b688.png);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; }
.not_compatible .background {
  position: absolute;
  width: 100%;
  height: 100%; }
  .not_compatible .background .riano {
    position: absolute;
    top: 0;
    left: 0;
    width: 284px;
    height: 225px;
    margin: 5em;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/disconnected_bird-d6ce89e7be.png);
    background-repeat: no-repeat; }
  .not_compatible .background .riano-spacex {
    position: absolute;
    width: 324px;
    height: 295px;
    right: 0;
    bottom: 0;
    margin: 5em;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/disconnected_ship-21c416b938.png);
    background-position: bottom right;
    background-repeat: no-repeat; }

.about-container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  padding: 16px;
  max-width: 100%;
  margin-top: 60px; }
  .about-container .img-container {
    margin: auto;
    width: 1024px;
    max-width: 100%; }
    .about-container .img-container .full-width {
      width: 100%; }
  .about-container .download-button-container {
    margin: auto;
    margin-top: 16px;
    margin-bottom: 32px; }
    .about-container .download-button-container .download-button {
      background-repeat: no-repeat;
      background-position: 0.875rem center;
      background-color: #955ff1;
      background-size: 0.875rem;
      padding: .65rem 3rem;
      color: #fff;
      -webkit-transition: all 200ms;
      -moz-transition: all 200ms;
      transition: all 200ms; }
      .about-container .download-button-container .download-button:hover {
        opacity: .9;
        cursor: pointer; }

.profile-card-module {
  width: 100% !important;
  padding: 5px;
  margin-bottom: 10px; }
  .profile-card-module:last-child {
    margin-bottom: 0; }
  .profile-card-module .profile-card {
    background: #FFF;
    width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    border-radius: 3px;
    padding: 12px;
    pointer-events: all !important; }
    .profile-card-module .profile-card .user-info {
      display: inline-block;
      vertical-align: middle;
      padding-left: 5px; }
    .profile-card-module .profile-card .card-header {
      position: relative; }
    .profile-card-module .profile-card.has-CoD {
      border-radius: 3px 3px 0 0; }
  .profile-card-module .fullname,
  .profile-card-module .username {
    display: block;
    margin: 0 auto; }
  .profile-card-module .fullname {
    font-size: 16px;
    color: #121118;
    font-weight: 600; }
  .profile-card-module .username {
    color: #757575;
    font-size: 12px; }
  .profile-card-module .profile-image {
    width: 40px;
    display: inline-block;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    vertical-align: middle; }
  .profile-card-module .stats {
    color: #333333;
    padding: 1em 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 12px;
    text-align: center; }
    .profile-card-module .stats .blab-count {
      width: 50%;
      padding: 0.8em;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      border-right: 1px solid #121018; }
      .profile-card-module .stats .blab-count a {
        display: inline-block;
        color: #2A2635; }
    .profile-card-module .stats .followers-count {
      width: 50%;
      padding: 0;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto; }
      .profile-card-module .stats .followers-count a {
        display: inline-block;
        color: #2A2635; }
  .profile-card-module .action-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    padding: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end; }
    .profile-card-module .action-container button {
      background-color: transparent;
      font-size: 14px;
      font-weight: 600;
      border-radius: 0.4em;
      height: 40px;
      width: 40px;
      margin: auto;
      cursor: pointer;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 0.3s ease-in;
      -moz-transition: all 0.3s ease-in;
      transition: all 0.3s ease-in;
      /* custom */ }
      .profile-card-module .action-container button:hover {
        background-color: rgba(51, 209, 48, 0.1); }
    .profile-card-module .action-container button.scale {
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9); }
    .profile-card-module .action-container .deny-button {
      color: #E45653;
      border: 1px solid #E45653;
      margin-left: 10px;
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/_buttons/close_btn-daa4e5bb50.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 35%; }
      .profile-card-module .action-container .deny-button:hover {
        background-color: rgba(228, 86, 83, 0.1); }
    .profile-card-module .action-container .accept-call {
      border: 1px solid #33D130;
      color: #33D130;
      white-space: nowrap;
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/_buttons/accept_btn-c62850daa1.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 50%; }
  .profile-card-module .descriptive-content {
    display: block; }
    .profile-card-module .descriptive-content .user-bio {
      padding: 10px 0;
      margin-top: 5px; }
  .profile-card-module .top-section h1 {
    width: 100%;
    color: #FFF; }
  .profile-card-module .code-or-device-container {
    position: relative;
    width: 100%;
    height: 30px; }
    .profile-card-module .code-or-device-container .code-container {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      background: #e6554f;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      border-radius: 0 0 3px 3px; }
      .profile-card-module .code-or-device-container .code-container .code-icon {
        height: 66%;
        margin: auto 10px; }
      .profile-card-module .code-or-device-container .code-container .reason-text {
        margin: auto 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700; }
    .profile-card-module .code-or-device-container .device-container {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      border-radius: 0 0 3px 3px; }
      .profile-card-module .code-or-device-container .device-container .code-icon {
        height: 66%;
        margin: auto 10px; }
      .profile-card-module .code-or-device-container .device-container .reason-text {
        margin: auto 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700; }
      .profile-card-module .code-or-device-container .device-container .show-preview {
        margin: auto 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        position: absolute;
        right: 0;
        line-height: 14px;
        padding: 8px 10px;
        cursor: default; }
        .profile-card-module .code-or-device-container .device-container .show-preview .preview-image {
          position: absolute;
          bottom: 30px;
          height: 100px;
          width: 100px;
          background-size: cover;
          background-position: center;
          right: 3px;
          border-radius: 10px 10px 0 0;
          max-height: 0px;
          border: 0px solid transparent;
          -webkit-transition: all 250ms ease-in;
          -moz-transition: all 250ms ease-in;
          transition: all 250ms ease-in; }
        .profile-card-module .code-or-device-container .device-container .show-preview:hover .preview-image {
          border: 2px solid #6ED27A;
          max-height: 300px; }
  .profile-card-module .has-code .code-container, .profile-card-module .has-code .device-container {
    border-radius: 0 !important; }
  .profile-card-module .is-mobile .device-container {
    background: #e6554f; }
  .profile-card-module .is-web .device-container {
    background: #6ed27a; }

.ui-profile-card {
  background-color: #FFF;
  overflow: hidden;
  padding: 0.625rem;
  border-radius: 4px;
  position: relative;
  width: 10rem;
  border: 1px solid #ECECEC; }

.ui-profile-card--bg {
  position: absolute;
  height: 5rem;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100; }

.ui-profile-card-actions {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 400;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }

.ui-profile-card-actions--gradient {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: -webkit-linear-gradient(black 10%, transparent 100%) top;
  background: linear-gradient(to   , transparent 100%) top;
  z-index: 200; }

.ui-profile-card-actions--follow {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  background-color: white;
  margin: 0.3125rem;
  position: relative;
  cursor: pointer;
  z-index: 300;
  opacity: 0.8; }
  .ui-profile-card-actions--follow:hover {
    opacity: 1; }

.ui-profile-card-actions--more {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0.3125rem;
  background-size: 70%;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/dotted-menu-c928cad652.svg");
  position: relative;
  cursor: pointer;
  z-index: 300;
  opacity: 0.8;
  opacity: 0;
  pointer-events: none; }
  .ui-profile-card-actions--more:hover {
    opacity: 1; }

.ui-profile-card--container {
  position: relative;
  z-index: 400; }

.ui-profile-card--avatar {
  width: 4.375rem;
  height: 4.375rem;
  margin: 1.25rem auto;
  margin-bottom: 0.625rem;
  box-sahdow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); }

.ui-profile-card--fullname {
  display: block;
  color: #3C3C3C; }
  .ui-profile-card--fullname:hover {
    color: #3C3C3C !important; }

.ui-profile-card--username {
  display: block;
  color: #6C6C6C; }
  .ui-profile-card--username:hover {
    color: #6C6C6C !important; }

.ui-profile-card--twitter-link {
  display: block;
  width: 1rem;
  height: 1rem;
  opacity: 0.3;
  margin: 0.625rem auto;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter_dark-3848deefcc.svg);
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in; }
  .ui-profile-card--twitter-link:hover {
    opacity: 0.4; }

.ui-profile-card--button {
  width: 90%;
  font-size: 0.8125rem;
  color: #FFF;
  font-weight: 600;
  border-radius: 0.25rem;
  background-color: #4A4A4A;
  padding: 0.5625rem; }

.stream-card--item, .list-of-blabs--item {
  text-align: center;
  position: relative;
  padding-bottom: 0.625rem;
  display: block;
  overflow: hidden;
  margin: auto; }
  @media screen and (max-width: 67.5rem) {
    .stream-card--item, .list-of-blabs--item {
      margin: 5px 0;
      display: inline-block; } }
  .stream-card--item.row-2, .list-of-blabs--item.row-2 {
    padding-bottom: 25px; }
  .stream-card--item.row-3, .list-of-blabs--item.row-3 {
    padding-bottom: 25px; }
    @media screen and (max-width: 71.25rem) {
      .stream-card--item.row-3, .list-of-blabs--item.row-3 {
        font-size: 12px;
        padding-bottom: 10px; } }
  .stream-card--item:hover .card--more-options, .list-of-blabs--item:hover .card--more-options {
    display: block; }
  .stream-card--item .stream-card--item--content, .list-of-blabs--item .stream-card--item--content {
    cursor: pointer;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1); }
    .stream-card--item .stream-card--item--content:before, .list-of-blabs--item .stream-card--item--content:before {
      content: '';
      float: left;
      padding-bottom: 45%; }
    .stream-card--item .stream-card--item--content:after, .list-of-blabs--item .stream-card--item--content:after {
      content: '';
      display: table;
      clear: both; }
  .stream-card--item .stream-card-images, .list-of-blabs--item .stream-card-images {
    width: 100%;
    position: absolute;
    z-index: 1;
    height: 100%;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    -o-align-items: stretch;
    align-items: stretch;
    -ms-flex-align: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-pack: start; }
    .stream-card--item .stream-card-images .stream-card-image, .list-of-blabs--item .stream-card-images .stream-card-image {
      width: 100%;
      height: 100%;
      position: relative;
      display: inline-block;
      float: left;
      overflow: hidden; }
      .stream-card--item .stream-card-images .stream-card-image .full-img, .list-of-blabs--item .stream-card-images .stream-card-image .full-img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        position: absolute;
        top: 0;
        left: -2%;
        right: -2%; }
    .stream-card--item .stream-card-images.grid-2 .stream-card-image, .list-of-blabs--item .stream-card-images.grid-2 .stream-card-image {
      display: inline-block;
      float: left;
      width: 50%;
      height: 100%; }
    .stream-card--item .stream-card-images.grid-3 .stream-card-image, .list-of-blabs--item .stream-card-images.grid-3 .stream-card-image {
      width: calc(100% / 3);
      height: 100%; }
    .stream-card--item .stream-card-images.grid-4 .stream-card-image, .list-of-blabs--item .stream-card-images.grid-4 .stream-card-image {
      width: 25%;
      height: 100%; }
  .stream-card--item .info-layer, .list-of-blabs--item .info-layer {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
    .stream-card--item .info-layer .title-layer, .list-of-blabs--item .info-layer .title-layer {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: left;
      padding: 3px; }
      .stream-card--item .info-layer .title-layer h2, .list-of-blabs--item .info-layer .title-layer h2 {
        width: 95%;
        font-size: 1.0625rem;
        text-align: left;
        position: relative;
        z-index: 5;
        color: #fff;
        line-height: 1.4;
        font-weight: 400;
        background-color: rgba(0, 0, 0, 0.98);
        display: inline; }
        .stream-card--item .info-layer .title-layer h2 span, .list-of-blabs--item .info-layer .title-layer h2 span {
          padding: 0 2px; }
    .stream-card--item .info-layer .info-layer--length, .list-of-blabs--item .info-layer .info-layer--length {
      color: #FFF;
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.6);
      padding: 0.3125rem 0.4375rem;
      position: absolute;
      top: 3px;
      left: 3px;
      border-radius: 3px; }
    .stream-card--item .info-layer .hidden-overlay, .list-of-blabs--item .info-layer .hidden-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      opacity: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
      .stream-card--item .info-layer .hidden-overlay:after, .list-of-blabs--item .info-layer .hidden-overlay:after {
        content: 'This blab is currently hidden and only visible to you.';
        margin: auto;
        color: #fff;
        max-width: 80%; }
  .stream-card--item .info-layer--length, .list-of-blabs--item .info-layer--length {
    color: #FFF;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0.3125rem 0.4375rem;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 3px; }
  .stream-card--item.is-hidden .stream-card-images, .list-of-blabs--item.is-hidden .stream-card-images {
    -webkit-filter: grayscale(1);
    filter: grayscale(1); }
  .stream-card--item.is-hidden .info-layer .hidden-overlay, .list-of-blabs--item.is-hidden .info-layer .hidden-overlay {
    opacity: 1; }
  .stream-card--item.is-deleted, .list-of-blabs--item.is-deleted {
    display: none !important; }

.card-meta {
  padding-top: 0.3125rem; }

.card-meta--watchedTime {
  float: right;
  background-color: #EAEAEA;
  display: inline-block;
  padding: 3px 8px;
  position: relative;
  border-radius: 4px;
  cursor: default; }

.card-meta--watchedTime--icon {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/total-views-9055f33224.svg");
  width: 18px;
  height: 9px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px; }

.card-meta--watchedTime--count {
  vertical-align: middle;
  display: inline-block;
  color: #636363; }

.card--more-options {
  background-color: #FFF;
  box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1);
  width: 28px;
  border-radius: 50%;
  height: 28px;
  position: absolute;
  z-index: 700;
  top: 8px;
  right: 8px;
  opacity: 0.8;
  display: none; }
  .card--more-options.open {
    opacity: 1; }
  .card--more-options .icon {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/dotted-menu-dark-e7c864e419.svg");
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    top: 50%;
    margin-top: -9px;
    margin-left: -9px; }
  .card--more-options:hover {
    opacity: 1; }

.card-meta-participants {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.54);
  float: left; }

.card-meta-creator {
  display: inline-block; }

.card-meta-creator--avatar {
  width: 1.375rem;
  height: 1.375rem;
  margin-right: 0.3125rem;
  display: inline-block;
  vertical-align: middle; }

.card-meta-creator--name,
.card-meta-particpants--more {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  color: black;
  cursor: default; }

.card-meta-creator--name {
  cursor: pointer; }

.card-meta-paricpants--tip {
  width: 12.5rem;
  height: 9.375rem;
  position: absolute;
  background-color: red;
  top: 0;
  z-index: 400;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

.card-meta-particpants--and {
  display: inline;
  vertical-align: middle; }

.card-creator--avatar {
  width: 1.5625rem;
  display: inline-block;
  height: 1.5625rem;
  vertical-align: middle; }

.card-creator--name {
  vertical-align: middle;
  display: inline-block; }

.feed-item {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 0.25rem;
  width: 20rem;
  background-color: #ffffff;
  border: 1px solid #ECE8F3;
  margin: 0 0.625rem 1.25rem 0.625rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s; }
  @media screen and (max-width: 37.5rem) {
    .feed-item {
      width: 90%; } }
  .feed-item:hover .channel-item-admin {
    opacity: 1; }
  .feed-item .feed-images {
    position: relative;
    background-color: #F1F1F1;
    width: 100%;
    height: 10.625rem;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    -o-align-items: stretch;
    align-items: stretch;
    -ms-flex-align: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-pack: start; }
    .feed-item .feed-images.one-image .feed-image {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 100%;
      -moz-flex: 1 100%;
      -ms-flex: 1 100%;
      flex: 1 100%; }
    .feed-item .feed-images.two-images .feed-image {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 50%;
      -moz-flex: 1 50%;
      -ms-flex: 1 50%;
      flex: 1 50%; }
    .feed-item .feed-images.three-images .left {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      flex-flow: column nowrap;
      display: flex; }
      .feed-item .feed-images.three-images .left .feed-image:first-of-type {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1; }
      .feed-item .feed-images.three-images .left .feed-image:last-of-type {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1; }
    .feed-item .feed-images.three-images > .feed-image {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
    .feed-item .feed-images.four-images .left {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      flex-flow: column nowrap;
      display: flex; }
      .feed-item .feed-images.four-images .left .feed-image:first-of-type {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1; }
      .feed-item .feed-images.four-images .left .feed-image:last-of-type {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1; }
  .feed-item .feed-image {
    background-size: cover;
    background-position: center center; }
  .feed-item .feed-image-full-size {
    width: 100% !important;
    height: 100% !important; }
  .feed-item .action {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    padding: 0 0.5rem; }
  .feed-item .on-air {
    text-transform: uppercase;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    background: rgba(243, 73, 73, 0.85);
    padding: 0.3125rem 0.25rem;
    border-radius: 4px;
    margin-top: 0;
    display: block; }
  .feed-item .button, .feed-item .widget-card-ph button, .widget-card-ph .feed-item button, .feed-item .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .feed-item button, .feed-item .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .feed-item button, .feed-item .feed-item-card--subscribe-button, .feed-item .scheduled-action--start-now, .feed-item .scheduled-action--edit, .feed-item .pending-caller-cell .button-container button, .pending-caller-cell .button-container .feed-item button {
    padding: 0.0625rem 0.3125rem;
    border: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.5px;
    background-color: #818181; }
    .feed-item .button.subscribe, .feed-item .widget-card-ph button.subscribe, .widget-card-ph .feed-item button.subscribe, .feed-item .notify-followers-toast .info-block .actions button.subscribe, .notify-followers-toast .info-block .actions .feed-item button.subscribe, .feed-item .cohost-toast .info-block .actions button.subscribe, .cohost-toast .info-block .actions .feed-item button.subscribe, .feed-item .subscribe.feed-item-card--subscribe-button, .feed-item .subscribe.scheduled-action--start-now, .feed-item .subscribe.scheduled-action--edit, .feed-item .pending-caller-cell .button-container button.subscribe, .pending-caller-cell .button-container .feed-item button.subscribe {
      background-position: -0.625rem center; }
      .feed-item .button.subscribe.subscribed, .feed-item .widget-card-ph button.subscribe.subscribed, .widget-card-ph .feed-item button.subscribe.subscribed, .feed-item .notify-followers-toast .info-block .actions button.subscribe.subscribed, .notify-followers-toast .info-block .actions .feed-item button.subscribe.subscribed, .feed-item .cohost-toast .info-block .actions button.subscribe.subscribed, .cohost-toast .info-block .actions .feed-item button.subscribe.subscribed, .feed-item .subscribe.subscribed.feed-item-card--subscribe-button, .feed-item .subscribe.subscribed.scheduled-action--start-now, .feed-item .subscribe.subscribed.scheduled-action--edit, .feed-item .pending-caller-cell .button-container button.subscribe.subscribed, .pending-caller-cell .button-container .feed-item button.subscribe.subscribed {
        background-color: #955ff1;
        color: #ffffff; }
  .feed-item .watch-button {
    pointer-events: none;
    width: 4.75rem;
    height: 4.75rem;
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    left: 50%;
    margin-left: -2.375rem;
    margin-top: -2.375rem;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/play_button-236e9d5ac1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
  .feed-item .ended-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); }
  .feed-item .stream-details {
    padding: 0.625rem 0.8125rem 4.375rem;
    position: relative;
    min-height: 9.375rem; }
    .feed-item .stream-details .info .title {
      font-weight: 700;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      line-height: 1.2;
      margin: 0.1875rem 0;
      letter-spacing: -0.1px;
      word-wrap: break-word;
      word-break: break-word;
      overflow: hidden; }
    .feed-item .stream-details .host-list {
      margin-bottom: 0.1875rem; }
      .feed-item .stream-details .host-list .host {
        display: inline;
        color: #474747; }
        .feed-item .stream-details .host-list .host .host-name {
          display: inline-block;
          color: #1f1f1f; }
          .feed-item .stream-details .host-list .host .host-name:hover {
            color: #986EDF; }
    .feed-item .stream-details .tag-list .tag-item {
      display: inline-block;
      background-color: #F1F1F1;
      padding: 0.25rem 0.375rem;
      color: #474747;
      margin: 0.125rem; }
      .feed-item .stream-details .tag-list .tag-item:first-of-type {
        margin-left: 0; }
  .feed-item .activity {
    position: absolute;
    width: 15.875rem;
    bottom: 0;
    left: 0;
    padding: 0.625rem 0;
    margin: 0 0.9375rem;
    border-top: 1px solid #b1b1b1; }
  .feed-item .participant-count {
    display: inline;
    margin-right: 0.4375rem;
    color: #252525;
    font-weight: 800; }
  .feed-item .live-count {
    display: inline;
    color: #474747; }
  .feed-item .time {
    display: inline;
    color: #474747; }
  .feed-item.ended-card:hover .watch-button {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  .feed-item .hide-replay {
    width: 1.375rem;
    height: 1.375rem;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/hidden-eye-c307d96a56.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    opacity: 0.7;
    padding: 1.5rem;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    cursor: pointer; }
    .feed-item .hide-replay:hover {
      opacity: 1; }
  .feed-item .show-replay {
    font-size: 22px;
    color: #FFF;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    opacity: 0;
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4); }
  .feed-item .small-button {
    width: 25%;
    float: right;
    background-color: #FFF;
    border: 1px solid #CAC8C8;
    border-radius: 4px;
    text-transform: lowercase; }
    .feed-item .small-button:hover {
      border-color: #CAC8C8; }
  .feed-item .tag-list {
    padding-bottom: 0.3125rem; }

.feed-item.hidden-state .hide-replay {
  display: none; }
.feed-item.hidden-state .ended-overlay {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  background-color: rgba(149, 160, 174, 0.82);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
.feed-item.hidden-state .watch-button {
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/hidden-eye-c307d96a56.png);
  background-color: transparent;
  opacity: 0.9; }
.feed-item.hidden-state .feed-images:hover .ended-overlay {
  background-color: rgba(149, 160, 174, 0.92); }
  .feed-item.hidden-state .feed-images:hover .ended-overlay .show-replay {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
.feed-item.hidden-state .feed-images:hover .watch-button {
  opacity: 0; }

.old-feed-item.scheduled {
  cursor: default; }
  .old-feed-item.scheduled .action {
    width: 100%;
    display: block;
    top: auto;
    left: 0;
    bottom: 0.625rem; }
    .old-feed-item.scheduled .action .button, .old-feed-item.scheduled .action .widget-card-ph button, .widget-card-ph .old-feed-item.scheduled .action button, .old-feed-item.scheduled .action .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .old-feed-item.scheduled .action button, .old-feed-item.scheduled .action .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .old-feed-item.scheduled .action button, .old-feed-item.scheduled .action .feed-item-card--subscribe-button, .old-feed-item.scheduled .action .scheduled-action--start-now, .old-feed-item.scheduled .action .scheduled-action--edit, .old-feed-item.scheduled .action .pending-caller-cell .button-container button, .pending-caller-cell .button-container .old-feed-item.scheduled .action button {
      width: 95%;
      float: left;
      display: block;
      padding: 0.5rem 0;
      margin: 0 auto;
      text-align: center;
      border: 1px solid #955FF1;
      background-color: rgba(149, 95, 241, 0.07);
      color: #955FF1;
      -webkit-transition: all 0.15s ease-in;
      -moz-transition: all 0.15s ease-in;
      transition: all 0.15s ease-in; }
      .old-feed-item.scheduled .action .button:hover, .old-feed-item.scheduled .action .widget-card-ph button:hover, .widget-card-ph .old-feed-item.scheduled .action button:hover, .old-feed-item.scheduled .action .notify-followers-toast .info-block .actions button:hover, .notify-followers-toast .info-block .actions .old-feed-item.scheduled .action button:hover, .old-feed-item.scheduled .action .cohost-toast .info-block .actions button:hover, .cohost-toast .info-block .actions .old-feed-item.scheduled .action button:hover, .old-feed-item.scheduled .action .feed-item-card--subscribe-button:hover, .old-feed-item.scheduled .action .scheduled-action--start-now:hover, .old-feed-item.scheduled .action .scheduled-action--edit:hover, .old-feed-item.scheduled .action .pending-caller-cell .button-container button:hover, .pending-caller-cell .button-container .old-feed-item.scheduled .action button:hover {
        background-color: #955ff1;
        color: #FFF; }
      .old-feed-item.scheduled .action .button.subscribed, .old-feed-item.scheduled .action .widget-card-ph button.subscribed, .widget-card-ph .old-feed-item.scheduled .action button.subscribed, .old-feed-item.scheduled .action .notify-followers-toast .info-block .actions button.subscribed, .notify-followers-toast .info-block .actions .old-feed-item.scheduled .action button.subscribed, .old-feed-item.scheduled .action .cohost-toast .info-block .actions button.subscribed, .cohost-toast .info-block .actions .old-feed-item.scheduled .action button.subscribed, .old-feed-item.scheduled .action .subscribed.feed-item-card--subscribe-button, .old-feed-item.scheduled .action .subscribed.scheduled-action--start-now, .old-feed-item.scheduled .action .subscribed.scheduled-action--edit, .old-feed-item.scheduled .action .pending-caller-cell .button-container button.subscribed, .pending-caller-cell .button-container .old-feed-item.scheduled .action button.subscribed {
        border-color: #7d43df;
        background-color: #7d43df;
        color: #FFF; }
  .old-feed-item.scheduled .scheduled-time {
    position: absolute;
    top: 0.3125rem;
    left: 0.3125rem;
    background-color: rgba(0, 0, 0, 0.75);
    color: #FFF;
    font-weight: 600;
    padding: 0.375rem 0.75rem; }
    .old-feed-item.scheduled .scheduled-time span {
      color: #7d43df; }

.feed-item.scheduled {
  cursor: default; }
  .feed-item.scheduled .action {
    width: 100%;
    display: block;
    top: auto;
    left: 0;
    bottom: 0.625rem; }
    .feed-item.scheduled .action .button, .feed-item.scheduled .action .widget-card-ph button, .widget-card-ph .feed-item.scheduled .action button, .feed-item.scheduled .action .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .feed-item.scheduled .action button, .feed-item.scheduled .action .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .feed-item.scheduled .action button, .feed-item.scheduled .action .feed-item-card--subscribe-button, .feed-item.scheduled .action .scheduled-action--start-now, .feed-item.scheduled .action .scheduled-action--edit, .feed-item.scheduled .action .pending-caller-cell .button-container button, .pending-caller-cell .button-container .feed-item.scheduled .action button {
      width: 70%;
      float: left;
      display: block;
      padding: 0.5rem 0;
      margin: 0 auto;
      text-align: center;
      color: #955FF1;
      -webkit-transition: all 0.15s ease-in;
      -moz-transition: all 0.15s ease-in;
      transition: all 0.15s ease-in; }
    .feed-item.scheduled .action .edit-blab {
      background-color: red;
      width: 25%;
      float: right;
      letter-spacing: 1.01;
      background-color: #FFF;
      border: 1px solid #E5E5E5;
      color: rgba(95, 95, 95, 0.66) !important; }
      .feed-item.scheduled .action .edit-blab:hover {
        border-color: #808080;
        color: rgba(95, 95, 95, 0.9) !important; }
    .feed-item.scheduled .action .start-blab {
      width: 70%;
      background-color: #955ff1;
      color: #FFF; }
      .feed-item.scheduled .action .start-blab:hover {
        background-color: #8B55E8; }
    .feed-item.scheduled .action .subscribe {
      width: 100%;
      border: 1px solid #955FF1;
      background-color: rgba(149, 95, 241, 0.07);
      color: #955FF1;
      -webkit-transition: all 0.15s ease-in;
      -moz-transition: all 0.15s ease-in;
      transition: all 0.15s ease-in; }
      .feed-item.scheduled .action .subscribe:hover {
        background-color: #955ff1;
        color: #FFF; }
      .feed-item.scheduled .action .subscribe.subscribed {
        border-color: #7d43df;
        background-color: #7d43df;
        color: #FFF; }
  .feed-item.scheduled .delete-button {
    width: 0.9375rem;
    height: 0.9375rem;
    position: absolute;
    padding: 1em;
    top: 0.3125rem;
    right: 0.3125rem;
    background-color: #FFF;
    border: 1px solid #D1D1D1;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/trashcan-d1bc332e4b.png");
    background-size: 60%;
    border-radius: 3px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer; }
    .feed-item.scheduled .delete-button:hover {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/trashcan_red-7fa355ccca.png"); }

.scheduled-time {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  background-color: rgba(0, 0, 0, 0.75);
  color: #FFF;
  font-weight: 600;
  padding: 0.375rem 0.625rem; }
  .scheduled-time span {
    color: #7d43df; }

.subscriber-count {
  left: 0.3125rem;
  top: 2.375rem;
  color: #955ff1;
  position: absolute;
  padding: 0.1875rem 0.4375rem;
  background-color: rgba(0, 0, 0, 0.75); }

.ended-overlay.hiddenState {
  background-color: rgba(149, 160, 174, 0.85); }
  .ended-overlay.hiddenState .watch-button {
    background-image: url("../img/hidden.eye.png"); }

.feed-item.live .overlay-live {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #955FF1;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  z-index: 100;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .feed-item.live .overlay-live .watch-label {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    font-size: 17px;
    color: #FFF;
    font-weight: 600; }
.feed-item.live:hover .overlay-live {
  opacity: 0.8; }
.feed-item.live:hover .watch-label {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }
.feed-item.live:hover .on-air {
  opacity: 0; }

.channel-item-admin {
  background: #ffffff;
  position: absolute;
  left: 0;
  top: 8.125rem;
  opacity: 0;
  z-index: 115;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  transition: all 400ms ease; }
  .channel-item-admin .admin-controls li {
    display: inline-block;
    position: relative;
    text-align: center; }
    .channel-item-admin .admin-controls li a {
      display: block;
      padding: 0.625rem; }
      .channel-item-admin .admin-controls li a:hover img {
        opacity: 1; }
      .channel-item-admin .admin-controls li a img {
        width: 1.25rem;
        height: 1.25rem;
        opacity: 0.6; }
  .channel-item-admin .admin-category-popover {
    position: absolute;
    top: -1.25rem;
    left: 2.5rem; }
    @media screen and (max-width: 60rem) {
      .channel-item-admin .admin-category-popover {
        left: 1.25rem; } }

.user-card-modal {
  border-radius: 0.25rem;
  background: #ffffff;
  width: 22.1875rem;
  position: relative;
  padding: 0.5rem;
  margin: 0 auto;
  float: left;
  color: #1f1f1f; }
  @media screen and (max-width: 37.5rem) {
    .user-card-modal {
      width: 18.75rem; } }
  .user-card-modal .user-card-header {
    text-align: center;
    position: relative;
    z-index: 99; }
    .user-card-modal .user-card-header .profile-pic {
      width: 6rem;
      height: 6rem;
      border-radius: 100%;
      display: inline-block; }
    .user-card-modal .user-card-header .profile-info {
      margin-top: 0.65rem; }
      .user-card-modal .user-card-header .profile-info h4:hover {
        cursor: pointer;
        color: #A681E6; }
      .user-card-modal .user-card-header .profile-info p:hover {
        cursor: pointer;
        color: #A681E6; }
    .user-card-modal .user-card-header .username {
      color: #474747; }
  .user-card-modal .bio {
    color: #474747;
    margin: 0.625rem auto;
    max-width: 90%;
    text-align: center;
    overflow: hidden;
    word-wrap: break-word;
    margin-bottom: 0.5rem; }
  .user-card-modal .social-links {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem; }
    .user-card-modal .social-links span {
      font-size: 13px;
      padding: 3px 5px;
      display: inline-block;
      vertical-align: middle; }
    .user-card-modal .social-links .social-link {
      width: 17px;
      height: 17px;
      margin: 0;
      display: inline-block;
      vertical-align: middle;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
    .user-card-modal .social-links .twitter-social {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/twitter_blue-522ea6ebac.png"); }
  .user-card-modal .close {
    width: 32px;
    margin-right: -9px;
    right: 50%;
    top: -4rem; }
  .user-card-modal .activity {
    position: relative;
    width: 100%; }
    @media screen and (max-width: 37.5rem) {
      .user-card-modal .activity {
        width: 16.25rem; } }
    .user-card-modal .activity .action {
      text-align: center; }
    .user-card-modal .activity .button, .user-card-modal .activity .widget-card-ph button, .widget-card-ph .user-card-modal .activity button, .user-card-modal .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-modal .activity button, .user-card-modal .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-modal .activity button, .user-card-modal .activity .feed-item-card--subscribe-button, .user-card-modal .activity .scheduled-action--start-now, .user-card-modal .activity .scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-modal .activity button {
      margin-bottom: 0.9375rem;
      display: inline-block; }
    .user-card-modal .activity .follow-container {
      display: inline-block;
      text-align: center; }
    .user-card-modal .activity .button-follow {
      margin-bottom: 0.625rem;
      display: block; }
    .user-card-modal .activity .follows-you {
      display: inline-block;
      background: #b1b1b1;
      color: #474747;
      text-transform: uppercase;
      padding: 0.3125rem;
      margin-left: 0.4375rem;
      font-size: 0.65rem; }
  .user-card-modal .stats {
    width: 100%;
    text-align: center;
    border-top: 1px solid #818181;
    padding: 0.9375rem 0;
    position: relative; }
    .user-card-modal .stats ul {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; }
      .user-card-modal .stats ul li {
        display: inline-block;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        vertical-align: top; }
        .user-card-modal .stats ul li:first-of-type a {
          padding-left: 0; }
        .user-card-modal .stats ul li a {
          display: block;
          padding: 0 0.9375rem;
          color: #474747;
          text-transform: uppercase; }
          .user-card-modal .stats ul li a span {
            display: block;
            color: #1f1f1f;
            font-weight: 700;
            padding-bottom: 5px;
            -webkit-transition: all 200ms;
            -moz-transition: all 200ms;
            transition: all 200ms; }
            .user-card-modal .stats ul li a span:hover {
              color: #A681E6; }
          .user-card-modal .stats ul li a:hover {
            color: #A681E6; }
            .user-card-modal .stats ul li a:hover span {
              color: #A681E6; }
  .user-card-modal .block-user-stream {
    width: 1.875rem;
    cursor: pointer;
    height: 1.875rem;
    opacity: 0.65;
    position: absolute;
    top: 3rem;
    right: 3rem;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/admin_ban_red-0653921bcf.svg);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100; }
    .user-card-modal .block-user-stream:hover {
      opacity: 1; }
  .user-card-modal .add-cohost {
    width: 1.875rem;
    cursor: pointer;
    height: 1.875rem;
    opacity: 1;
    position: absolute;
    top: 3rem;
    border-radius: 50%;
    left: 3rem;
    background-color: #8995A6;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/host-5b19c40f18.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100; }
    .user-card-modal .add-cohost .state {
      position: absolute;
      top: -0.5625rem;
      right: -0.5625rem;
      width: 1.375rem;
      height: 1.375rem;
      border-radius: 50%;
      display: block;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/add_host_plus-ccefb7700c.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -o-transform: scale(0.8);
      transform: scale(0.8);
      -webkit-transition: all 0.1s ease-in;
      -moz-transition: all 0.1s ease-in;
      transition: all 0.1s ease-in; }
    .user-card-modal .add-cohost:hover .state {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
    .user-card-modal .add-cohost.active .state {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/remove_ch_icon-1484a33348.png); }

.feed-item-small {
  width: 95%;
  margin: 0 auto;
  display: block; }
  .feed-item-small .card {
    cursor: pointer;
    width: 100%;
    height: 7.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem; }
    .feed-item-small .card:hover .info-layer {
      background-color: rgba(0, 0, 0, 0.6); }
    .feed-item-small .card .feed-images {
      width: 100%;
      position: absolute;
      z-index: 1;
      height: 100%;
      background-color: #F1F1F1;
      -webkit-box-align: stretch;
      -moz-box-align: stretch;
      box-align: stretch;
      -webkit-align-items: stretch;
      -moz-align-items: stretch;
      -ms-align-items: stretch;
      -o-align-items: stretch;
      align-items: stretch;
      -ms-flex-align: stretch;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row;
      -webkit-box-pack: start;
      -moz-box-pack: start;
      box-pack: start;
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      -ms-justify-content: flex-start;
      -o-justify-content: flex-start;
      justify-content: flex-start;
      -ms-flex-pack: start; }
      .feed-item-small .card .feed-images .feed-image {
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-block;
        float: left; }
        .feed-item-small .card .feed-images .feed-image .full-img {
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          width: 120%;
          height: 120%;
          position: absolute;
          top: -10%;
          left: -10%; }
      .feed-item-small .card .feed-images.grid-2 .feed-image {
        display: inline-block;
        float: left;
        width: 50%;
        height: 100%; }
      .feed-item-small .card .feed-images.grid-3 .feed-image {
        width: 33%;
        height: 100%; }
      .feed-item-small .card .feed-images.grid-4 .feed-image {
        width: 25%;
        height: 100%; }
    .feed-item-small .card .info-layer {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      background-color: rgba(0, 0, 0, 0.7); }
      .feed-item-small .card .info-layer h2 {
        width: 90%;
        text-align: center;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        color: #fff; }
      .feed-item-small .card .info-layer .live-label {
        padding: 0.125rem 0.4375rem;
        background-color: #F75E5E;
        color: #FFF;
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        border-radius: 0.125rem;
        margin-bottom: 0.3125rem; }
      .feed-item-small .card .info-layer .stats {
        position: absolute;
        top: 0.25rem;
        padding: 0.25rem 0.4375rem;
        right: 0.25rem;
        color: #FFF; }
        .feed-item-small .card .info-layer .stats .icon {
          height: 1.1em;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          display: inline-block;
          width: 1.3em;
          content: ' ';
          background-color: blue;
          vertical-align: middle; }
  .feed-item-small .meta {
    padding: 0.3125rem 0; }
    .feed-item-small .meta .tags {
      display: block !important;
      list-style-type: none; }
      .feed-item-small .meta .tags .tag {
        padding: 0.125rem 0.1875rem;
        margin: 0;
        margin-left: 0.3125rem;
        display: inline-block;
        background-color: #E2E2E2;
        color: #252525; }
        .feed-item-small .meta .tags .tag:first-child {
          margin: 0; }

.user-card-list {
  display: inline-block;
  border-radius: 0.25rem;
  background: #ffffff;
  width: 18.4375rem;
  height: 15rem;
  position: relative;
  padding: 0.7rem;
  margin: 0 auto;
  overflow: hidden;
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
  color: #1f1f1f;
  border: 1px solid #E1E7EF; }
  @media screen and (max-width: 37.5rem) {
    .user-card-list {
      width: 18.75rem; } }
  .user-card-list .user-card-header {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    position: relative; }
    .user-card-list .user-card-header .profile-pic {
      width: 3.8rem;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      height: 3.8rem;
      background-color: #E7EBF0;
      border: 3px solid #E6EAEF;
      border-radius: 100%;
      display: inline-block; }
    .user-card-list .user-card-header .profile-info {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      padding: 5px;
      padding-left: 10px; }
      .user-card-list .user-card-header .profile-info .followers-stat {
        display: block;
        padding-top: 3px;
        font-size: 12px; }
      .user-card-list .user-card-header .profile-info .info-links {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
      .user-card-list .user-card-header .profile-info h4 {
        font-size: 1rem; }
    .user-card-list .user-card-header .username {
      color: #474747; }
  .user-card-list .bio {
    color: #474747;
    margin: 0.625rem auto;
    max-height: 4.6875rem;
    max-width: 95%;
    text-align: left;
    word-wrap: break-word;
    font-size: 14px; }
  .user-card-list .activity {
    text-align: center;
    position: absolute;
    bottom: 0.9375rem;
    left: 0;
    width: 100%; }
    @media screen and (max-width: 37.5rem) {
      .user-card-list .activity {
        width: 16.25rem; } }
    .user-card-list .activity .action {
      text-align: center; }
    .user-card-list .activity .button, .user-card-list .activity .widget-card-ph button, .widget-card-ph .user-card-list .activity button, .user-card-list .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-list .activity button, .user-card-list .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-list .activity button, .user-card-list .activity .feed-item-card--subscribe-button, .user-card-list .activity .scheduled-action--start-now, .user-card-list .activity .scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-list .activity button {
      margin-bottom: 0.9375rem;
      display: inline-block; }
    .user-card-list .activity .follow-container {
      display: inline-block;
      text-align: center; }
    .user-card-list .activity .button-follow {
      margin-bottom: 0;
      display: block; }
    .user-card-list .activity .follows-you {
      display: inline-block;
      background: #b1b1b1;
      color: #474747;
      text-transform: uppercase;
      padding: 0.3125rem;
      margin-left: 0.4375rem;
      font-size: 0.65rem; }
    .user-card-list .activity .social-link {
      vertical-align: top;
      width: 2.5625rem;
      height: 2.5625rem;
      padding: 0;
      margin-left: 0.4375rem; }
  .user-card-list .block-user-stream {
    width: 20px;
    cursor: pointer;
    height: 20px;
    opacity: 0.75;
    position: absolute;
    top: 1em;
    right: 1em;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/admin_ban-24ee6b05cc.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    .user-card-list .block-user-stream:hover {
      opacity: 1; }

.user-card-min-height {
  min-height: 8.125rem; }

.name-link:hover {
  color: #A681E6;
  cursor: pointer; }

.user-card-mini {
  padding: 0.5rem;
  height: auto;
  width: 100%;
  overflow: visible;
  border: none;
  border-bottom: 1px solid #F5F7F9; }
  .user-card-mini .user-card-header .profile-pic {
    border: none; }
  .user-card-mini .user-card-header .profile-info {
    margin-top: 0;
    padding-left: 0.875rem;
    vertical-align: middle; }
  .user-card-mini .info-links {
    position: relative; }
    .user-card-mini .info-links .button, .user-card-mini .info-links .widget-card-ph button, .widget-card-ph .user-card-mini .info-links button, .user-card-mini .info-links .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-mini .info-links button, .user-card-mini .info-links .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-mini .info-links button, .user-card-mini .info-links .feed-item-card--subscribe-button, .user-card-mini .info-links .scheduled-action--start-now, .user-card-mini .info-links .scheduled-action--edit, .user-card-mini .info-links .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-mini .info-links button {
      position: absolute;
      top: 0;
      right: 0; }
  .user-card-mini .bio {
    padding-top: 0.4375rem;
    width: 90%;
    margin: 0;
    display: block; }
  .user-card-mini .activity {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    left: initial;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 99;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center; }
    .user-card-mini .activity .action {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
      .user-card-mini .activity .action .twitter-container {
        display: inline-block; }
      .user-card-mini .activity .action .follow-container {
        display: inline-block; }
      .user-card-mini .activity .action .block-container {
        display: inline-block; }
        .user-card-mini .activity .action .block-container .block-user-stream {
          position: relative;
          height: 19px;
          width: 23px;
          padding: 0;
          top: 0;
          right: 0;
          margin: 10px; }
      .user-card-mini .activity .action .button-twitter {
        margin-bottom: 0;
        padding: 9px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        border: 1px solid #55acee;
        border-radius: 0;
        background: transparent;
        -webkit-transition: all 0.15s ease-in;
        -moz-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
        opacity: 1;
        margin-right: 0.625rem; }
        .user-card-mini .activity .action .button-twitter:hover {
          background: rgba(85, 172, 238, 0.15); }
        .user-card-mini .activity .action .button-twitter:after {
          content: '';
          background: url("https://cf-cdn-01.blab-img.com/static/img/twitter_blue-522ea6ebac.png") no-repeat;
          background-size: contain;
          height: 19px;
          width: 23px;
          display: block;
          margin: auto; }
      .user-card-mini .activity .action .button-follow {
        margin-bottom: 0;
        padding: 9px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        border: 1px solid #955ff1;
        border-radius: 0.125rem;
        background: transparent;
        -webkit-transition: all 0.15s ease-in;
        -moz-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in; }
        .user-card-mini .activity .action .button-follow:hover {
          background: rgba(149, 95, 241, 0.1); }
        .user-card-mini .activity .action .button-follow:after {
          content: '';
          background: url("https://cf-cdn-01.blab-img.com/static/img/follow-purple-12bf0901a2.svg") no-repeat;
          background-size: contain;
          height: 19px;
          width: 23px;
          display: block;
          margin: auto; }
      .user-card-mini .activity .action .following {
        background: #7d43df; }
        .user-card-mini .activity .action .following:hover {
          background: #955ff1; }
        .user-card-mini .activity .action .following:after {
          content: '';
          background: url("https://cf-cdn-01.blab-img.com/static/img/following_white-93bc0f1288.svg") no-repeat;
          background-size: contain;
          height: 19px;
          width: 23px;
          display: block;
          margin: auto; }
      .user-card-mini .activity .action .list-more {
        z-index: 1000;
        position: absolute;
        bottom: -4.0625rem;
        right: 1.25rem;
        background-color: #FFF;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35); }
        .user-card-mini .activity .action .list-more li {
          display: block;
          padding: 1rem;
          color: #474747; }
  .user-card-mini .follows-you {
    display: inline-block;
    background: #b1b1b1;
    color: #474747;
    text-transform: uppercase;
    padding: 0.125rem;
    margin-left: 0.4375rem;
    font-size: 0.55rem; }

.qtip-content {
  padding: 0;
  box-shadow: 0px 1px 10px 0px rgba(26, 26, 26, 0.15);
  overflow: initial !important; }

.qtip {
  border: 1px solid #dadada !important;
  background-color: #FFF !important;
  color: #FFF !important;
  line-height: normal;
  border-radius: 4px; }
  .qtip .profile-card {
    width: 20rem; }
  .qtip .user-card-qtip {
    border-radius: 0.25rem;
    background: #ffffff;
    width: 20rem;
    position: relative;
    padding: 0.5rem;
    color: #1f1f1f; }
    .qtip .user-card-qtip .user-card-header {
      text-align: center;
      position: relative;
      z-index: 99; }
      .qtip .user-card-qtip .user-card-header .profile-pic {
        width: 4.5rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 4.5rem;
        border-radius: 100%;
        display: inline-block; }
      .qtip .user-card-qtip .user-card-header .profile-info {
        margin-top: 0.65rem; }
        .qtip .user-card-qtip .user-card-header .profile-info a {
          color: #1f1f1f; }
          .qtip .user-card-qtip .user-card-header .profile-info a:hover {
            color: #955ff1; }
        .qtip .user-card-qtip .user-card-header .profile-info h4:hover {
          cursor: pointer;
          color: #A681E6; }
        .qtip .user-card-qtip .user-card-header .profile-info p:hover {
          cursor: pointer;
          color: #A681E6; }
      .qtip .user-card-qtip .user-card-header .username {
        color: #474747; }
    .qtip .user-card-qtip .bio {
      color: #474747;
      margin: 0.625rem auto;
      max-width: 90%;
      text-align: center;
      overflow: hidden;
      word-wrap: break-word;
      margin-bottom: 0.5rem; }
    .qtip .user-card-qtip .social-links {
      display: block;
      margin: 0 auto;
      width: 100%;
      text-align: center;
      margin-bottom: 2rem; }
      .qtip .user-card-qtip .social-links span {
        font-size: 13px;
        padding: 3px 5px;
        display: inline-block;
        vertical-align: middle; }
      .qtip .user-card-qtip .social-links .social-link {
        width: 17px;
        height: 17px;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }
      .qtip .user-card-qtip .social-links .twitter-social {
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/twitter_blue-522ea6ebac.png"); }
    .qtip .user-card-qtip .close {
      width: 32px;
      margin-right: -9px;
      right: 50%;
      top: -4rem; }
    .qtip .user-card-qtip .activity {
      text-align: center;
      position: relative;
      width: 100%; }
      @media screen and (max-width: 37.5rem) {
        .qtip .user-card-qtip .activity {
          width: 16.25rem; } }
      .qtip .user-card-qtip .activity .action {
        text-align: center; }
      .qtip .user-card-qtip .activity .button, .qtip .user-card-qtip .activity .widget-card-ph button, .widget-card-ph .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .scheduled-action--start-now, .qtip .user-card-qtip .activity .scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button {
        margin-bottom: 0.9375rem;
        display: inline-block; }
      .qtip .user-card-qtip .activity .follow-container {
        display: inline-block;
        text-align: center; }
      .qtip .user-card-qtip .activity .button-follow {
        margin-bottom: 0.625rem;
        display: block; }
      .qtip .user-card-qtip .activity .follows-you {
        display: inline-block;
        background: #b1b1b1;
        color: #474747;
        text-transform: uppercase;
        padding: 0.3125rem;
        margin-left: 0.4375rem;
        font-size: 0.65rem; }
    .qtip .user-card-qtip .stats {
      width: 100%;
      text-align: center;
      border-top: 1px solid #818181;
      padding: 0.9375rem 0;
      position: relative; }
      .qtip .user-card-qtip .stats ul {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        box-orient: horizontal;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-direction: normal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        flex-direction: row;
        -ms-flex-direction: row; }
        .qtip .user-card-qtip .stats ul li {
          display: inline-block;
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          box-flex: 1;
          -webkit-flex: 1;
          -moz-flex: 1;
          -ms-flex: 1;
          flex: 1;
          vertical-align: top; }
          .qtip .user-card-qtip .stats ul li:first-of-type a {
            padding-left: 0; }
          .qtip .user-card-qtip .stats ul li a {
            display: block;
            padding: 0 0.9375rem;
            color: #474747;
            text-transform: uppercase;
            font-size: 9px; }
            .qtip .user-card-qtip .stats ul li a span {
              display: block;
              color: #1f1f1f;
              font-weight: 700;
              padding-bottom: 5px;
              -webkit-transition: all 200ms;
              -moz-transition: all 200ms;
              transition: all 200ms; }
              .qtip .user-card-qtip .stats ul li a span:hover {
                color: #A681E6; }
            .qtip .user-card-qtip .stats ul li a:hover {
              color: #A681E6; }
              .qtip .user-card-qtip .stats ul li a:hover span {
                color: #A681E6; }
    .qtip .user-card-qtip .add-cohost {
      width: 1.875rem;
      cursor: pointer;
      height: 1.875rem;
      opacity: 1;
      position: absolute;
      top: 2.3rem;
      border-radius: 50%;
      background-color: #8995A6;
      left: 2.3rem;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/host-5b19c40f18.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 100; }
      .qtip .user-card-qtip .add-cohost .state {
        position: absolute;
        top: -0.5625rem;
        right: -0.5625rem;
        width: 1.375rem;
        height: 1.375rem;
        border-radius: 50%;
        display: block;
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/add_host_plus-ccefb7700c.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transition: all 0.1s ease-in;
        -moz-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in; }
      .qtip .user-card-qtip .add-cohost:hover .state {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
      .qtip .user-card-qtip .add-cohost.active .state {
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/remove_ch_icon-1484a33348.png); }
    .qtip .user-card-qtip .block-user-stream {
      width: 1.875rem;
      cursor: pointer;
      height: 1.875rem;
      opacity: 0.75;
      position: absolute;
      top: 2.3rem;
      border: 1px solid red;
      border-radius: 50%;
      right: 2.3rem;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/report_user_red-32dc2d9b9a.png);
      background-size: 65%;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 100; }
      .qtip .user-card-qtip .block-user-stream:hover {
        opacity: 1; }

.feed-item-card {
  text-align: center;
  position: relative;
  padding-bottom: 0.625rem;
  display: block;
  overflow: hidden; }
  @media screen and (max-width: 67.5rem) {
    .feed-item-card {
      margin: 5px 0;
      display: inline-block; } }
  .feed-item-card .card {
    cursor: pointer;
    height: 11.1875rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem; }
    @media screen and (max-width: 37.5rem) {
      .feed-item-card .card {
        height: 12.5rem;
        width: 95%;
        display: block;
        margin: 0 auto; } }
  @media screen and (max-width: 37.5rem) and (max-width: 67.5rem) {
    .feed-item-card .card {
      width: 170px;
      height: 120px; } }

    .feed-item-card .card .feed-images {
      width: 100%;
      position: absolute;
      z-index: 1;
      height: 100%;
      -webkit-box-align: stretch;
      -moz-box-align: stretch;
      box-align: stretch;
      -webkit-align-items: stretch;
      -moz-align-items: stretch;
      -ms-align-items: stretch;
      -o-align-items: stretch;
      align-items: stretch;
      -ms-flex-align: stretch;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;
      -webkit-box-direction: reverse;
      -moz-box-direction: reverse;
      box-direction: reverse;
      -webkit-flex-direction: row-reverse;
      -moz-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
      -webkit-box-pack: start;
      -moz-box-pack: start;
      box-pack: start;
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      -ms-justify-content: flex-start;
      -o-justify-content: flex-start;
      justify-content: flex-start;
      -ms-flex-pack: start; }
      .feed-item-card .card .feed-images .feed-image {
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-block;
        float: left;
        overflow: hidden; }
        .feed-item-card .card .feed-images .feed-image .full-img {
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          height: 100%;
          position: absolute;
          top: 0;
          left: -2%;
          right: -2%; }
      .feed-item-card .card .feed-images.grid-2 .feed-image {
        display: inline-block;
        float: left;
        width: 50%;
        height: 100%; }
      .feed-item-card .card .feed-images.grid-3 .feed-image {
        width: calc(100% / 3);
        height: 100%; }
      .feed-item-card .card .feed-images.grid-4 .feed-image {
        width: 25%;
        height: 100%; }
    .feed-item-card .card .info-layer {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0; }
      .feed-item-card .card .info-layer .title-layer {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: left;
        padding: 3px; }
        .feed-item-card .card .info-layer .title-layer h2 {
          width: 95%;
          font-size: 1.0625rem;
          text-align: left;
          position: relative;
          z-index: 5;
          color: #fff;
          line-height: 1.4;
          font-weight: 400;
          background-color: rgba(0, 0, 0, 0.98);
          display: inline; }
          .feed-item-card .card .info-layer .title-layer h2 span {
            padding: 0 2px; }
    .feed-item-card .card .info-layer--length {
      color: #FFF;
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.6);
      padding: 0.3125rem 0.4375rem;
      position: absolute;
      top: 3px;
      left: 3px;
      border-radius: 3px; }
  .feed-item-card .card-meta {
    padding-top: 0.3125rem; }
  .feed-item-card .card-meta--watchedTime {
    float: right;
    background-color: #EAEAEA;
    display: inline-block;
    padding: 3px 8px;
    position: relative;
    border-radius: 4px;
    cursor: default; }
  .feed-item-card .card-meta--watchedTime--icon {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/total-views-9055f33224.svg");
    width: 18px;
    height: 9px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px; }
  .feed-item-card .card-meta--watchedTime--count {
    vertical-align: middle;
    display: inline-block;
    color: #636363; }
  .feed-item-card .card--more-options--container {
    z-index: 2;
    background: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 4px 0 100px;
    width: 2.5rem;
    height: 2.5rem;
    opacity: 1; }
  .feed-item-card .card--more-options {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/dotted-menu-c928cad652.svg");
    background-color: transparent;
    width: 1.375rem;
    position: absolute;
    opacity: 1;
    right: 0.3125rem;
    top: 0.875rem; }
  .feed-item-card .card-meta-participants {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.54);
    float: left; }
  .feed-item-card .card-meta-creator {
    display: inline-block; }
  .feed-item-card .card-meta-creator--avatar {
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.3125rem;
    display: inline-block;
    vertical-align: middle; }
  .feed-item-card .card-meta-creator--name,
  .feed-item-card .card-meta-particpants--more {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    color: black;
    cursor: default; }
  .feed-item-card .card-meta-creator--name {
    cursor: pointer; }
  .feed-item-card .card-meta-paricpants--tip {
    width: 12.5rem;
    height: 9.375rem;
    position: absolute;
    background-color: red;
    top: 0;
    z-index: 400;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  .feed-item-card .card-meta-particpants--and {
    display: inline;
    vertical-align: middle; }
  .feed-item-card .card-creator--avatar {
    width: 1.5625rem;
    display: inline-block;
    height: 1.5625rem;
    vertical-align: middle; }
  .feed-item-card .card-creator--name {
    vertical-align: middle;
    display: inline-block; }
  .feed-item-card.row-2 {
    padding-bottom: 1.5625rem; }
    .feed-item-card.row-2 .card {
      width: 32.8125rem;
      height: 14.375rem; }
      .feed-item-card.row-2 .card .info-layer .title-layer h2 {
        font-size: 1.375rem; }
      @media screen and (max-width: 67.5rem) {
        .feed-item-card.row-2 .card {
          width: 420px;
          height: 184px; } }
    .feed-item-card.row-2 .card-meta--participants {
      font-size: 1.25rem; }
  .feed-item-card.row-3 {
    padding-bottom: 1.5625rem;
    min-width: 32%; }
  .feed-item-card.scheduled-size {
    width: 40.625rem; }
    .feed-item-card.scheduled-size .card {
      height: 17.1875rem; }
    .feed-item-card.scheduled-size .meta-block .profile-pic {
      width: 2.1875rem;
      height: 2.1875rem; }
    @media screen and (max-width: 90.0625rem) {
      .feed-item-card.scheduled-size {
        width: 32.8125rem; }
        .feed-item-card.scheduled-size .card {
          height: 13.875rem; } }
    @media screen and (max-width: 37.5rem) {
      .feed-item-card.scheduled-size {
        width: 90vw; }
        .feed-item-card.scheduled-size .card {
          height: 11.25rem; } }

.scheduled-subscribers-container {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  padding: 0.3125rem; }

.scheduled-subscribers-attending {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.scheduled-subscribers-attending--text {
  color: rgba(255, 255, 255, 0.9); }

.scheduled-subscribers-list {
  width: 100%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.625rem 0.3125rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: fle-xtart;
  -moz-box-pack: fle-xtart;
  box-pack: fle-xtart;
  -webkit-justify-content: fle-xtart;
  -moz-justify-content: fle-xtart;
  -ms-justify-content: fle-xtart;
  -o-justify-content: fle-xtart;
  justify-content: fle-xtart;
  -ms-flex-pack: fle-xtart; }

.scheduled-subscriber {
  padding: 0 0.375rem; }
  .scheduled-subscriber:nth-child(n+11) {
    display: none; }
  @media screen and (max-width: 90.0625rem) {
    .scheduled-subscriber:nth-child(n+9) {
      display: none; } }

.scheduled-subscriber--profile-pic {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 2.1875rem;
  height: 2.1875rem; }

@media screen and (max-width: 70.3125rem) {
  .embed .feed-item-card {
    width: 27.5rem; }
    .embed .feed-item-card .card {
      height: 11.875rem; }
      .embed .feed-item-card .card .info-layer .title-layer {
        padding: 5px; }
        .embed .feed-item-card .card .info-layer .title-layer h2 {
          font-size: 1.25rem; }
  .embed .scheduled-subscriber--profile-pic {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 1.875rem;
    height: 1.875rem; } }
.embed .feed-item-card--subscribe-button {
  font-size: 1rem;
  padding: 0.8125rem 0; }

.widget-card-ph {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  border-radius: 0.1875rem;
  width: 100%;
  margin: 0.1875rem auto;
  border: 1px solid #E1E8ED;
  display: block;
  padding: 0.625rem;
  background: #ffffff;
  -webkit-transition: border-color 0.1s ease-in;
  -moz-transition: border-color 0.1s ease-in;
  transition: border-color 0.1s ease-in;
  max-height: 1000px;
  overflow: hidden;
  position: relative;
  max-width: 97%; }
  .widget-card-ph.active {
    border-color: rgba(218, 85, 47, 0.75); }
    .widget-card-ph.active button {
      background-color: #DA552F;
      color: #FFF; }
  .widget-card-ph.active:hover {
    border-color: rgba(218, 85, 47, 0.9); }
  .widget-card-ph:hover {
    border-color: #c1d0da; }
  .widget-card-ph .blab-question .upvote {
    cursor: pointer !important; }
    .widget-card-ph .blab-question .upvote .icon {
      opacity: .7;
      margin-right: 5px; }
      .widget-card-ph .blab-question .upvote .icon:hover {
        opacity: .9; }
  .widget-card-ph .user-info-block {
    padding: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-orient: rows;
    -moz-box-orient: rows;
    box-orient: rows;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: rows;
    -moz-flex-direction: rows;
    flex-direction: rows;
    -ms-flex-direction: rows;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .widget-card-ph .user-info-block .avatar {
      width: 2.1875rem;
      height: 2.1875rem;
      border: none;
      border-radius: 50%;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
      @media screen and (max-width: 90.0625rem) {
        .widget-card-ph .user-info-block .avatar {
          width: 2.1875rem;
          height: 2.1875rem; } }
    .widget-card-ph .user-info-block .user-info {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      text-align: left; }
      .widget-card-ph .user-info-block .user-info .name-title {
        display: inline-block; }
        .widget-card-ph .user-info-block .user-info .name-title .name,
        .widget-card-ph .user-info-block .user-info .name-title .title {
          padding: 0 0.625rem;
          color: black;
          display: block; }
          @media screen and (max-width: 90.0625rem) {
            .widget-card-ph .user-info-block .user-info .name-title .name,
            .widget-card-ph .user-info-block .user-info .name-title .title {
              padding: 0 0.625rem; } }
        .widget-card-ph .user-info-block .user-info .name-title .name {
          color: #242B34;
          font-weight: 600; }
        .widget-card-ph .user-info-block .user-info .name-title .title {
          padding-top: 0;
          color: #888888; }
    .widget-card-ph .user-info-block .upvote {
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
      .widget-card-ph .user-info-block .upvote .upvote-count {
        color: #FFF; }
        .widget-card-ph .user-info-block .upvote .upvote-count span {
          display: inline-block;
          vertical-align: middle; }
        .widget-card-ph .user-info-block .upvote .upvote-count .count {
          color: #888888; }
        .widget-card-ph .user-info-block .upvote .upvote-count .icon {
          width: 0.8125rem;
          content: ' ';
          margin-right: 0.125rem;
          height: 0.8125rem; }
  .widget-card-ph .text {
    width: 100%;
    padding: 0.625rem 0 0.9375rem 0; }
    .widget-card-ph .text p {
      line-height: 1.5;
      color: #242B34;
      overflow: hidden; }
      .widget-card-ph .text p .see-more {
        display: inline-block;
        padding-left: 0.1875rem;
        color: #DA552F !important; }
      @media screen and (max-width: 90.0625rem) {
        .widget-card-ph .text p {
          font-size: 0.8125rem; } }
    .widget-card-ph .text a {
      color: #DA552F; }
      .widget-card-ph .text a:hover {
        color: #d84e26; }
  .widget-card-ph button {
    padding: 0.625rem;
    width: 95%;
    display: block;
    margin: 0 auto;
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
    background-color: rgba(218, 85, 47, 0.09);
    color: #DA552F;
    border: 1px solid #DA552F; }
    .widget-card-ph button:hover {
      background-color: #DA552F;
      color: #FFF; }
    .widget-card-ph button.is-active {
      background-color: #DA552F;
      color: #FFF; }
    @media screen and (max-width: 90.0625rem) {
      .widget-card-ph button {
        padding: 0.4rem; } }
    .widget-card-ph button .icon {
      content: ' ';
      width: 0.9375rem;
      height: cacl-em(15px);
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/pin_w-d4cea63752.svg);
      vertical-align: middle; }
  .widget-card-ph .state {
    display: none; }
  .widget-card-ph.answered {
    display: none;
    max-height: 200px; }
    .widget-card-ph.answered button {
      display: none; }
    .widget-card-ph.answered .delete-question {
      display: block !important; }
    .widget-card-ph.answered .state {
      left: 0;
      width: 100%;
      position: absolute;
      z-index: 2;
      bottom: 0;
      padding-bottom: 0.625rem;
      text-align: center;
      display: inline-block; }
      .widget-card-ph.answered .state .answered-indicator {
        display: inline-block;
        margin-left: -0.625rem;
        color: #DA552F; }
        .widget-card-ph.answered .state .answered-indicator span {
          margin-right: 0.375rem;
          margin-bottom: 0.125rem;
          height: 1rem;
          min-width: 1rem; }
      .widget-card-ph.answered .state .pin-host {
        padding-left: 2.5rem;
        display: inline-block;
        color: #888888; }
        .widget-card-ph.answered .state .pin-host:hover {
          color: #747474; }
    .widget-card-ph.answered .answered-overlay {
      opacity: 1;
      pointer-events: none; }
  .widget-card-ph.pinned {
    display: block; }
  .widget-card-ph .answered-overlay {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: white;
    background-image: -webkit-linear-gradient(bottom, white 20%, rgba(255, 255, 255, 0) 100%);
    background-image: linear-gradient(to top,white 20%, rgba(255, 255, 255, 0) 100%);
    background-color: transparent; }

.widget-card-question button {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: rgba(77, 143, 251, 0.09);
  color: #4D8FFB;
  border: 1px solid #4D8FFB; }
  .widget-card-question button:hover {
    background-color: #4D8FFB;
    color: #FFF; }
  .widget-card-question button.is-active {
    background-color: #4D8FFB;
    color: #FFF; }
.widget-card-question .text a {
  color: #C9C9C9; }
  .widget-card-question .text a:hover {
    color: #9A9A9A; }
  .widget-card-question .text a.name-link {
    color: #4D8FFB !important; }
    .widget-card-question .text a.name-link:hover {
      color: #4D8FFB !important; }
.widget-card-question .answered-indicator {
  color: #4D8FFB !important; }

.widget-action-button {
  background: #DA552F;
  color: #FFF;
  padding: 1rem 0;
  width: 100%;
  position: fixed;
  bottom: 0; }

.widget-modal {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .widget-modal .widget-icon-badge {
    position: absolute;
    left: -2.25rem;
    top: -2.25rem;
    z-index: 10;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%; }
  .widget-modal .widget-container {
    position: relative;
    background-color: red;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    max-height: auto; }
    @media screen and (max-width: 37.5rem) {
      .widget-modal .widget-container {
        max-height: 100%; } }
    @media screen and (max-width: 71.25rem) {
      .widget-modal .widget-container {
        max-height: 90%; } }
  @media screen and (max-width: 71.25rem) and (max-width: 90.0625rem) {
    .widget-modal .widget-container {
      max-height: 31.25rem; } }

    .widget-modal .widget-container .widget-remove span {
      content: ' ';
      width: 0.875rem;
      height: 0.875rem; }

.close-widget {
  position: absolute;
  z-index: 99;
  top: 10px;
  right: 10px;
  width: 1.875rem;
  height: 1.5625rem;
  opacity: 0.8;
  background-color: transparent;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/widget-settings-close-e527e68fac.png); }
  @media screen and (max-width: 90.0625rem) {
    .close-widget {
      width: 1.375rem;
      height: 1.125rem; } }
  .close-widget:hover {
    opacity: 1; }

.delete-question.delete-this {
  width: 13px;
  height: 13px;
  padding: 0;
  background: url(https://cf-cdn-01.blab-img.com/static/img/admin_delete_button-57e57c774b.svg);
  background-size: contain;
  border: none;
  background-color: transparent !important; }

.widget-card-twitter {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  border-radius: 0.1875rem;
  margin: 0 auto;
  border: 1px solid #E1E8ED;
  display: block;
  background: #ffffff;
  padding: 0.625rem 0.75rem;
  padding-top: 1rem;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in; }
  .widget-card-twitter p a {
    color: #55acee !important; }
  .widget-card-twitter a:hover {
    color: #2b7bb9 !important; }
  .widget-card-twitter.active {
    border-color: rgba(43, 123, 185, 0.75); }
    .widget-card-twitter.active button {
      background-color: #2b7bb9;
      color: #FFF; }
  .widget-card-twitter.active:hover {
    border-color: rgba(43, 123, 185, 0.9); }
  .widget-card-twitter:hover {
    border-color: #c1d0da; }
  .widget-card-twitter .user-info-block {
    padding: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-orient: rows;
    -moz-box-orient: rows;
    box-orient: rows;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: rows;
    -moz-flex-direction: rows;
    flex-direction: rows;
    -ms-flex-direction: rows;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .widget-card-twitter .user-info-block .avatar {
      width: 2.25rem;
      height: 2.25rem;
      border: none;
      border-radius: 4px;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
      @media screen and (max-width: 90.0625rem) {
        .widget-card-twitter .user-info-block .avatar {
          width: 2.1875rem;
          height: 2.1875rem; } }
    .widget-card-twitter .user-info-block .user-info {
      position: relative;
      padding-left: 0.3125rem;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      text-align: left; }
      .widget-card-twitter .user-info-block .user-info .name-title {
        display: inline-block; }
        .widget-card-twitter .user-info-block .user-info .name-title .name,
        .widget-card-twitter .user-info-block .user-info .name-title .screenname {
          display: block; }
        .widget-card-twitter .user-info-block .user-info .name-title .name {
          color: #242B34;
          font-weight: 600;
          font-size: 14px;
          padding-bottom: 0.125rem; }
        .widget-card-twitter .user-info-block .user-info .name-title .screenname {
          font-size: 12px;
          padding-top: 0;
          font-weight: 200;
          color: #697882; }
          .widget-card-twitter .user-info-block .user-info .name-title .screenname:hover {
            color: #697882 !important; }
      .widget-card-twitter .user-info-block .user-info .twitter-icon {
        width: 0.875rem;
        height: 0.875rem;
        position: absolute;
        top: 0;
        right: 0;
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter_blue-522ea6ebac.png); }
  .widget-card-twitter .text {
    width: 100%;
    padding-top: 0.5rem; }
    .widget-card-twitter .text p {
      line-height: 19.6px;
      font-size: 14px;
      color: #242B34;
      overflow: hidden; }
      .widget-card-twitter .text p .see-more {
        display: inline-block;
        padding-left: 0.1875rem;
        color: #2b7bb9 !important; }
    .widget-card-twitter .text .time-created {
      display: inline-block;
      margin-top: .3rem;
      width: 100%;
      color: #697882; }
  .widget-card-twitter .actions-block {
    display: inline-block;
    text-align: left;
    margin-top: .525rem; }
    .widget-card-twitter .actions-block .action {
      cursor: pointer;
      width: 1.0625rem;
      height: 1.0625rem;
      background-color: transparent;
      margin-left: 1.25rem;
      transform: scaleX(1); }
      .widget-card-twitter .actions-block .action a {
        margin: 0 0.3125rem; }
    .widget-card-twitter .actions-block .reply-button {
      margin: 0 !important;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-reply-a322e9aa5c.svg); }
      .widget-card-twitter .actions-block .reply-button:hover {
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-reply-hover-6e86b89370.svg); }
    .widget-card-twitter .actions-block .retweet-button {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-retweet-fa82d2c803.svg); }
      .widget-card-twitter .actions-block .retweet-button:hover {
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-retweet-hover-1906ffced2.svg); }
    .widget-card-twitter .actions-block .favorite-button {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-favorite-02168747c7.svg); }
      .widget-card-twitter .actions-block .favorite-button:hover {
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-favorite-hover-5b0edbf3b5.svg); }

.widget-action-button {
  background: #2b7bb9;
  color: #FFF;
  padding: 1rem 0;
  width: 100%;
  position: fixed;
  bottom: 0; }

.main-anchor {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 100; }
  .main-anchor .feed-container {
    position: relative;
    background: #eef2f6;
    min-height: 100vh; }
    .main-anchor .feed-container.hasFeaturedBlock .nab-blabs {
      position: absolute;
      top: -51px; }
    .main-anchor .feed-container.hasFeaturedBlock .nav-tags {
      position: absolute;
      top: -51px; }

.hero {
  background-color: rgba(0, 0, 0, 0.9);
  background-size: 20rem 31.9375rem;
  height: 35rem;
  margin-top: 3.75rem;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms; }
  .hero .wrapper {
    margin: 0 auto;
    padding-top: 1.875rem;
    width: 1160px;
    max-width: 100vw;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms; }
    @media screen and (min-width: 47.9375rem) and (max-width: 71.25rem) {
      .hero .wrapper {
        padding-top: 1.875rem; } }
    @media screen and (max-width: 47.9375rem) {
      .hero .wrapper {
        padding-top: 1.25rem; } }
  .hero .left {
    width: 25rem;
    margin: auto .5rem auto auto;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms; }
  .hero .large-logo {
    margin-bottom: 0.9375rem;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms; }
    @media screen and (min-width: 47.9375rem) and (max-width: 71.25rem) {
      .hero .large-logo {
        width: 6.25rem;
        height: auto; } }
    @media screen and (max-width: 47.9375rem) {
      .hero .large-logo {
        display: none; } }
  .hero h1 {
    color: #ffffff;
    margin-bottom: 0.9375rem;
    font-weight: 100;
    line-height: 1; }
  .hero h2 {
    margin-bottom: 1.25rem;
    color: #ffffff;
    font-weight: 100; }
  .hero .twitter-signup {
    color: #ffffff;
    background-color: #55acee;
    border: 0;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/twitter-b147a2d09e.svg);
    background-repeat: no-repeat;
    background-position: 1.0625rem center;
    background-size: 1.0625rem 0.875rem;
    padding: 0.625rem 1.25rem 0.6875rem 2.5rem; }
    .hero .twitter-signup:hover {
      background-color: #83c3f3; }
  .hero .right {
    position: relative;
    margin: auto auto auto 0;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms; }
    .hero .right p {
      text-align: right;
      color: #ffffff;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      transition: all 300ms; }
      @media screen and (max-width: 47.9375rem) {
        .hero .right p {
          text-align: center; } }
    .hero .right .arrow-next-featured {
      position: absolute;
      right: -120px;
      top: 50%;
      color: #fff;
      margin-top: -30px;
      font-size: 12rem;
      cursor: pointer;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      transition: all 300ms; }
    .hero .right .js-iframe-container {
      height: 480px;
      width: 640px;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      transition: all 300ms; }
  .hero .teaser-video {
    border: 1px solid #818181;
    border-radius: 4px;
    display: block;
    margin: 1.25rem auto 0.625rem;
    width: 33.125rem;
    height: 18.625rem;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms; }
    @media screen and (min-width: 47.9375rem) and (max-width: 71.25rem) {
      .hero .teaser-video {
        width: 22.5rem;
        height: 12.625rem;
        margin-top: 3.75rem; } }
    @media screen and (max-width: 47.9375rem) {
      .hero .teaser-video {
        width: 18.125rem;
        height: 9.9375rem;
        margin: 1.25rem auto 0.625rem; } }

.featured_blab {
  margin-top: -50px;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms; }

.circle-btn, .circle-btn-red {
  height: auto !important;
  width: auto !important;
  border-radius: 9000px !important;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
  background-color: #303232;
  font-size: 21px;
  padding: 17px 15px;
  color: #CACACA;
  vertical-align: middle;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .circle-btn .circle-btn--icon, .circle-btn-red .circle-btn--icon {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 6px; }
    .circle-btn .circle-btn--icon path, .circle-btn-red .circle-btn--icon path {
      fill: #FFF; }

.circle-btn-red {
  background-color: #303232; }

.hero {
  position: relative; }
  .hero.expanded {
    height: calc(100vh - 60px); }
    .hero.expanded .wrapper {
      width: 100%;
      padding: 0rem; }
      .hero.expanded .wrapper .left {
        width: 0rem;
        overflow: hidden;
        margin: 0; }
      .hero.expanded .wrapper .right {
        width: 85%;
        height: 100%;
        margin: 0;
        margin-left: 15%; }
        .hero.expanded .wrapper .right .js-iframe-container {
          height: 100%;
          width: 100%; }

.hero .js-featured-action-container {
  display: flex !important; }
  .hero .js-featured-action-container .button-purple {
    background: #955ff1;
    color: #fff !important;
    opacity: 1;
    margin: auto;
    border-radius: 2px;
    border: 1px solid #955ff1;
    margin-left: 0;
    -webkit-transition: opacity 200ms;
    -moz-transition: opacity 200ms;
    transition: opacity 200ms; }
    .hero .js-featured-action-container .button-purple:hover {
      opacity: .9; }
  .hero .js-featured-action-container .button-outline {
    color: #fff !important;
    border: 1px solid;
    margin: auto;
    border-radius: 2px;
    margin-left: 0;
    background: rgba(255, 255, 255, 0);
    -webkit-transition: border 200ms;
    -moz-transition: border 200ms;
    transition: border 200ms; }
    .hero .js-featured-action-container .button-outline:hover {
      background: rgba(255, 255, 255, 0.2); }

.hero .hero-leftbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 100% !important;
  border: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  overflow: hidden;
  background: #262626;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
  margin-left: -20%; }
  .hero .hero-leftbar .js-featured-action-container {
    flex-direction: column; }
    .hero .hero-leftbar .js-featured-action-container a {
      width: 80%;
      margin: 10px auto 0;
      text-align: center; }
  .hero .hero-leftbar .other-featured-blabs--header {
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-weight: 400;
    line-height: 21px;
    margin: 10px auto;
    padding: 0 10px;
    background: #262626; }
  .hero .hero-leftbar .hero-leftbar-header {
    padding-bottom: 10px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background: #262626; }
  .hero .hero-leftbar .featured-blabs-list {
    position: absolute;
    top: 143px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column; }
    .hero .hero-leftbar .featured-blabs-list .featured-item {
      margin-bottom: 10px;
      background: transparent;
      max-width: 98% !important; }
      .hero .hero-leftbar .featured-blabs-list .featured-item.selected .card {
        border: 1px solid rgba(255, 255, 255, 0.5); }
        .hero .hero-leftbar .featured-blabs-list .featured-item.selected .card .info-layer {
          background: rgba(0, 0, 0, 0.6); }
.hero.expanded .hero-leftbar {
  margin-left: 0% !important; }

.feed-container {
  background: #eef2f6;
  min-height: 100vh; }
  .feed-container.landing #browse, .feed-container.landing.tags-open #browse {
    margin-left: 0;
    margin-top: 0; }
  .feed-container.tags-open #browse {
    margin-left: 15.625rem; }
    @media screen and (max-width: 37.5rem) {
      .feed-container.tags-open #browse {
        margin-left: 0; } }
  @media screen and (max-width: 60rem) {
    .feed-container.tags-open .feed section > ul {
      -webkit-box-pack: start;
      -moz-box-pack: start;
      box-pack: start;
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      -ms-justify-content: flex-start;
      -o-justify-content: flex-start;
      justify-content: flex-start;
      -ms-flex-pack: start; } }

#browse {
  -webkit-transition: margin-left 400ms ease;
  -moz-transition: margin-left 400ms ease;
  transition: margin-left 400ms ease;
  margin-top: 3.1875rem;
  margin-left: 0; }
  @media screen and (max-width: 37.5rem) {
    #browse {
      margin-top: 0rem; } }
  #browse .copyright-links {
    padding: 0.5rem 0;
    margin: 0.625rem;
    text-align: center; }
    #browse .copyright-links li {
      display: inline;
      margin-right: 0.3125rem;
      color: #474747;
      line-height: 1.6; }
      #browse .copyright-links li a {
        color: #474747; }
        #browse .copyright-links li a:hover {
          color: #955ff1; }
  #browse.hasFeaturedSection {
    margin-top: 3.1875rem; }

.tags-open #browse .copyright-links {
  display: none; }

.main-content {
  width: 100%;
  padding: 1.875rem 0.9375rem 1.875rem 0.9375rem; }

.feed {
  position: relative;
  width: 100%;
  min-height: 20vh; }
  .feed section > ul {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-pack: start;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    transition: all 400ms ease; }
    @media screen and (max-width: 60rem) {
      .feed section > ul {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -ms-flex-pack: center; } }
  .feed .peeek-loading--index {
    pointer-events: none !important;
    z-index: -1;
    opacity: 1; }
  .feed .spinner-hidden {
    opacity: 0 !important; }
  .feed #dot {
    background-color: #955FF1;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/blab-logo-63818ec956.svg");
    border-radius: 50%;
    width: 30px;
    background-repeat: no-repeat;
    height: 30px;
    position: absolute;
    bottom: 30px;
    left: 27px;
    transform-origin: center bottom;
    animation: dot .6s ease-in-out infinite;
    background-size: contain; }
@-webkit-keyframes dot {
  0% {
    transform: scale(1, 0.7); }
  20% {
    transform: scale(0.7, 1.2); }
  40% {
    transform: scale(1, 1); }
  50% {
    bottom: 100px; }
  46% {
    transform: scale(1, 1); }
  80% {
    transform: scale(0.7, 1.2); }
  90% {
    transform: scale(0.7, 1.2); }
  100% {
    transform: scale(1, 0.7); } }
  .feed .step {
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: 2px solid #cad4e2;
    top: 0;
    right: 0; }
@-webkit-keyframes anim {
  0% {
    opacity: 0;
    top: 0;
    right: 0; }
  50% {
    opacity: 1; }
  100% {
    top: 90px;
    right: 90px;
    opacity: 0; } }
  .feed #s1 {
    animation: anim 1.8s linear infinite; }
  .feed #s2 {
    animation: anim 1.8s linear infinite -.6s; }
  .feed #s3 {
    animation: anim 1.8s linear infinite -1.2s; }

/*body {
  background: #ddd;
}*/
.follow_you {
  background-color: #EAEAEA;
  padding: 3px 8px;
  position: relative;
  text-align: center;
  margin-top: 5px;
  color: white;
  max-width: 120px;
  border-radius: 4px; }

.profile .main-content {
  margin-top: 3.75rem;
  position: relative;
  max-width: 100%;
  padding-left: 1rem; }
.profile .feed {
  margin-top: 3.125rem;
  float: right;
  width: 70%;
  min-height: 100%;
  margin: 0; }
  @media screen and (max-width: 81.25rem) {
    .profile .feed {
      width: 60%;
      float: right; } }
  @media screen and (max-width: 71.25rem) {
    .profile .feed {
      width: 95%;
      float: none;
      display: block;
      margin: 0 auto; } }
  .profile .feed section {
    min-height: 100%; }
  @media screen and (max-width: 71.25rem) {
    .profile .feed ul {
      display: inline-block;
      margin: 0 auto; } }
  .profile .feed .grid {
    overflow: hidden;
    display: inline-block; }

.profile-sidebar {
  width: 20.625rem;
  position: fixed;
  margin-top: 3.125rem;
  left: 15%;
  margin-left: -11.5625rem; }
  @media screen and (max-width: 71.25rem) {
    .profile-sidebar {
      padding-left: 0;
      position: relative;
      left: auto;
      margin-left: 0;
      margin: 0.9375rem auto; } }

.profile-user-info {
  text-align: center; }
  .profile-user-info .profile-header {
    margin-bottom: 0.625rem; }
    .profile-user-info .profile-header .profile-photo {
      position: relative;
      width: 7.5rem;
      height: 7.5rem;
      border-radius: 100%;
      display: block;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin: 0 auto 0.625rem; }
      .profile-user-info .profile-header .profile-photo .team-badge {
        width: 2.375rem;
        position: absolute;
        bottom: -0.3125rem;
        right: 0;
        height: 2.375rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/team_blab_badge-179b88f921.png);
        border-radius: 50%;
        background-color: #EEF2F6; }
    .profile-user-info .profile-header .profile-info {
      display: block;
      margin: 0 auto;
      overflow: hidden;
      word-wrap: break-word; }
      @media screen and (max-width: 37.5rem) {
        .profile-user-info .profile-header .profile-info {
          vertical-align: top; } }
    .profile-user-info .profile-header .username {
      color: #474747; }
  .profile-user-info .join-date {
    padding: 1px;
    display: block;
    margin-top: 0.3125rem; }
    .profile-user-info .join-date p {
      color: #6D7175; }
      .profile-user-info .join-date p span {
        font-weight: 600; }
  .profile-user-info .bio {
    color: #252525;
    font-size: 1.1rem;
    width: 95%;
    margin: 15px auto;
    margin-top: 8px;
    overflow: hidden;
    word-wrap: break-word; }
  .profile-user-info .social-links {
    display: block;
    margin: 0 auto; }
    .profile-user-info .social-links span {
      font-size: 13px;
      padding: 3px 5px;
      display: inline-block;
      vertical-align: middle; }
    .profile-user-info .social-links .social-link {
      width: 17px;
      height: 17px;
      margin: 0;
      display: inline-block;
      vertical-align: middle;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
    .profile-user-info .social-links .twitter-social {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/twitter_blue-522ea6ebac.png"); }
  .profile-user-info .stats {
    display: Flex;
    margin: 1.25rem auto; }
    @media screen and (max-width: 71.25rem) {
      .profile-user-info .stats {
        display: none; } }
    .profile-user-info .stats li {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: inline-block;
      border-left: 1px solid #818181; }
      .profile-user-info .stats li:first-of-type {
        border-left: 0; }
      .profile-user-info .stats li a {
        color: #1f1f1f;
        display: block;
        padding: 0.1875rem 1.125rem; }
        .profile-user-info .stats li a span {
          color: #474747;
          text-transform: uppercase;
          display: block; }
        .profile-user-info .stats li a:hover {
          color: #A681E6; }
  .profile-user-info .admin-controls {
    display: Flex;
    margin: auto;
    position: fixed;
    padding: 25px;
    top: 61px;
    left: 0; }
    .profile-user-info .admin-controls .controls {
      width: 32px;
      height: 32px;
      display: inline-block;
      cursor: pointer; }
      .profile-user-info .admin-controls .controls #admin-ban {
        width: 32px;
        height: 32px;
        display: block;
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/admin_close-6053add4ed.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat; }
  .profile-user-info .follow-container,
  .profile-user-info .edit-profile-container {
    display: inline-block;
    text-align: center; }
  .profile-user-info .button-follow,
  .profile-user-info gs.edit-settin {
    margin-bottom: 0.625rem;
    display: block; }
  .profile-user-info .follows-you {
    display: inline-block;
    background: #b1b1b1;
    color: #474747;
    text-transform: uppercase;
    padding: 0.3125rem;
    margin: 0 auto; }
  .profile-user-info .edit-settings {
    background: #474747;
    color: #FFF; }

.profile-navigation {
  border-bottom: 1px solid #818181;
  margin: 1rem 0; }
  @media screen and (max-width: 71.25rem) {
    .profile-navigation {
      text-align: center; }
      .profile-navigation h2 {
        font-size: 12px; } }
  @media screen and (max-width: 37.5rem) {
    .profile-navigation {
      margin-bottom: 1.25rem; } }
  .profile-navigation li {
    display: inline-block;
    margin-right: 1.875rem;
    position: relative; }
    @media screen and (max-width: 71.25rem) {
      .profile-navigation li {
        margin: 0 0.5625rem; } }
    .profile-navigation li a {
      font-weight: 400;
      position: relative;
      top: 1px;
      display: block;
      padding: 0.625rem 0 1.25rem 0;
      border-bottom: 1px solid #818181;
      color: #1f1f1f;
      -webkit-transition: all 0.1s ease-in;
      -moz-transition: all 0.1s ease-in;
      transition: all 0.1s ease-in; }
  .profile-navigation li.selected a {
    border-bottom: 1px solid #955ff1;
    color: #955ff1;
    cursor: default; }
  .profile-navigation li:hover a {
    color: #955ff1; }

.profile-loader {
  width: 120px;
  height: 120px;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -60px;
  position: absolute;
  margin: 0 auto; }
  .profile-loader .loader {
    height: 50px;
    width: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    -webkit-animation: rotation 1s infinite linear;
    -moz-animation: rotation 1s infinite linear;
    -o-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
    border-left: 6px solid rgba(0, 0, 0, 0.4);
    border-right: 6px solid rgba(0, 0, 0, 0.4);
    border-bottom: 6px solid rgba(0, 0, 0, 0.4);
    border-top: 6px solid transparent;
    border-radius: 100%; }
    .profile-loader .loader:after {
      display: none !important; }
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg); } }
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(359deg); } }
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg); }
  to {
    -o-transform: rotate(359deg); } }
@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
.name-link:hover {
  color: #A681E6;
  cursor: pointer; }

#stream-list, #upcoming-list {
  opacity: 1;
  width: 100%;
  display: block;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 71.25rem) {
    #stream-list, #upcoming-list {
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center; } }

#stream-list.dont-show {
  opacity: 0;
  -webkit-transform: translate3d(0, 15px, 0);
  -moz-transform: translate3d(0, 15px, 0);
  -ms-transform: translate3d(0, 15px, 0);
  -o-transform: translate3d(0, 15px, 0);
  transform: translate3d(0, 15px, 0); }

.empty-state {
  width: 120px;
  height: 120px;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -60px;
  position: absolute;
  margin: 0 auto; }

/*!
Video.js Default Styles (http://videojs.com)
Version GENERATED_AT_BUILD
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-default-skin {
  color: #CCCCCC; }

/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face {
  font-family: 'VideoJS';
  src: url("font/vjs.eot");
  src: url("font/vjs.eot?#iefix") format("embedded-opentype"), url("font/vjs.woff") format("woff"), url("font/vjs.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #333333;
  background-color: rgba(51, 51, 51, 0.9); }

.vjs-default-skin .vjs-slider:focus {
  /* box-shadow */
  -webkit-box-shadow: 0 0 2em #fff;
  -moz-box-shadow: 0 0 2em #fff;
  box-shadow: 0 0 2em #fff; }

.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0; }

.vjs-default-skin .vjs-slider-handle:before {
  content: "";
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  /* transform */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* background-color-with-alpha */
  background-color: red;
  background-color: rgba(255, 0, 0, 0.7); }

/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */
  visibility: visible;
  opacity: 1;
  /* transition */
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s; }

/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s; }

.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none; }

.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none; }

/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
  - "\9" IE8 hack didn't work for this
  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media �screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: ""; } }

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em; }

/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }

/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em white; }

.vjs-default-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when
  this is set to 0 */ }

/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer; }

.vjs-default-skin .vjs-play-control:before {
  content: ""; }

.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: ""; }

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right; }

.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: ""; }

.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: ""; }

.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: ""; }

.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: ""; }

.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right; }

.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0; }

.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em; }

.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC") -50% 0 repeat; }

.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em; }

.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em; }

.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em; }

/* Progress
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s; }

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;
  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */
  /* transition */
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  height: 100%; }

/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0; }

.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprisingly works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
  background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC") -50% 0 repeat; }

.vjs-default-skin .vjs-load-progress {
  background: #646464;
  background: rgba(255, 255, 255, 0.4); }

.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%; }

.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em; }

/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em; }

.vjs-default-skin .vjs-current-time {
  float: left; }

.vjs-default-skin .vjs-duration {
  float: left; }

/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left; }

.vjs-time-divider {
  float: left;
  line-height: 3em; }

/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right; }

.vjs-default-skin .vjs-fullscreen-control:before {
  content: ""; }

/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: ""; }

/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
  left: 0.5em;
  top: 0.5em;
  font-size: 3em;
  display: block;
  z-index: 2;
  position: absolute;
  width: 4em;
  height: 2.6em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  /* background-color-with-alpha */
  background-color: red;
  background-color: rgba(255, 0, 0, 0.7);
  border: 0.1em solid #3b4249;
  /* border-radius */
  -webkit-border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  border-radius: 0.8em;
  /* box-shadow */
  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s; }

/* Optionally center */
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  /* Center it horizontally */
  left: 50%;
  margin-left: -2.1em;
  /* Center it vertically */
  top: 50%;
  margin-top: -1.4em; }

/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none; }

/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none; }

/* Hide on mobile devices. Remove when we stop using native controls
    by default on mobile  */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none; }

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  /* IE8 needs a non-glow hover state */
  background-color: #505050;
  background-color: rgba(10, 20, 50, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 3em #fff;
  -moz-box-shadow: 0 0 3em #fff;
  box-shadow: 0 0 3em #fff;
  /* transition */
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s; }

.vjs-default-skin .vjs-big-play-button:before {
  content: "";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%; }

/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
  /* animation */
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear; }

.vjs-default-skin .vjs-loading-spinner:before {
  content: "";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000; }

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(359deg); } }
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg); } }
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }
  100% {
    -o-transform: rotate(359deg); } }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(359deg); } }
/* Menu Buttons (Captions/Subtitles/etc.)
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer; }

.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid black;
  /* Same width top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */ }

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */
  /* background-color-with-alpha */
  background-color: red;
  background-color: rgba(255, 0, 0, 0.7);
  /* box-shadow */
  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); }

.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block; }

.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase; }

.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000; }

.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: #111;
  /* background-color-with-alpha */
  background-color: white;
  background-color: rgba(255, 255, 255, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em white;
  -moz-box-shadow: 0 0 1em white;
  box-shadow: 0 0 1em white; }

.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default; }

/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
  content: ""; }

/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
  content: ""; }

/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em white;
  -moz-box-shadow: 0 0 1em white;
  box-shadow: 0 0 1em white; }

/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: absolute;
  top: 0;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/
  /* Provide some basic defaults for fonts */
  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */
  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */
  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute; }

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto; }

.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute; }

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important; }

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none; }

/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%; }

.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%; }

/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none; }

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em; }

/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: black;
  background-color: rgba(0, 0, 0, 0.5); }

.video-js .vjs-subtitles {
  color: #fff; }

.video-js .vjs-captions {
  color: #fc6; }

.vjs-tt-cue {
  display: block; }

/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none; }

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible; }

.vjs-sublime-skin {
  color: white; }

.vjs-sublime-skin .vjs-poster:focus, .vjs-sublime-skin .vjs-control:focus {
  outline: none; }

.vjs-sublime-skin .vjs-big-play-button {
  display: none; }

.vjs-sublime-skin .vjs-big-play-button:before {
  border-color: transparent transparent transparent white;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  content: "";
  display: block; }

.vjs-sublime-skin.vjs-controls-disabled .vjs-big-play-button, .vjs-sublime-skin.vjs-has-started .vjs-big-play-button, .vjs-sublime-skin.vjs-using-native-controls .vjs-big-play-button {
  opacity: 0;
  pointer-events: none; }

.vjs-sublime-skin .vjs-control-bar {
  height: 50px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2; }

.vjs-sublime-skin.vjs-has-started .vjs-control-bar {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.vjs-sublime-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.vjs-sublime-skin.vjs-has-started .vjs-poster {
  display: none; }

.vjs-sublime-skin.vjs-using-native-controls .vjs-control-bar, .vjs-sublime-skin.vjs-controls-disabled .vjs-control-bar {
  display: none; }

.vjs-sublime-skin .vjs-progress-control {
  position: absolute;
  top: 0;
  right: 95px;
  bottom: 0;
  left: 50px; }

.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder {
  cursor: pointer;
  height: 20px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0; }

.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  content: "";
  display: block;
  height: 4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0; }

.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  height: 4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0; }

.vjs-sublime-skin .vjs-play-control {
  cursor: pointer;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  left: 20px;
  height: 16px;
  width: 15px; }

.vjs-sublime-skin .vjs-play-control:before {
  border-color: transparent transparent transparent white;
  border-style: solid;
  border-width: 8px 0 8px 15px;
  content: "";
  display: block; }

.vjs-sublime-skin.vjs-playing .vjs-play-control:before, .vjs-sublime-skin.vjs-playing .vjs-play-control:after {
  background-color: white;
  border: none;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px; }

.vjs-sublime-skin.vjs-playing .vjs-play-control:after {
  left: auto;
  right: 0; }

.vjs-sublime-skin .vjs-fullscreen-control {
  border: 3px solid white;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  right: 20px;
  height: 14px;
  width: 22px; }

.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
  background: white; }

.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
  background: black;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 5px; }

.vjs-sublime-skin .vjs-volume-control {
  cursor: pointer;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  right: 55px;
  height: 14px;
  width: 22px; }

.vjs-sublime-skin .vjs-volume-bar {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
  background-size: 22px 14px;
  height: 100%;
  width: 100%; }

.vjs-sublime-skin .vjs-volume-level {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
  background-size: 22px 14px;
  height: 100%; }

.vjs-sublime-skin .vjs-current-time,
.vjs-sublime-skin .vjs-time-divider,
.vjs-sublime-skin .vjs-duration,
.vjs-sublime-skin .vjs-remaining-time,
.vjs-sublime-skin .vjs-load-progress,
.vjs-sublime-skin .vjs-play-progress .vjs-control-text,
.vjs-sublime-skin .vjs-play-control .vjs-control-content,
.vjs-sublime-skin .vjs-fullscreen-control .vjs-control-text,
.vjs-sublime-skin .vjs-slider-handle,
.vjs-sublime-skin .vjs-volume-handle,
.vjs-sublime-skin .vjs-live-controls,
.vjs-sublime-skin .vjs-playback-rate,
.vjs-sublime-skin .vjs-subtitles-button,
.vjs-sublime-skin .vjs-captions-button,
.vjs-sublime-skin .vjs-mute-control,
.vjs-sublime-skin .vjs-hidden {
  display: none; }

.video-js {
  background-color: black;
  padding: 0;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle; }

.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.video-js:-moz-full-screen {
  position: absolute; }

.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important; }

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none; }

body.vjs-full-window {
  height: 100%;
  margin: 0;
  overflow-y: auto;
  padding: 0; }

.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%; }

.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%; }

.video-js.vjs-using-native-controls .vjs-poster {
  display: none; }

.overflow-section {
  text-align: center;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  color: #ffffff; }
  .overflow-section .top-section {
    position: relative;
    margin: auto;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 20px; }
  .overflow-section .hls-stream-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%; }
    .overflow-section .hls-stream-wrapper:before {
      content: '';
      float: left;
      padding-bottom: 75%; }
    .overflow-section .hls-stream-wrapper:after {
      content: '';
      display: table;
      clear: both; }
    @media screen and (min-aspect-ratio: 7 / 4) {
      .overflow-section .hls-stream-wrapper {
        width: 70%; } }
    @media screen and (min-aspect-ratio: 8 / 4) {
      .overflow-section .hls-stream-wrapper {
        width: 50%; } }
    .overflow-section .hls-stream-wrapper .hls-stream {
      position: relative;
      max-width: 100% !important;
      max-height: 50vh !important;
      width: 9999px !important;
      background: transparent; }
      .overflow-section .hls-stream-wrapper .hls-stream video {
        background: transparent !important; }
  .overflow-section .action-wrapper {
    position: relative;
    margin: auto;
    margin-top: 20px; }
  .overflow-section .action {
    padding: 0.9375rem 0;
    width: 100%;
    display: block;
    top: auto;
    left: 0;
    bottom: 0.625rem; }
    .overflow-section .action .button, .overflow-section .action .widget-card-ph button, .widget-card-ph .overflow-section .action button, .overflow-section .action .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .overflow-section .action button, .overflow-section .action .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .overflow-section .action button, .overflow-section .action .feed-item-card--subscribe-button, .overflow-section .action .scheduled-action--start-now, .overflow-section .action .scheduled-action--edit, .overflow-section .action .pending-caller-cell .button-container button, .pending-caller-cell .button-container .overflow-section .action button {
      width: 80%;
      max-width: 17.8125rem;
      display: inline-block;
      padding: 0.5rem 0;
      margin: 0 auto;
      text-align: center;
      border: 1px solid #955FF1;
      border-radius: 0.25rem;
      background-color: rgba(149, 95, 241, 0.15);
      color: #955FF1;
      /* transition */
      -webkit-transition: all 0.15s ease-in;
      -moz-transition: all 0.15s ease-in;
      -o-transition: all 0.15s ease-in;
      transition: all 0.15s ease-in; }
      .overflow-section .action .button:hover, .overflow-section .action .widget-card-ph button:hover, .widget-card-ph .overflow-section .action button:hover, .overflow-section .action .notify-followers-toast .info-block .actions button:hover, .notify-followers-toast .info-block .actions .overflow-section .action button:hover, .overflow-section .action .cohost-toast .info-block .actions button:hover, .cohost-toast .info-block .actions .overflow-section .action button:hover, .overflow-section .action .feed-item-card--subscribe-button:hover, .overflow-section .action .scheduled-action--start-now:hover, .overflow-section .action .scheduled-action--edit:hover, .overflow-section .action .pending-caller-cell .button-container button:hover, .pending-caller-cell .button-container .overflow-section .action button:hover {
        background-color: #955ff1;
        color: #FFF; }
      .overflow-section .action .button.subscribed, .overflow-section .action .widget-card-ph button.subscribed, .widget-card-ph .overflow-section .action button.subscribed, .overflow-section .action .notify-followers-toast .info-block .actions button.subscribed, .notify-followers-toast .info-block .actions .overflow-section .action button.subscribed, .overflow-section .action .cohost-toast .info-block .actions button.subscribed, .cohost-toast .info-block .actions .overflow-section .action button.subscribed, .overflow-section .action .subscribed.feed-item-card--subscribe-button, .overflow-section .action .subscribed.scheduled-action--start-now, .overflow-section .action .subscribed.scheduled-action--edit, .overflow-section .action .pending-caller-cell .button-container button.subscribed, .pending-caller-cell .button-container .overflow-section .action button.subscribed {
        border-color: #7d43df;
        background-color: #7d43df;
        color: #FFF; }

.room-full-disabled {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1000;
  cursor: default;
  pointer-events: all; }
  .room-full-disabled .room-full-disabled-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.75);
    line-height: 51px;
    color: #fff;
    text-align: center;
    font-size: 12px; }

.embed .overflow-section .top-section {
  max-width: 75%; }
.embed .overflow-section .hls-stream-wrapper {
  position: relative;
  margin: 0 auto;
  width: 90%; }
  .embed .overflow-section .hls-stream-wrapper .hls-stream {
    position: relative;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 50vh !important;
    width: 100% !important;
    padding-top: 0;
    background: transparent; }
    .embed .overflow-section .hls-stream-wrapper .hls-stream video {
      background: transparent !important; }

#embed-container .room-scheduled-state .sidebar.full-room {
  display: flex !important; }
  #embed-container .room-scheduled-state .sidebar.full-room .info-block {
    z-index: 1001; }

.adult-content-warning-container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FFF; }
  .adult-content-warning-container .wrapper {
    margin: auto;
    width: 37.5rem;
    max-width: 100%;
    padding: 2.5rem 0;
    border-radius: 0.25rem; }
    .adult-content-warning-container .wrapper .img-container {
      margin: 0 auto;
      height: 12.5rem;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/18andup-63f262f473.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 3.125rem; }
    .adult-content-warning-container .wrapper .warning-copy-container {
      max-width: 80%;
      margin: 0 auto; }
      .adult-content-warning-container .wrapper .warning-copy-container h3 {
        text-align: center;
        font-size: 1.5rem;
        margin-bottom: 0.75rem; }
      .adult-content-warning-container .wrapper .warning-copy-container p {
        text-align: center;
        margin-bottom: 1.5rem; }
    .adult-content-warning-container .wrapper .button-container {
      margin: 0 auto;
      max-width: 80%;
      text-align: center; }
      .adult-content-warning-container .wrapper .button-container button {
        width: 11.875rem;
        padding: 0.625rem 1.5rem;
        border-radius: 0.25rem;
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        margin-right: 0.75rem;
        -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
        transition: all 200ms; }
        .adult-content-warning-container .wrapper .button-container button:hover {
          background-color: rgba(0, 0, 0, 0.7);
          color: #fff; }

.account-suspended-notice {
  margin: 80px auto;
  width: 960px;
  max-width: 90%;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px; }
  .account-suspended-notice h2 {
    margin-bottom: 10px; }
  .account-suspended-notice p {
    font-size: 1.5em; }

input[type=text] {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#bg-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  left: 0;
  overflow: hidden; }
  #bg-overlay .content-image {
    position: relative; }
  #bg-overlay .darkened {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    opacity: 0.9;
    z-index: 6;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in; }
  #bg-overlay .blur-content-image,
  #bg-overlay .org-content-image {
    width: 120%;
    z-index: 2;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -10%;
    background-size: cover;
    background-position: center;
    pointer-events: none !important; }
  #bg-overlay.fulldark .darkened {
    opacity: 1; }
  #bg-overlay .stream-flex {
    position: relative;
    z-index: 1;
    margin: 0; }

.fake-video-comp {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 3;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
  .fake-video-comp #play-poster {
    vertical-align: middle;
    display: block;
    position: absolute;
    z-index: 400;
    top: 50%;
    left: 50%;
    margin-left: -3.125rem;
    margin-top: -3.125rem;
    font-size: 18px;
    border-radius: 50%;
    height: 6.25rem;
    width: 6.25rem;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: pointer; }
    @media screen and (max-width: 56.25rem) {
      .fake-video-comp #play-poster {
        width: 4.375rem;
        height: 4.375rem;
        margin-left: -2.1875rem;
        margin-right: -2.1875rem; } }
    .fake-video-comp #play-poster .play {
      position: absolute;
      left: 50%;
      margin-left: -0.9em;
      margin-top: -1em;
      top: 50%;
      width: 2em;
      height: 2em;
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/play_dark-abcdb91f04.svg"); }
      @media screen and (max-width: 90.0625rem) {
        .fake-video-comp #play-poster .play {
          width: 1.4em;
          height: 1.4em;
          margin-left: -0.7em;
          margin-top: -0.6em; } }
  .fake-video-comp .content-image {
    width: 100%;
    overflow: hidden;
    height: 100%;
    float: left;
    display: block;
    position: relative; }
  .fake-video-comp.grid-2 .content-image {
    width: 50%;
    height: 100%;
    float: left;
    display: block;
    position: relative; }
  .fake-video-comp.grid-3 .content-image {
    width: 50%;
    height: 50%;
    float: left;
    display: block;
    position: relative; }
    .fake-video-comp.grid-3 .content-image .content-image:first-child {
      height: 100%;
      width: 50%; }
  .fake-video-comp.grid-4 .content-image {
    width: 50%;
    height: 50%;
    float: left;
    display: block;
    position: relative; }

.scroll-wrapper {
  width: 100%;
  height: 100%;
  z-index: 10000;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  left: 0;
  position: absolute; }
  .scroll-wrapper .stream-flex {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0; }

.stats-overlay {
  pointer-events: all !important;
  text-align: center;
  top: 0;
  position: relative; }
  @media screen and (max-width: 37.5rem) {
    .stats-overlay {
      opacity: 0; } }
  .stats-overlay .control-container {
    background: linear-gradient(to bottom, transparent 0%, black 60%); }
  .stats-overlay .video-controls {
    position: relative;
    width: 100%; }
    .stats-overlay .video-controls .video-controls-container {
      width: 100%; }
  .stats-overlay.poster-state .blab-info-block {
    -webkit-transform: translate3d(0, 55px, 0);
    -moz-transform: translate3d(0, 55px, 0);
    -ms-transform: translate3d(0, 55px, 0);
    -o-transform: translate3d(0, 55px, 0);
    transform: translate3d(0, 55px, 0); }
  .stats-overlay.poster-state .video-controls {
    opacity: 0; }
  .stats-overlay.player-state .blab-info-block {
    opacity: 0; }

.video-controls {
  position: relative;
  width: 100%; }

.control-container.fade-out {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 35%); }
  .control-container.fade-out #blab-info-block {
    opacity: 0;
    -webkit-transform: translate3d(0, -5%, 0);
    -moz-transform: translate3d(0, -5%, 0);
    -ms-transform: translate3d(0, -5%, 0);
    -o-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    pointer-events: none; }
  .control-container.fade-out .seek-bar-container {
    -webkit-transform: translate3d(0, 140%, 0);
    -moz-transform: translate3d(0, 140%, 0);
    -ms-transform: translate3d(0, 140%, 0);
    -o-transform: translate3d(0, 140%, 0);
    transform: translate3d(0, 140%, 0);
    cursor: pointer; }
  .control-container.fade-out .video-actions-container {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0; }

.stream:hover .control-container.fade-out .seek-bar-container,
.stream-embed-container:hover .control-container.fade-out .seek-bar-container {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
.stream:hover .control-container.fade-out .video-actions-container,
.stream-embed-container:hover .control-container.fade-out .video-actions-container {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.blab-info-block {
  width: 100%;
  z-index: 1000;
  position: absolute;
  bottom: 80px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left; }
  .blab-info-block .profile-pic {
    display: none;
    background-size: contain;
    background-position: center;
    width: 4.6875rem;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 4.6875rem;
    border-radius: 50%;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 1.25rem; }
  .blab-info-block .text {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem; }
    @media screen and (max-width: 70.3125rem) {
      .blab-info-block .text {
        padding-bottom: 0.625rem; } }
    .blab-info-block .text h1 {
      color: #FFF;
      max-width: 600px;
      width: 90%;
      padding: 0.625rem 0; }
      @media screen and (max-width: 70.3125rem) {
        .blab-info-block .text h1 {
          font-size: 1.125rem; } }
    .blab-info-block .text h2 {
      color: #FFF;
      width: 80%;
      max-width: 40rem;
      font-weight: 400; }
      .blab-info-block .text h2 span {
        color: #9A81F3; }
    .blab-info-block .text .callers-list span {
      font-style: italic;
      color: rgba(255, 255, 255, 0.9); }
    .blab-info-block .text .callers-list a {
      color: #FFF; }
      .blab-info-block .text .callers-list a:hover {
        color: #9A81F3; }
    .blab-info-block .text ul {
      list-style-type: none; }
      .blab-info-block .text ul li {
        margin-right: 0.5rem;
        display: inline-block;
        color: #576271;
        background: #b1b1b1;
        padding: 0.125rem 0.3125rem;
        border-radius: 0.1875rem; }
      .blab-info-block .text ul span {
        color: #FFF;
        font-weight: 700; }
  .blab-info-block .actions {
    display: none; }

.control-container.fade-out #blab-info-block {
  opacity: 0;
  -webkit-transform: translate3d(0, -5%, 0);
  -moz-transform: translate3d(0, -5%, 0);
  -ms-transform: translate3d(0, -5%, 0);
  -o-transform: translate3d(0, -5%, 0);
  transform: translate3d(0, -5%, 0); }

#player-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.stats-card {
  display: inline-block;
  background: white;
  position: absolute;
  top: 100%;
  width: 100%;
  border-radius: 0.1875rem; }
  .stats-card nav {
    position: relative;
    border-top: 1px solid #b1b1b1;
    border-bottom: 1px solid #b1b1b1;
    text-align: center;
    background-color: #FFF; }
    .stats-card nav ul {
      list-style-type: none;
      display: -webkit-inline-box;
      display: -moz-inline-box;
      display: inline-box;
      display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center; }
      .stats-card nav ul li {
        cursor: pointer;
        position: relative;
        display: inline-block;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1 1 auto;
        -moz-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 1.25rem 1.5625rem;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        transition: all 0.2s ease;
        border-bottom: 2px solid transparent; }
        .stats-card nav ul li a {
          color: #474747; }
          .stats-card nav ul li a:hover {
            color: #955ff1; }
        .stats-card nav ul li span {
          font-weight: 700; }
        .stats-card nav ul li.selected {
          border-color: #955ff1; }
          .stats-card nav ul li.selected a {
            color: #7d43df; }
          .stats-card nav ul li.selected .caret-centerer {
            display: block; }
    .stats-card nav .caret-centerer {
      width: 100%;
      position: absolute;
      bottom: -0.875rem;
      left: 0;
      display: none; }
    .stats-card nav .caret {
      width: 0;
      height: 0;
      border-left: 0.9375rem solid transparent;
      border-right: 0.9375rem solid transparent;
      border-top: 0.9375rem solid #b1b1b1;
      display: block;
      position: relative;
      margin: 0 auto; }
      .stats-card nav .caret span {
        width: 0;
        height: 0;
        border-left: 0.875rem solid transparent;
        border-right: 0.875rem solid transparent;
        border-top: 0.875rem solid #FFf;
        display: block;
        top: -0.9375rem;
        left: -0.875rem;
        position: absolute;
        margin: 0 auto; }
  .stats-card .content-block {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 100px;
    background-color: white;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center; }
    .stats-card .content-block .info-block {
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
    .stats-card .content-block ul {
      max-width: 720px;
      width: 100%;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      display: block; }
      .stats-card .content-block ul li {
        padding: 0.5rem 1.5rem;
        background-color: transparent !important; }
      .stats-card .content-block ul li:first-child {
        padding-top: 1.5625rem; }

.video-controls {
  position: relative; }

.fake-embed-paused {
  position: relative; }
  .fake-embed-paused .room-container {
    position: relative;
    overflow: hidden;
    z-index: 0 !important; }
  .fake-embed-paused .right-sidebar {
    position: absolute;
    right: 0;
    width: 160px;
    top: 0; }
    .fake-embed-paused .right-sidebar .chat-content {
      background-color: rgba(30, 30, 30, 0.8); }
  .fake-embed-paused .fake-room {
    height: 100%;
    width: calc(100% - 160px);
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap; }
    .fake-embed-paused .fake-room .fake-caller-cell {
      width: 48%;
      height: 48%;
      margin: auto;
      background-size: cover;
      background-position: center; }
  .fake-embed-paused .fake-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .fake-embed-paused .fake-overlay .play-poster {
      height: 100px;
      width: 100px;
      margin: auto;
      border-radius: 50%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
      .fake-embed-paused .fake-overlay .play-poster .play.inline-icon, .fake-embed-paused .fake-overlay .play-poster .widget-card-ph button .play.icon, .widget-card-ph button .fake-embed-paused .fake-overlay .play-poster .play.icon, .fake-embed-paused .fake-overlay .play-poster .widget-card-ph.answered .state .answered-indicator span.play, .widget-card-ph.answered .state .answered-indicator .fake-embed-paused .fake-overlay .play-poster span.play, .fake-embed-paused .fake-overlay .play-poster .widget-modal .widget-container .widget-remove span.play, .widget-modal .widget-container .widget-remove .fake-embed-paused .fake-overlay .play-poster span.play, .fake-embed-paused .fake-overlay .play-poster .widget-card-twitter .actions-block .play.action, .widget-card-twitter .actions-block .fake-embed-paused .fake-overlay .play-poster .play.action, .fake-embed-paused .fake-overlay .play-poster .embed-live-meta--title .play.blip, .embed-live-meta--title .fake-embed-paused .fake-overlay .play-poster .play.blip, .fake-embed-paused .fake-overlay .play-poster .info-block .info-layer .stats-block span .play.icon, .info-block .info-layer .stats-block span .fake-embed-paused .fake-overlay .play-poster .play.icon, .fake-embed-paused .fake-overlay .play-poster .left-sidebar .sidebar-widget header .pull-down a .play.icon, .left-sidebar .sidebar-widget header .pull-down a .fake-embed-paused .fake-overlay .play-poster .play.icon, .fake-embed-paused .fake-overlay .play-poster .left-sidebar .sidebar-widget header .widget-menu a .play.icon, .left-sidebar .sidebar-widget header .widget-menu a .fake-embed-paused .fake-overlay .play-poster .play.icon, .fake-embed-paused .fake-overlay .play-poster .left-sidebar .info-block .info-layer .share-block .twitter-share span.play, .left-sidebar .info-block .info-layer .share-block .twitter-share .fake-embed-paused .fake-overlay .play-poster span.play, .fake-embed-paused .fake-overlay .play-poster .left-sidebar .info-block .info-layer .share-block .facebook-share span.play, .left-sidebar .info-block .info-layer .share-block .facebook-share .fake-embed-paused .fake-overlay .play-poster span.play, .fake-embed-paused .fake-overlay .play-poster .left-sidebar .info-block .info-layer .share-block .embed-share span.play, .left-sidebar .info-block .info-layer .share-block .embed-share .fake-embed-paused .fake-overlay .play-poster span.play, .fake-embed-paused .fake-overlay .play-poster .left-sidebar .info-block .info-layer .share-block .capture-moment span.play, .left-sidebar .info-block .info-layer .share-block .capture-moment .fake-embed-paused .fake-overlay .play-poster span.play, .fake-embed-paused .fake-overlay .play-poster .tweet-item .card span .play.icon, .tweet-item .card span .fake-embed-paused .fake-overlay .play-poster .play.icon, .fake-embed-paused .fake-overlay .play-poster .facebook-item .card span .play.icon, .facebook-item .card span .fake-embed-paused .fake-overlay .play-poster .play.icon {
        height: 100%;
        width: 100%;
        margin: auto;
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/play-button-cf2cb3ded3.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }

.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important; }

.inline-block-icon {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  content: ' ';
  vertical-align: middle; }

.button, .widget-card-ph button, .notify-followers-toast .info-block .actions button, .cohost-toast .info-block .actions button, .feed-item-card--subscribe-button, .scheduled-action--start-now, .scheduled-action--edit, .pending-caller-cell .button-container button {
  cursor: pointer !important;
  border-radius: 4px;
  padding: 0.375rem 1.875rem 0.5rem;
  display: inline-block;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease; }
  @media screen and (max-width: 37.5rem) {
    .button, .widget-card-ph button, .notify-followers-toast .info-block .actions button, .cohost-toast .info-block .actions button, .feed-item-card--subscribe-button, .scheduled-action--start-now, .scheduled-action--edit, .pending-caller-cell .button-container button {
      padding: 0.5rem 0.9375rem 0.625rem; } }

.rounded-button {
  cursor: pointer !important;
  border-radius: 1.25rem;
  padding: 0.375rem 1.875rem 0.5rem;
  display: inline-block;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease; }
  @media screen and (max-width: 37.5rem) {
    .rounded-button {
      padding: 0.5rem 0.9375rem 0.625rem; } }

.big-button, .user-card-modal .activity .button, .user-card-modal .activity .widget-card-ph button, .widget-card-ph .user-card-modal .activity button, .user-card-modal .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-modal .activity button, .user-card-modal .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-modal .activity button, .user-card-modal .activity .feed-item-card--subscribe-button, .user-card-modal .activity .scheduled-action--start-now, .user-card-modal .activity .scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-modal .activity button, .user-card-modal .activity .button-follow, .user-card-list .activity .button, .user-card-list .activity .widget-card-ph button, .widget-card-ph .user-card-list .activity button, .user-card-list .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-list .activity button, .user-card-list .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-list .activity button, .user-card-list .activity .feed-item-card--subscribe-button, .user-card-list .activity .scheduled-action--start-now, .user-card-list .activity .scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-list .activity button, .user-card-list .activity .button-follow, .qtip .user-card-qtip .activity .button, .qtip .user-card-qtip .activity .widget-card-ph button, .widget-card-ph .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .scheduled-action--start-now, .qtip .user-card-qtip .activity .scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .button-follow, .profile-user-info .button-follow,
.profile-user-info gs.edit-settin {
  padding: 0.5625rem 1.875rem 0.625rem; }
  .big-button.following, .user-card-modal .activity .following.button, .user-card-modal .activity .widget-card-ph button.following, .widget-card-ph .user-card-modal .activity button.following, .user-card-modal .activity .notify-followers-toast .info-block .actions button.following, .notify-followers-toast .info-block .actions .user-card-modal .activity button.following, .user-card-modal .activity .cohost-toast .info-block .actions button.following, .cohost-toast .info-block .actions .user-card-modal .activity button.following, .user-card-modal .activity .following.feed-item-card--subscribe-button, .user-card-modal .activity .following.scheduled-action--start-now, .user-card-modal .activity .following.scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button.following, .pending-caller-cell .button-container .user-card-modal .activity button.following, .user-card-modal .activity .following.button-follow, .user-card-list .activity .following.button, .user-card-list .activity .widget-card-ph button.following, .widget-card-ph .user-card-list .activity button.following, .user-card-list .activity .notify-followers-toast .info-block .actions button.following, .notify-followers-toast .info-block .actions .user-card-list .activity button.following, .user-card-list .activity .cohost-toast .info-block .actions button.following, .cohost-toast .info-block .actions .user-card-list .activity button.following, .user-card-list .activity .following.feed-item-card--subscribe-button, .user-card-list .activity .following.scheduled-action--start-now, .user-card-list .activity .following.scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button.following, .pending-caller-cell .button-container .user-card-list .activity button.following, .user-card-list .activity .following.button-follow, .qtip .user-card-qtip .activity .following.button, .qtip .user-card-qtip .activity .widget-card-ph button.following, .widget-card-ph .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.following, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.following, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .following.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .following.scheduled-action--start-now, .qtip .user-card-qtip .activity .following.scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.following, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .following.button-follow, .profile-user-info .following.button-follow,
  .profile-user-info gs.following.edit-settin {
    padding: 0.5625rem 1.5625rem 0.625rem 2.625rem; }
  @media screen and (max-width: 37.5rem) {
    .big-button, .user-card-modal .activity .button, .user-card-modal .activity .widget-card-ph button, .widget-card-ph .user-card-modal .activity button, .user-card-modal .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-modal .activity button, .user-card-modal .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-modal .activity button, .user-card-modal .activity .feed-item-card--subscribe-button, .user-card-modal .activity .scheduled-action--start-now, .user-card-modal .activity .scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-modal .activity button, .user-card-modal .activity .button-follow, .user-card-list .activity .button, .user-card-list .activity .widget-card-ph button, .widget-card-ph .user-card-list .activity button, .user-card-list .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .user-card-list .activity button, .user-card-list .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .user-card-list .activity button, .user-card-list .activity .feed-item-card--subscribe-button, .user-card-list .activity .scheduled-action--start-now, .user-card-list .activity .scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .user-card-list .activity button, .user-card-list .activity .button-follow, .qtip .user-card-qtip .activity .button, .qtip .user-card-qtip .activity .widget-card-ph button, .widget-card-ph .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .scheduled-action--start-now, .qtip .user-card-qtip .activity .scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button, .qtip .user-card-qtip .activity .button-follow, .profile-user-info .button-follow,
    .profile-user-info gs.edit-settin {
      padding: 0.5rem 0.9375rem 0.625rem; }
      .big-button.following, .user-card-modal .activity .following.button, .user-card-modal .activity .widget-card-ph button.following, .widget-card-ph .user-card-modal .activity button.following, .user-card-modal .activity .notify-followers-toast .info-block .actions button.following, .notify-followers-toast .info-block .actions .user-card-modal .activity button.following, .user-card-modal .activity .cohost-toast .info-block .actions button.following, .cohost-toast .info-block .actions .user-card-modal .activity button.following, .user-card-modal .activity .following.feed-item-card--subscribe-button, .user-card-modal .activity .following.scheduled-action--start-now, .user-card-modal .activity .following.scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button.following, .pending-caller-cell .button-container .user-card-modal .activity button.following, .user-card-modal .activity .following.button-follow, .user-card-list .activity .following.button, .user-card-list .activity .widget-card-ph button.following, .widget-card-ph .user-card-list .activity button.following, .user-card-list .activity .notify-followers-toast .info-block .actions button.following, .notify-followers-toast .info-block .actions .user-card-list .activity button.following, .user-card-list .activity .cohost-toast .info-block .actions button.following, .cohost-toast .info-block .actions .user-card-list .activity button.following, .user-card-list .activity .following.feed-item-card--subscribe-button, .user-card-list .activity .following.scheduled-action--start-now, .user-card-list .activity .following.scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button.following, .pending-caller-cell .button-container .user-card-list .activity button.following, .user-card-list .activity .following.button-follow, .qtip .user-card-qtip .activity .following.button, .qtip .user-card-qtip .activity .widget-card-ph button.following, .widget-card-ph .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.following, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.following, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .following.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .following.scheduled-action--start-now, .qtip .user-card-qtip .activity .following.scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.following, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.following, .qtip .user-card-qtip .activity .following.button-follow, .profile-user-info .following.button-follow,
      .profile-user-info gs.following.edit-settin {
        padding: 0.5rem 1.5625rem 0.5rem 2.625rem; } }

.purple-button, .feed-item .button, .feed-item .widget-card-ph button, .widget-card-ph .feed-item button, .feed-item .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .feed-item button, .feed-item .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .feed-item button, .feed-item .feed-item-card--subscribe-button, .feed-item .scheduled-action--start-now, .feed-item .scheduled-action--edit, .feed-item .pending-caller-cell .button-container button, .pending-caller-cell .button-container .feed-item button, .nav-user .nav-user-newblab .button, .nav-user .nav-user-newblab .widget-card-ph button, .widget-card-ph .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .nav-user .nav-user-newblab button, .nav-user .nav-user-newblab .feed-item-card--subscribe-button, .nav-user .nav-user-newblab .scheduled-action--start-now, .nav-user .nav-user-newblab .scheduled-action--edit, .nav-user .nav-user-newblab .pending-caller-cell .button-container button, .pending-caller-cell .button-container .nav-user .nav-user-newblab button, .create-form .form-submit-container .button, .create-form .form-submit-container .widget-card-ph button, .widget-card-ph .create-form .form-submit-container button, .create-form .form-submit-container .notify-followers-toast .info-block .actions button, .notify-followers-toast .info-block .actions .create-form .form-submit-container button, .create-form .form-submit-container .cohost-toast .info-block .actions button, .cohost-toast .info-block .actions .create-form .form-submit-container button, .create-form .form-submit-container .feed-item-card--subscribe-button, .create-form .form-submit-container .scheduled-action--start-now, .create-form .form-submit-container .scheduled-action--edit, .create-form .form-submit-container .pending-caller-cell .button-container button, .pending-caller-cell .button-container .create-form .form-submit-container button, .notify-followers-toast .info-block .actions .success, .cohost-toast .info-block .actions .success {
  background-color: #955ff1;
  color: #ffffff; }
  .purple-button:hover, .feed-item .button:hover, .feed-item .widget-card-ph button:hover, .widget-card-ph .feed-item button:hover, .feed-item .notify-followers-toast .info-block .actions button:hover, .notify-followers-toast .info-block .actions .feed-item button:hover, .feed-item .cohost-toast .info-block .actions button:hover, .cohost-toast .info-block .actions .feed-item button:hover, .feed-item .feed-item-card--subscribe-button:hover, .feed-item .scheduled-action--start-now:hover, .feed-item .scheduled-action--edit:hover, .feed-item .pending-caller-cell .button-container button:hover, .pending-caller-cell .button-container .feed-item button:hover, .nav-user .nav-user-newblab .button:hover, .nav-user .nav-user-newblab .widget-card-ph button:hover, .widget-card-ph .nav-user .nav-user-newblab button:hover, .nav-user .nav-user-newblab .notify-followers-toast .info-block .actions button:hover, .notify-followers-toast .info-block .actions .nav-user .nav-user-newblab button:hover, .nav-user .nav-user-newblab .cohost-toast .info-block .actions button:hover, .cohost-toast .info-block .actions .nav-user .nav-user-newblab button:hover, .nav-user .nav-user-newblab .feed-item-card--subscribe-button:hover, .nav-user .nav-user-newblab .scheduled-action--start-now:hover, .nav-user .nav-user-newblab .scheduled-action--edit:hover, .nav-user .nav-user-newblab .pending-caller-cell .button-container button:hover, .pending-caller-cell .button-container .nav-user .nav-user-newblab button:hover, .create-form .form-submit-container .button:hover, .create-form .form-submit-container .widget-card-ph button:hover, .widget-card-ph .create-form .form-submit-container button:hover, .create-form .form-submit-container .notify-followers-toast .info-block .actions button:hover, .notify-followers-toast .info-block .actions .create-form .form-submit-container button:hover, .create-form .form-submit-container .cohost-toast .info-block .actions button:hover, .cohost-toast .info-block .actions .create-form .form-submit-container button:hover, .create-form .form-submit-container .feed-item-card--subscribe-button:hover, .create-form .form-submit-container .scheduled-action--start-now:hover, .create-form .form-submit-container .scheduled-action--edit:hover, .create-form .form-submit-container .pending-caller-cell .button-container button:hover, .pending-caller-cell .button-container .create-form .form-submit-container button:hover, .notify-followers-toast .info-block .actions .success:hover, .cohost-toast .info-block .actions .success:hover {
    background-color: #7d43df; }

.purple-ghost-button, .button-follow, .button-recommend {
  background-color: transparent;
  color: #955ff1;
  border: 1px solid #955ff1; }
  .purple-ghost-button:hover, .button-follow:hover, .button-recommend:hover {
    background-color: rgba(150, 101, 234, 0.15); }

.gray-ghost-button, .notify-followers-toast .info-block .actions .cancel, .cohost-toast .info-block .actions .cancel {
  background-color: transparent;
  color: #474747;
  border: 1px solid #818181; }
  .gray-ghost-button:hover, .notify-followers-toast .info-block .actions .cancel:hover, .cohost-toast .info-block .actions .cancel:hover {
    background-color: rgba(129, 129, 129, 0.1); }

.red-button {
  background-color: #FFF;
  color: #ffffff;
  background-color: #F64F64 !important; }
  .red-button:hover {
    background-color: #E33E52 !important; }

.wut-is-blab {
  padding: 0 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 46px; }

.new-blab-button {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/new-blab-rocket-17d6ae8a2a.svg");
  background-repeat: no-repeat;
  background-position: 0.875rem center;
  background-color: #955ff1;
  background-size: 0.875rem;
  padding: 0 1.25rem 0 2.1875rem;
  line-height: 46px;
  border-radius: 0;
  font-size: 14px !important;
  font-weight: 600 !important; }

.cancel-button {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/cancel-077a11493d.svg");
  background-repeat: no-repeat;
  background-position: 0.875rem center;
  margin-right: 15px;
  background-size: 0.875rem;
  padding: 0.5rem 1.25rem 0.5625rem 2.1875rem; }

.button-follow {
  background-position: 1.4375rem center;
  background-repeat: no-repeat; }
  .button-follow:after {
    content: "Follow"; }
  .button-follow.following {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/followed_button-5a3bcc147e.svg");
    background-repeat: no-repeat;
    padding: 0.375rem 1.5625rem 0.5rem 2.625rem;
    border: 1px solid #955ff1;
    color: #ffffff;
    background-color: #955ff1;
    opacity: .8; }
    .button-follow.following:after {
      content: "Following"; }
    .button-follow.following:hover {
      opacity: 1;
      border-color: #955ff1; }
  .button-follow:hover {
    border-color: #955ff1; }

.button-recommend {
  background-position: 1.4375rem center;
  background-repeat: no-repeat; }
  .button-recommend:after {
    content: "Follow"; }
  .button-recommend.following {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/followed_button-5a3bcc147e.svg");
    background-repeat: no-repeat;
    padding: 0.375rem 1.5625rem 0.5rem 2.625rem;
    border: 1px solid #955ff1;
    color: #ffffff;
    background-color: #955ff1;
    opacity: .8; }
    .button-recommend.following:after {
      content: "Following"; }
    .button-recommend.following:hover {
      opacity: 1;
      border-color: #955ff1; }
  .button-recommend:hover {
    border-color: #955ff1; }

.twitter-button:hover {
  background-color: #3ea1ec; }

.youtube-button {
  background-color: #FF5757;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  color: #FFF;
  width: 95%;
  border-radius: 0.25rem;
  vertical-align: middle;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  pointer-events: all;
  overflow: hidden;
  padding: 0.625rem 0.9375rem;
  position: relative;
  font-weight: 700;
  right: 0;
  margin-bottom: 0.5rem; }
  @media screen and (max-width: 90.0625rem) {
    .youtube-button {
      padding: 0.5rem 0.75rem; } }
  .youtube-button span {
    display: inline-block;
    width: 1.6em;
    height: 1.1em;
    vertical-align: middle;
    margin-left: 0.625rem;
    margin-bottom: 0.125rem;
    font-weight: 600;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/YouTube_light_color_icon-3cfbc995df.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
  .youtube-button.big-button, .user-card-modal .activity .youtube-button.button, .user-card-modal .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-modal .activity button.youtube-button, .user-card-modal .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.feed-item-card--subscribe-button, .user-card-modal .activity .youtube-button.scheduled-action--start-now, .user-card-modal .activity .youtube-button.scheduled-action--edit, .user-card-modal .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-modal .activity button.youtube-button, .user-card-modal .activity .youtube-button.button-follow, .user-card-list .activity .youtube-button.button, .user-card-list .activity .widget-card-ph button.youtube-button, .widget-card-ph .user-card-list .activity button.youtube-button, .user-card-list .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.feed-item-card--subscribe-button, .user-card-list .activity .youtube-button.scheduled-action--start-now, .user-card-list .activity .youtube-button.scheduled-action--edit, .user-card-list .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .user-card-list .activity button.youtube-button, .user-card-list .activity .youtube-button.button-follow, .qtip .user-card-qtip .activity .youtube-button.button, .qtip .user-card-qtip .activity .widget-card-ph button.youtube-button, .widget-card-ph .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .notify-followers-toast .info-block .actions button.youtube-button, .notify-followers-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .cohost-toast .info-block .actions button.youtube-button, .cohost-toast .info-block .actions .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.feed-item-card--subscribe-button, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--start-now, .qtip .user-card-qtip .activity .youtube-button.scheduled-action--edit, .qtip .user-card-qtip .activity .pending-caller-cell .button-container button.youtube-button, .pending-caller-cell .button-container .qtip .user-card-qtip .activity button.youtube-button, .qtip .user-card-qtip .activity .youtube-button.button-follow, .profile-user-info .youtube-button.button-follow,
  .profile-user-info gs.youtube-button.edit-settin {
    padding: 0.4375rem 0.875rem; }
  .youtube-button:hover {
    background-color: #FF5757; }
  .youtube-button.uploading {
    cursor: default !important;
    background-color: #FF5757; }
    .youtube-button.uploading span {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/spinning-loader-FFF-70704c2d4e.gif); }
  .youtube-button.disabled {
    cursor: default !important;
    background-color: #FF5757; }
    .youtube-button.disabled span {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/checkmark-002196fb33.png); }

.legacy-popover {
  display: none;
  padding: 0;
  max-width: 11.875rem;
  z-index: 900;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  border: 1px solid #f2f2f2; }
  .legacy-popover li a {
    text-align: left;
    font-weight: 300;
    width: 11.875rem;
    color: #474747;
    padding: 0.625rem 1.5625rem;
    white-space: nowrap;
    line-height: 1.4; }
    .legacy-popover li a:hover {
      color: #1f1f1f; }
  .legacy-popover li:first-of-type a {
    padding-top: 1.125rem; }
  .legacy-popover li:last-of-type a {
    padding-bottom: 1.125rem; }

.user-block {
  margin: 1.5625rem 0; }
  .user-block:first-of-type {
    margin-top: 0; }
  .user-block:last-of-type {
    margin-bottom: 0; }
  .user-block img {
    border-radius: 100%;
    width: 2.25rem;
    height: 2.25rem;
    float: left; }
    @media screen and (max-width: 71.25rem) {
      .user-block img {
        width: 1.875rem;
        height: 1.875rem; } }
  .user-block .info {
    float: left;
    margin-left: 0.5rem;
    max-width: 80%; }
    @media screen and (max-width: 71.25rem) {
      .user-block .info {
        width: 80%; } }
  .user-block .fullname {
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap; }
    .user-block .fullname a {
      color: #1f1f1f; }
      .user-block .fullname a:hover {
        color: #955ff1; }
  .user-block .username {
    font-weight: 400;
    color: #474747; }
  .user-block .bio {
    margin-top: 0.1875rem;
    color: #474747; }
  .user-block .action {
    margin-top: 0.4375rem; }

.chat-input-container {
  width: 100%;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: block;
  font-size: 1.4em;
  text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  border-radius: 0.3em; }
  .chat-input-container .textarea-wrapper {
    border: none;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    background-color: #F2F2F2;
    padding: 0.625rem 0.9375rem;
    border-radius: 0.3em; }
  .chat-input-container textarea {
    background: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 1.1em;
    border: none;
    resize: none;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .chat-input-container textarea::-webkit-input-placeholder {
      color: #8090A3; }
    .chat-input-container textarea::-moz-placeholder {
      color: #8090A3; }
    .chat-input-container textarea:-moz-placeholder {
      color: #8090A3; }
    .chat-input-container textarea:-ms-input-placeholder {
      color: #8090A3; }
  .chat-input-container .chat-wrapper {
    width: 94%;
    margin: 0 3%;
    padding: 0.5625rem 0; }

.dropdown, .channel--header-profile--cover .settings .stream-settings-dropdown, .scheduled-actions-calendar ul, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown {
  background: #FFF;
  border: 1px solid #C6CDD2;
  border-radius: 0.25rem;
  width: 12.5rem;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.02); }
  .dropdown li, .channel--header-profile--cover .settings .stream-settings-dropdown li, .scheduled-actions-calendar ul li, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li {
    display: block;
    cursor: pointer;
    text-align: center;
    padding: 0.9375rem 0.625rem;
    border-bottom: 1px solid #E1E8ED; }
    .dropdown li:last-child, .channel--header-profile--cover .settings .stream-settings-dropdown li:last-child, .scheduled-actions-calendar ul li:last-child, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li:last-child, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li:last-child, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li:last-child {
      border-bottom: none; }
    .dropdown li a, .channel--header-profile--cover .settings .stream-settings-dropdown li a, .scheduled-actions-calendar ul li a, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li a, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li a, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li a {
      color: #818181; }
    .dropdown li:hover a, .channel--header-profile--cover .settings .stream-settings-dropdown li:hover a, .scheduled-actions-calendar ul li:hover a, .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav li:hover a, .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav li:hover a, .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown li:hover a {
      color: #242a33; }

#index-header {
  background-color: #141414;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  height: 46px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  transition: all 400ms ease; }

.header-logo {
  float: left;
  display: block;
  width: 15.625rem; }

.page-title {
  display: none;
  text-align: center;
  height: 3.75rem;
  padding: 1.375rem;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f1f1f; }
  @media screen and (max-width: 37.5rem) {
    .page-title {
      display: block; } }
  .page-title:hover {
    color: #955ff1; }
    .page-title:hover g {
      fill: #955ff1; }
  .page-title svg {
    margin-right: 0.125rem; }
    .page-title svg g {
      -webkit-transition: all 100ms;
      -moz-transition: all 100ms;
      transition: all 100ms; }

.nav-site {
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  transition: all 400ms ease; }
  @media screen and (max-width: 37.5rem) {
    .nav-site {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background: #ffffff;
      top: 0;
      left: -100vw;
      z-index: 9999; } }
  .nav-site.open {
    left: 0; }
  .nav-site .close-phonemenu-drawer-button {
    display: none;
    padding: 1.5625rem 1.25rem;
    float: right; }
    @media screen and (max-width: 37.5rem) {
      .nav-site .close-phonemenu-drawer-button {
        display: block; } }
  .nav-site .phone-navigation {
    display: none; }
    @media screen and (max-width: 37.5rem) {
      .nav-site .phone-navigation {
        display: block; } }
    .nav-site .phone-navigation li {
      display: block; }
      .nav-site .phone-navigation li a {
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #474747;
        border-top: 1px solid #b1b1b1;
        display: block;
        height: 3.125rem;
        padding: 1rem 1.25rem 0.875rem; }
        .nav-site .phone-navigation li a.selected, .nav-site .phone-navigation li a:hover {
          background-color: #955ff1;
          color: #ffffff; }
        .nav-site .phone-navigation li a .count {
          margin-left: 0.25rem;
          font-weight: 400;
          border-radius: 0.25rem;
          background-color: #818181;
          color: #ffffff;
          padding: 0.125rem 0.375rem; }
          .nav-site .phone-navigation li a .count.new {
            background-color: #f34949; }
            .nav-site .phone-navigation li a .count.new:after {
              content: " new"; }

.search {
  float: left;
  font-size: 0; }
  @media screen and (max-width: 71.25rem) {
    .search {
      margin-left: 1.25rem;
      overflow: hidden;
      position: relative; } }
  @media screen and (max-width: 60rem) {
    .search {
      display: none; } }
  .search .custom-search {
    height: 2.125rem;
    width: 21.875rem;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: #262626;
    border: 1px solid #262626;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in; }
    .search .custom-search.focused {
      background-color: #FFF; }
      .search .custom-search.focused .clear-search {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
      .search .custom-search.focused input[type="submit"] {
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/_icons/search-dark-77960c5c97.svg);
        border-right: 1px solid rgba(0, 0, 0, 0.05); }
  .search input[type="text"] {
    border-radius: 4px 0 0 4px;
    height: 100%;
    width: 16.25rem;
    border-width: 0;
    border-style: none;
    display: inline;
    background-color: transparent;
    vertical-align: middle;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0.0625rem 0.625rem; }
    @media screen and (min-width: 60rem) and (max-width: 71.25rem) {
      .search input[type="text"] {
        width: 21.875rem; } }
    @media screen and (min-width: 37.5rem) and (max-width: 60rem) {
      .search input[type="text"] {
        width: 15.625rem; } }
    @media screen and (max-width: 37.5rem) {
      .search input[type="text"] {
        width: 11.875rem; } }
  .search input[type="submit"] {
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/_icons/search-5e881b1ba1.svg);
    background-repeat: no-repeat;
    background-position: center 10px;
    border-style: none;
    height: 100%;
    width: 3.125rem;
    float: left;
    background-color: transparent;
    display: inline;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    cursor: pointer !important;
    padding: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05); }
  .search .clear-search {
    float: right;
    width: 2.3125rem;
    height: 100%;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/close-54157222f6.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    cursor: pointer; }

.nav-user {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1.25rem !important; }
  .nav-user ul > li {
    float: left; }
  .nav-user a {
    display: block; }
  .nav-user .nav-user-navigation {
    position: relative;
    margin-left: 1.25rem;
    padding: 6px 0; }
    @media screen and (max-width: 71.25rem) {
      .nav-user .nav-user-navigation {
        margin-left: 0.9375rem; } }
    .nav-user .nav-user-navigation:hover .down-toggle-arrow g {
      fill: #955ff1; }
    .nav-user .nav-user-navigation:hover .profile-name {
      color: #955ff1; }
    .nav-user .nav-user-navigation img {
      width: 2.125rem;
      height: 2.125rem;
      border-radius: 100%;
      display: inline;
      vertical-align: middle; }
      @media screen and (max-width: 37.5rem) {
        .nav-user .nav-user-navigation img {
          width: 1.875rem;
          height: 1.875rem; } }
    .nav-user .nav-user-navigation .profile-name {
      display: inline;
      vertical-align: middle;
      color: #1f1f1f;
      font-weight: 100;
      margin-left: 0.5rem;
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      transition: all 200ms ease; }
      @media screen and (max-width: 60rem) {
        .nav-user .nav-user-navigation .profile-name {
          display: none; } }
    .nav-user .nav-user-navigation .down-toggle-arrow {
      display: inline;
      vertical-align: middle;
      margin-left: 0.375rem;
      position: relative;
      top: 0.125rem; }
      @media screen and (max-width: 37.5rem) {
        .nav-user .nav-user-navigation .down-toggle-arrow {
          display: none; } }
      .nav-user .nav-user-navigation .down-toggle-arrow g {
        -webkit-transition: fill 100ms ease;
        -moz-transition: fill 100ms ease;
        transition: fill 100ms ease; }
  .nav-user .nav-user-newblab {
    display: inline-block; }
    @media screen and (max-width: 60rem) {
      .nav-user .nav-user-newblab {
        display: none; } }
  @media screen and (max-width: 37.5rem) {
    .nav-user {
      padding: 0.9375rem 1.25rem; } }
  .nav-user .signup-button {
    background-color: #a282ff;
    color: #fff;
    border-radius: 0;
    line-height: 46px;
    padding: 0 30px;
    font-size: 14px;
    font-weight: 700; }
    .nav-user .signup-button:hover {
      background-color: #955ff1; }

.nav-user-navigation-dropdown {
  position: absolute;
  right: 0;
  z-index: 100000;
  top: 3.125rem; }
  @media screen and (max-width: 37.5rem) {
    .nav-user-navigation-dropdown {
      top: 2.5rem;
      right: -0.3125rem; } }
  .nav-user-navigation-dropdown:after {
    bottom: 100%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 7px;
    margin-left: -7px; }
  .nav-user-navigation-dropdown li {
    float: left; }
    .nav-user-navigation-dropdown li a {
      display: block; }
  .nav-user-navigation-dropdown .new-blab-link a {
    color: #955ff1;
    font-weight: 400;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 0.9375rem; }
    .nav-user-navigation-dropdown .new-blab-link a:hover {
      color: #7d43df; }
  .nav-user-navigation-dropdown li:nth-of-type(1) a {
    padding-top: 1.125rem; }

.feed-container.landing .nav-blabs, .feed-container.landing.tags-open .nav-blabs {
  position: relative;
  margin-left: 0;
  width: 100vw;
  top: 0; }
.feed-container.tags-open .nav-blabs {
  margin-left: 15.625rem;
  width: calc(100vw - 25px); }

.nav-blabs {
  -webkit-transition: margin 400ms ease;
  -moz-transition: margin 400ms ease;
  transition: margin 400ms ease;
  margin-left: 0;
  width: 100vw;
  position: absolute;
  z-index: 1;
  top: -51px;
  background-color: #ffffff;
  border-bottom: 1px solid #b1b1b1;
  overflow: hidden;
  max-height: 3.1875rem; }
  @media screen and (max-width: 37.5rem) {
    .nav-blabs {
      position: fixed;
      bottom: 0;
      top: inherit;
      pointer-events: all;
      z-index: 9999;
      border-top: 1px solid #e6e6e6;
      border-bottom: none !important; }
      .nav-blabs ul {
        margin: 0 !important;
        display: flex; }
        .nav-blabs ul li {
          margin: auto !important; }
          .nav-blabs ul li .selected span {
            border-bottom: none !important;
            border-top: 1px solid #242a33; } }
  .nav-blabs ul {
    max-height: 100px;
    -webkit-transition: all, 0.15s, ease;
    -moz-transition: all, 0.15s, ease;
    transition: all, 0.15s, ease;
    margin-left: 1.25rem;
    overflow: hidden; }
    .nav-blabs ul li {
      display: inline-block;
      margin: 0 0.9375rem; }
      .nav-blabs ul li:first-of-type {
        margin-left: 0; }
      .nav-blabs ul li a {
        padding: 1.25rem 0 0.9375rem;
        display: block;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #474747; }
        .nav-blabs ul li a.selected span:first-of-type {
          font-weight: 700;
          color: #1f1f1f;
          padding: 1.1875rem 0 0.8125rem;
          border-bottom: 1px solid #1f1f1f; }
        .nav-blabs ul li a:hover {
          color: #955ff1; }
        .nav-blabs ul li a .count {
          margin-left: 0.25rem;
          font-weight: 400;
          border-radius: 0.25rem;
          background-color: #818181;
          color: #ffffff;
          padding: 0.125rem 0.375rem; }
          .nav-blabs ul li a .count.new {
            background-color: #f34949; }
            .nav-blabs ul li a .count.new:after {
              content: " new"; }
  .nav-blabs .no-height {
    max-height: 0px; }

.feed-container.landing .nav-tags, .feed-container.landing.tags-open .nav-tags {
  display: none;
  margin-left: -15.625rem; }
.feed-container.tags-open .nav-tags {
  margin-left: 0; }

.importantFixed {
  position: fixed !important;
  top: 61px !important; }

.nav-tags {
  -webkit-transition: margin 400ms ease;
  -moz-transition: margin 400ms ease;
  transition: margin 400ms ease;
  margin-left: -15.625rem;
  padding: 1.25rem;
  width: 15.625rem;
  height: calc(100vh - 61px);
  float: left;
  position: absolute;
  top: -51px;
  background-color: #FBFBFB;
  border-right: 1px solid #b1b1b1;
  z-index: 99; }
  .nav-tags .close-tag-drawer-button, .nav-tags .nav-site .close-phonemenu-drawer-button, .nav-site .nav-tags .close-phonemenu-drawer-button {
    padding: 0;
    position: relative;
    display: inline-block; }
    .nav-tags .close-tag-drawer-button svg g, .nav-tags .nav-site .close-phonemenu-drawer-button svg g, .nav-site .nav-tags .close-phonemenu-drawer-button svg g {
      -webkit-transition: all 200ms;
      -moz-transition: all 200ms;
      transition: all 200ms;
      fill: #323232; }
    .nav-tags .close-tag-drawer-button:hover svg g, .nav-tags .nav-site .close-phonemenu-drawer-button:hover svg g, .nav-site .nav-tags .close-phonemenu-drawer-button:hover svg g {
      fill: #955ff1; }
  .nav-tags a {
    color: #485465; }
    .nav-tags a:hover {
      color: #955ff1; }
  .nav-tags h3 {
    text-transform: uppercase;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 0.625rem;
    display: inline-block;
    color: inherit;
    padding-left: 10px; }
  .nav-tags .all-tags {
    display: block;
    width: 100%;
    font-weight: 500;
    padding: 0.25rem 0.5rem 0.3125rem;
    color: #888888;
    background-color: #FFF;
    border: 1px solid #E5E3E8;
    border-radius: 0.375rem;
    font-size: 1rem;
    margin-bottom: 10px; }
    .nav-tags .all-tags.selected {
      background: #955ff1;
      color: #FFF;
      border-color: #955ff1; }
    .nav-tags .all-tags:hover {
      border-color: rgba(149, 95, 241, 0.33);
      color: #955FF5;
      background-color: rgba(149, 95, 241, 0.07); }
  .nav-tags .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    max-height: 100%;
    overflow: auto;
    padding-bottom: 20px; }
    .nav-tags .tag-cloud li {
      text-transform: capitalize;
      display: inline-flex;
      margin: 0 0.1875rem 0.1875rem 0; }
      .nav-tags .tag-cloud li a {
        font-weight: 500;
        padding: 0.25rem 0.5rem 0.3125rem;
        color: #888888;
        background-color: #FFF;
        display: block;
        border: 1px solid #E5E3E8;
        border-radius: 0.375rem; }
        @media screen and (max-width: 37.5rem) {
          .nav-tags .tag-cloud li a {
            font-size: 14px; } }
      .nav-tags .tag-cloud li.selected a, .nav-tags .tag-cloud li.selected:hover a {
        background: #955ff1;
        color: #FFF;
        border-color: #955ff1; }
      .nav-tags .tag-cloud li:hover a {
        border-color: rgba(149, 95, 241, 0.33);
        color: #955FF5;
        background-color: rgba(149, 95, 241, 0.07); }

.feed-container.landing .breadcrumb-tags, .feed-container.landing.tags-open .breadcrumb-tags {
  display: none; }
.feed-container.tags-open .breadcrumb-tags {
  display: none; }
  @media screen and (max-width: 37.5rem) {
    .feed-container.tags-open .breadcrumb-tags {
      display: block; } }

.breadcrumbs {
  padding-left: 12px; }
  .breadcrumbs > div {
    margin-bottom: 1.25rem; }
  @media screen and (max-width: 37.5rem) {
    .breadcrumbs {
      margin-top: -10px;
      padding-left: 17px; } }
  .breadcrumbs .breadcrumb-tags {
    display: block;
    position: relative; }
    .breadcrumbs .breadcrumb-tags .open-tag-drawer-button:hover p {
      color: #7d43df; }
    .breadcrumbs .breadcrumb-tags .open-tag-drawer-button:hover g {
      fill: #7d43df; }
    .breadcrumbs .breadcrumb-tags .open-tag-drawer-button svg {
      position: relative;
      top: 0.125rem;
      margin-right: 0.125rem; }
  .breadcrumbs p {
    display: inline;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #955ff1; }
  .breadcrumbs ul {
    display: inline; }
    .breadcrumbs ul li {
      display: inline; }
      .breadcrumbs ul li:not(:last-of-type):after {
        content: ", "; }

.site-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  margin-top: 1.25rem;
  padding-top: 0.9375rem;
  background-color: #FBFBFB; }
  .site-footer img {
    display: block;
    margin: 0 auto;
    margin-bottom: 0.625rem; }
    @media screen and (max-width: 60rem) {
      .site-footer img {
        display: none; } }
  .site-footer .copyright-links {
    padding: 0.5rem 0;
    border-top: 1px solid #b1b1b1;
    text-align: center; }
    .site-footer .copyright-links li {
      display: inline;
      margin-right: 0.3125rem;
      color: #474747;
      line-height: 1.6; }
      .site-footer .copyright-links li a {
        color: #474747; }
        .site-footer .copyright-links li a:hover {
          color: #955ff1; }

.previewmoment {
  background-color: white !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 400px;
  height: 309px;
  padding: 20px !important; }
  .previewmoment video {
    width: 50%;
    margin: auto;
    height: 50%; }

.close {
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.875rem;
  height: 1.875rem;
  position: fixed;
  top: 1.875rem;
  right: 2.5rem;
  opacity: 0.5;
  background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/close_dark.svg);
  z-index: 1000001;
  cursor: pointer; }
  @media screen and (max-width: 37.5rem) {
    .close {
      width: 1.25rem;
      height: 1.25rem;
      top: 0.9375rem;
      right: 1.25rem; } }
  .close:hover {
    opacity: 0.8 !important; }

.full-modal {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000000;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  display: table; }
  .full-modal .profile-card-loader {
    width: 120px;
    height: 120px; }
    .full-modal .profile-card-loader .loader {
      height: 50px;
      width: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -25px;
      margin-left: -25px;
      -webkit-animation: rotation 1s infinite linear;
      -moz-animation: rotation 1s infinite linear;
      -o-animation: rotation 1s infinite linear;
      animation: rotation 1s infinite linear;
      border-left: 6px solid rgba(0, 0, 0, 0.8);
      border-right: 6px solid rgba(0, 0, 0, 0.8);
      border-bottom: 6px solid rgba(0, 0, 0, 0.8);
      border-top: 6px solid transparent;
      border-radius: 100%; }
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg); } }
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(359deg); } }
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg); }
  to {
    -o-transform: rotate(359deg); } }
@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
.full-modal.absolute {
  position: absolute; }

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: transparent;
  opacity: 0.98;
  z-index: 1000;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; }

.twitterColor {
  background-color: #4099FF;
  opacity: 0.92; }

.media-container {
  width: 100%;
  padding: 0.625rem;
  background-color: #f1f1f1;
  text-align: left;
  border-top: 1px solid #b0b0b0; }
  .media-container.is-hidden {
    padding: 0; }
    .media-container.is-hidden #tweetGifHolder {
      display: none; }
  .media-container .retryGif {
    display: none; }

#tweetGifHolder {
  display: inline-block;
  position: relative;
  background-color: #E6E6E6;
  min-height: 6.25rem;
  min-width: 6.25rem; }
  #tweetGifHolder img {
    height: 100px;
    max-width: 100%;
    max-height: 100%; }
  #tweetGifHolder p {
    position: absolute;
    bottom: 8px;
    left: -8px;
    right: 0;
    text-align: center;
    display: none;
    font-size: 10px; }
  #tweetGifHolder.is-loading {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_loader/dark-loader-98d79351f4.GIF");
    background-size: 40px; }
    #tweetGifHolder.is-loading p {
      display: block; }

.tweet-remove-gif {
  cursor: pointer;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  border-radius: 50%;
  height: 26px;
  background-color: #191919;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center 46%;
  opacity: .9; }
  .tweet-remove-gif:hover {
    opacity: 1; }

.media-type {
  margin: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  font-weight: 600;
  font-size: 10px;
  padding: 2px;
  background: rgba(25, 25, 25, 0.7);
  letter-spacing: .7px;
  color: #fff; }

.transparent {
  background-color: transparent !important; }

.overlay.show {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

.table-cell {
  vertical-align: middle;
  display: table-cell; }
  .table-cell .container {
    position: relative;
    margin: 0 auto;
    width: auto !important; }
  .table-cell .signup {
    max-width: 380px;
    width: 90%;
    margin: 0 auto; }
    .table-cell .signup .prefilled,
    .table-cell .signup input,
    .table-cell .signup button,
    .table-cell .signup p {
      width: 100%;
      text-align: center; }
    .table-cell .signup img {
      display: block;
      margin: 0 auto;
      width: 7em;
      height: 7em; }
    .table-cell .signup .prefilled {
      background: #F0F3F7;
      margin: 20px 0;
      display: block; }
      .table-cell .signup .prefilled p {
        text-align: left;
        padding: 0.8em 0.8em;
        font-size: 1.3em;
        position: relative; }
        .table-cell .signup .prefilled p span {
          height: 1.3em;
          width: 1.3em;
          content: ' ';
          display: inline-block;
          vertical-align: middle;
          float: right;
          background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/twitter.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center; }
    .table-cell .signup input {
      text-align: left;
      padding: 0.8em 0.8em;
      font-size: 1.3em;
      -webkit-transition: all 0.2 ease-in;
      -moz-transition: all 0.2 ease-in;
      transition: all 0.2 ease-in; }
      .table-cell .signup input::-webkit-input-placeholder {
        color: #CBCBCB; }
      .table-cell .signup input::-moz-placeholder {
        color: #CBCBCB; }
      .table-cell .signup input:-moz-placeholder {
        color: #CBCBCB; }
      .table-cell .signup input:-ms-input-placeholder {
        color: #CBCBCB; }
    .table-cell .signup input:focus {
      border-color: #4099FD; }
    .table-cell .signup button {
      padding: 15px;
      margin: 10px 0;
      border-radius: 40px;
      font-weight: 500;
      font-size: 1.2em;
      color: #FFFFFF;
      background: #7E58D6; }

.checkbox {
  margin: 25px 0; }
  .checkbox span {
    font-size: 1.3em; }
    .checkbox span a {
      color: #4099FF; }
  .checkbox .toggle {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    float: right;
    padding-right: 10px; }
    .checkbox .toggle__handle {
      position: absolute;
      visibility: hidden; }
      .checkbox .toggle__handle:checked + .toggle__container::before {
        box-shadow: inset 0px 0px 0px 20px #4099FF; }
      .checkbox .toggle__handle:checked + .toggle__container::after {
        margin-left: 18px; }
    .checkbox .toggle__container {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      position: relative;
      display: block;
      width: 48px;
      height: 25px;
      background-color: #5E3D96;
      border-radius: 20px; }
      .checkbox .toggle__container::before, .checkbox .toggle__container::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      .checkbox .toggle__container::before {
        -webkit-transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        -moz-transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        border-radius: 60px; }
      .checkbox .toggle__container::after {
        -webkit-transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        -moz-transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        top: -2px;
        width: 30px;
        height: 30px;
        background-image: -webkit-linear-gradient(#fff, #e3e7e7);
        background-image: linear-gradient(#fff, #e3e7e7);
        border-radius: 50px; }

.legacy-modal-url {
  pointer-events: none; }
  .legacy-modal-url .overlay {
    pointer-events: all !important; }
  .legacy-modal-url .card {
    margin: 0 auto;
    min-width: 300px;
    max-width: 450px;
    background-color: #FFF;
    text-align: center;
    border-radius: 3px;
    pointer-events: all !important; }
    .legacy-modal-url .card .card-wrapper {
      padding: 2em; }
    .legacy-modal-url .card h1 {
      text-align: center;
      margin: 0;
      font-size: 16px; }
    .legacy-modal-url .card textarea {
      pointer-events: all !important;
      border: 1px solid gray;
      display: inline-block;
      margin: 16px 0px;
      border-radius: 0.25em;
      height: 6em;
      width: 90%;
      resize: none;
      padding: 0.4em 0; }
  .legacy-modal-url .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 4; }
  .legacy-modal-url .table-cell {
    z-index: 8;
    position: relative; }

.legacy-modal-settings .full-modal {
  background: rgba(255, 255, 255, 0.98); }
.legacy-modal-settings .settings {
  width: 500px;
  margin: 0 auto;
  text-align: right;
  -webkit-animation: fadeInModal 200ms;
  -moz-animation: fadeInModal 200ms;
  animation: fadeInModal 200ms;
  -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
  @media screen and (max-width: 37.5rem) {
    .legacy-modal-settings .settings {
      width: 18.125rem; } }
  .legacy-modal-settings .settings .header {
    width: 100%;
    margin-top: 1.875rem;
    text-align: left; }
    @media screen and (max-width: 37.5rem) {
      .legacy-modal-settings .settings .header {
        margin-top: 0.625rem; } }
    .legacy-modal-settings .settings .header h1 {
      font-weight: 400;
      margin-bottom: 2.5rem; }
      @media screen and (max-width: 37.5rem) {
        .legacy-modal-settings .settings .header h1 {
          margin-bottom: 0.625rem; } }
  .legacy-modal-settings .settings .input-field {
    position: relative;
    margin: 0.9375rem 0; }
    @media screen and (max-width: 37.5rem) {
      .legacy-modal-settings .settings .input-field {
        margin: 0.625rem; } }
  .legacy-modal-settings .settings input,
  .legacy-modal-settings .settings label,
  .legacy-modal-settings .settings h2 {
    font-weight: 400; }
  .legacy-modal-settings .settings label {
    display: inline-block;
    text-align: right;
    padding-right: 1em; }
  .legacy-modal-settings .settings input[type='email'],
  .legacy-modal-settings .settings input[type='text'],
  .legacy-modal-settings .settings textarea {
    position: relative;
    border: 1px solid #DEE3ED;
    width: 65%;
    display: inline-block;
    text-align: left;
    padding: 0.625rem 0.4375rem;
    resize: none;
    -webkit-transition: all 0.2 ease-in;
    -moz-transition: all 0.2 ease-in;
    transition: all 0.2 ease-in; }
    .legacy-modal-settings .settings input[type='email']::-webkit-input-placeholder,
    .legacy-modal-settings .settings input[type='text']::-webkit-input-placeholder,
    .legacy-modal-settings .settings textarea::-webkit-input-placeholder {
      color: #CBCBCB; }
    .legacy-modal-settings .settings input[type='email']::-moz-placeholder,
    .legacy-modal-settings .settings input[type='text']::-moz-placeholder,
    .legacy-modal-settings .settings textarea::-moz-placeholder {
      color: #CBCBCB; }
    .legacy-modal-settings .settings input[type='email']:-moz-placeholder,
    .legacy-modal-settings .settings input[type='text']:-moz-placeholder,
    .legacy-modal-settings .settings textarea:-moz-placeholder {
      color: #CBCBCB; }
    .legacy-modal-settings .settings input[type='email']:-ms-input-placeholder,
    .legacy-modal-settings .settings input[type='text']:-ms-input-placeholder,
    .legacy-modal-settings .settings textarea:-ms-input-placeholder {
      color: #CBCBCB; }
  .legacy-modal-settings .settings .error-email {
    width: 70%;
    text-align: center;
    display: inline-block;
    font-size: 1.2em;
    color: #ec6060; }
  .legacy-modal-settings .settings input[type='submit'] {
    display: block;
    margin: 1.25rem auto 0;
    padding: 0.6em 2em;
    border-radius: 40px;
    font-weight: 500;
    color: #FFFFFF;
    background: #7E58D6;
    outline: none;
    letter-spacing: 1.1;
    border: none; }
  .legacy-modal-settings .settings input:focus,
  .legacy-modal-settings .settings textarea:focus {
    border-color: #4099FD; }
  .legacy-modal-settings .settings input[type="checkbox"] {
    width: 15px;
    height: 15px;
    vertical-align: baseline;
    pointer-events: none;
    cursor: pointer; }
  .legacy-modal-settings .settings .checkbox-container {
    text-align: right;
    display: inline-block;
    width: 65%;
    margin-bottom: 0.625rem; }
    .legacy-modal-settings .settings .checkbox-container div {
      text-align: left; }
      .legacy-modal-settings .settings .checkbox-container div label {
        padding-right: 0;
        padding-left: 0.5em; }
  .legacy-modal-settings .settings h2 {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding-right: 1em; }
  .legacy-modal-settings .settings button {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    margin: 0 auto;
    padding: 0.6em 2em;
    border-radius: 40px;
    font-weight: 500;
    font-size: 1.5em;
    color: #92959A;
    background: transparent;
    outline: none;
    letter-spacing: 1.1;
    border: 1px solid #92959A; }
  .legacy-modal-settings .settings button:hover {
    background: #E15858;
    border-color: #E15858;
    color: #FFF; }
  .legacy-modal-settings .settings .settings-notifcation {
    padding: 0.625rem 0 0 0; }

#edit-tweet {
  position: absolute;
  background-color: #FFF;
  border-radius: 3px;
  z-index: 2000;
  padding: 20px;
  padding-bottom: 0;
  box-shadow: 0px 0 25px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  width: 500px; }
  #edit-tweet .close {
    width: 0.75rem;
    height: 0.75rem;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem; }
  #edit-tweet h1 {
    width: 100%;
    margin: 0;
    font-size: 16px;
    color: #484848;
    text-align: center;
    padding-bottom: 1em; }
  #edit-tweet .left {
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 1.5625rem; }
  #edit-tweet .editable-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 50px;
    position: relative; }
  #edit-tweet .image-container {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    vertical-align: top;
    flex-shrink: 0;
    margin-right: 10px;
    position: relative; }
  #edit-tweet .textarea-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border: none;
    flex-shrink: 1; }
    #edit-tweet .textarea-wrapper .htmlTextarea {
      width: 100%;
      min-height: 6.25rem;
      border: none;
      padding: 0.3125rem;
      resize: none;
      white-space: normal;
      background-color: transparent;
      color: rgba(0, 0, 0, 0.7);
      font-size: 14px;
      line-height: 17.5px; }
      #edit-tweet .textarea-wrapper .htmlTextarea em {
        font-style: normal;
        background: #fcc; }
  #edit-tweet .button-container {
    padding: 1em 0;
    text-align: right;
    width: 100%;
    display: block;
    position: relative;
    bottom: auto; }
  #edit-tweet span {
    font-size: 0.875rem; }
  #edit-tweet button {
    display: inline-block;
    color: #FFF;
    font-size: 0.875rem;
    background-color: #4099FF;
    margin-right: 1em;
    padding: 0.7em 1.4em;
    border-radius: 5px;
    font-weight: 600;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
    opacity: .66; }
    #edit-tweet button:hover, #edit-tweet button.selected {
      opacity: 1; }
  #edit-tweet .share-now-btn {
    background-color: #4d8ffb;
    opacity: 1;
    font-weight: 700;
    height: 40px;
    margin-right: 0; }
  #edit-tweet .gif-is-loading {
    opacity: .66; }

#modal {
  top: 0;
  left: 0; }

.legacy-modal-create {
  background: rgba(31, 31, 31, 0.99);
  min-width: 100vw;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  color: #ffffff;
  padding: 1.25rem;
  max-height: 100vh;
  overflow-y: scroll; }
  .legacy-modal-create .close {
    text-decoration: none;
    background: none;
    width: auto;
    height: auto;
    top: 0;
    right: 1.25rem;
    line-height: 1;
    opacity: 1;
    padding: 0 0.625rem; }
    @media screen and (max-width: 37.5rem) {
      .legacy-modal-create .close {
        right: 0; } }
    .legacy-modal-create .close:after {
      content: "×"; }
    .legacy-modal-create .close:hover {
      opacity: .8; }
  .legacy-modal-create .full-modal {
    width: 100%;
    max-width: 60rem;
    position: relative;
    display: block;
    overflow: hidden;
    max-height: 100%;
    margin: auto;
    margin-bottom: 20px;
    -webkit-animation: fadeInModal 200ms;
    -moz-animation: fadeInModal 200ms;
    animation: fadeInModal 200ms;
    -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
    .legacy-modal-create .full-modal h1 {
      margin-bottom: 1.25rem;
      font-weight: 400; }
    @media screen and (max-width: 37.5rem) {
      .legacy-modal-create .full-modal {
        margin-top: 1.25rem; } }

.create-form ::-webkit-input-placeholder {
  color: rgba(71, 71, 71, 0.5); }
.create-form :-moz-placeholder {
  /* Firefox 18- */
  color: rgba(71, 71, 71, 0.5); }
.create-form ::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(71, 71, 71, 0.5); }
.create-form :-ms-input-placeholder {
  color: rgba(71, 71, 71, 0.5); }
.create-form input[type=radio] {
  display: none; }
.create-form label {
  cursor: pointer !important;
  font-size: 12px !important; }
.create-form > ul {
  overflow: hidden; }
  .create-form > ul > li {
    position: relative;
    margin-bottom: 1.875rem;
    margin-left: 1.5625rem;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    transition: opacity 200ms ease; }
    .create-form > ul > li:before {
      content: "";
      position: absolute;
      width: 0.875rem;
      height: 0.875rem;
      top: 0.375rem;
      left: -1.5625rem;
      background-size: 0.875rem 0.875rem;
      background-repeat: no-repeat; }
    .create-form > ul > li.disabled {
      opacity: 0.15;
      pointer-events: none !important; }
    .create-form > ul > li p {
      font-weight: 200; }
    .create-form > ul > li > ul > li {
      margin-top: 0.25rem;
      margin-right: 0.25rem;
      display: inline-block; }
      .create-form > ul > li > ul > li:last-of-type {
        margin-right: 0; }
.create-form .create-topic:before {
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/create-topic-6298640b65.svg); }
.create-form .create-category:before {
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/create-category-58d326457a.svg); }
.create-form .create-time:before {
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/create-time-7f00c0d1e6.svg); }
.create-form .create-image:before {
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/custom-image-7398be4256.svg); }
.create-form .create-image #image_showcard {
  margin: 20px 0 10px; }
.create-form .create-image .subtitle {
  font-size: 13px !important;
  font-style: italic; }
.create-form .create-image .preview-header {
  margin: 10px 0 3px;
  font-size: 14px !important;
  font-weight: 400 !important; }
.create-form .create-image .custom-image-preview {
  height: 0px;
  width: 250px;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
  overflow: hidden;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms; }
  .create-form .create-image .custom-image-preview.has-image {
    height: 120px; }
.create-form .topic-input {
  display: block;
  color: #ffffff;
  resize: none;
  background: 0 0;
  outline: 0;
  font-weight: 700;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0.1875rem 2.8125rem 0.3125rem 0.3125rem;
  margin-top: 0.9375rem;
  border: 0;
  border-bottom: 1px solid #ffffff;
  width: 100%; }
.create-form .topic-container {
  position: relative; }
  .create-form .topic-container small {
    position: absolute;
    right: 0;
    top: 0.625rem; }
.create-form .ghost-button {
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 0.375rem 0.85rem 0.5rem; }
  .create-form .ghost-button:hover, .create-form .ghost-button.selected {
    background: #ffffff;
    color: #1f1f1f; }
.create-form .form-submit-container {
  border-top: 1px solid #ffffff;
  padding-top: 0.625rem; }
  .create-form .form-submit-container .button.disabled, .create-form .form-submit-container .widget-card-ph button.disabled, .widget-card-ph .create-form .form-submit-container button.disabled, .create-form .form-submit-container .notify-followers-toast .info-block .actions button.disabled, .notify-followers-toast .info-block .actions .create-form .form-submit-container button.disabled, .create-form .form-submit-container .cohost-toast .info-block .actions button.disabled, .cohost-toast .info-block .actions .create-form .form-submit-container button.disabled, .create-form .form-submit-container .disabled.feed-item-card--subscribe-button, .create-form .form-submit-container .disabled.scheduled-action--start-now, .create-form .form-submit-container .disabled.scheduled-action--edit, .create-form .form-submit-container .pending-caller-cell .button-container button.disabled, .pending-caller-cell .button-container .create-form .form-submit-container button.disabled {
    opacity: .3;
    pointer-events: none; }
.create-form .adult-swim-info {
  border: 1px solid;
  border-radius: 0.5rem;
  opacity: .5;
  background-color: #fff;
  color: #000;
  max-height: 160px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  overflow: hidden; }
  .create-form .adult-swim-info p {
    font-size: 1rem;
    font-weight: 400;
    padding: 0.625rem; }
.create-form .not-selected {
  max-height: 0px !important;
  border: none !important;
  margin-bottom: 0rem !important;
  opacity: 0 !important; }
.create-form .scheduling-container {
  display: inline-block; }
.create-form .time-container {
  margin: 1.5625rem 0;
  position: relative; }
  .create-form .time-container .time-fields {
    display: inline-block;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 0.3125rem;
    font-weight: 200;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff; }
    .create-form .time-container .time-fields input {
      display: inline-block;
      color: #ffffff;
      resize: none;
      background: 0 0;
      outline: 0;
      font-weight: 200;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      border: 0;
      width: 4.6875rem; }
      .create-form .time-container .time-fields input:first-of-type {
        text-align: right; }
      .create-form .time-container .time-fields input:last-of-type {
        text-align: left; }
.create-form .colon {
  position: relative;
  top: -0.625rem; }
.create-form .am-pm-selector {
  display: inline-block;
  cursor: pointer !important; }
  .create-form .am-pm-selector .selector {
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1.1; }
    .create-form .am-pm-selector .selector:last-of-type label {
      padding-top: 0.3125rem; }
    .create-form .am-pm-selector .selector label {
      cursor: pointer;
      display: block;
      letter-spacing: 1.2;
      text-align: center;
      font-weight: 700;
      color: #ffffff;
      opacity: 0.4;
      padding: 0.625rem 0.625rem 0.3125rem; }
    .create-form .am-pm-selector .selector input[type=radio] {
      display: none; }
    .create-form .am-pm-selector .selector input[type="radio"]:checked + label {
      opacity: 1;
      color: #ffffff; }
    .create-form .am-pm-selector .selector label:hover {
      opacity: 0.6; }
.create-form .days-container {
  margin: 0 0 1.5625rem 0; }
  .create-form .days-container .days-select {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    width: 4.375rem;
    height: 4.375rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    margin: 0.625rem 0.625rem 0 0;
    display: inline-block;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease; }
    .create-form .days-container .days-select.selected {
      background: #ffffff;
      color: #1f1f1f;
      border: 1px solid #ffffff; }
    .create-form .days-container .days-select:hover {
      border: 1px solid #ffffff;
      color: #ffffff; }
    .create-form .days-container .days-select div {
      display: table;
      width: 100%;
      height: 100%; }
    .create-form .days-container .days-select label {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      line-height: 1; }
      .create-form .days-container .days-select label .month {
        display: block; }
.create-form .error-message {
  display: inline-block;
  margin-left: 0.9375rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #f34949;
  padding: 0.5rem 0.625rem 0.5625rem;
  border-radius: 4px; }
  .create-form .error-message:before {
    content: "!";
    font-weight: 800;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-right: 0.3125rem; }

.legacy-modal-profile {
  background: rgba(31, 31, 31, 0.85);
  min-width: 100vw;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  padding: 1.25rem; }
  .legacy-modal-profile .close {
    text-decoration: none;
    background: none;
    width: auto;
    height: auto;
    line-height: 1;
    opacity: 1;
    padding: 0 0.625rem;
    position: absolute;
    top: -3rem;
    right: -2rem;
    color: #ffffff; }
    .legacy-modal-profile .close:after {
      content: "×"; }
    .legacy-modal-profile .close:hover {
      opacity: .8; }
    @media screen and (max-width: 37.5rem) {
      .legacy-modal-profile .close {
        right: auto;
        left: 50%;
        margin-left: -0.9375rem; } }
  .legacy-modal-profile .container {
    position: absolute;
    top: 52%;
    left: 50%;
    padding: 25px;
    margin-left: -12.5rem;
    margin-top: -12.5rem;
    z-index: 9000000;
    -webkit-animation: fadeInModal 200ms;
    -moz-animation: fadeInModal 200ms;
    animation: fadeInModal 200ms;
    -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
    @media screen and (max-width: 37.5rem) {
      .legacy-modal-profile .container {
        margin-left: -9.375rem; } }
  .legacy-modal-profile .slide-in {
    position: absolute;
    top: 52%;
    left: 50%;
    padding: 25px;
    margin-left: -12.5rem;
    margin-top: -12.5rem;
    z-index: 9000000;
    -webkit-animation: slideInModal 200ms;
    -moz-animation: slideInModal 200ms;
    animation: slideInModal 200ms;
    -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1; }
@-webkit-keyframes slideInModal {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 0; }
  to {
    -webkit-transform: translate3d(0%, 0, 0);
    opacity: 1; } }
@-moz-keyframes slideInModal {
  from {
    -moz-transform: translate3d(100%, 0, 0);
    opacity: 0; }
  to {
    -moz-transform: translate3d(0%, 0, 0);
    opacity: 1; } }
@keyframes slideInModal {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0; }
  to {
    -webkit-transform: translate3d(0%, 0, 0);
    -moz-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    opacity: 1; } }
#modal-login .full-modal {
  background: rgba(255, 255, 255, 0.98); }
#modal-login .table-cell {
  -webkit-animation: fadeInModal 200ms;
  -moz-animation: fadeInModal 200ms;
  animation: fadeInModal 200ms;
  -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
#modal-signup .table-cell {
  -webkit-animation: fadeInModal 200ms;
  -moz-animation: fadeInModal 200ms;
  animation: fadeInModal 200ms;
  -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  animation-timing-function: 0.33, 0.06, 0.25, 1.33;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
  #modal-signup .table-cell .container {
    max-width: 720px !important; }
    #modal-signup .table-cell .container .signup {
      max-width: 100% !important; }
#modal-signup .signin-logo {
  height: 80px;
  width: 70%;
  display: block;
  margin: 9.375rem auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  @media screen and (max-width: 100rem) {
    #modal-signup .signin-logo {
      margin: 6.25rem auto; } }
  @media screen and (max-width: 90.0625rem) {
    #modal-signup .signin-logo {
      margin: 4.375rem auto; } }
  @media screen and (max-width: 56.25rem) {
    #modal-signup .signin-logo {
      margin: 2.5rem auto; } }
#modal-signup button {
  background-color: #FFF !important;
  color: #4099FF !important;
  width: 60%;
  max-width: 310px;
  padding: 1.125rem 0;
  display: block;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  box-shadow: 0px 3px 10px 0px transparent;
  margin: 0 auto;
  font-weight: 600 !important; }
  #modal-signup button span {
    display: inline-block;
    content: ' ';
    vertical-align: middle;
    margin-left: 1em;
    width: 1.8em;
    height: 1.8em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
#modal-signup button:hover {
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); }
#modal-signup a {
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  color: #FFF;
  display: block;
  text-align: center;
  cursor: pointer; }
#modal-signup a:hover {
  text-decoration: underline; }
#modal-signup h1 {
  color: #FFF !important;
  font-weight: 600;
  text-align: center; }
#modal-signup .close {
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg); }

#modal_moreViewers .user-card-modal {
  border-radius: 5px;
  width: 30rem;
  height: 68%;
  top: 34%;
  padding: 0;
  max-height: 70vh;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column; }
#modal_moreViewers .container {
  height: 50%;
  height: 68%;
  top: 34%;
  margin-left: -15rem; }
  #modal_moreViewers .container #modal_content {
    position: relative;
    overflow: auto;
    height: 100%;
    width: 100%;
    padding-bottom: 40px; }
#modal_moreViewers .modal-header {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #9863E8;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/pttrn3-558e163733.png");
  text-align: center;
  border-bottom: 1px solid #E1E7F5; }
  #modal_moreViewers .modal-header h3 {
    color: #FFF;
    padding: 2.2rem 0; }
    #modal_moreViewers .modal-header h3 small {
      font-size: 75%; }
#modal_moreViewers .visitorCount {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 11px;
  padding-top: 20px;
  z-index: 99;
  left: 0;
  border-radius: 4px;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); }
  #modal_moreViewers .visitorCount p {
    text-align: center;
    font-weight: 700;
    line-height: 2; }

.refreshed .full-modal .container {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important; }

.permission-banner {
  top: 0;
  pointer-events: none; }
  .permission-banner .permission-wrapper {
    top: 1em;
    z-index: 2000;
    position: fixed;
    width: 100%;
    text-align: center; }
    @media screen and (max-width: 87.5rem) {
      .permission-banner .permission-wrapper {
        text-align: right; } }
    @media screen and (max-width: 57.5rem) {
      .permission-banner .permission-wrapper {
        text-align: center;
        top: 45%; } }
  .permission-banner .permission-toast {
    background-color: rgba(134, 117, 234, 0.9);
    border-radius: 4px;
    display: inline-block;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    opacity: 1; }
    @media screen and (max-width: 87.5rem) {
      .permission-banner .permission-toast {
        margin-right: 100px; } }
    @media screen and (max-width: 87.5rem) {
      .permission-banner .permission-toast {
        margin-right: 50px; } }
    @media screen and (max-width: 57.5rem) {
      .permission-banner .permission-toast {
        margin-right: 0px; } }
    .permission-banner .permission-toast p {
      padding: 0;
      vertical-align: middle;
      color: #FFF;
      font-size: 17px;
      font-weight: 400;
      text-align: center; }
      @media screen and (max-width: 87.5rem) {
        .permission-banner .permission-toast p {
          font-size: 14px; } }
      .permission-banner .permission-toast p .button-permissions {
        font-weight: 600; }
      .permission-banner .permission-toast p .circle-permissions {
        margin: 0 5px;
        display: inline-block;
        vertical-align: middle;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }
      .permission-banner .permission-toast p .circle-permissions.type-chrome {
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/circle_chrome_permissions-d4af8730bc.png);
        width: 45px;
        height: 45px; }
  .permission-banner .overlay {
    cursor-events: all !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in; }

.full-screen-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
  .full-screen-banner .permission-wrapper {
    top: 0;
    bottom: 0;
    z-index: 2000;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: 18% 24%;
    background-color: rgba(0, 0, 0, 0.7); }
    .full-screen-banner .permission-wrapper .permission-toast {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      border-radius: 0;
      display: flex;
      background-color: transparent; }
      .full-screen-banner .permission-wrapper .permission-toast p {
        margin: auto;
        font-size: 50px;
        font-weight: 400; }
        .full-screen-banner .permission-wrapper .permission-toast p .button-permissions {
          font-weight: 800; }
        .full-screen-banner .permission-wrapper .permission-toast p small {
          font-size: 66%; }
        .full-screen-banner .permission-wrapper .permission-toast p a {
          font-size: 33%;
          text-decoration: underline;
          cursor: pointer;
          margin-top: 50px;
          color: #fff;
          display: inline-block;
          pointer-events: all; }
    .full-screen-banner .permission-wrapper .callin-oops {
      cursor: pointer;
      position: absolute;
      top: 35px;
      right: 35px;
      padding-right: 50px;
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;
      height: 30px;
      display: flex;
      pointer-events: all; }
      .full-screen-banner .permission-wrapper .callin-oops p {
        margin: auto 0;
        font-size: 14px;
        color: #fff;
        line-height: 30px; }

.permission-banner.dont-show {
  opacity: 0; }
  .permission-banner.dont-show .permission-toast {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  .permission-banner.dont-show .overlay {
    background-color: transparent !important; }
  .permission-banner.dont-show .callin-oops {
    display: none; }

.permission-toast.error-color {
  background-color: rgba(248, 81, 120, 0.9); }

.legacy-modal-widget {
  background: rgba(31, 31, 31, 0.85);
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  color: #ffffff;
  padding: 1.25rem;
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .legacy-modal-widget .widget-modal {
    position: relative;
    background-color: #FFF;
    border-radius: 4px;
    z-index: 200;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: fadeInModal 200ms;
    -moz-animation: fadeInModal 200ms;
    animation: fadeInModal 200ms;
    width: 31.25rem;
    max-width: 95%;
    max-height: 95%;
    padding: 1.25rem 1.875rem;
    min-height: 500px;
    -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
    .legacy-modal-widget .widget-modal .widget-card-ph {
      border: none;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
      .legacy-modal-widget .widget-modal .widget-card-ph .text p {
        white-space: normal;
        font-size: 18px;
        line-height: 1.5; }
      .legacy-modal-widget .widget-modal .widget-card-ph .name {
        font-size: 1rem; }
      .legacy-modal-widget .widget-modal .widget-card-ph .title {
        font-size: 0.9375rem; }
      .legacy-modal-widget .widget-modal .widget-card-ph .avatar {
        width: 3.125rem;
        height: 3.125rem; }
      .legacy-modal-widget .widget-modal .widget-card-ph .user-info-block {
        position: relative; }
      .legacy-modal-widget .widget-modal .widget-card-ph .widget-logo {
        width: 30px;
        height: 30px;
        position: absolute;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        border: 2px solid #FFF;
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/_feed/ph-widget-fd2fefdfbf.png");
        background-size: cover; }
        @media screen and (max-width: 90.0625rem) {
          .legacy-modal-widget .widget-modal .widget-card-ph .widget-logo {
            width: 25px;
            height: 25px; } }
      @media screen and (max-width: 43.6875rem) {
        .legacy-modal-widget .widget-modal .widget-card-ph {
          width: 24.375rem; } }
      @media screen and (max-width: 56.25rem) {
        .legacy-modal-widget .widget-modal .widget-card-ph {
          width: 26.25rem; } }
      @media screen and (max-width: 70.3125rem) {
        .legacy-modal-widget .widget-modal .widget-card-ph {
          width: 28.75rem; } }
  .legacy-modal-widget .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5; }

@media screen and (max-width: 70.3125rem) {
  .embed .widget-modal {
    max-width: 95%;
    max-height: 95%;
    min-height: initial;
    background-color: transparent;
    height: auto; }
    .embed .widget-modal .widget-card-ph {
      padding: 0.9375rem; }
      .embed .widget-modal .widget-card-ph .widget-logo {
        top: -7px;
        left: -7px;
        width: 22px;
        height: 22px; }
      .embed .widget-modal .widget-card-ph .text p {
        font-size: 0.875rem; }
      .embed .widget-modal .widget-card-ph .avatar {
        width: 1.875rem;
        height: 1.875rem; } }

.product-updates {
  padding: 10px;
  overflow-y: scroll;
  max-height: 80vh; }

.product-update {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px; }

.legacy-modal-embed {
  background: rgba(31, 31, 31, 0.85);
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  color: #ffffff;
  padding: 1.25rem;
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .legacy-modal-embed .legacy-modal-embed-card {
    position: relative;
    background-color: #FFF;
    border-radius: 4px;
    z-index: 200;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: fadeInModal 200ms;
    -moz-animation: fadeInModal 200ms;
    animation: fadeInModal 200ms;
    max-width: 95%;
    max-height: 95%;
    padding: 1.25rem 1.875rem;
    min-height: 500px;
    -webkit-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -moz-animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    animation-timing-function: 0.33, 0.06, 0.25, 1.33;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1; }
@-webkit-keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes fadeInModal {
  from {
    -moz-transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes fadeInModal {
  from {
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0; }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
  .legacy-modal-embed .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5; }

.edit-highlight .social-selection {
  color: #fff !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  vertical-align: middle;
  background-size: 17%;
  background-position: 85% center;
  background-repeat: no-repeat;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg);
  -webkit-filter: grayscale(1);
  filter: grayscale(1); }
  .edit-highlight .social-selection input {
    display: none;
    pointer-events: none; }
  .edit-highlight .social-selection.twitter {
    background-color: #55acee !important; }
    .edit-highlight .social-selection.twitter .icon {
      height: 20px;
      width: 20px;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/_social/twitter-light-40ae0abb09.svg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      display: inline-block;
      margin-right: 20px; }
  .edit-highlight .social-selection.facebook {
    background-color: #55acee !important; }
    .edit-highlight .social-selection.facebook .icon {
      height: 20px;
      width: 20px;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/_social/facebook-outline-ad3a087e5a.svg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      display: inline-block;
      margin-right: 20px; }
  .edit-highlight .social-selection.selected {
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/checkmark-002196fb33.png);
    -webkit-filter: grayscale(0);
    filter: grayscale(0); }
    .edit-highlight .social-selection.selected.twitter {
      background-color: #55acee !important; }
    .edit-highlight .social-selection.selected.facebook {
      background-color: #3b5998 !important; }

.qtip.tool-tip {
  background-color: #54606f !important;
  border: none !important;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.22); }
  .qtip.tool-tip p {
    color: #FFF;
    z-index: 10000;
    font-size: 13px;
    padding: 11px; }

.white-toast, .notify-followers-toast, .cohost-toast, .youtube-toast {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.4s ease-in 0.09s;
  -moz-transition: all 0.4s ease-in 0.09s;
  transition: all 0.4s ease-in 0.09s;
  padding: 0.625rem 0.3125rem;
  background-color: #FFF;
  border-radius: 0.1875rem;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15); }
  .white-toast .art-block, .notify-followers-toast .art-block, .cohost-toast .art-block, .youtube-toast .art-block {
    -webkit-transition: all 0.15s ease-out 0.1s;
    -moz-transition: all 0.15s ease-out 0.1s;
    transition: all 0.15s ease-out 0.1s;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 20px; }
    .white-toast .art-block img, .notify-followers-toast .art-block img, .cohost-toast .art-block img, .youtube-toast .art-block img {
      height: 126px;
      width: 140px;
      padding: 0.625rem; }
    .white-toast .art-block img.caller-img, .notify-followers-toast .art-block img.caller-img, .cohost-toast .art-block img.caller-img, .youtube-toast .art-block img.caller-img {
      height: 80px;
      width: 80px;
      border-radius: 100%;
      margin-left: -40px;
      margin-top: 18px;
      padding: 0.625rem; }

.toast-close-button {
  position: absolute;
  top: 0.4375rem;
  right: 0.4375rem;
  width: 1rem;
  height: 1rem;
  z-index: 1000;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/close_dark-a3806c12d2.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .7;
  background-color: transparent; }
  .toast-close-button:hover {
    opacity: 1; }

.notify-followers-toast .info-block {
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  padding: 0.5rem;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }
  .notify-followers-toast .info-block .info p {
    color: #696969;
    margin-bottom: 1.25rem; }
    .notify-followers-toast .info-block .info p span {
      color: #191919;
      font-weight: 600; }
  .notify-followers-toast .info-block .actions {
    text-align: left; }
    .notify-followers-toast .info-block .actions button {
      pointer-events: all !important;
      width: 7.5rem;
      padding: 0.625rem 0; }
    .notify-followers-toast .info-block .actions .cancel {
      margin-right: 0.625rem; }
.notify-followers-toast .notify-success {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  .notify-followers-toast .notify-success div {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    -moz-transform: translate3d(-10%, 0, 0);
    -ms-transform: translate3d(-10%, 0, 0);
    -o-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    -webkit-transition: all 0.1s ease-in-out 0.15s;
    -moz-transition: all 0.1s ease-in-out 0.15s;
    transition: all 0.1s ease-in-out 0.15s;
    width: 16.875rem;
    position: relative;
    height: 3.125rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    .notify-followers-toast .notify-success div span {
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.15s ease-in-out 0.25s;
      -moz-transition: all 0.15s ease-in-out 0.25s;
      transition: all 0.15s ease-in-out 0.25s;
      position: absolute;
      top: -0.5625rem;
      right: -0.5625rem;
      width: 2.25rem;
      height: 2.25rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain; }
  .notify-followers-toast .notify-success h2 {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0);
    -moz-transform: translate3d(50%, 0);
    -ms-transform: translate3d(50%, 0);
    -o-transform: translate3d(50%, 0);
    transform: translate3d(50%, 0);
    -webkit-transition: all 0.35s ease-in-out 0.3s;
    -moz-transition: all 0.35s ease-in-out 0.3s;
    transition: all 0.35s ease-in-out 0.3s;
    color: #FFF;
    text-align: center;
    margin-top: 0.625rem; }
.notify-followers-toast.animate-success {
  background-color: #955ff1; }
  .notify-followers-toast.animate-success .info-block {
    -webkit-transform: translate3d(-20%, 0, 0);
    -moz-transform: translate3d(-20%, 0, 0);
    -ms-transform: translate3d(-20%, 0, 0);
    -o-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
    opacity: 0; }
  .notify-followers-toast.animate-success .art-block {
    -webkit-transform: translate3d(20%, 0, 0);
    -moz-transform: translate3d(20%, 0, 0);
    -ms-transform: translate3d(20%, 0, 0);
    -o-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
    opacity: 0; }
  .notify-followers-toast.animate-success .notify-success {
    pointer-events: all;
    opacity: 1; }
    .notify-followers-toast.animate-success .notify-success div {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1; }
      .notify-followers-toast.animate-success .notify-success div span {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 1; }
    .notify-followers-toast.animate-success .notify-success h2 {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1; }

.cohost-toast .info-block {
  padding: 0.5rem;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }
  .cohost-toast .info-block .info p {
    font-size: 1.0625rem;
    color: #696969;
    margin-bottom: 1.25rem; }
    .cohost-toast .info-block .info p span {
      color: #b1b1b1;
      font-weight: 600; }
  .cohost-toast .info-block .actions {
    text-align: left; }
    .cohost-toast .info-block .actions button {
      width: 7.5rem;
      padding: 0.625rem 0; }
    .cohost-toast .info-block .actions .cancel {
      margin-right: 0.625rem; }
.cohost-toast h3 {
  padding-bottom: 0.625rem;
  font-weight: 500;
  color: #3A3A3A; }

.youtube-toast .info-block p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #696969;
  padding: 0.625rem 0.625rem; }
.youtube-toast .info-block a {
  color: #955ff1; }
  .youtube-toast .info-block a:hover {
    color: #7d43df; }

.stream-scheduled {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%; }

.stream-scheduled-content {
  position: relative;
  z-index: 200; }
  .stream-scheduled-content .scheduled-countdown {
    margin-bottom: 2.5rem; }

.stream-scheduled-datestamp {
  color: #FFF;
  text-align: center;
  font-weight: 400;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.stream-scheduled--bg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100; }

.stream-scheduled-sharing-options {
  padding: 10px;
  text-align: center; }
  .stream-scheduled-sharing-options a {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex; }

.scheduled-actions {
  width: 100%;
  height: 5.625rem;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.feed-item-card--subscribe-button {
  display: inline-block;
  padding: 0.9375rem 0;
  width: 100%;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 20px; }
  .feed-item-card--subscribe-button:hover {
    color: #000; }

.scheduled-actions-subscribed {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: none; }

.scheduled-actions--caledndar {
  color: #FFF; }

.scheduled-actions.is-subscribed .scheduled-actions-subscribed {
  display: block; }
.scheduled-actions.is-subscribed .feed-item-card--subscribe-button {
  display: none; }

.scheduled-actions-calendar {
  position: relative; }
  .scheduled-actions-calendar ul {
    position: absolute; }

.feed-item-card--subscribe-button {
  display: inline-block;
  padding: 0.9375rem 0;
  width: 100%;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 1.25rem; }

.scheduled-action--start-now {
  display: inline-block;
  padding: 0.9375rem 0;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 1.25rem; }

.scheduled-action--edit {
  display: inline-block;
  margin-left: 0.9375rem;
  padding: 0.9375rem 2.5rem;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 1.25rem; }
  .scheduled-action--edit:hover {
    color: #000; }

.feed-item {
  backgrounZd: #FFF; }
  .feed-item h2 {
    text-align: left; }

.tell-your-followers {
  margin: 0 auto !important;
  margin-top: 30px;
  padding: 0.625rem 0.8125rem; }
  .tell-your-followers input {
    width: 100%;
    padding: 10px 5px;
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    cursor: copy;
    font-weight: 400;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: all !important; }
  .tell-your-followers h4 {
    text-align: center; }
  .tell-your-followers .copied {
    -webkit-animation: copied 3s ease-in-out;
    -moz-animation: copied 3s ease-in-out;
    animation: copied 3s ease-in-out;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1; }
  .tell-your-followers #copy-container {
    position: relative; }
    .tell-your-followers #copy-container .copy-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 51px;
      font-size: 16px;
      background-color: #fff;
      color: #7d43df;
      -webkit-animation: fadeIn 3s ease-in-out;
      -moz-animation: fadeIn 3s ease-in-out;
      animation: fadeIn 3s ease-in-out;
      -webkit-animation-iteration-count: 1;
      -moz-animation-iteration-count: 1;
      animation-iteration-count: 1; }

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: translateY(-20px);
    opacity: 0; }
  10% {
    -webkit-transform: translateY(0);
    opacity: 1; }
  90% {
    -webkit-transform: translateY(0);
    opacity: 1; }
  100% {
    -webkit-transform: translateY(-20px);
    opacity: 0; } }
@-moz-keyframes fadeIn {
  0% {
    -moz-transform: translateY(-20px);
    opacity: 0; }
  10% {
    -moz-transform: translateY(0);
    opacity: 1; }
  90% {
    -moz-transform: translateY(0);
    opacity: 1; }
  100% {
    -moz-transform: translateY(-20px);
    opacity: 0; } }
@keyframes fadeIn {
  0% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0; }
  10% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  90% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  100% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0; } }
@-webkit-keyframes copied {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1; }
  10% {
    -webkit-transform: translateY(20px);
    opacity: 0; }
  90% {
    -webkit-transform: translateY(20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1; } }
@-moz-keyframes copied {
  0% {
    -moz-transform: translateY(0);
    opacity: 1; }
  10% {
    -moz-transform: translateY(20px);
    opacity: 0; }
  90% {
    -moz-transform: translateY(20px);
    opacity: 0; }
  100% {
    -moz-transform: translateY(0);
    opacity: 1; } }
@keyframes copied {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  10% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0; }
  90% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }
@media screen and (max-width: 70.3125rem) {
  .embed .scheduled-countdown {
    margin-bottom: 0.9375rem; }
  .embed .stream-scheduled-datestamp {
    display: none; } }
.embed:hover .stream-scheduled-sharing-options {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

@media screen and (max-width: 60rem) {
  .room-container.is-scheduled .sidebar {
    display: none !important; } }

.stream-ended {
  background: rgba(0, 0, 0, 0.9); }

.stream-ended--bg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100; }

.stream-ended-processing {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 200;
  text-align: center; }

.stream-ended-processing--text {
  margin: 0.625rem;
  display: block;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 0.625rem; }
  @media screen and (max-width: 70.3125rem) {
    .stream-ended-processing--text {
      margin-top: 0.625rem; } }

.reopen-button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 42px; }

.explain-reopen {
  margin: 12px auto 42px;
  max-width: 400px;
  font-style: italic; }

.stream-ended-processing--title {
  color: #FFF;
  margin-bottom: 0.625rem;
  display: block;
  padding: 0.625rem; }

.stream-ended-processing--loader {
  margin-bottom: 0.625rem;
  display: inline-block; }

.stream-ended-unrecorded {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 200;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row; }

.stream-ended--moreCallers {
  font-size: 1.125rem;
  border-radius: 1.25rem;
  padding: 0.625rem 1.25rem;
  margin-top: 1.25rem;
  background-color: rgba(255, 255, 255, 0.32); }
  .stream-ended--moreCallers:hover {
    background-color: white; }

.stream-ended--profile-card {
  padding: 0.4375rem;
  display: inline-block; }

.next-stream-container {
  margin-top: 2.5rem;
  z-index: 1000;
  position: relative; }
  .next-stream-container .up-next-label {
    padding: 0.125rem 0.4375rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFF;
    position: absolute;
    top: 0.3125rem;
    left: 0.3125rem;
    border-radius: 0.125rem;
    margin-bottom: 0.3125rem;
    font-size: 1.25rem; }
  .next-stream-container .info-layer {
    background: rgba(0, 0, 0, 0.2); }
  .next-stream-container .feed-item-card {
    padding-bottom: 0 !important;
    overflow: hidden; }
  .next-stream-container .up-next-stop {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -2.8125rem;
    margin-top: -2.8125rem;
    z-index: 10000;
    height: 5.625rem;
    width: 5.625rem;
    cursor: pointer;
    pointer-events: all;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15); }
    .next-stream-container .up-next-stop:hover {
      background-color: black; }
    .next-stream-container .up-next-stop img {
      max-height: 46%;
      max-width: 46%;
      left: 29%;
      top: 27%;
      position: absolute; }

/* Effect 9: Surrounding borders */
.la-anim-9 {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 0px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
  top: 0; }

.la-anim-9 div {
  position: absolute;
  background: #fff; }

.la-anim-9 div:first-child,
.la-anim-9 div:nth-child(3) {
  width: 0;
  height: 5px; }

.la-anim-9 div:nth-child(2),
.la-anim-9 div:nth-child(4) {
  width: 5px;
  height: 0; }

.la-anim-9 div:first-child {
  top: 0;
  left: 0; }

.la-anim-9.la-animate div:first-child {
  width: 100%;
  -webkit-transition: width 3.5s linear 0s;
  transition: width 10s linear 0s; }

.la-anim-9 div:nth-child(2) {
  top: 0;
  right: 0; }

.la-anim-9.la-animate div:nth-child(2) {
  height: 100%;
  -webkit-transition: height 3.5s linear 3.5s;
  transition: height 5s linear 10s; }

.la-anim-9 div:nth-child(3) {
  right: 0;
  bottom: 0; }

.la-anim-9.la-animate div:nth-child(3) {
  width: 100%;
  -webkit-transition: width 3.5s linear 7s;
  transition: width 10s linear 15s; }

.la-anim-9 div:nth-child(4) {
  bottom: 0;
  left: 0; }

.la-anim-9.la-animate div:nth-child(4) {
  height: 100%;
  -webkit-transition: height 3.5s linear 10.5s;
  transition: height 5s linear 25s; }

.la-anim-9.la-animate {
  z-index: 99999;
  opacity: 0;
  -webkit-transition: border 0.3s, opacity 0.3s 7s;
  transition: border 0.3s, opacity 0.3s 30s; }

.embed .stream-ended--callers-list {
  display: none; }

body.embed {
  background-color: transparent; }
  body.embed #main {
    background-color: transparent; }
  body.embed #embed-container {
    background-color: transparent; }
    body.embed #embed-container .stream {
      overflow: hidden !important; }
    body.embed #embed-container .room-container {
      border-radius: 4px;
      overflow: hidden; }

#embed-container {
  font-size: 16px;
  border-radius: 4px;
  overflow: hidden; }
  #embed-container .room-container {
    width: 100%;
    position: fixed;
    height: 100%;
    z-index: 100;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row; }
    #embed-container .room-container .sidebar {
      height: 100% !important; }
      @media screen and (max-width: 70.3125rem) {
        #embed-container .room-container .sidebar {
          width: 12.5rem !important; }
          #embed-container .room-container .sidebar .content-scroll {
            width: 13.5625rem; }
            #embed-container .room-container .sidebar .content-scroll li {
              width: 12.5rem; } }
      @media screen and (max-width: 56.25rem) {
        #embed-container .room-container .sidebar {
          width: 15rem !important; }
          #embed-container .room-container .sidebar .content-scroll {
            width: 15.4375rem; }
            #embed-container .room-container .sidebar .content-scroll li {
              width: 15rem; }
          #embed-container .room-container .sidebar .slash {
            right: 10px;
            top: 5px !important; }
          #embed-container .room-container .sidebar .chat-input .textarea-wrapper {
            padding: 0.625rem 0 0.625rem 0.375rem; }
            #embed-container .room-container .sidebar .chat-input .textarea-wrapper .chat-textarea {
              font-size: 0.75rem; } }
      @media screen and (max-width: 43.6875rem) {
        #embed-container .room-container .sidebar {
          width: 12.5rem !important; }
          #embed-container .room-container .sidebar .slash {
            right: 10px;
            top: 5px !important; }
          #embed-container .room-container .sidebar .content-scroll {
            width: 13.5625rem; }
            #embed-container .room-container .sidebar .content-scroll li {
              width: 12.5rem; }
              #embed-container .room-container .sidebar .content-scroll li .chat-message {
                padding: 7px; }
              #embed-container .room-container .sidebar .content-scroll li .reply-msg {
                display: none !important; } }
      #embed-container .room-container .sidebar .chat-content {
        background-color: #262626; }
  #embed-container .stream {
    height: 100%;
    width: auto; }
  #embed-container #bg-overlay {
    z-index: 1 !important; }
  #embed-container .stream-container {
    margin: 0 auto !important; }
  #embed-container .stream-embed-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative; }
  #embed-container .sidebar {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 17.5rem; }
    #embed-container .sidebar .content-scroll {
      width: 18.5625rem; }
  #embed-container:hover .embed-stream-live-controls {
    pointer-events: all;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  @media screen and (max-width: 37.5rem) {
    #embed-container:hover .embed-live-meta {
      pointer-events: all;
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); } }
  #embed-container .room-scheduled-state .sidebar {
    display: none !important; }
  #embed-container .room-scheduled-state .tell-your-followers {
    display: none !important; }

.featured-blab .stats-block {
  padding: 14px 0 !important; }
.featured-blab .topic-block {
  display: none !important; }
.featured-blab #embed-container .embed-stream-live-controls {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.embed-live-meta {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 2.5rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }
  @media screen and (max-width: 37.5rem) {
    .embed-live-meta {
      -webkit-transition: all 0.15s ease-in-out;
      -moz-transition: all 0.15s ease-in-out;
      transition: all 0.15s ease-in-out;
      position: absolute;
      top: 0;
      width: 100%;
      -webkit-transform: translate3d(0, -100%, 0);
      -moz-transform: translate3d(0, -100%, 0);
      -ms-transform: translate3d(0, -100%, 0);
      -o-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      background-color: black;
      background-image: -webkit-linear-gradient(top, black, transparent);
      background-image: linear-gradient(to bottom,black, transparent);
      background-color: transparent;
      opacity: 0; } }

.embed-live-meta--title {
  font-size: 13px;
  letter-spacing: 0.3;
  color: #FFF;
  font-weight: 600;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-left: 0.8125rem; }
  .embed-live-meta--title .blip {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    background-color: #f34949;
    content: ' ';
    border-radius: 50%;
    vertical-align: baseline;
    -webkit-animation: pulse 2.4s ease-in-out infinite;
    -moz-animation: pulse 2.4s ease-in-out infinite;
    animation: pulse 2.4s ease-in-out infinite; }

@-webkit-keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
@-moz-keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
@keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
#embed-container .sidebar {
  border: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #FFF;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  max-height: 100% !important; }
  @media screen and (max-width: 37.5rem) {
    #embed-container .sidebar {
      display: none; } }

#embed-container {
  border-radius: 0.1875rem; }
  #embed-container .caller-info-container {
    top: 0.125rem;
    left: 0.125rem; }
  #embed-container .caller-info {
    border-radius: 0.125rem !important; }
    #embed-container .caller-info .badge {
      display: none !important; }
    #embed-container .caller-info .image {
      display: none !important; }
    #embed-container .caller-info .handles {
      margin-right: 0 !important; }
      #embed-container .caller-info .handles p {
        display: none !important; }
      #embed-container .caller-info .handles a {
        font-weight: 600 !important;
        padding: 0.25rem 0.375rem !important;
        border-radius: 0.125rem !important;
        padding-right: 0.5rem;
        font-size: 0.75rem; }
        #embed-container .caller-info .handles a:hover {
          text-decoration: none !important; }
  #embed-container .ui-layer .hang-up {
    width: 1.125rem;
    height: 1.125rem; }
    #embed-container .ui-layer .hang-up span {
      width: 0.5rem;
      height: 0.5rem;
      margin-left: -0.25rem;
      margin-top: -0.25rem; }
  #embed-container .ui-layer .mute-audio {
    display: none !important; }
  #embed-container .ui-layer .follow-button span {
    margin: 0.3125rem;
    height: 0.8125rem;
    width: 0.8125rem; }
  #embed-container .ui-layer .caller-feels .feel-counter {
    font-size: 0.75rem !important;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.15) !important; }
  #embed-container .ui-layer .caller-feels .hands-icon {
    margin-left: 0.3125rem;
    width: 0.9375rem !important;
    height: 0.9375rem !important; }
  #embed-container .ui-layer .hint-text p {
    font-size: 0.75rem !important; }
  #embed-container .stream-flex {
    margin-top: 0 !important;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    padding-top: 0; }
  #embed-container .user-list-container {
    display: none !important; }
  #embed-container .feels {
    width: 1.375rem;
    height: 1.375rem; }
  #embed-container .lock-seat {
    display: none; }
  #embed-container .pending-callers-container {
    display: none; }

.info-block {
  position: relative;
  width: 100%;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }
  .info-block .image-composition {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .info-block .info-layer {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    background: rgba(0, 0, 0, 0.75);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .info-block .info-layer .topic-block {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      text-align: center;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column; }
      .info-block .info-layer .topic-block .embed-header {
        width: 100%;
        display: block;
        padding: 0.75rem 0; }
        .info-block .info-layer .topic-block .embed-header .embed-header-logo {
          width: 2.0625rem;
          height: 0.8125rem;
          vertical-align: bottom;
          margin-bottom: 1px;
          display: inline-block;
          background-position: center;
          background-image: url(https://cf-cdn-01.blab-img.com/static/img/gradient-logo-00ba79001d.svg); }
        .info-block .info-layer .topic-block .embed-header .embed-header-link {
          color: #FFF;
          font-size: 13px;
          font-weight: 400; }
      .info-block .info-layer .topic-block .title {
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        font-size: 1rem;
        word-wrap: break-word;
        text-align: left;
        width: 100%;
        color: #FFF;
        padding: 0.5rem 0.625rem;
        display: inline-block;
        content: ' '; }
        .info-block .info-layer .topic-block .title.center-text {
          text-align: center; }
    .info-block .info-layer .stats-block {
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      width: 100%;
      text-align: center;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      padding-bottom: 0.6875rem; }
      .info-block .info-layer .stats-block span {
        color: #FFF;
        display: inline-block;
        vertical-align: middle; }
        .info-block .info-layer .stats-block span .icon {
          height: 0.75rem;
          width: 0.75rem;
          margin-bottom: 0.1875rem;
          margin-right: 0.1875rem; }
        .info-block .info-layer .stats-block span .recording-dot {
          width: 0.5rem;
          border-radius: 50%;
          margin-right: 0.3125rem;
          margin-bottom: 0.25rem;
          height: 0.5rem;
          background-color: #F34949;
          border: 1px solid #E04A48;
          -webkit-animation: pulse 2.4s ease-in-out infinite;
          -moz-animation: pulse 2.4s ease-in-out infinite;
          animation: pulse 2.4s ease-in-out infinite; }
      .info-block .info-layer .stats-block .total-views,
      .info-block .info-layer .stats-block .recording-label {
        margin-right: 0.625rem; }
      .info-block .info-layer .stats-block .replay-views .icon {
        background-size: 65%; }
  .info-block .image-composition {
    z-index: 1; }
    .info-block .image-composition .image {
      background-size: cover;
      background-position: center;
      display: inline-block;
      float: left;
      width: 100%;
      height: 100%; }
    .info-block .image-composition.grid-2 .image {
      width: 50%;
      height: 100%; }
    .info-block .image-composition.grid-3 .image {
      width: 33%;
      height: 100%; }
    .info-block .image-composition.grid-4 .image {
      width: 25%;
      height: 100%; }
@-webkit-keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
@-moz-keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
@keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
.embed-stream-live-controls {
  z-index: 200;
  width: 100%;
  padding: 0.625rem 0;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: black;
  background-image: -webkit-linear-gradient(bottom, black, transparent);
  background-image: linear-gradient(to top,black, transparent);
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  background-color: transparent; }

.embed-control-action {
  background: transparent;
  width: 1.875rem;
  height: 1.875rem;
  margin: 0 0.625rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 43.6875rem) {
    .embed-control-action {
      width: 1.25rem;
      height: 1.25rem; } }
  .embed-control-action span {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    width: 1.5625rem;
    height: 1.25rem;
    opacity: 0.8; }
    @media screen and (max-width: 56.25rem) {
      .embed-control-action span {
        width: 1.125rem;
        height: 1.125rem; } }
    .embed-control-action span:hover {
      opacity: 1; }

.embed-control-action-text {
  color: #fff;
  font-size: 12px;
  padding: 3px 0 2px; }
  .embed-control-action-text .embed-control-autoplay--status {
    font-weight: 700; }

.embed-control-volume.is-on {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/controls/control-volume-on-fabb34dadc.svg"); }

.embed-control-volume {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/controls/muted-471569190e.svg"); }

.embed-control-fullscreen {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_icons/controls/control-fullscreen-8f2234abbd.svg"); }

.embed-control-facebook-share {
  margin: 0;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_social/facebook-outline-ad3a087e5a.svg"); }

.embed-control-email-share {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_social/share-email-60094458f0.svg"); }

.embed-control-twitter-share {
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/twitter-b147a2d09e.svg"); }

.embed-control-tumblr-share {
  margin-left: 0 !important;
  width: 1.5625rem !important;
  height: 1.5625rem !important;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/_social/tumblr_logo-ee74b0f830.png"); }

.stream-square .stream-caller-ui ::selection {
  background: transparent; }
.stream-square .stream-caller-ui ::-moz-selection {
  background: transparent; }
.stream-square .stream-caller-ui .hang-up {
  box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.15);
  width: 28px;
  height: 28px;
  position: absolute;
  z-index: 100;
  top: 0.3125rem;
  right: 0.3125rem;
  cursor: pointer;
  background-color: black;
  border-radius: 50px;
  border: 1px solid #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1 !important;
  overflow: hidden; }
  .stream-square .stream-caller-ui .hang-up span {
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg);
    top: 50%;
    right: 13px;
    margin-right: -6px;
    margin-top: -6px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
  .stream-square .stream-caller-ui .hang-up p {
    opacity: 0;
    position: absolute;
    line-height: 26px;
    left: 13px;
    color: #FFFFFF;
    white-space: nowrap;
    font-weight: 700; }
  @media screen and (max-width: 37.5rem) {
    .stream-square .stream-caller-ui .hang-up {
      height: 16px;
      width: 16px;
      top: 0.5em;
      right: 0.5em; }
      .stream-square .stream-caller-ui .hang-up span {
        width: 8px;
        height: 8px;
        margin-left: -4px;
        margin-top: -4px; } }
.stream-square .stream-caller-ui .confirm {
  width: 100px;
  background: #FF5757;
  color: #fff;
  line-height: 26px;
  font-weight: 700;
  border-color: #FF5757; }
  .stream-square .stream-caller-ui .confirm p {
    opacity: 1; }
.stream-square .stream-caller-ui {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1000;
  width: 100%; }
.stream-square .caller-info {
  overflow: hidden;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  background-color: #121018;
  border-radius: 4px; }
  .stream-square .caller-info .badge {
    width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 50%;
    top: -0.1875rem;
    position: absolute;
    left: -0.1875rem;
    background-repeat: no-repeat;
    background-size: 55%;
    background-position: 50% 45%;
    background-color: #636363;
    box-shadow: 0px 0px 10px 1px black; }
    .stream-square .caller-info .badge.host {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/host-icon-194a76b4d8.svg); }
    .stream-square .caller-info .badge.guest {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/guest-icon-995aa3cecb.svg); }
    @media screen and (max-width: 37.5rem) {
      .stream-square .caller-info .badge {
        display: none; } }
  .stream-square .caller-info .image {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; }
    .stream-square .caller-info .image img {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 50%;
      margin: 0.4em; }
    @media screen and (max-width: 37.5rem) {
      .stream-square .caller-info .image {
        display: none; } }
  .stream-square .caller-info .handles {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    margin-right: 1em;
    text-align: left; }
    .stream-square .caller-info .handles a {
      width: 100%;
      display: block;
      color: #FFF;
      cursor: pointer;
      font-size: 13px; }
    .stream-square .caller-info .handles p {
      width: 100%;
      color: #FFF;
      cursor: pointer;
      font-size: 11px;
      display: block;
      margin: 0; }
      @media screen and (max-width: 37.5rem) {
        .stream-square .caller-info .handles p {
          display: none; } }
    .stream-square .caller-info .handles a:hover,
    .stream-square .caller-info .handles p:hover {
      text-decoration: underline; }
.stream-square .caller-info-container {
  position: absolute;
  top: 0.5em;
  left: 0.5em; }
  .stream-square .caller-info-container .follow-button {
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background-color: #FFF;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    border-left: 1px solid #979797;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .stream-square .caller-info-container .follow-button span {
      color: #121018;
      height: 0.9375rem;
      width: 0.9375rem;
      margin: 0.3125rem 0.4375rem;
      display: inline-block;
      content: ' ';
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/follow-lightdark-179435e656.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none; }
  .stream-square .caller-info-container .follow-button.following {
    border-color: transparent !important; }
    .stream-square .caller-info-container .follow-button.following span {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/following_white-93bc0f1288.svg); }

#caller-0 .follow-button.following,
#caller-0 .badge {
  background-color: #4884B8; }

#caller-1 .follow-button.following,
#caller-1 .badge {
  background-color: #E8A82C; }

#caller-2 .follow-button.following,
#caller-2 .badge {
  background-color: #52B046; }

#caller-3 .follow-button.following,
#caller-3 .badge {
  background-color: #CD3A54; }

.OT_archiving {
  display: none;
  visibility: hidden; }

.OT_subscriber,
.OT_publisher {
  display: inline-block;
  height: 100%;
  width: 100%; }

.sstream-square .controls {
  position: absolute;
  bottom: 0.5em;
  padding: 1em;
  display: block;
  right: 0.5em;
  opacity: 0.7;
  width: 1.2em;
  height: 2.6em;
  cursor: pointer;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/host_controls-a3aa645111.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 100;
  pointer-events: all !important;
  display: none; }
.sstream-square .controls:hover {
  opacity: 1; }
.sstream-square .follow-caller {
  display: inline-block;
  color: #FFF;
  margin-left: 0.6em;
  padding: 0.1em 0.6em;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid #FFF;
  border-radius: 0.3em; }
.sstream-square .follow-caller.following {
  width: 1.7em;
  padding: 0;
  margin: 0;
  height: 1.7em;
  margin-left: 1em;
  vertical-align: top;
  border-radius: 50%;
  border: none;
  position: relative; }
  .sstream-square .follow-caller.following span {
    display: block;
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 70%;
    width: 70%;
    margin-left: -35%;
    margin-top: -35%;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/checked-e26367d7aa.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

.stats {
  color: #FFF;
  text-align: right;
  font-size: 12px;
  list-style-type: none;
  z-index: 4;
  position: absolute;
  bottom: 0.625rem;
  vertical-align: middle;
  right: 0.625rem;
  display: inline;
  bottom: 15%; }

.lock-seat {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.lock-seat:hover span {
  opacity: 1; }
.lock-seat:hover p {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.stream-cell#caller-0 .handles a {
  color: #689AFF !important; }
.stream-cell#caller-0 .follow-caller.following {
  background: #689AFF !important; }

.stream-cell#caller-1 .handles a {
  color: #FFC566 !important; }
.stream-cell#caller-1 .follow-caller.following {
  background: #FFC566 !important; }

.stream-cell#caller-2 .handles a {
  color: #73E18D !important; }
.stream-cell#caller-2 .follow-caller.following {
  background: #73E18D !important; }

.stream-cell#caller-3 .handles a {
  color: #FF6868 !important; }
.stream-cell#caller-3 .follow-caller.followimg {
  background: #FF6868 !important; }

.open-seat-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  left: 0;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }
  .open-seat-wrapper .open-seat-container {
    text-align: center;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; }
  .open-seat-wrapper .caller-button {
    display: inline-block;
    margin: 0 auto;
    font-size: 18px;
    color: #FFF;
    border-radius: 6px;
    padding: 2em 1.2em;
    background: transparent;
    border: 1px solid #FFF;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .open-seat-wrapper .join-icon {
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/join_white-658b9e11a4.svg);
    vertical-align: initial;
    width: 0.7em;
    height: 0.7em;
    content: ' ';
    margin-left: 0.35em;
    display: inline-block; }
  .open-seat-wrapper .lock-icon {
    width: 1em;
    height: 1em;
    content: ' ';
    margin-left: 0.35em;
    display: inline-block;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/lock_white-2d13b1d834.png); }
  .open-seat-wrapper p {
    text-align: center;
    width: 100%;
    color: #FFF; }

.pending-caller-cell > p {
  color: #818181;
  text-align: center;
  top: 10px !important;
  position: relative; }

.inline-icon, .widget-card-ph button .icon, .widget-card-ph.answered .state .answered-indicator span, .widget-modal .widget-container .widget-remove span, .widget-card-twitter .actions-block .action, .embed-live-meta--title .blip, .info-block .info-layer .stats-block span .icon, .left-sidebar .sidebar-widget header .pull-down a .icon, .left-sidebar .sidebar-widget header .widget-menu a .icon, .left-sidebar .info-block .info-layer .share-block .twitter-share span, .left-sidebar .info-block .info-layer .share-block .facebook-share span, .left-sidebar .info-block .info-layer .share-block .embed-share span, .left-sidebar .info-block .info-layer .share-block .capture-moment span, .tweet-item .card span .icon, .facebook-item .card span .icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.locked-seat-cell {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent; }
  .locked-seat-cell .locked-icon {
    width: 70%;
    height: 70%;
    z-index: 150;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35%;
    margin-left: -35%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; }
  .locked-seat-cell .icon {
    position: relative;
    height: 60%;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/lock-icon-1c72eaf29a.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
  .locked-seat-cell p {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
    display: block;
    font-size: 5em;
    padding: 1em 0;
    color: #FFF;
    width: 100%;
    margin: 0 auto;
    opacity: 1; }

.pending-caller-cell h1 {
  width: 100%;
  color: #FFF;
  text-align: center;
  top: 0.625rem;
  margin: 0;
  font-weight: 400;
  position: absolute; }
  @media screen and (max-width: 90.0625rem) {
    .pending-caller-cell h1 {
      top: 0.625rem; } }
  @media screen and (max-width: 56.25rem) {
    .pending-caller-cell h1 {
      top: 0.5rem;
      font-size: 1rem; } }
.pending-caller-cell .button-container {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 1.25rem; }
  .pending-caller-cell .button-container button {
    background: #FFF; }
  .pending-caller-cell .button-container button:hover {
    background-color: #FFF;
    color: #201E2A;
    border: 1px solid #FFF; }
.pending-caller-cell .caller-avatar {
  background-image: url(https://dev-cdn.blab.im/user_profile_images/b53d36b2b43649be915a2f6fa409fd88/5f529f1379e2495b9d80eb0b8cb1d42e.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  width: 30%;
  height: 30%;
  z-index: 150;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: play 2s ease infinite;
  -moz-animation: play 2s ease infinite;
  animation: play 2s ease infinite;
  margin-top: -15%;
  margin-left: -15%;
  transform: scale(0.8); }

.embed .pending-caller-cell h1 {
  font-size: 12px !important;
  top: 10px !important; }

@-webkit-keyframes play {
  0% {
    transform: scale(0.8); }
  15% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2); }
  25% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2); }
  30% {
    transform: scale(1); }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 50px rgba(255, 255, 255, 0.2); }
  80% {
    transform: scale(0.9); }
  100% {
    transform: scale(0.8); } }
@-moz-keyframes play {
  0% {
    transform: scale(0.8); }
  15% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2); }
  25% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2); }
  30% {
    transform: scale(1); }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 50px rgba(255, 255, 255, 0.2); }
  80% {
    transform: scale(0.9); }
  100% {
    transform: scale(0.8); } }
@keyframes play {
  0% {
    transform: scale(0.8); }
  15% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2); }
  25% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2); }
  30% {
    transform: scale(1); }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 50px rgba(255, 255, 255, 0.2); }
  80% {
    transform: scale(0.9); }
  100% {
    transform: scale(0.8); } }
.top-lock-button {
  font-size: 1rem !important; }

.pending-callers-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%;
  top: 0;
  left: 0; }
  .pending-callers-container button {
    font-size: 1rem !important; }
  .pending-callers-container .call-in {
    left: initial !important;
    right: 110px !important; }
  .pending-callers-container .bottom-section,
  .pending-callers-container .top-section {
    width: 100%;
    overflow: hidden;
    text-align: center;
    display: block; }
    .pending-callers-container .bottom-section h1,
    .pending-callers-container .top-section h1 {
      margin: 0;
      width: 100%;
      color: #FFF;
      line-height: 48px;
      font-size: 18px;
      font-weight: 700;
      padding: 0 5px;
      text-align: left; }
  .pending-callers-container .horizontal-caller-list {
    transform: translate3d(100, 0, 0); }
  .pending-callers-container .list-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    padding: 10px; }
    .pending-callers-container .list-container .controls-callers {
      position: absolute;
      width: 100%;
      top: 50%;
      pointer-events: all !important; }
  .pending-callers-container ul {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    margin-top: 20px;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex; }
    .pending-callers-container ul li {
      display: inline-block;
      width: 100%;
      padding: 5px;
      pointer-events: all; }
  .pending-callers-container #callers-list {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    margin-top: 0;
    display: block;
    overflow: auto;
    pointer-events: all; }

@-webkit-keyframes pulsing {
  0% {
    -webkit-transform: translate3d(scale); } }
@-moz-keyframes pulsing {
  0% {
    -moz-transform: translate3d(scale); } }
@keyframes pulsing {
  0% {
    -webkit-transform: translate3d(scale);
    -moz-transform: translate3d(scale);
    -ms-transform: translate3d(scale);
    -o-transform: translate3d(scale);
    transform: translate3d(scale); } }
.stream-caller {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: none; }

.caller-ui {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1000;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
  .caller-ui .caller-info,
  .caller-ui .hang-up {
    pointer-events: all !important; }
  .caller-ui .background-layer,
  .caller-ui .ui-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .caller-ui .background-layer:hover {
    opacity: 1; }
  .caller-ui .background-layer {
    z-index: 100;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity: 0; }
  .caller-ui .ui-layer {
    z-index: 1000;
    pointer-events: none; }
  .caller-ui .hint-text-feels {
    position: absolute;
    width: 70%;
    text-align: center;
    left: 50%;
    margin-left: -35%;
    bottom: 1em; }
    .caller-ui .hint-text-feels p {
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
      margin: 0;
      display: inline-block;
      color: #FFF;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      opacity: 0;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      -webkit-transform: translate3d(0, -5%, 0);
      -moz-transform: translate3d(0, -5%, 0);
      -ms-transform: translate3d(0, -5%, 0);
      -o-transform: translate3d(0, -5%, 0);
      transform: translate3d(0, -5%, 0); }
  .caller-ui .mute-audio {
    position: absolute;
    left: 0.5rem;
    cursor: pointer;
    bottom: 0.5rem;
    z-index: 2000;
    pointer-events: all !important; }
    .caller-ui .mute-audio span {
      margin: 0;
      display: block;
      color: #FFF;
      font-size: 14px;
      font-weight: 600;
      width: 28px;
      height: 24px;
      cursor: pointer;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/audio_unmute-2eca68c950.png"); }
    .caller-ui .mute-audio .mute {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/audio_mute-1f871c3b6a.png"); }

.caller-ui.hovered .hint-text-feels p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.caller-ui.audio-only-mode .hint-text-feels,
.caller-ui.video-degrading-mode .hint-text-feels {
  display: none; }

#caller-0 .caller-ui {
  /* Chrome,Safari4+ */ }
  #caller-0 .caller-ui .background-layer {
    background: #689AFF;
    opacity: 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out; }
  #caller-0 .caller-ui .background-layer:hover {
    opacity: 0.15; }
#caller-0 .caller-info a {
  color: #689AFF; }

#caller-1 {
  /* Chrome,Safari4+ */ }
  #caller-1 .background-layer {
    background: #FFC566;
    opacity: 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out; }
  #caller-1 .background-layer:hover {
    opacity: 0.15; }
  #caller-1 .caller-info a {
    color: #FFC566; }

#caller-2 {
  /* Chrome,Safari4+ */ }
  #caller-2 .background-layer {
    background: #73E18D;
    opacity: 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out; }
  #caller-2 .background-layer:hover {
    opacity: 0.15; }
  #caller-2 .caller-info a {
    color: #73E18D; }

#caller-3 {
  /* Chrome,Safari4+ */ }
  #caller-3 .background-layer {
    background: #FF6868;
    opacity: 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out; }
  #caller-3 .background-layer:hover {
    opacity: 0.15; }
  #caller-3 .caller-info a {
    color: #FF6868; }

.stream-waiting {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 10;
  width: 100%; }

.stream-caller {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 100;
  width: 100%;
  display: none; }

.top-lock-button {
  cursor: pointer;
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: transparent !important;
  outline: 0;
  border: 1px solid #FFF;
  padding: 0.6em;
  color: #FFF;
  border-radius: 4px; }

.top-lock-button:hover {
  color: #332F46;
  background-color: #FFF !important; }

.unlock-icon {
  width: 40%;
  height: 40%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/lock_white-2d13b1d834.png"); }

/* Portrait */
/* Landscape */
@media screen and (min-width: 1200px) {
  .caller-info {
    top: 0.5em;
    bottom: auto !important; }
    .caller-info img {
      display: block !important; }
    .caller-info .handles p {
      display: inline-block !important; }

  .open-seat-icon {
    height: 12em;
    width: 12em; }

  .top-lock-button {
    padding: 0.6em; } }
.locked-host-state:hover {
  background-color: #DCD9E8 !important; }
  .locked-host-state:hover .locked-seat-cell .unlock-icon {
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/unlock_icon-fa5062d9ad.png"); }

.pending-caller-state {
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  transform: scale(1) !important; }

.open-seat-state {
  cursor: pointer; }

.audio-only-overlay-cell {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  overflow: hidden; }
  .audio-only-overlay-cell .background {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    filter: blur(15px);
    -webkit-filter: blur(15px); }
    .audio-only-overlay-cell .background:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5); }
  .audio-only-overlay-cell .caller-avatar-container {
    border-radius: 50%;
    width: 30%;
    height: 30%;
    z-index: 150;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15%;
    margin-left: -15%;
    transform: scale(0.8); }
    .audio-only-overlay-cell .caller-avatar-container .caller-avatar {
      border-radius: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 2; }
    .audio-only-overlay-cell .caller-avatar-container .audio-levels {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      border-radius: 100%;
      z-index: 1; }
  .audio-only-overlay-cell .audio-only-seat-0 .audio-levels {
    -webkit-animation: audioOnlyPulseSeatOne 0.5s ease 1;
    -moz-animation: audioOnlyPulseSeatOne 0.5s ease 1;
    animation: audioOnlyPulseSeatOne 0.5s ease 1; }
  .audio-only-overlay-cell .audio-only-seat-1 .audio-levels {
    -webkit-animation: audioOnlyPulseSeatTwo 0.5s ease 1;
    -moz-animation: audioOnlyPulseSeatTwo 0.5s ease 1;
    animation: audioOnlyPulseSeatTwo 0.5s ease 1; }
  .audio-only-overlay-cell .audio-only-seat-2 .audio-levels {
    -webkit-animation: audioOnlyPulseSeatThree 0.5s ease 1;
    -moz-animation: audioOnlyPulseSeatThree 0.5s ease 1;
    animation: audioOnlyPulseSeatThree 0.5s ease 1; }
  .audio-only-overlay-cell .audio-only-seat-3 .audio-levels {
    -webkit-animation: audioOnlyPulseSeatFour 0.5s ease 1;
    -moz-animation: audioOnlyPulseSeatFour 0.5s ease 1;
    animation: audioOnlyPulseSeatFour 0.5s ease 1; }
  .audio-only-overlay-cell .description {
    position: absolute;
    top: 69%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    z-index: 800;
    font-size: 1rem; }
  .audio-only-overlay-cell .reason-bottom {
    background-color: rgba(228, 85, 83, 0.66);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 1.2em; }
    .audio-only-overlay-cell .reason-bottom svg {
      max-height: 100%;
      display: inline-block;
      height: 1.2em;
      vertical-align: middle;
      margin-top: -3px; }
      @media screen and (max-width: 37.5rem) {
        .audio-only-overlay-cell .reason-bottom svg {
          margin-top: 0.625rem; } }
    @media screen and (max-width: 71.25rem) {
      .audio-only-overlay-cell .reason-bottom .reason-text {
        display: none; } }

@-webkit-keyframes audioOnlyPulseSeatOne {
  0% {
    box-shadow: 0 0 0 10px rgba(72, 132, 184, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(72, 132, 184, 0); } }
@-moz-keyframes audioOnlyPulseSeatOne {
  0% {
    box-shadow: 0 0 0 10px rgba(72, 132, 184, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(72, 132, 184, 0); } }
@keyframes audioOnlyPulseSeatOne {
  0% {
    box-shadow: 0 0 0 10px rgba(72, 132, 184, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(72, 132, 184, 0); } }
@-webkit-keyframes audioOnlyPulseSeatTwo {
  0% {
    box-shadow: 0 0 0 10px rgba(232, 168, 44, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(232, 168, 44, 0); } }
@-moz-keyframes audioOnlyPulseSeatTwo {
  0% {
    box-shadow: 0 0 0 10px rgba(232, 168, 44, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(232, 168, 44, 0); } }
@keyframes audioOnlyPulseSeatTwo {
  0% {
    box-shadow: 0 0 0 10px rgba(232, 168, 44, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(232, 168, 44, 0); } }
@-webkit-keyframes audioOnlyPulseSeatThree {
  0% {
    box-shadow: 0 0 0 10px rgba(82, 176, 70, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(82, 176, 70, 0); } }
@-moz-keyframes audioOnlyPulseSeatThree {
  0% {
    box-shadow: 0 0 0 10px rgba(82, 176, 70, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(82, 176, 70, 0); } }
@keyframes audioOnlyPulseSeatThree {
  0% {
    box-shadow: 0 0 0 10px rgba(82, 176, 70, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(82, 176, 70, 0); } }
@-webkit-keyframes audioOnlyPulseSeatFour {
  0% {
    box-shadow: 0 0 0 10px rgba(205, 58, 84, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(205, 58, 84, 0); } }
@-moz-keyframes audioOnlyPulseSeatFour {
  0% {
    box-shadow: 0 0 0 10px rgba(205, 58, 84, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(205, 58, 84, 0); } }
@keyframes audioOnlyPulseSeatFour {
  0% {
    box-shadow: 0 0 0 10px rgba(205, 58, 84, 0.3); }
  100% {
    box-shadow: 0 0 0 50px rgba(205, 58, 84, 0); } }
.custom-dropdown {
  font-size: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 10px; }

.custom-dropdown select {
  background-color: #9659F4;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: button; }

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none; }

.custom-dropdown::after {
  content: "\25BC";
  height: 1em;
  font-size: .625em;
  line-height: 1;
  right: 1.2em;
  top: 50%;
  margin-top: -.5em; }

.custom-dropdown::before {
  width: 2em;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0; }

.custom-dropdown select[disabled] {
  color: rgba(0, 0, 0, 0.3); }

.custom-dropdown select[disabled]::after {
  color: rgba(0, 0, 0, 0.1); }

.custom-dropdown::before {
  background-color: rgba(0, 0, 0, 0.15); }

.custom-dropdown::after {
  color: rgba(0, 0, 0, 0.4); }

.green-done {
  margin-top: 5px;
  color: #fff; }

#topText {
  text-align: center; }

#outer {
  text-align: center;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center; }

#stream-ended-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 120;
  display: table; }
  #stream-ended-container .table {
    position: relative;
    width: 100%;
    z-index: 100;
    max-width: 800px;
    height: 100%;
    display: table-cell;
    vertical-align: middle; }
    #stream-ended-container .table h1 {
      text-align: center;
      padding-bottom: 10px; }
    #stream-ended-container .table #ending-info {
      margin: 0 auto;
      text-align: center; }
      #stream-ended-container .table #ending-info h1,
      #stream-ended-container .table #ending-info h2,
      #stream-ended-container .table #ending-info h3 {
        color: #FFF;
        text-align: center;
        display: block; }
      #stream-ended-container .table #ending-info h3 {
        margin: 1em 0; }
      #stream-ended-container .table #ending-info h1 {
        word-break: break-word;
        margin: 0 auto;
        width: 50%;
        max-width: 75%; }
      #stream-ended-container .table #ending-info h2 {
        margin: 1.4em; }
      #stream-ended-container .table #ending-info p {
        color: #FFF; }
      #stream-ended-container .table #ending-info ul {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center; }
        #stream-ended-container .table #ending-info ul li {
          max-width: 200px;
          display: inline-block;
          padding: 0 1.82em; }
          #stream-ended-container .table #ending-info ul li img {
            margin: 0 auto;
            border-radius: 50%;
            width: 4.6875rem;
            height: 4.6875rem;
            display: block;
            border: 2px solid white; }
            @media screen and (max-width: 90.0625rem) {
              #stream-ended-container .table #ending-info ul li img {
                width: 2.8125rem;
                height: 2.8125rem; } }
          #stream-ended-container .table #ending-info ul li a {
            cursor: pointer;
            text-decoration: capitilaze;
            margin: 0.3em 0;
            display: inline-block;
            font-weight: 600;
            padding: 0.2em 0.7em;
            color: #FFF;
            cursor: pointer; }
          #stream-ended-container .table #ending-info ul li .username {
            cursor: pointer;
            margin: 0;
            color: #FFF; }
          #stream-ended-container .table #ending-info ul li .username:hover,
          #stream-ended-container .table #ending-info ul li a:hover {
            text-decoration: underline; }
          #stream-ended-container .table #ending-info ul li .feels-count {
            margin: 0;
            display: inline-block;
            color: #fff; }
            #stream-ended-container .table #ending-info ul li .feels-count span {
              background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/ftux_s3_hands%403x.png);
              background-size: contain;
              height: 2.1875rem;
              background-repeat: no-repeat;
              width: 2.1875rem;
              vertical-align: middle;
              margin-left: 0.55em;
              display: inline-block;
              content: ' '; }
              @media screen and (max-width: 90.0625rem) {
                #stream-ended-container .table #ending-info ul li .feels-count span {
                  width: 1.5625rem;
                  height: 1.5625rem; } }
        #stream-ended-container .table #ending-info ul li:nth-child(1) img {
          border-color: #4884B8; }
        #stream-ended-container .table #ending-info ul li:nth-child(1) a {
          color: #4884B8; }
        #stream-ended-container .table #ending-info ul li:nth-child(2) img {
          border-color: #E8A82C; }
        #stream-ended-container .table #ending-info ul li:nth-child(2) a {
          color: #E8A82C; }
        #stream-ended-container .table #ending-info ul li:nth-child(3) img {
          border-color: #52B046; }
        #stream-ended-container .table #ending-info ul li:nth-child(3) a {
          color: #52B046; }
        #stream-ended-container .table #ending-info ul li:nth-child(4) img {
          border-color: #CD3A54; }
        #stream-ended-container .table #ending-info ul li:nth-child(4) a {
          color: #CD3A54; }

.host-placeholder.noBg {
  background: transparent !important;
  box-shadow: none !important;
  cursor: auto !important; }

.host-placeholder {
  display: inline-table;
  position: relative;
  padding: 0;
  border-radius: 6px;
  background: #333B48;
  color: gray;
  z-index: 0;
  height: 100%;
  float: right;
  width: 100%;
  clear: right;
  color: white;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.98);
  -moz-transform: scale(0.98);
  -ms-transform: scale(0.98);
  -o-transform: scale(0.98);
  transform: scale(0.98);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .host-placeholder .center {
    display: table-cell;
    width: 100%;
    position: relative;
    vertical-align: middle;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .host-placeholder .center h1 {
      font-weight: 300;
      color: #BCC0C7;
      font-size: 1.5em;
      margin: 0 auto 1em auto; }
    .host-placeholder .center button {
      opacity: 0.9;
      border: 1px solid #EAEFF6;
      font-size: 2.2em;
      padding: 0.22em 1.5em;
      display: block;
      margin: 0.95em auto;
      color: #EAEFF6;
      background-color: transparent;
      border-radius: 50px; }
      .host-placeholder .center button span {
        display: inline-block;
        margin-left: 6px;
        width: 35px;
        height: 30px;
        content: ' ';
        vertical-align: text-top;
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat; }
    .host-placeholder .center #close-seat span {
      background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/lock_small.png); }
    .host-placeholder .center #close-seat:hover span {
      background-image: url(https://s3-us-west-1.amazonaws.com/shelby-games/blab-assets/dark_lock_small.png); }
    .host-placeholder .center img {
      height: 165px;
      margin: 25px 0; }
    .host-placeholder .center button:hover {
      background-color: #EAEFF6;
      color: #333B48; }
    .host-placeholder .center .toggle {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      padding-left: 10px; }
      .host-placeholder .center .toggle__handle {
        position: absolute;
        visibility: hidden; }
        .host-placeholder .center .toggle__handle:checked + .toggle__container::before {
          box-shadow: inset 0px 0px 0px 20px #4099FF; }
        .host-placeholder .center .toggle__handle:checked + .toggle__container::after {
          margin-left: 16px; }
      .host-placeholder .center .toggle__container {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: relative;
        display: block;
        width: 38px;
        height: 20px;
        background-color: #343B46;
        border-radius: 20px; }
        .host-placeholder .center .toggle__container::before, .host-placeholder .center .toggle__container::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0; }
        .host-placeholder .center .toggle__container::before {
          -webkit-transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          -moz-transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: box-shadow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          border-radius: 60px; }
        .host-placeholder .center .toggle__container::after {
          -webkit-transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          -moz-transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: margin 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          top: -2px;
          width: 22px;
          height: 22px;
          background-image: -webkit-linear-gradient(#fff, #e3e7e7);
          background-image: linear-gradient(#fff, #e3e7e7);
          border-radius: 50px; }

#scheduled-placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  display: table;
  top: 0;
  z-index: 3;
  left: 0; }
  #scheduled-placeholder .no-border {
    text-align: left;
    border-color: rgba(0, 0, 0, 0.15);
    background-color: #FFF;
    margin: 0 1.5em; }
    @media screen and (max-width: 37.5rem) {
      #scheduled-placeholder .no-border {
        background-color: transparent; } }
    #scheduled-placeholder .no-border h2 {
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto; }
  #scheduled-placeholder .table {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
    #scheduled-placeholder .table .container {
      max-width: 680px;
      display: block;
      margin: 0 auto;
      width: auto;
      text-align: center; }
    #scheduled-placeholder .table .timer {
      color: #FFF;
      margin: 0.3em 0;
      display: inline-block;
      text-align: center;
      width: 100%; }
      @media screen and (max-width: 37.5rem) {
        #scheduled-placeholder .table .timer {
          font-size: 1rem; } }
    #scheduled-placeholder .table .theme-header {
      color: #FFF;
      font-size: 5em;
      font-weight: 600;
      text-align: center;
      width: 100%;
      display: block; }
    #scheduled-placeholder .table .with {
      font-size: 2.4em;
      width: 100%;
      display: block;
      text-align: center;
      font-weight: 400;
      font-style: italic;
      margin: 0.7em auto; }
    #scheduled-placeholder .table .creator {
      margin-top: 1.4em;
      display: inline-block;
      font-size: 1em;
      text-align: center; }
      #scheduled-placeholder .table .creator img {
        height: 12em;
        width: 12em;
        margin-right: 1em;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle; }
      #scheduled-placeholder .table .creator .text {
        display: inline-block;
        vertical-align: middle;
        text-align: left; }
        #scheduled-placeholder .table .creator .text h1 {
          font-size: 2em;
          margin: 0; }
        #scheduled-placeholder .table .creator .text h2 {
          font-size: 1.5em;
          margin: 0;
          font-weight: 400; }
        #scheduled-placeholder .table .creator .text p {
          max-width: 275px;
          word-break: break-word;
          font-size: 1.4em; }

body.blackBg {
  background-color: #1A1A1A !important;
  background-image: none !important; }

.stream-square {
  width: 50%;
  height: 50%;
  float: left;
  padding: 0.3em;
  position: relative;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  transition: all 0.1s ease;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.stream-square--inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #2F2F2F;
  background-color: #1E1E1E; }

.stream-square-box {
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  transition: all 0.1s ease; }

.embed .stream-square.is-active:nth-child(1) {
  padding-right: 2px;
  padding-bottom: 2px; }
.embed .stream-square.is-active:nth-child(2) {
  padding-left: 2px;
  padding-bottom: 2px; }
.embed .stream-square.is-active:nth-child(3) {
  padding-right: 2px;
  padding-top: 2px; }
.embed .stream-square.is-active:nth-child(4) {
  padding-top: 2px;
  padding-left: 2px; }
@media screen and (max-width: 37.5rem) {
  .embed .stream-square {
    padding: 0; } }

.stream-square-box.callers-1 {
  -webkit-transform: translate3d(0, 25%, 0);
  -moz-transform: translate3d(0, 25%, 0);
  -ms-transform: translate3d(0, 25%, 0);
  -o-transform: translate3d(0, 25%, 0);
  transform: translate3d(0, 25%, 0); }
  .stream-square-box.callers-1.is-locked .stream-square.is-active {
    -webkit-transform: translate3d(50%, 0, 0);
    -moz-transform: translate3d(50%, 0, 0);
    -ms-transform: translate3d(50%, 0, 0);
    -o-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0); }
  .stream-square-box.callers-1.is-locked .placeholder-square {
    -webkit-transform: translate3d(28%, 0, 0) scale(0.4) !important;
    -moz-transform: translate3d(28%, 0, 0) scale(0.4) !important;
    -ms-transform: translate3d(28%, 0, 0) scale(0.4) !important;
    -o-transform: translate3d(28%, 0, 0) scale(0.4) !important;
    transform: translate3d(28%, 0, 0) scale(0.4) !important; }

.stream-square-box.callers-2 {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
  .stream-square-box.callers-2 .placeholder-square {
    -webkit-transform: translate3d(50%, 0, 0) !important;
    -moz-transform: translate3d(50%, 0, 0) !important;
    -ms-transform: translate3d(50%, 0, 0) !important;
    -o-transform: translate3d(50%, 0, 0) !important;
    transform: translate3d(50%, 0, 0) !important; }
  .stream-square-box.callers-2.is-locked {
    -webkit-transform: translate3d(0, 25%, 0);
    -moz-transform: translate3d(0, 25%, 0);
    -ms-transform: translate3d(0, 25%, 0);
    -o-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0); }
    .stream-square-box.callers-2.is-locked .placeholder-square {
      -webkit-transform: translate3d(50%, -25%, 0) scale(0.4) !important;
      -moz-transform: translate3d(50%, -25%, 0) scale(0.4) !important;
      -ms-transform: translate3d(50%, -25%, 0) scale(0.4) !important;
      -o-transform: translate3d(50%, -25%, 0) scale(0.4) !important;
      transform: translate3d(50%, -25%, 0) scale(0.4) !important; }

.stream-square-box.callers-3 {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
  .stream-square-box.callers-3 .stream-square.is-active:last-child {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .stream-square-box.callers-3.is-locked {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
    .stream-square-box.callers-3.is-locked .stream-square.is-active.last-square {
      -webkit-transform: translate3d(50%, 0, 0) !important;
      -moz-transform: translate3d(50%, 0, 0) !important;
      -ms-transform: translate3d(50%, 0, 0) !important;
      -o-transform: translate3d(50%, 0, 0) !important;
      transform: translate3d(50%, 0, 0) !important; }
    .stream-square-box.callers-3.is-locked .placeholder-square {
      -webkit-transform: translate3d(25%, 0, 0) scale(0.4) !important;
      -moz-transform: translate3d(25%, 0, 0) scale(0.4) !important;
      -ms-transform: translate3d(25%, 0, 0) scale(0.4) !important;
      -o-transform: translate3d(25%, 0, 0) scale(0.4) !important;
      transform: translate3d(25%, 0, 0) scale(0.4) !important; }

.stream-square:nth-child(1),
.stream-square:nth-child(2) {
  opacity: 0;
  -webkit-transform: translate3d(0, 200%, 0);
  -moz-transform: translate3d(0, 200%, 0);
  -ms-transform: translate3d(0, 200%, 0);
  -o-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0); }

.stream-square:nth-child(3),
.stream-square:nth-child(4),
.placeholder-square {
  opacity: 0;
  -webkit-transform: translate3d(0, 200%, 0);
  -moz-transform: translate3d(0, 200%, 0);
  -ms-transform: translate3d(0, 200%, 0);
  -o-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0); }

.stream-square-box.animateIn .stream-square:nth-child(1) {
  -webkit-animation: topMotion 0.5s linear 1;
  -moz-animation: topMotion 0.5s linear 1;
  animation: topMotion 0.5s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s; }
.stream-square-box.animateIn .stream-square:nth-child(2) {
  -webkit-animation: topMotion 0.5s linear 1;
  -moz-animation: topMotion 0.5s linear 1;
  animation: topMotion 0.5s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s; }
.stream-square-box.animateIn .stream-square:nth-child(3) {
  -webkit-animation: bottomMotion 0.5s linear 1;
  -moz-animation: bottomMotion 0.5s linear 1;
  animation: bottomMotion 0.5s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s; }
.stream-square-box.animateIn .stream-square:nth-child(4) {
  -webkit-animation: bottomMotion 0.5s linear 1;
  -moz-animation: bottomMotion 0.5s linear 1;
  animation: bottomMotion 0.5s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }
.stream-square-box.animateIn .placeholder-square {
  -webkit-animation: bottomMotion 0.6s linear 1;
  -moz-animation: bottomMotion 0.6s linear 1;
  animation: bottomMotion 0.6s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s; }

.stream-square-box.finished-animation .stream-square {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

@-webkit-keyframes bottomMotion {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  80% {
    -webkit-transform: translate3d(0, -5%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } }
@-moz-keyframes bottomMotion {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, 100%, 0);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  80% {
    -moz-transform: translate3d(0, -5%, 0);
    -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1); }
  100% {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } }
@keyframes bottomMotion {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  80% {
    -webkit-transform: translate3d(0, -5%, 0);
    -moz-transform: translate3d(0, -5%, 0);
    -ms-transform: translate3d(0, -5%, 0);
    -o-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1);
    -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } }
@-webkit-keyframes topMotion {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  80% {
    -webkit-transform: translate3d(0, -5%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } }
@-moz-keyframes topMotion {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, 100%, 0);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  80% {
    -moz-transform: translate3d(0, -5%, 0);
    -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1); }
  100% {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } }
@keyframes topMotion {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  80% {
    -webkit-transform: translate3d(0, -5%, 0);
    -moz-transform: translate3d(0, -5%, 0);
    -ms-transform: translate3d(0, -5%, 0);
    -o-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1);
    -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.335, 1); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } }
.stream.replay .stream-square-box {
  -webkit-transition: all 0s ease !important;
  -moz-transition: all 0s ease !important;
  transition: all 0s ease !important; }
.stream.replay .stream-square {
  padding: 0 !important;
  -webkit-transition: all 0s ease !important;
  -moz-transition: all 0s ease !important;
  transition: all 0s ease !important; }

.square-open-seat .caller-button {
  display: inline-block;
  margin: 0 auto;
  font-size: 18px;
  color: #FFF;
  border-radius: 6px;
  padding: 1.875rem 0.9375rem;
  background: transparent;
  border: 1px solid #FFF;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  margin-top: 0.9375rem; }
  @media screen and (max-width: 90.0625rem) {
    .square-open-seat .caller-button {
      padding: 0.9375rem 0.625rem; } }
  .square-open-seat .caller-button:hover {
    background-color: #FFF;
    color: black; }
    .square-open-seat .caller-button:hover .lock-icon {
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/lock_dark-acf97af682.png); }
.square-open-seat .lock-icon {
  width: 1em;
  height: 1em;
  content: ' ';
  margin-left: 0.35em;
  display: inline-block;
  background-image: url(https://cf-cdn-01.blab-img.com/static/img/lock_white-2d13b1d834.png); }
.square-open-seat p {
  text-align: center;
  width: 100%;
  color: #FFF; }

.square-open-seat {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  overflow: hidden; }

.square-open-seat--fill {
  height: 180%;
  width: 180%;
  position: absolute;
  margin-top: -90%;
  margin-left: -90%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  background-color: #9A81F3;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0; }

.square-open-seat.is-animating .square-open-seat--fill {
  -webkit-animation: pulsing 0.3s linear 1;
  -moz-animation: pulsing 0.3s linear 1;
  animation: pulsing 0.3s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }
.square-open-seat.is-animating .circle-button {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0); }

.circle-button {
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  width: 13.75rem;
  height: 13.75rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 50%;
  position: relative;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column; }
  @media screen and (max-width: 90.0625rem) {
    .circle-button {
      height: 10rem;
      width: 10rem; } }

.circle-button--border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 1;
  -webkit-transition: all 0.55s ease-in;
  -moz-transition: all 0.55s ease-in;
  transition: all 0.55s ease-in;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }

.circle-button--spinning-border {
  border: 2px dashed #FFF;
  position: absolute;
  -webkit-transition: border-color 0.55s ease-in;
  -moz-transition: border-color 0.55s ease-in;
  transition: border-color 0.55s ease-in;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%; }

.circle-button--fill {
  position: absolute;
  background-color: #9A81F3;
  height: 110%;
  width: 110%;
  top: 50%;
  opacity: 0;
  left: 50%;
  margin-left: -55%;
  margin-top: -55%;
  z-index: 2;
  border-radius: 50%;
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1); }

.circle-button--label {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 4; }

.icon-camera {
  display: block;
  position: relative;
  width: 5rem;
  height: 3.125rem;
  margin-bottom: 0.9375rem;
  content: ' ';
  z-index: 4;
  background-size: contain;
  background-repeat: no-repeat;
  background: url("https://cf-cdn-01.blab-img.com/static/img/_icons/call-in-camera-a84368cf63.svg");
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  -webkit-transform: stranslate3d(0, 0, 0);
  -moz-transform: stranslate3d(0, 0, 0);
  -ms-transform: stranslate3d(0, 0, 0);
  -o-transform: stranslate3d(0, 0, 0);
  transform: stranslate3d(0, 0, 0); }
  @media screen and (max-width: 90.0625rem) {
    .icon-camera {
      width: 4.0625rem;
      height: 2.5rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center; } }

.circle-button--text {
  color: #FFF;
  font-size: 1.5rem;
  display: inline-block;
  width: 100%;
  text-align: center;
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  @media screen and (max-width: 90.0625rem) {
    .circle-button--text {
      font-size: 1.125rem; } }

.circle-button:hover .circle-button--text {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
.circle-button:hover .circle-button--icon {
  opacity: 1;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; }
.circle-button:hover .circle-button--border {
  background-color: transparent;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3); }
.circle-button:hover .circle-button--spinning-border {
  border-color: #9A81F3;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite; }
.circle-button:hover .circle-button--fill {
  -webkit-animation: pulsing 0.5s linear 1;
  -moz-animation: pulsing 0.5s linear 1;
  animation: pulsing 0.5s linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes pulsing {
  50% {
    -webkit-transform: scale(1.1); }
  70% {
    -webkit-transform: scale(0.7);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    opacity: 1; } }
@-moz-keyframes pulsing {
  50% {
    -moz-transform: scale(1.1); }
  70% {
    -moz-transform: scale(0.7);
    opacity: 1; }
  100% {
    -moz-transform: scale(1);
    opacity: 1; } }
@keyframes pulsing {
  50% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  70% {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(360deg); } }
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@media screen and (max-width: 70.3125rem) {
  .embed .circle-button {
    height: 6.25rem;
    width: 6.25rem; }
  .embed .circle-button--icon {
    width: 3.125rem;
    height: 1.875rem;
    margin-bottom: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
  .embed .circle-button--text {
    font-size: 0.9375rem;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  .embed .circle-button--spinning-border {
    border-style: dotted; } }

.precall-test-cell {
  background-color: white;
  color: white;
  text-align: center;
  font-size: 22px; }

.precall-desc {
  color: white;
  text-align: center;
  font-size: 14px; }

.embed .precall-test-cell h1 {
  font-size: 12px !important;
  top: 10px !important; }

.media-tests {
  margin-top: 5%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  @media screen and (max-width: 71.25rem) {
    .media-tests {
      display: none; } }

.audio-box {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 1 auto;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  color: white;
  display: inline-block;
  height: 11.25rem;
  width: 3.75rem;
  text-align: center; }
  .audio-box > p {
    margin-top: 0.3125rem; }

.audio-container {
  display: block;
  margin: 0 auto;
  position: relative;
  background: #323232;
  height: 9.375rem;
  width: 1rem;
  overflow: hidden; }

.audio-gain-ideal {
  display: block;
  position: absolute;
  border: none;
  border-top: 1px dotted #2ba0c5;
  height: 1px;
  width: 150%;
  top: 70%;
  z-index: 1; }

.audio-container .audio-bar {
  margin: 0;
  height: 2.25rem;
  line-height: 2.25rem;
  text-align: left;
  text-overflow: clip;
  overflow: hidden;
  z-index: 0; }

.audio-container .audio-bar-positive {
  width: 100%;
  bottom: 0;
  position: absolute;
  background: #36BA90;
  color: #fff;
  z-index: 10; }

.audio-container .audio-bar-positive span {
  padding-left: 50px;
  /* need this span to fill in the left padding, otherwise it would be background colored */ }

#precall-video {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  text-align: center;
  width: 9.375rem;
  height: 9.375rem;
  display: inline-block;
  margin-left: 0.625rem; }
  #precall-video > div {
    width: 100% !important;
    height: 100% !important; }

.precall-test-list {
  padding-top: 5%; }
  @media screen and (min-width: 60rem) and (max-width: 71.25rem) {
    .precall-test-list {
      padding-top: 35%; } }
  @media screen and (max-width: 60rem) {
    .precall-test-list {
      padding-top: 10%; } }

.precall-check {
  position: fixed;
  left: 15%; }

.precall-item {
  padding-bottom: 5px; }
  @media screen and (max-width: 71.25rem) {
    .precall-item span {
      display: none; } }

.precall-test {
  color: #818181;
  text-align: center;
  padding-bottom: 2px; }
  .precall-test #square-loader {
    -webkit-transform: scale(0.7) translateY(-2px);
    -moz-transform: scale(0.7) translateY(-2px);
    -ms-transform: scale(0.7) translateY(-2px);
    -o-transform: scale(0.7) translateY(-2px);
    transform: scale(0.7) translateY(-2px); }

.precall-desc {
  color: #b1b1b1;
  text-align: center;
  font-size: 12px;
  padding-bottom: 20px; }

#stream-ended {
  height: 100%;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  overflow-y: auto; }
  #stream-ended .cell {
    text-align: center; }
  #stream-ended #play-poster {
    display: inline-block;
    background-color: red;
    pointer-events: all !important; }
  #stream-ended .start-playing-ui {
    display: inline-block;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    text-align: left;
    background-image: -webkit-linear-gradient(transparent 16%, black);
    background-image: -o-linear-gradient(transparent 16%, black);
    background-image: linear-gradient(transparent 16%, black); }
    #stream-ended .start-playing-ui span.tag {
      background-color: red;
      padding: 0.5em 1em;
      display: block; }
    #stream-ended .start-playing-ui h1 {
      font-size: 6em;
      text-align: left; }
    #stream-ended .start-playing-ui .playback-info-seat {
      padding-left: 1em;
      padding-bottom: 1em;
      text-align: left; }
  #stream-ended .ended-content-container {
    position: absolute;
    top: 65%;
    text-align: center;
    width: 100%; }
  #stream-ended .ended-content {
    max-width: 700px;
    position: relative;
    width: 90%;
    z-index: 10;
    display: inline-block;
    min-height: 700px; }
    #stream-ended .ended-content .parcipants {
      text-align: center;
      width: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; }
      #stream-ended .ended-content .parcipants .parcipant-item {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
      #stream-ended .ended-content .parcipants .avatar-image {
        margin: 1em auto;
        height: 55px;
        display: block;
        width: 55px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%; }
      #stream-ended .ended-content .parcipants a {
        text-align: center;
        font-size: 1.4em;
        margin-bottom: 1em;
        display: inline-block; }
    #stream-ended .ended-content .card-content {
      position: relative;
      width: 100%;
      height: 400px;
      border-radius: 5px;
      background-color: #fff; }
      #stream-ended .ended-content .card-content h1 {
        font-size: 3em;
        position: relative;
        top: 50%;
        transform: translateY(-50%); }
  #stream-ended .background-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    background-image: linear-gradient(-180deg, transparent 0%, black 80%); }

.video-controls {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  opacity: 1;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  bottom: 0;
  width: 100%;
  z-index: 300;
  display: inline-block;
  padding-bottom: 10px; }
  @media screen and (max-width: 70.3125rem) {
    .video-controls {
      padding-bottom: 0.3125rem; } }
  .video-controls .video-controls-container {
    width: 100%;
    max-width: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; }
  .video-controls .seek-bar-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .video-controls .seek-bar-container .seek-bar-fill-container {
      background-color: rgba(255, 255, 255, 0.3);
      width: 100%;
      position: relative;
      height: 5px;
      margin: 10px 20px;
      border-radius: 5px;
      -webkit-box-flex: o;
      -moz-box-flex: o;
      box-flex: o;
      -webkit-flex: o o auto;
      -moz-flex: o o auto;
      -ms-flex: o o auto;
      flex: o o auto; }
    .video-controls .seek-bar-container .seek-bar-fill {
      pointer-events: none;
      background-color: #AA6BE2;
      height: 100%;
      position: relative;
      border-radius: 5px;
      width: 0; }
      .video-controls .seek-bar-container .seek-bar-fill .seek-bar-handle {
        width: 18px;
        height: 18px;
        pointer-events: none;
        background-color: #AA6BE2;
        position: absolute;
        right: -8px;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
        top: -6px;
        border-radius: 50%;
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0; }
  .video-controls .seek-bar-container.dragging .seek-bar-handle,
  .video-controls .seek-bar-container:hover .seek-bar-handle {
    opacity: 1;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  .video-controls .video-actions-container {
    width: 100%;
    padding: 0 20px;
    display: block;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .video-controls .video-actions-container .volume-settings {
      height: 10px;
      margin-top: 5px;
      border-radius: 5px;
      position: relative;
      cursor: pointer;
      width: 80px;
      background-color: rgba(255, 255, 255, 0.2);
      display: inline-block;
      float: right; }
      .video-controls .video-actions-container .volume-settings .slider-container {
        height: 100%;
        pointer-events: none;
        border-radius: 5px; }
        .video-controls .video-actions-container .volume-settings .slider-container .slidebar {
          cursor: pointer;
          border-radius: 5px; }
    .video-controls .video-actions-container .video-action-button {
      cursor: pointer;
      height: 30px;
      position: relative;
      width: 30px;
      margin-left: 10px;
      display: inline-block;
      float: right;
      background-size: 75%;
      background-position: center;
      opacity: 1;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      background-repeat: no-repeat; }
      .video-controls .video-actions-container .video-action-button:hover {
        opacity: 0.9; }
    .video-controls .video-actions-container .play-button {
      height: 30px;
      width: 30px;
      display: inline-block;
      float: left;
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      -ms-transform: scale(0.75);
      -o-transform: scale(0.75);
      transform: scale(0.75); }
    .video-controls .video-actions-container .time {
      font-size: 16px;
      display: inline-block;
      float: left;
      color: #FFF;
      margin-left: 1.25rem;
      padding-top: 0.25rem; }
    .video-controls .video-actions-container .stuff {
      background-color: #FFF;
      height: 30px;
      width: 30px;
      display: inline-block;
      float: left; }

.video-contaiiner-ended #blab-video {
  width: 100%;
  height: 100%; }

#single-room:hover .video-controls {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.video-controls.paused {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.control {
  width: 30px;
  height: 30px;
  font-size: 0;
  white-space: nowrap;
  text-align: center;
  cursor: pointer; }
  .control,
  .control .left,
  .control .right, .control:before {
    display: inline-block;
    vertical-align: middle;
    transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
    transition-tiomig-function: cubic-bezier(1, 0, 0, 1); }
  .control:before {
    content: "";
    height: 30px; }
  .control.pause .left,
  .control.pause .right {
    margin: 0;
    border-left: 9.9px solid #ffF;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    height: 25.98px; }
  .control.pause .left {
    border-right: 6px solid transparent; }
  .control.play .left {
    border-left: 12.99px solid #ffF;
    border-top: 7.5px solid transparent;
    border-bottom: 7.5px solid transparent;
    border-right: 0px solid transparent;
    height: 30px; }
  .control.play .right {
    margin: 0;
    border-left: 12.99px solid #ffF;
    border-top: 7.5px solid transparent;
    border-bottom: 7.5px solid transparent;
    height: 0px; }
  .control:hover {
    border-color: #e6e6e6; }
    .control:hover .left,
    .control:hover .right {
      border-left-color: #e6e6e6; }

.vslider {
  cursor: pointer !important;
  position: relative;
  display: inline-block;
  height: 25px; }

.vslider * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
  z-index: -1; }

.vslider_sticks {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block; }

.vslider_sticks > li {
  position: relative;
  text-indent: -99999px;
  width: 5px;
  margin-right: 3px;
  height: 90%;
  top: 10%;
  float: left;
  border-radius: 5px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: height 60ms ease-out, top 60ms ease-out;
  -moz-transition: height 60ms ease-out, top 60ms ease-out;
  -ms-transition: height 60ms ease-out, top 60ms ease-out;
  -o-transition: height 60ms ease-out, top 60ms ease-out;
  transition: height 60ms ease-out, top 60ms ease-out; }
  .vslider_sticks > li:hover {
    height: 100%;
    top: 0; }

.vslider_sticks > li:last-child {
  margin-right: 0; }

.vslider_sticks > li.active {
  height: 100%;
  border-radius: 5px;
  top: 0; }

.vslider_stick {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 5px;
  background: #AA6BE2;
  opacity: 1;
  -webkit-transition: opacity 50ms ease-out;
  -moz-transition: opacity 50ms ease-out;
  -o-transition: opacity 50ms ease-out;
  -ms-transition: opacity 50ms ease-out;
  transition: opacity 50ms ease-out;
  pointer-events: none; }

#stream-ended.playback-state .video-control {
  display: block; }

#play-poster {
  vertical-align: middle;
  display: inline-block;
  margin: 0 auto;
  font-size: 18px;
  border-radius: 50%;
  height: 6.25rem;
  width: 6.25rem;
  position: relative;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer; }
  #play-poster .play {
    position: absolute;
    left: 50%;
    pointer-events: none;
    margin-left: -0.9em;
    margin-top: -1em;
    top: 50%;
    width: 2em;
    height: 2em;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/play_dark-abcdb91f04.svg"); }

.inline-icon, .widget-card-ph button .icon, .widget-card-ph.answered .state .answered-indicator span, .widget-modal .widget-container .widget-remove span, .widget-card-twitter .actions-block .action, .embed-live-meta--title .blip, .info-block .info-layer .stats-block span .icon, .left-sidebar .sidebar-widget header .pull-down a .icon, .left-sidebar .sidebar-widget header .widget-menu a .icon, .left-sidebar .info-block .info-layer .share-block .twitter-share span, .left-sidebar .info-block .info-layer .share-block .facebook-share span, .left-sidebar .info-block .info-layer .share-block .embed-share span, .left-sidebar .info-block .info-layer .share-block .capture-moment span, .tweet-item .card span .icon, .facebook-item .card span .icon {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

.playback-state-with-stats .stats-overlay {
  position: relative;
  width: 100%;
  z-index: 3; }
  .playback-state-with-stats .stats-overlay .control-container {
    position: absolute;
    top: -204px;
    left: 0;
    width: 100%;
    z-index: 10; }
  .playback-state-with-stats .stats-overlay .content-block {
    min-height: 100vh; }
  .playback-state-with-stats .stats-overlay .stats-card {
    position: relative; }

ul {
  list-style: none; }

html {
  overflow-y: auto !important; }

input[type=text] {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#loading-screen {
  width: 100%;
  background-color: #121018;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 10000000000;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  #loading-screen img {
    display: block;
    margin: 0 auto; }
  #loading-screen h1 {
    font-weight: 400;
    color: #FFF !important; }
  #loading-screen .landing-wrapper {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; }

.controls-sidebar.animateOut {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

@media screen and (max-width: 60rem) {
  .left-sidebar {
    display: none !important; } }
.left-sidebar .sidebar-widget {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background: #fafafa;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }
  .left-sidebar .sidebar-widget header {
    border-bottom: 1px solid #E8E8E8;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 0.375rem 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background: #ffffff;
    position: relative; }
    .left-sidebar .sidebar-widget header .twitter-button {
      background-color: #55acee;
      color: #FFF;
      width: 100%;
      padding: 0.5rem 0;
      text-align: center;
      border-bottom: 1px solid #3993D8; }
      .left-sidebar .sidebar-widget header .twitter-button:hover {
        background-color: #42a3ec;
        border-color: #42a3ec; }
    .left-sidebar .sidebar-widget header .facebook-button {
      background-color: #55acee;
      color: #FFF;
      width: 100%;
      padding: 0.5rem 0;
      text-align: center;
      border-bottom: 1px solid #3993D8; }
      .left-sidebar .sidebar-widget header .facebook-button:hover {
        background-color: #42a3ec;
        border-color: #42a3ec; }
    .left-sidebar .sidebar-widget header .pull-down {
      text-transform: capitalize;
      position: relative;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto; }
      .left-sidebar .sidebar-widget header .pull-down a {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        color: #818181;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: inline-block; }
        @media screen and (max-width: 90.0625rem) {
          .left-sidebar .sidebar-widget header .pull-down a {
            font-size: 0.875rem; } }
        .left-sidebar .sidebar-widget header .pull-down a:hover {
          color: #383838; }
        .left-sidebar .sidebar-widget header .pull-down a .icon {
          display: inline-block;
          width: 0.625rem;
          height: 0.625rem;
          content: ' ';
          margin-left: 0.3125rem; }
      .left-sidebar .sidebar-widget header .pull-down .pull-down-settings {
        display: none;
        pointer-events: none;
        color: #383838; }
      .left-sidebar .sidebar-widget header .pull-down .pull-down-widget {
        display: inline-block; }
      .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav {
        top: 2.5rem;
        position: absolute;
        z-index: 100;
        left: 50%;
        margin-left: -6.25rem;
        display: block; }
        .left-sidebar .sidebar-widget header .pull-down .widget-dropdown-nav.dont-show {
          display: none; }
    .left-sidebar .sidebar-widget header .customize {
      cursor: pointer;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      height: 2.25rem;
      width: 2.25rem;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
      @media screen and (max-width: 90.0625rem) {
        .left-sidebar .sidebar-widget header .customize {
          height: 1.875rem; } }
      .left-sidebar .sidebar-widget header .customize .icon {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
        opacity: 0.9;
        background-image: url(https://cf-cdn-01.blab-img.com/static/img/widget-customize-a58038b85c.png); }
      .left-sidebar .sidebar-widget header .customize:hover .icon {
        opacity: 1; }
    .left-sidebar .sidebar-widget header .widget-menu {
      position: relative;
      cursor: pointer;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      height: 2.25rem;
      width: 2.25rem;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
      @media screen and (max-width: 90.0625rem) {
        .left-sidebar .sidebar-widget header .widget-menu {
          height: 1.875rem; } }
      .left-sidebar .sidebar-widget header .widget-menu .icon {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 0.625rem;
        height: 1.25rem;
        opacity: 0.9; }
      .left-sidebar .sidebar-widget header .widget-menu .widget-icon {
        width: 1.625rem;
        height: 1.625rem; }
      .left-sidebar .sidebar-widget header .widget-menu a {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        color: #818181;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: inline-block; }
        .left-sidebar .sidebar-widget header .widget-menu a:hover {
          color: #383838; }
        .left-sidebar .sidebar-widget header .widget-menu a .icon {
          display: inline-block;
          width: 0.625rem;
          height: 0.625rem;
          content: ' ';
          margin-left: 0.3125rem; }
      .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav {
        top: 2.5rem;
        position: absolute;
        z-index: 100;
        left: 50%;
        display: block; }
        .left-sidebar .sidebar-widget header .widget-menu .widget-dropdown-nav.dont-show {
          display: none; }
      .left-sidebar .sidebar-widget header .widget-menu:hover .icon {
        opacity: 1; }
  .left-sidebar .sidebar-widget.is-settings-active .pull-down-settings {
    display: inline-block !important; }
  .left-sidebar .sidebar-widget.is-settings-active .pull-down-widget {
    display: none !important; }
  .left-sidebar .sidebar-widget.is-settings-active .customize .icon {
    background-image: url(https://cf-cdn-01.blab-img.com/static/img/widget-settings-close-e527e68fac.png) !important; }
  .left-sidebar .sidebar-widget #widget-feed {
    display: block; }
  .left-sidebar .sidebar-widget #widget-settings {
    display: block;
    text-align: center;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10; }
.left-sidebar .widget-content {
  position: relative;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  max-height: 83%; }
  .left-sidebar .widget-content .content-scroll {
    overflow-y: scroll;
    background-color: #F9F9F9;
    position: absolute;
    padding-right: 17px;
    width: 19.1875rem;
    top: 0;
    bottom: 0; }
    @media screen and (max-width: 100rem) {
      .left-sidebar .widget-content .content-scroll {
        width: 17.3125rem; } }
    @media screen and (max-width: 90.0625rem) {
      .left-sidebar .widget-content .content-scroll {
        width: 16.0625rem; } }
    .left-sidebar .widget-content .content-scroll ul {
      margin: 0;
      display: none;
      list-style-type: none; }
      .left-sidebar .widget-content .content-scroll ul.active {
        display: block !important; }
      .left-sidebar .widget-content .content-scroll ul li {
        display: inline-block;
        width: 18.125rem; }
        @media screen and (max-width: 100rem) {
          .left-sidebar .widget-content .content-scroll ul li {
            width: 16.25rem; } }
        @media screen and (max-width: 90.0625rem) {
          .left-sidebar .widget-content .content-scroll ul li {
            width: 15rem; } }
        .left-sidebar .widget-content .content-scroll ul li:last-child {
          padding-bottom: 0.9375rem; }
.left-sidebar #widget-settings {
  text-align: center; }
  .left-sidebar #widget-settings label {
    width: 95%;
    display: inline-block;
    padding: 0.625rem 0.3125rem; }
  .left-sidebar #widget-settings input {
    border: none;
    width: 95%;
    margin: 0.9375rem 0;
    padding: 0.625rem 0.3125rem;
    display: inline-block;
    background-color: #F2F2F2;
    color: #1f1f1f; }
  .left-sidebar #widget-settings button {
    background-color: #DA552F;
    color: #FFF; }
    .left-sidebar #widget-settings button:hover {
      background-color: #d04b25;
      border-color: #d04b25; }

.left-sidebar .info-block {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  text-align: center;
  background-color: black;
  width: 100%;
  z-index: 3; }
  .left-sidebar .info-block .info-block-container {
    height: 21.25rem;
    position: relative; }
    @media screen and (max-width: 100rem) {
      .left-sidebar .info-block .info-block-container {
        height: 16.25rem; } }
    @media screen and (max-width: 90.0625rem) {
      .left-sidebar .info-block .info-block-container {
        height: 14.0625rem; } }
  .left-sidebar .info-block .info-layer,
  .left-sidebar .info-block .image-composition {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .left-sidebar .info-block .info-layer {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    background: rgba(0, 0, 0, 0.88);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .left-sidebar .info-block .info-layer header {
      width: 100%;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      -webkit-box-orient: rows;
      -moz-box-orient: rows;
      box-orient: rows;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: rows;
      -moz-flex-direction: rows;
      flex-direction: rows;
      -ms-flex-direction: rows;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
      .left-sidebar .info-block .info-layer header .logo {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1 1 auto;
        -moz-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto; }
        .left-sidebar .info-block .info-layer header .logo a {
          float: left;
          margin-top: 0.1875rem;
          margin-left: 0.1875rem;
          height: 2.4375rem;
          padding: 0.1875rem;
          width: 4.375rem;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
          @media screen and (max-width: 90.0625rem) {
            .left-sidebar .info-block .info-layer header .logo a {
              height: 2.125rem; } }
      .left-sidebar .info-block .info-layer header .edit {
        cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 2.8125rem;
        height: 2.8125rem;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex; }
        @media screen and (max-width: 90.0625rem) {
          .left-sidebar .info-block .info-layer header .edit {
            width: 2.5rem;
            height: 2.5rem; } }
        .left-sidebar .info-block .info-layer header .edit span {
          opacity: 0.9;
          -webkit-box-flex: 0;
          -moz-box-flex: 0;
          box-flex: 0;
          -webkit-flex: 0 0 auto;
          -moz-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: 1.125rem;
          height: 1.125rem;
          background-image: url("https://cf-cdn-01.blab-img.com/static/img/edit_pen-2c2d06d59e.svg"); }
        .left-sidebar .info-block .info-layer header .edit:hover span {
          opacity: 1; }
      .left-sidebar .info-block .info-layer header .settings {
        cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 2.8125rem;
        height: 2.8125rem;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex; }
        @media screen and (max-width: 90.0625rem) {
          .left-sidebar .info-block .info-layer header .settings {
            width: 2.5rem;
            height: 2.5rem; } }
        .left-sidebar .info-block .info-layer header .settings span {
          opacity: 0.9;
          -webkit-box-flex: 0;
          -moz-box-flex: 0;
          box-flex: 0;
          -webkit-flex: 0 0 auto;
          -moz-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: 1.125rem;
          height: 1.125rem; }
        .left-sidebar .info-block .info-layer header .settings:hover span {
          opacity: 1; }
        .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown {
          top: 2.5rem;
          position: absolute;
          z-index: 100;
          left: 50%;
          margin-left: -6.25rem;
          display: block; }
          .left-sidebar .info-block .info-layer header .settings .stream-settings-dropdown.dont-show {
            display: none; }
    .left-sidebar .info-block .info-layer .topic-block {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      text-align: center;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column; }
      .left-sidebar .info-block .info-layer .topic-block .record-label {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: inline-block;
        color: rgba(255, 255, 255, 0.8);
        padding-bottom: 0.625rem; }
        .left-sidebar .info-block .info-layer .topic-block .record-label .blip {
          margin-right: 0.3125rem;
          width: 0.5625rem;
          border-radius: 50%;
          height: 0.5625rem;
          margin-bottom: 0.1875rem;
          display: inline-block;
          vertical-align: middle; }
          .left-sidebar .info-block .info-layer .topic-block .record-label .blip.recording {
            background-color: #F34949;
            border: 1px solid #E04A4A;
            -webkit-animation: pulse 2.4s ease-in-out infinite;
            -moz-animation: pulse 2.4s ease-in-out infinite;
            animation: pulse 2.4s ease-in-out infinite; }
        .left-sidebar .info-block .info-layer .topic-block .record-label .not-recording {
          color: rgba(255, 255, 255, 0.6);
          padding: 0.25rem 0.375rem;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 4px; }
      .left-sidebar .info-block .info-layer .topic-block .title {
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        font-size: 1.375rem;
        word-wrap: break-word;
        text-align: left;
        width: auto;
        max-width: 97%;
        color: #FFF;
        padding: 0 0.625rem;
        display: inline-block;
        content: ' ';
        background: transparent !important;
        resize: none !important;
        border: none !important; }
        .left-sidebar .info-block .info-layer .topic-block .title.center-text {
          text-align: center; }
        @media screen and (max-width: 100rem) {
          .left-sidebar .info-block .info-layer .topic-block .title {
            font-size: 1.1875rem; } }
        @media screen and (max-width: 90.0625rem) {
          .left-sidebar .info-block .info-layer .topic-block .title {
            font-size: 0.9375rem; } }
    .left-sidebar .info-block .info-layer .share-block {
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      width: 100%;
      text-align: center;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      padding: 0.375rem 0 0.8125rem 0; }
      @media screen and (max-width: 90.0625rem) {
        .left-sidebar .info-block .info-layer .share-block {
          padding: 0.25rem 0 0.4375rem 0; } }
      .left-sidebar .info-block .info-layer .share-block .twitter-share {
        width: 40%;
        height: 38px;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        color: #FFF;
        border-radius: 2px;
        background-color: #55acee;
        border: 1px solid #55acee; }
        .left-sidebar .info-block .info-layer .share-block .twitter-share span {
          width: 0.9375rem;
          height: 0.9375rem;
          vertical-align: middle;
          margin-bottom: 2px;
          margin-left: 0.375rem; }
        .left-sidebar .info-block .info-layer .share-block .twitter-share:hover {
          background-color: #47a5ed; }
      .left-sidebar .info-block .info-layer .share-block .facebook-share {
        width: 40%;
        height: 38px;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        color: #FFF;
        border-radius: 2px;
        background-color: #4f6aa3;
        border: 1px solid #4f6aa3; }
        .left-sidebar .info-block .info-layer .share-block .facebook-share span {
          width: 0.875rem;
          height: 0.875rem;
          margin-top: -3px;
          margin-left: 0.375rem; }
        .left-sidebar .info-block .info-layer .share-block .facebook-share:hover {
          background-color: #4a6399; }
      .left-sidebar .info-block .info-layer .share-block .embed-share {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        flex-shrink: 0;
        -ms-flex-negative: 0;
        width: 38px;
        height: 38px;
        border-radius: 2px;
        background-color: #474747; }
        .left-sidebar .info-block .info-layer .share-block .embed-share span {
          -webkit-box-flex: 0;
          -moz-box-flex: 0;
          box-flex: 0;
          -webkit-flex: 0 0 auto;
          -moz-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          width: 0.875rem;
          height: 0.875rem; }
        .left-sidebar .info-block .info-layer .share-block .embed-share:hover {
          background-color: #3f3f3f; }
      .left-sidebar .info-block .info-layer .share-block .capture-moment {
        margin-right: 9px;
        width: 100%;
        height: 38px;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        color: #FFF;
        border-radius: 2px;
        font-weight: 700 !important;
        line-height: 32px;
        font-size: 12px;
        background-color: #4d8ffb;
        letter-spacing: 0.5px; }
        .left-sidebar .info-block .info-layer .share-block .capture-moment span {
          width: 0.875rem;
          height: 0.875rem;
          margin-top: -3px;
          margin-left: 0.375rem; }
        .left-sidebar .info-block .info-layer .share-block .capture-moment:hover {
          background-color: #347ffa; }
    .left-sidebar .info-block .info-layer .change-topic-button {
      width: 8.75rem;
      left: 50%;
      background-color: #9A81F3;
      margin-left: -4.375rem;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      padding: 0.4375rem 0.5625rem;
      color: #FFF;
      position: absolute;
      bottom: 1.25rem;
      -webkit-transform: translate3d(0, 20%, 0);
      -moz-transform: translate3d(0, 20%, 0);
      -ms-transform: translate3d(0, 20%, 0);
      -o-transform: translate3d(0, 20%, 0);
      transform: translate3d(0, 20%, 0);
      opacity: 0;
      pointer-events: none;
      border-radius: 0.375rem;
      font-weight: 600; }
  .left-sidebar .info-block .image-composition {
    z-index: 1; }
    .left-sidebar .info-block .image-composition .image {
      background-size: cover;
      background-position: center;
      display: inline-block;
      float: left;
      width: 100%;
      height: 100%; }
    .left-sidebar .info-block .image-composition.grid-2 .image {
      width: 50%;
      height: 100%; }
    .left-sidebar .info-block .image-composition.grid-3 .image {
      width: 50%;
      height: 50%; }
    .left-sidebar .info-block .image-composition.grid-3 .image:first-child {
      height: 100%;
      width: 50%; }
    .left-sidebar .info-block .image-composition.grid-4 .image {
      width: 50%;
      height: 50%; }
  .left-sidebar .info-block.editing .info-layer {
    background: rgba(0, 0, 0, 0.95); }
  .left-sidebar .info-block.editing header .settings {
    opacity: 0;
    border-color: transparent; }
  .left-sidebar .info-block.editing header .edit {
    border-color: transparent; }
    .left-sidebar .info-block.editing header .edit span {
      background-image: url("https://cf-cdn-01.blab-img.com/static/img/close-f667d2d14d.svg"); }
  .left-sidebar .info-block.editing .title {
    -webkit-transform: translate3d(0, 10%, 0) !important;
    -moz-transform: translate3d(0, 10%, 0) !important;
    -ms-transform: translate3d(0, 10%, 0) !important;
    -o-transform: translate3d(0, 10%, 0) !important;
    transform: translate3d(0, 10%, 0) !important; }
  .left-sidebar .info-block.editing .topic-block .record-button {
    opacity: 0 !important;
    pointer-events: none !important; }
  .left-sidebar .info-block.editing .topic-block .record-label {
    opacity: 0; }
  .left-sidebar .info-block.editing .share-block {
    opacity: 0; }
  .left-sidebar .info-block.editing .change-topic-button {
    pointer-events: all;
    opacity: 1;
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -ms-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0); }
  .left-sidebar .info-block.editing .record-button {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
@-webkit-keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
@-moz-keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
@keyframes pulse {
  0% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); }
  50% {
    background: #ff5252;
    box-shadow: 0px 0px 16px 6px rgba(230, 69, 69, 0.6); }
  100% {
    background: #FF5757;
    box-shadow: 0px 0px 0px 0px rgba(230, 69, 69, 0.2); } }
.left-sidebar .record-button {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  pointer-events: all;
  overflow: hidden;
  padding: 0.8125rem 0.9375rem;
  background-color: #FF5757;
  color: #FFF;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  position: relative;
  font-weight: 700;
  width: 100%; }
  @media screen and (max-width: 90.0625rem) {
    .left-sidebar .record-button {
      padding: 0.5625rem 0; } }
  .left-sidebar .record-button:after {
    position: absolute;
    width: 100%;
    content: 'Pause Recording';
    right: 0;
    top: 0.8125rem;
    text-align: center;
    display: none; }
    @media screen and (max-width: 90.0625rem) {
      .left-sidebar .record-button:after {
        top: 0.5625rem; } }
  .left-sidebar .record-button .pause-icon {
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    background-color: #EC4242;
    display: none; }
    .left-sidebar .record-button .pause-icon .icon {
      height: 35%;
      width: 35%;
      opacity: 0.9;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
  .left-sidebar .record-button.recording:after {
    display: block; }
  .left-sidebar .record-button.recording .state {
    opacity: 0; }
  .left-sidebar .record-button.recording .pause-icon {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
  .left-sidebar .record-button:hover {
    background-color: #ff4848; }

.share-button-wrapper {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify;
  padding: 5px; }
  .share-button-wrapper button {
    cursor: pointer;
    font-weight: 600 !important; }

.chat-message {
  padding: 0.4375rem 0.625rem; }
  .chat-message .chat-message-wrapper {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row; }
    .chat-message .chat-message-wrapper .avatar-block {
      position: relative;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      padding-right: 0.625rem;
      max-height: 1.875rem; }
      .chat-message .chat-message-wrapper .avatar-block .profile-avatar {
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 50%; }
        @media screen and (max-width: 90.0625rem) {
          .chat-message .chat-message-wrapper .avatar-block .profile-avatar {
            width: 1.75rem;
            height: 1.75rem; } }
      .chat-message .chat-message-wrapper .avatar-block .timestamp-tip {
        position: absolute;
        width: 6.25rem;
        left: -6.25rem; }
        .chat-message .chat-message-wrapper .avatar-block .timestamp-tip span {
          color: #FFF;
          font-weight: 200; }
      .chat-message .chat-message-wrapper .avatar-block .badge {
        border: 2px solid #1E1E1E;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        top: -0.3125rem;
        position: absolute;
        left: -0.3125rem;
        background-repeat: no-repeat;
        background-size: 55%;
        background-position: 50% 45%;
        background-color: #636363; }
        .chat-message .chat-message-wrapper .avatar-block .badge.host {
          background-image: url(https://cf-cdn-01.blab-img.com/static/img/host-icon-194a76b4d8.svg); }
        .chat-message .chat-message-wrapper .avatar-block .badge.guest {
          background-image: url(https://cf-cdn-01.blab-img.com/static/img/guest-icon-995aa3cecb.svg); }
      .chat-message .chat-message-wrapper .avatar-block .messageBadge {
        border-radius: 50%;
        right: -0.5rem;
        bottom: -0.8125rem;
        width: 1.5625rem;
        height: 1.5625rem;
        border: 2px solid #1E1E1E;
        position: absolute;
        z-index: 2; }
    .chat-message .chat-message-wrapper .message-block {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      position: relative; }
      .chat-message .chat-message-wrapper .message-block .actions-block {
        width: 100%; }
        .chat-message .chat-message-wrapper .message-block .actions-block .username {
          display: inline-block;
          vertical-align: middle;
          color: #F3F3F3;
          font-weight: 700; }
        .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container {
          display: inline-block;
          opacity: 0;
          pointer-events: none;
          position: relative;
          vertical-align: middle;
          padding: 2px 7px; }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .favorite-msg {
            background-image: url("https://cf-cdn-01.blab-img.com/static/img/chat_favorite_light-267cbaf73f.png");
            display: inline-block;
            opacity: 0.3;
            width: 0.875rem;
            vertical-align: middle;
            height: 1.0625rem;
            content: ' ';
            margin-left: 2px;
            border-radius: 0px;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -ms-transform: scale(1.1);
            -o-transform: scale(1.1);
            transform: scale(1.1); }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .favorite-count {
            color: #D3DAE4;
            opacity: 0.3;
            vertical-align: middle;
            font-weight: 600; }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container .floating-star {
            cursor: pointer;
            background-image: url("https://cf-cdn-01.blab-img.com/static/img/chat_favorite_gold-e2ccb58a9b.png");
            opacity: 0.7; }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container:hover {
            cursor: pointer; }
            .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container:hover .favorite-msg,
            .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container:hover .favorite-count {
              opacity: 0.7; }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container.clicked .favorite-count {
            color: #FAB260; }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container.clicked .favorite-msg {
            -webkit-animation: clicked-fav 1s ease-in;
            -moz-animation: clicked-fav 1s ease-in;
            animation: clicked-fav 1s ease-in;
            -webkit-animation-iteration-count: 1;
            -moz-animation-iteration-count: 1;
            animation-iteration-count: 1;
            -webkit-animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            background-image: url("https://cf-cdn-01.blab-img.com/static/img/chat_favorite_gold-e2ccb58a9b.png"); }
          .chat-message .chat-message-wrapper .message-block .actions-block .favorite-container.faved {
            opacity: 1 !important;
            pointer-events: all !important; }
        .chat-message .chat-message-wrapper .message-block .actions-block .reply-msg {
          cursor: pointer;
          pointer-events: none;
          display: inline-block;
          background-image: url("https://cf-cdn-01.blab-img.com/static/img/reply_unclicked-1a1223d01d.png");
          cursor: pointer;
          width: 0.875rem;
          opacity: 0;
          vertical-align: middle;
          height: 1.0625rem;
          content: ' ';
          margin-left: 2px;
          border-radius: 0px; }
          .chat-message .chat-message-wrapper .message-block .actions-block .reply-msg:hover {
            opacity: 0.7 !important; }
      .chat-message .chat-message-wrapper .message-block .text {
        display: block;
        color: rgba(255, 255, 255, 0.85);
        word-wrap: break-word;
        word-break: break-word;
        padding-top: 3px; }
        @media screen and (min-width: 90.0625rem) {
          .chat-message .chat-message-wrapper .message-block .text {
            font-weight: 600; } }
        .chat-message .chat-message-wrapper .message-block .text .mentioned {
          background-color: #8765ad;
          color: #FFF;
          border-radius: 3px;
          padding: 2px 4px; }
        .chat-message .chat-message-wrapper .message-block .text.chat-question {
          padding: 0.5rem;
          margin-top: 0.5rem;
          background-color: #343434;
          border-radius: 4px; }
      .chat-message .chat-message-wrapper .message-block .media-image {
        max-width: 100%;
        max-height: 6.875rem; }
    .chat-message .chat-message-wrapper .delete-msg-container {
      cursor: pointer;
      height: 1.625rem;
      width: 1.625rem;
      position: absolute;
      display: none;
      right: 0;
      bottom: -0.4375rem;
      right: -0.625rem; }
      .chat-message .chat-message-wrapper .delete-msg-container .triangle {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 26px 26px;
        border-color: transparent transparent #FF4747 transparent; }
      .chat-message .chat-message-wrapper .delete-msg-container .delete-chat {
        float: right;
        display: block;
        position: absolute;
        bottom: 3px;
        right: 2px;
        z-index: 100;
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/_chat/chat-delete-3c1f22fa15.png");
        height: 0.5625rem;
        vertical-align: middle;
        width: 0.5625rem; }
        .chat-message .chat-message-wrapper .delete-msg-container .delete-chat:hover {
          opacity: 1; }
  .chat-message:hover {
    background: #282828; }
    .chat-message:hover .badge {
      border: 2px solid #2B2B2B !important; }
    .chat-message:hover .reply-msg {
      opacity: 0.3 !important;
      pointer-events: all !important; }
    .chat-message:hover .favorite-container {
      opacity: 1 !important;
      pointer-events: all !important; }
    .chat-message:hover .delete-msg-container {
      display: block; }
  .chat-message.repeat {
    color: #FFF; }

.favorited-by-container {
  position: absolute;
  background-color: #FFF;
  top: -2.625rem;
  border-radius: 2px;
  padding-top: 0.3125rem;
  height: 2.5rem;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  z-index: 1000;
  -webkit-transform: translate3d(-45%, -25%, 0);
  -moz-transform: translate3d(-45%, -25%, 0);
  -ms-transform: translate3d(-45%, -25%, 0);
  -o-transform: translate3d(-45%, -25%, 0);
  transform: translate3d(-45%, -25%, 0);
  opacity: 0;
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  background-color: #2F2F2F;
  box-shadow: 0 0 1px 3px transparent;
  pointer-events: none; }

.favorited-by {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-right: 0.4375rem; }
  .favorited-by:first-child {
    margin-left: 0.625rem; }
  .favorited-by:last-child {
    margin-right: 0.625rem; }

.favorited-by--number {
  text-align: center;
  line-height: 2.4;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1;
  background-color: #888888;
  border-radius: 50%;
  color: #3A3A3A; }

.favorite-container.faved:hover .favorited-by-container {
  box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate3d(-45%, 0, 0);
  -moz-transform: translate3d(-45%, 0, 0);
  -ms-transform: translate3d(-45%, 0, 0);
  -o-transform: translate3d(-45%, 0, 0);
  transform: translate3d(-45%, 0, 0);
  opacity: 1; }

@media screen and (max-width: 70.3125rem) {
  .embed .chat-message {
    padding: 7px !important; }
    .embed .chat-message .avatar-block {
      padding-right: 7px !important; }
      .embed .chat-message .avatar-block .profile-avatar {
        width: 1.75rem;
        height: 1.75rem; }
      .embed .chat-message .avatar-block .badge {
        width: 0.9375rem;
        height: 0.9375rem; }
      .embed .chat-message .avatar-block .messageBadge {
        width: 1.25rem;
        height: 1.25rem;
        right: -0.375rem;
        bottom: -0.25rem; }
    .embed .chat-message .message-block .username {
      font-size: 0.75rem !important;
      line-height: 1 !important;
      font-weight: 600 !important; }
    .embed .chat-message .message-block .text {
      font-size: 0.75rem !important;
      font-weight: 400 !important;
      line-height: 1.5 !important; }
      .embed .chat-message .message-block .text.chat-question {
        padding: 0.375rem;
        padding-left: 0.5rem; }
    .embed .chat-message .message-block .actions-block .favorite-container {
      padding: 0 0.25rem; }
      .embed .chat-message .message-block .actions-block .favorite-container .favorite-msg {
        width: 0.8125rem;
        height: 0.625rem; }
      .embed .chat-message .message-block .actions-block .favorite-container .favorite-count {
        line-height: 1; }
    .embed .chat-message .message-block .actions-block .reply-msg {
      height: 0.625rem;
      width: 0.8125rem; }
    .embed .chat-message .message-block .actions-block .delete-chat {
      width: 0.6875rem;
      height: 0.6875rem;
      margin-top: 0.375rem; }
  .embed .joined-item,
  .embed .topic-item,
  .embed .tweet-item {
    display: none !important; } }

@-webkit-keyframes clicked-fav {
  0% {
    -webkit-transform: scale(1); }
  18% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1.1); }
  55% {
    -webkit-transform: scale(0.9); }
  65% {
    -webkit-transform: scale(1.1); }
  70% {
    -webkit-transform: scale(0.95); }
  78% {
    -webkit-transform: scale(1); }
  100% {
    -webkit-transform: scale(1); } }
@-moz-keyframes clicked-fav {
  0% {
    -moz-transform: scale(1); }
  18% {
    -moz-transform: scale(0); }
  40% {
    -moz-transform: scale(1.1); }
  55% {
    -moz-transform: scale(0.9); }
  65% {
    -moz-transform: scale(1.1); }
  70% {
    -moz-transform: scale(0.95); }
  78% {
    -moz-transform: scale(1); }
  100% {
    -moz-transform: scale(1); } }
@keyframes clicked-fav {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  18% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  55% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  65% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  70% {
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  78% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.floating-star {
  width: 11px;
  height: 11px;
  opacity: 0.8;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: 5px;
  background-image: url("https://cf-cdn-01.blab-img.com/static/img/chat_favorite_gold-e2ccb58a9b.png");
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0); }
  .floating-star.animate-up-star-1 {
    -webkit-animation: animate-up-star-1 0.5s ease-in;
    -moz-animation: animate-up-star-1 0.5s ease-in;
    animation: animate-up-star-1 0.5s ease-in; }
  .floating-star.animate-up-star-2 {
    -webkit-animation: animate-up-star-2 0.5s ease-in;
    -moz-animation: animate-up-star-2 0.5s ease-in;
    animation: animate-up-star-2 0.5s ease-in; }
  .floating-star.animate-up-star-3 {
    -webkit-animation: animate-up-star-3 0.5s ease-in;
    -moz-animation: animate-up-star-3 0.5s ease-in;
    animation: animate-up-star-3 0.5s ease-in; }

@-webkit-keyframes animate-up-star-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -webkit-transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    opacity: 0; } }
@-moz-keyframes animate-up-star-1 {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -moz-transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    opacity: 0; } }
@keyframes animate-up-star-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -webkit-transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    -moz-transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    -ms-transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    -o-transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    transform: translate3d(5px, -20px, 0) rotate(90deg) scale(1.4);
    opacity: 0; } }
@-webkit-keyframes animate-up-star-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -webkit-transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    opacity: 0; } }
@-moz-keyframes animate-up-star-2 {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -moz-transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    opacity: 0; } }
@keyframes animate-up-star-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -webkit-transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    -moz-transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    -ms-transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    -o-transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    transform: translate3d(-5px, -30px, 0) rotate(140deg) scale(1.4);
    opacity: 0; } }
@-webkit-keyframes animate-up-star-3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -webkit-transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    opacity: 0; } }
@-moz-keyframes animate-up-star-3 {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -moz-transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    opacity: 0; } }
@keyframes animate-up-star-3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 0.8; }
  100% {
    -webkit-transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    -moz-transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    -ms-transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    -o-transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    transform: translate3d(-10px, -20px, 0) rotate(120deg) scale(1.4);
    opacity: 0; } }
.joined-item {
  padding: 0.4375rem 0.625rem; }
  .joined-item .card {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem; }
    .joined-item .card span {
      color: #FFF;
      font-weight: 200; }
      .joined-item .card span .username {
        font-weight: 600;
        color: #FFF; }
  .joined-item .new-user {
    background-color: #5FA478;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/_chat/joined-bg-22076bfe00.png");
    background-size: 100% 150%;
    text-align: center;
    background-position-y: -10px; }
  .joined-item .text {
    color: white;
    font-size: 1em;
    margin: 20 0 20 0; }
  .joined-item .chat-button {
    color: white;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 3px;
    padding: 5px;
    width: 100%;
    text-align: center; }
    .joined-item .chat-button:hover {
      background-color: rgba(255, 255, 255, 0.1); }
  .joined-item .welcomed {
    cursor: not-allowed;
    opacity: .5; }
    .joined-item .welcomed:hover {
      background-color: rgba(255, 255, 255, 0) !important; }

.tweet-item {
  padding: 0.4375rem 0.625rem; }
  .tweet-item .card {
    background-color: rgba(85, 172, 238, 0.7);
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem; }
    @media screen and (max-width: 81.25rem) {
      .tweet-item .card {
        padding: 0.25rem 0.75rem;
        border-radius: 0.125rem;
        font-size: 0.75rem; } }
    .tweet-item .card span {
      color: #FFF;
      font-weight: 200; }
      .tweet-item .card span .username {
        font-weight: 600;
        color: #FFF; }
      @media screen and (max-width: 85rem) {
        .tweet-item .card span .label {
          display: none; } }
      .tweet-item .card span .icon {
        margin-left: 0.375rem;
        margin-bottom: 0.125rem;
        height: 0.8125rem;
        width: 0.8125rem; }

.topic-item {
  padding: 0.4375rem 0.625rem; }
  .topic-item .card {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem; }
    .topic-item .card span {
      color: #FFF;
      font-weight: 200; }
      .topic-item .card span .username {
        font-weight: 600;
        color: #FFF; }
    .topic-item .card p {
      color: #FFF;
      margin-top: 0.3125rem; }

.facebook-item {
  padding: 0.4375rem 0.625rem; }
  .facebook-item .card {
    background-color: rgba(59, 89, 152, 0.7);
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem; }
    @media screen and (max-width: 81.25rem) {
      .facebook-item .card {
        padding: 0.25rem 0.75rem;
        border-radius: 0.125rem;
        font-size: 0.75rem; } }
    .facebook-item .card span {
      color: #FFF;
      font-weight: 200; }
      .facebook-item .card span .username {
        font-weight: 600;
        color: #FFF; }
      @media screen and (max-width: 85rem) {
        .facebook-item .card span .label {
          display: none; } }
      .facebook-item .card span .icon {
        margin-left: 0.375rem;
        margin-bottom: 0.125rem;
        height: 0.8125rem;
        width: 0.8125rem; }

#react-map {
  position: relative;
  background-color: #22282B; }

#map {
  position: relative;
  height: 150px;
  background-color: #22282B; }

#react-chat-input {
  position: relative; }

@media screen and (max-width: 60rem) {
  .right-sidebar {
    width: 100% !important;
    height: 50% !important;
    z-index: 100000000;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; } }
.right-sidebar .sidebar-header {
  background-color: #191919;
  height: 2.8125rem;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  position: relative;
  font-weight: 700;
  z-index: 1000; }
  @media screen and (max-width: 60rem) {
    .right-sidebar .sidebar-header {
      display: none !important; } }
  .right-sidebar .sidebar-header .chat-filters {
    width: 100%; }
    .right-sidebar .sidebar-header .chat-filters li {
      display: inline-block;
      float: left;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      width: 50%;
      height: 100%;
      border-bottom: 2px solid #383838;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
      .right-sidebar .sidebar-header .chat-filters li span {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        color: rgba(255, 255, 255, 0.9); }
      .right-sidebar .sidebar-header .chat-filters li.full-width {
        width: 100%;
        border-color: #383838 !important; }
    .right-sidebar .sidebar-header .chat-filters .tab-selected {
      border-color: #B060F6; }
      .right-sidebar .sidebar-header .chat-filters .tab-selected li span {
        color: #FFF; }
.right-sidebar .chat-content {
  position: relative;
  background-color: #1E1E1E;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }
  .right-sidebar .chat-content .content-scroll {
    overflow-y: auto;
    position: absolute;
    max-height: 100%;
    width: 307px;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; }
    @media screen and (max-width: 100rem) {
      .right-sidebar .chat-content .content-scroll {
        width: 277px; } }
    @media screen and (max-width: 90.0625rem) {
      .right-sidebar .chat-content .content-scroll {
        width: 257px; } }
    @media screen and (max-width: 60rem) {
      .right-sidebar .chat-content .content-scroll {
        width: 100%;
        padding: 0; } }
    .right-sidebar .chat-content .content-scroll ul {
      list-style: none;
      position: relative; }
      .right-sidebar .chat-content .content-scroll ul li {
        display: inline-block;
        width: 290px; }
        @media screen and (max-width: 100rem) {
          .right-sidebar .chat-content .content-scroll ul li {
            width: 260px; } }
        @media screen and (max-width: 90.0625rem) {
          .right-sidebar .chat-content .content-scroll ul li {
            width: 240px; } }
        @media screen and (max-width: 60rem) {
          .right-sidebar .chat-content .content-scroll ul li {
            width: 100%; } }
    .right-sidebar .chat-content .content-scroll .hidden-chat-list {
      display: none; }
.right-sidebar .slash {
  position: absolute;
  right: 10px;
  top: 12px;
  background-color: #161616;
  padding: 11px;
  padding-top: 16px;
  width: 30px;
  border-radius: 100%;
  height: 30px;
  color: white;
  font-weight: 900;
  line-height: 0;
  font-size: 1.4em;
  opacity: 0.6;
  cursor: pointer; }
.right-sidebar .slash:hover {
  opacity: 1; }
.right-sidebar .chat-input {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #000;
  background-color: #2C2C2C;
  width: 100%; }
  @media screen and (max-width: 90.0625rem) {
    .right-sidebar .chat-input .slash {
      right: 10px;
      top: 5px; } }
  .right-sidebar .chat-input .textarea-wrapper {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    border: none;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    border-radius: 0.3em;
    padding: 1rem 0 1rem 0.625rem;
    cursor: text !important; }
    @media screen and (max-width: 90.0625rem) {
      .right-sidebar .chat-input .textarea-wrapper {
        padding: 0.7rem 0 0.7rem 0.5rem; } }
    .right-sidebar .chat-input .textarea-wrapper .chat-textarea {
      width: 100%;
      padding: 0 !important;
      background: none;
      border: none;
      resize: none;
      font-weight: 400;
      color: #FFF; }
      @media screen and (max-width: 90.0625rem) {
        .right-sidebar .chat-input .textarea-wrapper .chat-textarea {
          font-size: 0.8125rem; } }
  .right-sidebar .chat-input .emoji-picker {
    cursor: pointer;
    width: 2.25rem;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; }
    .right-sidebar .chat-input .emoji-picker .icon {
      display: none;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 1rem;
      height: 1rem;
      opacity: 0.85;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in; }
    .right-sidebar .chat-input .emoji-picker:hover .icon {
      opacity: 1; }
.right-sidebar .missed-messages-container {
  position: absolute;
  bottom: -1px;
  cursor: pointer;
  display: block;
  background-color: rgba(154, 99, 193, 0.95);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  text-align: center;
  width: 100%;
  z-index: 10; }
  .right-sidebar .missed-messages-container .missed-wrapper {
    padding: 0.4375rem 0; }
    .right-sidebar .missed-messages-container .missed-wrapper span {
      color: #FFF; }
    .right-sidebar .missed-messages-container .missed-wrapper .arrow {
      display: inline-block;
      content: ' ';
      width: 1.2em;
      margin-left: 0.82em;
      height: 1.2em;
      vertical-align: top;
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url(https://cf-cdn-01.blab-img.com/static/img/down_arrow_chat-f74e473ecd.png); }
  .right-sidebar .missed-messages-container.is-hidden {
    display: none; }
.right-sidebar.light-theme {
  background-color: #FFF; }
  .right-sidebar.light-theme .sidebar-header .chat-filters li {
    background-color: #FFF;
    border-color: #EFEFEF; }
    .right-sidebar.light-theme .sidebar-header .chat-filters li.tab-selected {
      border-color: #B060F6; }
    .right-sidebar.light-theme .sidebar-header .chat-filters li span {
      color: #828282; }
    .right-sidebar.light-theme .sidebar-header .chat-filters li.full-width {
      width: 100%;
      border-color: #EFEFEF !important; }
  .right-sidebar.light-theme .chat-content {
    background-color: #FFF; }
    .right-sidebar.light-theme .chat-content .content-scroll ul li {
      background-color: #FFF; }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .chat-message-wrapper .message-block .text {
        color: #868686; }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .chat-message-wrapper .message-block .actions-block .username {
        color: #2A2B2D; }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .chat-message-wrapper .message-block .actions-block .favorite-container .favorite-msg {
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/chat_favorite_dark-015f7ffa00.png"); }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .chat-message-wrapper .message-block .actions-block .favorite-container.clicked .favorite-msg {
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/chat_favorite_gold-e2ccb58a9b.png"); }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .chat-message-wrapper .message-block .actions-block .reply-msg {
        background-image: url("https://cf-cdn-01.blab-img.com/static/img/reply-d36f5af8c8.png"); }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .chat-message-wrapper .avatar-block .badge {
        border: 2px solid #FFF; }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .card {
        background-color: #F4F4F7; }
        .right-sidebar.light-theme .chat-content .content-scroll ul li .card span {
          color: #4A4A4A; }
          .right-sidebar.light-theme .chat-content .content-scroll ul li .card span .username {
            color: #4A4A4A; }
        .right-sidebar.light-theme .chat-content .content-scroll ul li .card p {
          color: #4A4A48; }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .favorited-by-container {
        background-color: #FDFDFD; }
      .right-sidebar.light-theme .chat-content .content-scroll ul li .favorited-by--number {
        color: #4A4A4A;
        background-color: #ECECED; }
    .right-sidebar.light-theme .chat-content .content-scroll ul .tweet-item .card {
      background-color: #55acee; }
      .right-sidebar.light-theme .chat-content .content-scroll ul .tweet-item .card span {
        color: #FFF; }
        .right-sidebar.light-theme .chat-content .content-scroll ul .tweet-item .card span .username {
          color: #FFF; }
    .right-sidebar.light-theme .chat-content .content-scroll ul .chat-message:hover {
      background-color: #F4F4F7; }
      .right-sidebar.light-theme .chat-content .content-scroll ul .chat-message:hover .avatar-block .badge {
        border: 2px solid #F4F4F7 !important; }
  .right-sidebar.light-theme .chat-input {
    border-top: 1px solid #E0E0E0;
    background-color: #F7F7F7; }
    .right-sidebar.light-theme .chat-input .textarea-wrapper .chat-textarea {
      color: #616161; }

.embed .missed-messages-container {
  position: absolute;
  bottom: -1px;
  cursor: pointer;
  display: block;
  background-color: rgba(154, 99, 193, 0.95);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
  width: 100%;
  z-index: 10; }
  .embed .missed-messages-container .missed-wrapper {
    padding: 0.3125rem 0; }
    .embed .missed-messages-container .missed-wrapper span {
      color: #FFF;
      font-size: 12px; }
    .embed .missed-messages-container .missed-wrapper .arrow {
      width: 1.2em;
      height: 1.2em;
      vertical-align: middle; }

.stream-full-background-hack {
  background: rgba(0, 0, 0, 0.9); }

.room-container {
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row; }
  @media screen and (max-width: 60rem) {
    .room-container {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column; } }
  .room-container.is-unscheduled {
    background: rgba(0, 0, 0, 0.9); }

.sidebar {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #FFF;
  width: 290px;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); }
  @media screen and (max-width: 100rem) {
    .sidebar {
      width: 260px; } }
  @media screen and (max-width: 90.0625rem) {
    .sidebar {
      width: 240px; } }
  .sidebar .content-scroll {
    padding-right: 17px; }
  @media screen and (max-width: 60rem) {
    .sidebar {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      max-height: calc(100vh - 100vw); } }

.stream {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1;
  -moz-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  position: relative;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  z-index: 120; }
  @media screen and (max-width: 60rem) {
    .stream {
      height: 100vw;
      width: 100vw; } }
  .stream .user-list-container {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    padding: 7px 0;
    overflow: hidden !important;
    z-index: 4; }
  .stream .stream-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center; }
    @media screen and (max-width: 60rem) {
      .stream .stream-container {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto; } }
  .stream .stream-square-container {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    margin: 0 auto; }
  .stream .stream-square-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; }

.stream.react-replay-container {
  overflow: scroll !important; }

#embed-container.stream.react-replay-container {
  overflow: hidden !important; }

.stream-started--bg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1; }

@media screen and (max-width: 37.5rem) {
  .user-list-container {
    display: none !important; } }
.user-list-container .count {
  display: inline-block; }
  .user-list-container .count p {
    display: inline-block; }
.user-list-container #user-list {
  list-style: none;
  position: relative;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-left: 0px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden; }
  .user-list-container #user-list h4 {
    display: table-cell;
    vertical-align: middle; }
  .user-list-container #user-list p {
    display: table-cell;
    vertical-align: middle;
    color: white;
    padding: 0 10px;
    font-size: 0.9375rem;
    margin: 0;
    font-weight: 700; }
  .user-list-container #user-list p:last-child {
    padding-left: 8px;
    font-weight: 500; }

#user-list li:first-child {
  background-color: #272727;
  display: inline-table;
  border-radius: 25px;
  height: 30px;
  max-height: 30px;
  vertical-align: middle;
  text-align: center;
  margin: 0 1em; }
  #user-list li:first-child span {
    display: inline-block; }

#user-list .viewer {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  white-space: nowrap;
  height: 28px;
  width: 28px;
  vertical-align: middle;
  border-radius: 50%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  background-size: cover;
  background-position: center; }

#user-list .viewer.bounceIn {
  -webkit-animation: BounceIn 0.8s ease-in-out 1;
  -moz-animation: BounceIn 0.8s ease-in-out 1;
  animation: BounceIn 0.8s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

#user-list .viewer.bounceOut {
  -webkit-animation: BounceOut 0.45s ease-in-out 1;
  -moz-animation: BounceOut 0.45s ease-in-out 1;
  animation: BounceOut 0.45s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.lurkers-count-container {
  display: inline-block;
  border-radius: 40px;
  height: 35px;
  width: 35px;
  max-height: 50px;
  vertical-align: middle;
  cursor: pointer !important;
  -webkit-transition: all, 0.15s, ease-in;
  -moz-transition: all, 0.15s, ease-in;
  transition: all, 0.15s, ease-in;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }
  .lurkers-count-container:hover {
    opacity: .9; }
  .lurkers-count-container p {
    padding-top: 10px !important;
    display: block !important;
    font-size: 12px !important; }

@-webkit-keyframes BounceIn {
  0% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1.15); }
  60% {
    -webkit-transform: scale(0.9); }
  80% {
    -webkit-transform: scale(1.05); }
  100% {
    -webkit-transform: scale(1); } }
@-moz-keyframes BounceIn {
  0% {
    -moz-transform: scale(0); }
  40% {
    -moz-transform: scale(1.15); }
  60% {
    -moz-transform: scale(0.9); }
  80% {
    -moz-transform: scale(1.05); }
  100% {
    -moz-transform: scale(1); } }
@keyframes BounceIn {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15); }
  60% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  80% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-webkit-keyframes BounceOut {
  0% {
    -webkit-transform: scale(1); }
  40% {
    -webkit-transform: scale(1.01);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0);
    opacity: 0; } }
@-moz-keyframes BounceOut {
  0% {
    -moz-transform: scale(1); }
  40% {
    -moz-transform: scale(1.01);
    opacity: 1; }
  100% {
    -moz-transform: scale(0);
    opacity: 0; } }
@keyframes BounceOut {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  40% {
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
    transform: scale(1.01);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0; } }
#user-list li img {
  width: 30px;
  height: 30px;
  border-radius: 50%; }

.legacy-modal-container {
  width: 100%;
  position: fixed;
  height: 100%;
  display: table;
  z-index: 1000000;
  top: 0;
  left: 0; }
  .legacy-modal-container .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(14, 8, 32, 0.8);
    opacity: 1;
    pointer-events: none;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out; }

.viewers-count-container {
  cursor: pointer !important;
  opacity: 1;
  -webkit-transition: all, 0.15s, ease-in;
  -moz-transition: all, 0.15s, ease-in;
  transition: all, 0.15s, ease-in;
  position: relative; }
  .viewers-count-container:hover {
    opacity: .9; }
  .viewers-count-container .see-more-tip {
    position: absolute;
    bottom: -18px;
    right: 0;
    left: 0;
    text-align: center;
    color: #cad4e2;
    font-size: 1.1em; }
  .viewers-count-container #total-viewers-count {
    margin-left: 10px;
    padding-left: 25px;
    background: url("https://cf-cdn-01.blab-img.com/static/img/_icons/total_viewers_icon-da6fa83ba3.svg");
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: left center; }
  .viewers-count-container #viewer-count {
    padding-left: 25px;
    background: url("https://cf-cdn-01.blab-img.com/static/img/_icons/live_viewers_icon-1bc721d938.svg");
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: left center; }
  .viewers-count-container p:first-child {
    padding-right: 0 !important; }

.caller-feels {
  z-index: 4;
  position: absolute;
  bottom: 0.625rem;
  vertical-align: middle;
  right: 0.625rem;
  display: inline; }
  .caller-feels p {
    font-size: 1.25rem;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    color: #FFF;
    margin: 0;
    font-weight: 800;
    display: inline-block;
    vertical-align: bottom; }
  .caller-feels .hands-icon {
    margin-left: 0.5rem;
    display: inline-block;
    background-image: url("https://cf-cdn-01.blab-img.com/static/img/handsUp-95fb1189b6.png");
    height: 1.75rem;
    width: 1.75rem;
    vertical-align: middle; }
  @media screen and (max-width: 100rem) {
    .caller-feels .hands-icon {
      width: 1.5625rem;
      height: 1.5625rem; }
    .caller-feels p {
      font-size: 1.25rem; } }
  @media screen and (max-width: 90.0625rem) {
    .caller-feels .hands-icon {
      width: 1.25rem;
      height: 1.25rem; }
    .caller-feels p {
      font-size: 0.9375rem; } }

.feel {
  overflow: hidden;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: table;
  margin-left: 5px;
  position: relative;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in; }

.feel.animate svg {
  -webkit-animation: upAndBack 1.2s ease-in-out 1;
  -moz-animation: upAndBack 1.2s ease-in-out 1;
  animation: upAndBack 1.2s ease-in-out 1; }

.feel:hover {
  box-shadow: 4px 1px 5px transparent; }
  .feel:hover svg {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
    .feel:hover svg path {
      fill: #724DC5; }

.feels.animateUp-1 {
  -webkit-animation: animateUp-1 1.5s ease-in-out 1;
  -moz-animation: animateUp-1 1.5s ease-in-out 1;
  animation: animateUp-1 1.5s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.feels.animateUp-2 {
  -webkit-animation: animateUp-2 1.5s ease-in-out 1;
  -moz-animation: animateUp-2 1.5s ease-in-out 1;
  animation: animateUp-2 1.5s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.feels.animateUp-3 {
  -webkit-animation: animateUp-3 1.5s ease-in-out 1;
  -moz-animation: animateUp-3 1.5s ease-in-out 1;
  animation: animateUp-3 1.5s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.feels {
  position: absolute;
  bottom: 1em;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 10000;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

@-webkit-keyframes animateUp-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate3d(0px, 0px, 0px); }
  75% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1) translate3d(-25px, -90px, 0px);
    @media screen and (max-width: 70.3125rem) {
      -webkit-transform: scale(1) translate3d(-25px, -40px, 0px); }
    opacity: 0; } }
@-moz-keyframes animateUp-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0) translate3d(0px, 0px, 0px); }
  75% {
    opacity: 1; }
  100% {
    -moz-transform: scale(1) translate3d(-25px, -90px, 0px);
    @media screen and (max-width: 70.3125rem) {
      -moz-transform: scale(1) translate3d(-25px, -40px, 0px); }
    opacity: 0; } }
@keyframes animateUp-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate3d(0px, 0px, 0px);
    -moz-transform: scale(0) translate3d(0px, 0px, 0px);
    -ms-transform: scale(0) translate3d(0px, 0px, 0px);
    -o-transform: scale(0) translate3d(0px, 0px, 0px);
    transform: scale(0) translate3d(0px, 0px, 0px); }
  75% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1) translate3d(-25px, -90px, 0px);
    -moz-transform: scale(1) translate3d(-25px, -90px, 0px);
    -ms-transform: scale(1) translate3d(-25px, -90px, 0px);
    -o-transform: scale(1) translate3d(-25px, -90px, 0px);
    transform: scale(1) translate3d(-25px, -90px, 0px);
    @media screen and (max-width: 70.3125rem) {
      -webkit-transform: scale(1) translate3d(-25px, -40px, 0px);
      -moz-transform: scale(1) translate3d(-25px, -40px, 0px);
      -ms-transform: scale(1) translate3d(-25px, -40px, 0px);
      -o-transform: scale(1) translate3d(-25px, -40px, 0px);
      transform: scale(1) translate3d(-25px, -40px, 0px); }
    opacity: 0; } }
@-webkit-keyframes animateUp-2 {
  0% {
    -webkit-transform: scale(0) translate3d(0, 0px, 0px);
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1) translate3d(-40px, -80px, 0);
    opacity: 0;
    @media screen and (max-width: 70.3125rem) {
      -webkit-transform: scale(1) translate3d(-25px, -34px, 0px); } } }
@-moz-keyframes animateUp-2 {
  0% {
    -moz-transform: scale(0) translate3d(0, 0px, 0px);
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    -moz-transform: scale(1) translate3d(-40px, -80px, 0);
    opacity: 0;
    @media screen and (max-width: 70.3125rem) {
      -moz-transform: scale(1) translate3d(-25px, -34px, 0px); } } }
@keyframes animateUp-2 {
  0% {
    -webkit-transform: scale(0) translate3d(0, 0px, 0px);
    -moz-transform: scale(0) translate3d(0, 0px, 0px);
    -ms-transform: scale(0) translate3d(0, 0px, 0px);
    -o-transform: scale(0) translate3d(0, 0px, 0px);
    transform: scale(0) translate3d(0, 0px, 0px);
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1) translate3d(-40px, -80px, 0);
    -moz-transform: scale(1) translate3d(-40px, -80px, 0);
    -ms-transform: scale(1) translate3d(-40px, -80px, 0);
    -o-transform: scale(1) translate3d(-40px, -80px, 0);
    transform: scale(1) translate3d(-40px, -80px, 0);
    opacity: 0;
    @media screen and (max-width: 70.3125rem) {
      -webkit-transform: scale(1) translate3d(-25px, -34px, 0px);
      -moz-transform: scale(1) translate3d(-25px, -34px, 0px);
      -ms-transform: scale(1) translate3d(-25px, -34px, 0px);
      -o-transform: scale(1) translate3d(-25px, -34px, 0px);
      transform: scale(1) translate3d(-25px, -34px, 0px); } } }
@-webkit-keyframes animateUp-3 {
  0% {
    -webkit-transform: scale(0) translate3d(0px, 0px, 0px);
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(0.7) translate3d(-40px, -80px, 0px);
    opacity: 0;
    @media screen and (max-width: 70.3125rem) {
      -webkit-transform: scale(1) translate3d(-25px, -45px, 0px); } } }
@-moz-keyframes animateUp-3 {
  0% {
    -moz-transform: scale(0) translate3d(0px, 0px, 0px);
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    -moz-transform: scale(0.7) translate3d(-40px, -80px, 0px);
    opacity: 0;
    @media screen and (max-width: 70.3125rem) {
      -moz-transform: scale(1) translate3d(-25px, -45px, 0px); } } }
@keyframes animateUp-3 {
  0% {
    -webkit-transform: scale(0) translate3d(0px, 0px, 0px);
    -moz-transform: scale(0) translate3d(0px, 0px, 0px);
    -ms-transform: scale(0) translate3d(0px, 0px, 0px);
    -o-transform: scale(0) translate3d(0px, 0px, 0px);
    transform: scale(0) translate3d(0px, 0px, 0px);
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(0.7) translate3d(-40px, -80px, 0px);
    -moz-transform: scale(0.7) translate3d(-40px, -80px, 0px);
    -ms-transform: scale(0.7) translate3d(-40px, -80px, 0px);
    -o-transform: scale(0.7) translate3d(-40px, -80px, 0px);
    transform: scale(0.7) translate3d(-40px, -80px, 0px);
    opacity: 0;
    @media screen and (max-width: 70.3125rem) {
      -webkit-transform: scale(1) translate3d(-25px, -45px, 0px);
      -moz-transform: scale(1) translate3d(-25px, -45px, 0px);
      -ms-transform: scale(1) translate3d(-25px, -45px, 0px);
      -o-transform: scale(1) translate3d(-25px, -45px, 0px);
      transform: scale(1) translate3d(-25px, -45px, 0px); } } }
.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px); }

.video-js {
  width: 100% !important;
  height: 100% !important; }

.replay-container {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  right: 0;
  z-index: 200; }

.video-container-ended {
  background: #000000; }

.control-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%; }

#react-stream-ended .stream-square {
  opacity: 1;
  z-index: 2;
  padding: 0;
  -webkit-transition: all 0.2s linear !important;
  -moz-transition: all 0.2s linear !important;
  transition: all 0.2s linear !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  margin: auto;
  min-width: 50%; }
  #react-stream-ended .stream-square .stream-square--inner {
    background: transparent; }
    #react-stream-ended .stream-square .stream-square--inner .mute-audio {
      display: none; }
#react-stream-ended .stream-square-box {
  z-index: 1000;
  pointer-events: none !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transition: all 0.2s linear !important;
  -moz-transition: all 0.2s linear !important;
  transition: all 0.2s linear !important;
  display: flex;
  flex-wrap: wrap; }
  #react-stream-ended .stream-square-box.callers-1 .stream-square {
    height: 90%;
    width: 90%; }

.react-replay-container {
  overflow: hidden; }

.embed .video-js
.react-replay-container,
.embed #react-stream-ended,
.embed .stream-embed-cotnainer {
  height: 100%;
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 0; }
.embed .stream-container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }
.embed .blab-info-block .text {
  padding-bottom: 0; }

/*# sourceMappingURL=app.css.map */