* {
  font-family: Roboto, Arial, Helvetica, sans-serif, Roboto;
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

body .kint-rich pre {
  margin-left: 30px;
}
body .kint-rich > dl dl {
  padding-left: 30px;
}

body {
  background: #FFF;
}

.smoke-base.smoke-visible {
  z-index: 190002 !important;
}

/* navbar */
a {
  text-decoration: none;
}

.nav {
  margin-top: 30px;
  margin-bottom: 20px;
}

.nav .logoColumn {
  width: 22%;
  display: inline-block;
}

.nav .linksColumn {
  width: 74%;
  display: inline-block;
}

@media (max-width: 750px) {
  .nav .logoColumn {
    width: 40%;
  }

  .nav .linksColumn {
    width: 60%;
  }
}
@media (max-width: 1023px) {
  .nav.searchOpen .logoColumn {
    width: 0%;
    display: inline-block;
  }

  .nav.searchOpen .linksColumn {
    width: 100%;
    display: inline-block;
    margin-left: 0px;
  }
}
.nav * {
  transition: opacity 0.1s;
}

.nav .navRight {
  margin-top: -15px;
}

.nav .logo {
  max-width: 100%;
  height: auto;
}

.nav .userLinks form {
  display: inline-block;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 53px;
  padding: 0px;
  margin: 0px;
  position: relative;
  top: 2px;
  width: 85px;
}

@media (min-width: 1025px) {
  .nav .userLinks form {
    transition: 0.2s;
  }
}
@media (max-width: 750px) {
  .nav .userLinks form i {
    vertical-align: bottom;
  }
}
.nav .userLinks form.active {
  width: 357px;
}

.nav .searchForm input[type=text]::-webkit-input-placeholder,
.nav .searchForm input[type=email]::-webkit-input-placeholder,
.nav .searchForm input[type=tel]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #DDD;
  letter-spacing: 2px;
  font-weight: 600;
}

.nav .userLinks input {
  font-size: 13px;
  border: 0px;
  border-bottom: 0px solid rgba(0, 0, 0, 0.5);
  border-radius: 0px;
  border-color: #ddd;
  top: -14px;
  position: relative;
  margin-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  text-transform: none;
  color: #000;
  width: 300px;
}

.nav .userLinks {
  padding-left: 10px;
  margin-left: 5px;
  border-left: 2px solid rgba(0, 0, 0, 0.15);
}

.nav .userLinks i,
.nav .menu i {
  font-size: 43px;
  line-height: 68px;
  padding: 0 5px;
}

.nav .userLinks .currentUserProfilePicNavBar {
  width: 43px;
  height: 43px;
  padding: 0px 0px 0 0px;
  border-radius: 200px;
  margin: 0 5px;
  position: relative;
  top: 3px;
}

.nav .userLinks a {
  color: #DDDDDD;
  font-size: 12px;
  position: relative;
  text-decoration: none;
}

.nav .userLinks a.active {
  color: black;
}

.nav .userLinks a:hover {
  color: rgba(0, 0, 0, 0.5);
}

.nav .goLive a {
  color: #F71E33;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 37px;
}

@media (max-width: 750px) {
  .nav .goLive a {
    line-height: 27px;
  }
}
@media (max-width: 1023px) {
  .nav.searchOpen .goLive {
    display: none;
  }
}
.nav .goLive .button {
  font-size: 14px;
  position: relative;
  padding-right: 65px;
  margin-right: 15px;
  height: 40px;
  line-height: 36px;
  border-color: #DDDDDD;
  padding-left: 20px;
  border-width: 2px;
}

.nav .goLive .button i {
  transition: opacity 0.3s;
}

.nav .goLive .button.createStream {
  color: #f71e33;
}

.nav .goLive .button.createStream:hover {
  color: #f71e33;
}

.nav .goLive.login .button {
  color: #f71e33;
}

.nav .goLive .button.createStream.goLiveNow:hover i,
.nav .goLive.login .button:hover i {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.nav .goLive .button i {
  position: absolute;
  right: -15px;
  top: -18px;
  font-size: 48px;
  line-height: 68px;
  color: #FFFFFF;
  background: #f71e33;
  display: inline-block;
  height: 68px;
  width: 68px;
  border-radius: 39px;
  transition: 0.2s;
}

.nav .goLive .button i:hover {
  background: #f71e33;
}

.nav .goLive .button.goLiveNow:hover {
  border-color: #BCBEC0;
}

.nav .userLinks .notificationCount.hidden {
  display: none;
}

.nav .userLinks .notificationCount {
  position: absolute;
  right: 5px;
  top: 12px;
  background: rgba(247, 30, 51, 0.9);
  color: #FFF;
  font-size: 10px;
  line-height: 22px;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  display: block;
  text-align: center;
}

.nav .searchOuter {
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .nav.searchOpen .searchOuter {
    border-left: 0px;
  }
}
@media (max-width: 750px) {
  .nav .searchOuter.userLinks {
    border-left: 0px;
  }

  .nav .userLinks input {
    top: 0px;
  }

  .nav .userLinks form {
    width: 0px;
  }

  .nav .goLive {
    display: none;
  }

  .nav .userLinks form.active {
    width: 100px;
  }
}
/* Larger than tablet */
@media (min-width: 750px) {
  .nav .logo {
    width: 200px;
    height: auto;
  }
}
@media (min-width: 750px) {
  .nav .goLive {
    position: relative;
    top: -13px;
    margin-right: 15px;
  }

  .nav .goLive.login {
    right: 0px;
  }
}
@media (max-width: 750px) {
  .nav .logo {
    width: auto;
  }

  .nav .navRight {
    margin-top: -15px;
    float: right;
  }

  .nav .goLive {
    position: absolute;
    right: 55px;
    top: 0px;
  }

  .nav .goLive .button i {
    position: absolute;
    right: -27px;
    top: -10px;
    font-size: 28px;
    line-height: 43px;
    color: #FFFFFF;
    background: #f71e33;
    display: inline-block;
    height: 43px;
    width: 43px;
    border-radius: 24px;
  }

  .nav .goLive .button {
    font-size: 10px;
    position: relative;
    padding-right: 20px;
    margin-right: 15px;
    height: 30px;
    line-height: 25px;
    border-color: #DDDDDD;
    padding-left: 10px;
    border-width: 2px;
  }

  .nav .userLinks i,
.nav .menu i {
    font-size: 30px;
    line-height: 58px;
    color: rgba(0, 0, 0, 0.3);
    padding: 0 0 0 10px;
  }
}
@media (max-width: 400px) {
  .container.nav {
    padding: 0 20px;
  }
}
/* footer */
.footer {
  margin-top: 30px;
  margin-bottom: 25px;
  padding-top: 30px;
  border-top: 1px solid #ddd;
  clear: both;
}

.footer .appStoreIcon {
  float: left;
  width: 33.33%;
  text-align: center;
}

.footer .internalLinks {
  font-size: 14px;
  padding-top: 13px;
  padding-top: 0px;
}

.footer .internalLinksSet {
  display: inline-block;
  width: 130px;
}

.footer .internalLinks a {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  padding-bottom: 5px;
}

.footer .internalLinks .slash {
  display: inline-block;
  color: #ddd;
  padding: 0 10px;
}

.footer .copyright {
  padding-top: 13px;
  float: left;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
}

.footer .copyrightRight {
  float: right;
  text-align: right;
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  padding-top: 15px;
}

.footer .buttons {
  float: left;
  width: 33.34%;
  text-align: right;
}

.footer .buttons a {
  display: inline-block;
  padding-left: 10px;
}

.footer .outerLeft {
  float: left;
  width: 33.33%;
}

@media (max-width: 640px) {
  .footer .outerLeft {
    float: none;
    width: auto;
  }

  .footer .internalLinks {
    float: none;
    display: block;
    text-align: center;
  }

  .footer .internalLinks a {
    display: inline-block;
    width: 48%;
    box-sizing: border-box;
    padding: 0 0 10px 0;
  }

  .footer .internalLinks .internalLinksSet {
    float: left;
    width: 50%;
  }

  .footer .internalLinks .slash {
    padding: 0 2px;
  }

  .footer .copyright {
    float: none;
    display: block;
  }

  .footer .buttons a {
    padding: 0 10px;
  }

  .footer .copyright {
    text-align: center;
  }

  .footer .buttons {
    text-align: center;
    padding-top: 15px;
    float: none;
  }

  .footer .appStoreIcon {
    float: none;
    width: 100%;
    margin: 10px 0;
  }

  .footer .buttons {
    float: none;
    width: 100%;
    margin: 0;
  }

  .footer .internalLinks a {
    margin-bottom: 20px;
  }

  .footer .internalLinks br {
    display: none;
  }
}
/* hamburger */
.hamburger {
  position: fixed;
  right: 0;
  top: -150%;
  width: 100%;
  height: 100%;
  z-index: 62001;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.5s;
}

.hamburger .internal {
  width: 100%;
  height: 100%;
  position: absolute;
}

@media (min-width: 1170px) {
  .noScroll {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
}
.hamburger .row a {
  color: #FFF;
  position: relative;
  text-decoration: none;
  font-size: 10px;
  text-transform: uppercase;
  padding: 16px 15px;
  padding-left: 50px;
  border-top: 1px solid #333;
  /*	border-bottom: 1px solid #333; */
  display: block;
  font-weight: 700;
  letter-spacing: 1px;
}

.hamburger .row i {
  position: absolute;
  left: 10px;
  top: 11px;
  font-size: 25px;
}

@media (max-width: 320px) {
  .hamburger .row a {
    padding: 12px 15px;
    padding-left: 50px;
  }

  .hamburger .row i {
    top: 8px;
  }

  .hamburger .profileBlock.loggedIn {
    margin-bottom: 20px;
  }
}
@media (max-height: 320px) {
  .hamburger .row a {
    padding: 12px 15px;
    padding-left: 50px;
  }

  .hamburger .row i {
    top: 8px;
  }
}
.hamburger .copyright {
  text-align: center;
  font-size: 8pt;
  line-height: 12pt;
  font-weight: 300;
  text-transform: uppercase;
  color: #939598;
  letter-spacing: 1px;
}

@media (min-width: 550px) {
  .hamburger .container {
    position: absolute;
    bottom: 40px;
    left: 10px;
  }

  .hamburger .columns a:first-child {
    /* 		border-top: 2px solid #333; */
  }

  .hamburger .columns a:last-child {
    border-bottom: 1px solid #333;
  }

  .hamburger .appIcon {
    position: absolute;
    bottom: 30px;
    left: 52%;
  }

  .hamburger .appIcon img {
    width: 130px;
    height: auto;
  }

  .hamburger .copyright {
    position: absolute;
    bottom: 45px;
    left: 52%;
    margin-left: 150px;
    width: 110px;
    text-align: left;
    font-size: 9px;
    line-height: 11px;
  }
}
@media (max-width: 550px) {
  .hamburger .appIcon img {
    width: auto;
    height: 37px;
  }

  .hamburger .container {
    /*
    		position: absolute;
    		bottom: 90px;
    		left: 0px;
    */
  }

  .hamburger .appIcon {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
  }

  .hamburger .copyright {
    position: absolute;
    bottom: 10px;
    width: 100%;
  }

  .hamburger .columns:first-child a:first-child {
    /*		border-top: 2px solid #333; */
  }

  .hamburger .columns:last-child a:last-child {
    border-bottom: 1px solid #333;
  }
}
.hamburger .profileBlock.login {
  margin-top: 30px;
  margin-bottom: 50px;
}

.hamburger .profileBlock {
  margin-top: 30px;
  margin-bottom: 30px;
}

.hamburger .profileBlock .profilePicture {
  width: 90px;
  height: 90px;
  margin: auto;
  padding-bottom: 10px;
  position: relative;
}

.hamburger .profileBlock .profilePicture .notificationCount.hidden {
  display: none;
}

.hamburger .profileBlock .profilePicture .notificationCount {
  position: absolute;
  right: 6px;
  top: 2px;
  background: rgba(247, 30, 51, 0.9);
  color: #FFF;
  font-size: 12px;
  line-height: 22px;
  height: 24px;
  width: 24px;
  border-radius: 22px;
  display: block;
  text-align: center;
}

.hamburger .profileBlock .profilePicture img {
  width: 90px;
  height: 90px;
  border-radius: 45px;
}

.hamburger .profileBlock .name {
  font-size: 10px;
  color: #FFF;
  text-align: center;
  margin-bottom: 0;
  font-weight: 500;
  text-transform: uppercase;
}

.hamburger .profileBlock .memberSince {
  font-size: 8px;
  color: #7f7f7f;
  text-align: center;
}

@media (min-width: 360px) {
  .hamburger .profileBlock {
    margin-top: 40px;
  }

  .hamburger .profileBlock .profilePicture {
    width: 120px;
    height: 120px;
    margin: auto;
    padding-bottom: 10px;
  }

  .hamburger .profileBlock .profilePicture img {
    width: 120px;
    height: 120px;
    border-radius: 60px;
  }
}
@media (min-width: 550px) {
  .hamburger .profileBlock {
    margin-top: 10px;
  }

  .hamburger .profileBlock .profilePicture {
    width: 70px;
    height: 70px;
    margin: auto;
    padding-bottom: 10px;
  }

  .hamburger .profileBlock .profilePicture img {
    width: 70px;
    height: 70px;
    border-radius: 40px;
  }
}
.hamburger .closer {
  position: absolute;
  right: 20px;
  top: 20px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.hamburger .closer i {
  color: #CCC;
  font-size: 20px;
  background: #FFF;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.hamburger .profileBlock {
  position: relative;
}

.hamburger .loginButton {
  text-align: center;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 50px;
}

.hamburger .loginButton .button {
  padding-left: 30px;
  padding-right: 30px;
}

@media (max-width: 700px) and (max-height: 400px) {
  .hamburger .loginButton {
    margin: 75px 0;
  }
}
.hamburger .profileBlock .profilePicture.login {
  margin-top: 40px;
  width: auto;
  height: auto;
  text-align: center;
}

.hamburger .profileBlock .profilePicture a {
  color: rgba(0, 0, 0, 0.15);
  display: inline-block;
  text-decoration: none;
}

.hamburger .profileBlock .profilePicture i {
  color: rgba(0, 0, 0, 0.15);
  font-size: 40px;
  padding: 20px;
  border-radius: 70px;
  background: #fff;
}

@media (min-height: 570px) {
  .hamburger .row a {
    /* 		font-size: 14px; */
  }
}
@media (min-width: 375px) and (min-height: 650px) {
  .hamburger .profileBlock .profilePicture i {
    font-size: 70px;
    border-radius: 90px;
  }
}
@media (min-width: 570px) and (min-height: 360px) {
  .hamburger .row a {
    /* 		font-size: 14px; */
  }

  .hamburger .profileBlock {
    margin-top: 20px;
  }

  .hamburger .profileBlock .profilePicture {
    width: 90px;
    height: 90px;
    margin: auto;
    padding-bottom: 10px;
  }

  .hamburger .profileBlock .profilePicture img {
    width: 90px;
    height: 90px;
    border-radius: 45px;
  }

  .hamburger .profileBlock .name {
    font-size: 14px;
  }

  .hamburger .profileBlock .profilePicture i {
    font-size: 70px;
    border-radius: 90px;
  }
}
@media (min-width: 570px) and (min-height: 410px) {
  .hamburger .row a {
    /* 		font-size: 15px; */
  }

  .hamburger .profileBlock .profilePicture {
    width: 100px;
    height: 100px;
    margin: auto;
    padding-bottom: 10px;
  }

  .hamburger .profileBlock .profilePicture img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }

  .hamburger .profileBlock .name {
    font-size: 14px;
  }

  .hamburger .profileBlock .profilePicture i {
    font-size: 70px;
    border-radius: 90px;
  }
}
@media (min-width: 400px) and (min-height: 710px) {
  .hamburger .profileBlock {
    margin-top: 40px;
  }

  .hamburger .row a {
    /* 		font-size: 16px; */
  }

  .hamburger .profileBlock .profilePicture {
    width: 150px;
    height: 150px;
    margin: auto;
    padding-bottom: 10px;
  }

  .hamburger .profileBlock .profilePicture img {
    width: 150px;
    height: 150px;
    border-radius: 75px;
  }

  .hamburger .profileBlock .name {
    font-size: 14px;
  }

  .hamburger .profileBlock .profilePicture i {
    font-size: 70px;
    border-radius: 90px;
  }
}
@media (max-height: 325px) {
  .hamburger .profileBlock {
    margin-top: -20px;
  }

  .hamburger .profileBlock.loggedIn {
    margin-top: 10px;
  }
}
.modalOverlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 190001;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.modal {
  position: absolute;
  background: #Fff;
  padding: 30px 20px 20px 20px;
  border-radius: 15px;
  left: 20px;
  top: 20px;
  height: auto;
  left: 50%;
  top: 50%;
  transition: opacity 0.2s;
}

.modal .breakLine {
  clear: both;
  padding-top: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

.modal.login {
  width: 500px;
  margin-left: -270px;
  margin-top: -183px;
}

.modal h4 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  padding: 10px 0;
  margin: 0 -30px;
}

.modal h4.deleted {
  color: #F71E32 !important;
}

.modal.login h4 {
  margin-bottom: 15px;
}

.modal .closeModal {
  position: absolute;
  right: -10px;
  top: -10px;
  text-decoration: none;
}

.modal .closeModal i {
  background: #FFF;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  font-size: 25px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  line-height: 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s;
}

@media (min-width: 1170px) {
  .modal .closeModal {
    position: absolute;
    right: -20px;
    top: -20px;
  }

  .modal .closeModal i {
    border-radius: 50px;
    width: 40px;
    height: 40px;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    line-height: 40px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
.modal .closeModal:hover i {
  color: black;
}

.modalText {
  text-align: center;
}

.modal .button {
  color: #FFF;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s;
}

.modal .button:hover {
  background: rgba(0, 0, 0, 0.5);
}

.modal .modalText {
  clear: both;
  font-size: 10px;
  line-height: 14px;
}

.modal .modalText p {
  padding-top: 20px;
  padding-bottom: 10px;
  color: rgba(0, 0, 0, 0.5);
}

.loginItem {
  float: left;
  width: 25%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}

/* remove instagram */
.loginItem {
  width: 33%;
}

.loginItem a {
  text-decoration: none;
  display: block;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.loginItem a:hover {
  opacity: 1;
}

.loginItem .imageSpan {
  display: inline-block;
  border-radius: 100px;
  border: 1px solid #787878;
  padding: 30px;
  width: 40px;
  height: 40px;
  text-align: center;
}

.modal .mobile {
  display: none !important;
}

.modal .nonMobile {
  display: inline-block !important;
}

.loginItem span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
  color: #787878;
  clear: both;
  padding-top: 10px;
}

.modal.phoneType {
  width: 500px;
  margin-left: -270px;
  margin-top: -183px;
  text-align: center;
}

.modal .phoneIcon {
  display: inline-block;
  padding: 30px;
}

.modal.phoneType h4 {
  padding: 0;
  margin: 0;
  padding-bottom: 20px;
  font-size: 15px;
  line-height: 18px;
  font-weight: bold;
  transition: opacity 0.2s;
}

.modal.phoneType h4.active {
  color: #7AC943;
}

.modal.phoneType h5 {
  font-weight: 400;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.5);
  padding: 0;
  margin: 0;
  transition: opacity 0.2s;
}

.modal.phoneType h5.error {
  color: #f71e33;
}

.modal.phoneType input[type=tel],
.modal.phoneType input[type=text] {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #eee;
  padding-bottom: 3px;
  width: 80%;
  font-weight: 300;
  font-size: 12px;
  color: #000;
  text-align: left;
  text-align: center;
  transition: opacity 0.2s;
}

.modal.phoneType input[type=tel].error,
.modal.phoneType input[type=text].error {
  border-bottom-color: #f71e33;
}

.modal.phoneType .button {
  width: 45%;
  margin: 20px 10px 0 10px;
}

.modal.phoneType .button.green {
  background-color: #7AC943;
}

.modal.phoneType .button.green:hover {
  background-color: #558834;
}

.modal.phoneType .button.green.active,
.modal.phoneType .button.resend.active {
  background: #333;
  color: #666;
  animation: pulse 2s infinite;
}

.modal.phoneType .button.green.active:hover,
.modal.phoneType .button.resend.active:hover {
  background: #333;
  color: #666;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    color: #666;
  }
  50% {
    color: #FFF;
  }
  100% {
    color: #666;
  }
}
@keyframes pulseDark {
  0% {
    color: #666;
  }
  50% {
    color: #222;
  }
  100% {
    color: #666;
  }
}
.modal.setup {
  width: 650px;
  box-sizing: border-box;
  padding: 50px 100px;
  text-align: center;
}

.modal.setup form {
  text-align: left;
}

.modal.setup h4 {
  text-align: center;
  transition: 0.2s;
}

.modal.setup h4.error {
  color: #f71e33;
}

.modal.setup form label,
.modal.setup .urlHint,
.modal.setup .notice a {
  display: block;
  clear: both;
  color: rgba(0, 0, 0, 0.3);
  font-size: 10px;
  transition: 0.2s;
  text-decoration: none;
}

.modal.setup .notice a {
  color: rgba(0, 0, 0, 0.3);
}

.modal.setup .urlHint {
  color: rgba(0, 0, 0, 0.8);
}

.modal.setup .urlHint span {
  color: #7AC943;
}

.modal.setup .urlHint span.error,
label.nickname.error {
  color: #f71e33;
}

.modal.setup .notice {
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
  margin-top: 20px;
}

.modal.setup .notice a {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 768px) {
  .modal.setup .notice a {
    color: rgba(255, 255, 255, 0.5);
  }
}
.modal.setup .half {
  float: left;
  width: 48%;
}

.modal.setup .half.right {
  float: right;
}

.modal.setup label {
  margin-top: 30px;
}

.modal.setup br.clear {
  height: 0px;
  clear: both;
}

.modal.setup input[type=text],
.modal.setup input[type=email],
.modal.setup input[type=tel] {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #eee;
  padding-bottom: 3px;
  width: 100%;
  font-weight: 300;
  font-size: 12px;
  color: #000;
  text-align: left;
  transition: 0.2s;
}

.modal.setup input[type=text].error,
.modal.setup input[type=email].error,
.modal.setup input[type=tel].error {
  border-color: #f71e33;
}

.modal.setup .button {
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 700;
  text-align: center;
  display: inline-block;
  width: 250px;
  margin: auto;
}

.modal.setup input[type=text]::-webkit-input-placeholder,
.modal.setup input[type=email]::-webkit-input-placeholder,
.modal.setup input[type=tel]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ccc;
}

.modal.setup input[type=text]::-moz-placeholder,
.modal.setup input[type=email]::-moz-placeholder,
.modal.setup input[type=tel]::-moz-placeholder {
  /* Firefox 19+ */
  color: #ccc;
}

.modal.setup input[type=text]:-ms-input-placeholder,
.modal.setup input[type=email]:-ms-input-placeholder,
.modal.setup input[type=tel]:-ms-input-placeholder {
  /* IE 10+ */
  color: #ccc;
}

.modal.setup input[type=text]:-moz-placeholder,
.modal.setup input[type=email]:-moz-placeholder,
.modal.setup input[type=tel]:-moz-placeholder {
  /* Firefox 18- */
  color: #ccc;
}

.modal .button.getStarted.active {
  background: #333;
  color: #666;
  animation: pulse 2s infinite;
}

.fp__overlay {
  z-index: 200001 !important;
}

.fp__btn {
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
}

.modal.setup .profileUpload {
  position: relative;
  width: 120px;
  height: 120px;
  margin: auto;
  margin-bottom: 10px;
}

.modal.setup .profileUpload * {
  transition: 0.2s;
}

.modal.setup .profileUpload .profileImage {
  border-radius: 120px;
  border: 1px solid rgba(0, 0, 0, 0);
  border: 0px;
}

.modal.setup .profileUpload:hover .profileImage,
.modal.setup .profileUpload.default .profileImage {
  opacity: 1;
  border: 0px;
}

.modal.setup .profileUpload i {
  position: absolute;
  font-size: 50px;
  line-height: 50px;
  left: 0;
  top: 0;
  opacity: 0.75;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 33px;
  cursor: pointer;
  color: #FFF;
  border-radius: 100px;
  opacity: 1;
  border: 0px !important;
  background: rgba(0, 0, 0, 0.5);
}

.modal.setup .profileUpload.default i.error {
  color: #f71e33;
}

@media (max-height: 770px) and (min-width: 1170px) {
  .modalOverlay {
    overflow: scroll;
  }

  .modal.setup {
    top: 10px !important;
    margin-bottom: 10px !important;
  }
}
@media (min-width: 800px) and (max-width: 1025px) {
  .modal.setup {
    padding: 20px 100px;
    top: 10px !important;
  }

  modal.setup .profileUpload {
    width: 100px;
    height: 100px;
  }

  modal.setup .profileUpload img {
    width: 100px;
    height: 100px;
  }
}
@media (max-height: 800px) {
  .modal.setup {
    padding: 20px 100px;
    top: 10px !important;
  }

  modal.setup .profileUpload {
    width: 60px;
    height: 60px;
  }

  modal.setup .profileUpload img {
    width: 60px;
    height: 60px;
  }
}
/* landscape phone tweaks */
@media (max-width: 740px) {
  .modal.login {
    padding: 10px;
    margin-top: -148px;
    margin-left: -260px;
  }

  .modal.login .loginButtons {
    padding: 0 50px;
  }

  .modal .phoneIcon {
    padding: 15px;
    width: 50px;
  }

  .modal.phoneType {
    margin-top: -145px;
  }

  .modal.phoneType form {
    margin-bottom: 10px;
  }

  .loginItem .imageSpan {
    padding: 20px;
    width: 30px;
    height: 30px;
  }

  .loginItem .imageSpan img {
    height: 30px;
  }

  .modal.login .modalText p {
    padding-top: 10px;
    padding-bottom: 0;
  }

  .modal.phoneType h4 {
    padding-bottom: 10px;
  }

  .modal.phoneType input[type=tel],
.modal.phoneType input[type=text] {
    margin-bottom: 0;
  }

  .modal {
    background: transparent;
  }

  .modal .button {
    background: rgba(255, 255, 255, 0.3);
  }

  .modal.phoneType h4 {
    color: #FFF;
  }

  .modal.phoneType h5 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 5px;
  }

  .modal.phoneType input[type=tel],
.modal.phoneType input[type=text] {
    background: transparent;
  }

  .loginItem a {
    opacity: 1;
  }

  .modal .mobile {
    display: inline-block !important;
  }

  .modal .nonMobile {
    display: none !important;
  }

  .modal.login .modalText,
.modal.phoneLogin .modalText {
    color: white;
  }

  .modal.login h4,
.modal.phoneLogin h4 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
  }

  .modal.login .modalText p,
.modal.phoneLogin .modalText p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 0;
    line-height: 18px;
  }

  .modal.phoneType input[type=tel],
.modal.phoneType input[type=text] {
    border-color: #666;
  }

  .modal.phoneType input[type=tel],
.modal.phoneType input[type=text] {
    color: #FFF;
  }

  .modal.phoneType input[type=tel]:focus,
.modal.phoneType input[type=text]:focus {
    border-color: #CCC;
  }

  .modal.setup {
    width: 100%;
    height: 100%;
    overflow: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    box-sizing: border-box;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
  }

  .modalOverlay {
    overflow: scroll !important;
  }

  .modal.setup h4 {
    color: #FFF;
  }

  .modal.setup h5 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 5px;
  }

  .modal.setup form label {
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.5);
  }

  .modal.setup .urlHint {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
  }

  .modal input[type=text].setupUsername {
    margin-bottom: 0px;
  }

  .modal.setup input[type=tel],
.modal.setup input[type=email],
.modal.setup input[type=text],
.modal.setup .button {
    border-color: #666;
    background: transparent;
    color: #FFF;
  }

  .modal.setup input[type=tel]:focus,
.modal.setup input[type=email]:focus,
.modal.setup input[type=text]:focus {
    border-color: #CCC;
  }

  .modal.setup .notice {
    color: rgba(255, 255, 255, 0.5);
  }

  .modal.setup .notice a {
    color: white;
  }
}
.modal.phoneType form .button.portrait {
  display: none;
}

/* portrait modes */
@media (max-width: 540px) {
  .modal.login,
.modal.phoneType {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }

  .modal.login .button,
.modal.phoneType .button {
    background: rgba(255, 255, 255, 0.3);
    width: 300px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -150px;
  }

  .modal.login .modalText,
.modal.phoneType .modalText {
    color: white;
  }

  .modal.login h4,
.modal.phoneType h4 {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .modal.login .modalText p,
.modal.phoneType .modalText p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 20px 20px;
    line-height: 18px;
  }

  .modal.login .loginButtons {
    padding: 50px 35px;
  }

  .loginItem .imageSpan {
    padding: 30px;
    width: 40px;
    height: 40px;
  }

  .loginItem .imageSpan img {
    height: 40px;
  }

  .loginItem span {
    color: rgba(255, 255, 255, 0.5);
  }

  .loginItem {
    width: 50%;
    padding: 0 0 40px 0;
  }

  /* instagram fix */
  .loginItem.phoneLoginItem {
    width: 100%;
  }

  .loginItem a {
    opacity: 1;
  }

  .modal .closeModal {
    right: 10px;
    top: 10px;
  }

  .modal .mobile {
    display: inline-block !important;
  }

  .modal .nonMobile {
    display: none !important;
  }

  .modal.phoneType form {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 30px;
  }

  .modal.phoneType form .buttons {
    margin-top: 20px;
    text-align: center;
    margin-right: 0;
    margin-left: 0;
  }

  .modal.phoneType form .button {
    position: relative;
    left: 0;
    margin-left: 0;
    margin-right: 0;
    bottom: 0;
  }

  .modal.phoneType form .button.portrait {
    display: inline-block;
  }

  .modal.phoneType form .button.landscape {
    display: none;
  }

  .modal.phoneType img {
    margin-bottom: 20px;
  }

  .modal.phoneType h4 {
    margin-bottom: 20px;
  }

  .modal.phoneType p {
    margin-bottom: 20px;
  }
}
@media (max-width: 540px) and (min-height: 600px) {
  .modal.phoneType img {
    margin-bottom: 40px;
  }

  .modal.phoneType h4 {
    margin-bottom: 40px;
  }

  .modal.phoneType p {
    margin-bottom: 40px;
  }

  .modal.phoneType .button {
    margin-top: 40px;
  }

  .modal .phoneIcon {
    width: 75px;
  }
}
@media (max-width: 340px) {
  .loginItem .imageSpan {
    padding: 25px;
    width: 35px;
    height: 35px;
  }

  .loginItem .imageSpan img {
    height: 35px;
  }

  .modal.login .button {
    bottom: 30px;
  }

  .modal.setup form label {
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.5);
  }
}
@media (max-height: 330px) {
  .modal .closeModal {
    top: 0px;
    right: 10px;
  }
}
/* embedLoginModal */
.modal.embedLoginModal .embedLoginHeader {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 40px;
  text-transform: uppercase;
  color: #FFF;
}

.modal.login.embedLoginModal {
  padding: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.modal.embedLoginModal .embedLoginHeader a.closeModal {
  position: absolute;
  font-size: 20px;
  color: #FFF;
  line-height: 40px;
  left: 0px;
  top: 0px;
  width: 40px;
}

.modal.embedLoginModal .embedLoginHeader a.closeModal i {
  background: transparent;
  color: #FFF;
  line-height: 40px;
  font-size: 20px;
  width: auto;
  height: auto;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.modal.embedLoginModal .linksWrapper {
  position: absolute;
  top: 70px;
  bottom: 30px;
  width: 100%;
  left: 0px;
}

.modal.embedLoginModal a.button {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin: 0 auto;
  margin-left: -122px;
}

.modal .button.white30 {
  background: rgba(255, 255, 255, 0.3);
}

.modal.embedLoginModal .linksWrapper .row a {
  display: block;
  width: 100%;
  text-align: center;
  color: #FFF;
  font-size: 70px;
  line-height: 70px;
}

.modal.embedLoginModal .linksWrapper .row a span {
  display: block;
}

.modal.embedLoginModal .linksWrapper .row a span.loginText {
  text-transform: uppercase;
  font-size: 15px;
  line-height: 25px;
  padding-top: 10px;
  letter-spacing: 2px;
}

.modal.embedLoginModal .linksWrapper .row {
  position: absolute;
  width: 100%;
  top: 0px;
  bottom: 80px;
}

.modal.embedLoginModal .linksWrapper .row .six {
  height: 100%;
}

.modal.embedLoginModal .linksWrapper .row .six a {
  display: block;
  height: 100%;
}

.modal.embedLoginModal .linksWrapper .row .six a .sixInternal {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.modal.embedLoginModal .linksWrapper .row .vertical {
  width: 2px;
  position: absolute;
  left: 50%;
  top: 0px;
  bottom: 0px;
  height: 100%;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.3);
}

.modal.embedLoginModal .linksWrapper .row .horizontal {
  height: 2px;
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  margin-top: -1px;
  background: rgba(255, 255, 255, 0.3);
  display: none;
}

@media (max-width: 550px) {
  .modal.embedLoginModal .linksWrapper .row .vertical {
    display: none;
  }

  .modal.embedLoginModal .linksWrapper .row .horizontal {
    display: block;
  }

  .modal.embedLoginModal a.button {
    /* display: inline-block; */
    position: absolute;
    bottom: 0px;
    left: 30px;
    margin: 0 auto;
    right: 30px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: auto;
  }

  .modal.embedLoginModal .linksWrapper .row .six {
    height: 50%;
  }

  .modal.embedLoginModal .linksWrapper .row a {
    font-size: 50px;
    line-height: 50px;
  }

  .modal.embedLoginModal .linksWrapper {
    top: 40px;
  }

  .modal.embedLoginModal .linksWrapper .row {
    bottom: 50px;
  }
}
/* firstfan */
.modal.firstFan {
  max-width: 500px;
  margin-left: -270px;
  margin-top: -183px;
}

.modal.firstFan .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal .button.blank {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  background: #FFF;
  color: rgba(0, 0, 0, 0.3);
}

.modal .button.blue {
  background-color: #158EFC;
}

.modal .button.red {
  background-color: #F71E33;
}

.modal.firstFan .followName {
  margin-bottom: 20px;
}

.modal.firstFan img {
  display: block;
  margin: auto;
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

.modal.firstFan .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.firstFan .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.firstFan {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.firstFan {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.firstFan .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.firstFan .modalText p {
    padding: 5px;
    margin: 5px auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.firstFan .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
/* get app */
.modal.getApp {
  max-width: 500px;
  margin-left: -270px;
  margin-top: -196px;
}

@media (min-width: 1000px) {
  .modal.getApp {
    width: 500px;
  }
}
.modal.getApp .modalText p {
  font-size: 10px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal.getApp .followName {
  margin-bottom: 20px;
}

.modal.getApp img {
  display: block;
  margin: auto;
  margin-bottom: 10px;
  height: 45px;
}

.modal.getApp img.icon {
  height: 120px;
  height: 80px;
  margin-bottom: 30px;
}

.modal.getApp .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

.modal.getApp input[type=tel] {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #eee;
  padding-bottom: 3px;
  width: 80%;
  font-weight: 300;
  font-size: 12px;
  color: #000;
  text-align: left;
  text-align: center;
  transition: opacity 0.2s;
  margin-bottom: 20px;
}

.modal.getApp input[type=tel].error,
.modal.phoneType input[type=text].error {
  border-bottom-color: #f71e33;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.getApp .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.getApp {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.getApp {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 399px) {
  .modal.getApp .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.getApp .modalText p {
    padding: 5px;
    margin: 5px auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.getApp .modalText p {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (max-height: 374px) {
  .modal.getApp .modalText p {
    padding-top: 0px;
    margin-top: 0px;
  }
}
@media (max-height: 376px) {
  .modal.getApp img {
    height: 25px;
    width: auto;
  }

  .modal.getApp img.icon {
    height: 80px;
  }
}
/* firstUnfollow */
.modal.firstUnfollow {
  max-width: 550px;
  margin-left: -270px;
  margin-top: -183px;
}

.modal.firstUnfollow .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal.firstUnfollow .followName {
  margin-bottom: 20px;
}

.modal.firstUnfollow img {
  display: block;
  margin: auto;
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

.modal.firstUnfollow .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

.modal.firstUnfollow .button {
  min-width: 240px !important;
  margin: 10px 10px;
}

.modal.firstUnfollow .button.red {
  border: none;
  color: #FFF !important;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #EE2132;
}

@media (max-width: 1170px) {
  .modal.firstUnfollow {
    margin-top: -219px;
  }
}
@media (max-width: 768px) and (max-height: 500px) {
  .modal.firstUnfollow .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.firstUnfollow {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }

  .modal.firstUnfollow .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
    margin-top: 5px;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.firstUnfollow {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }

  .modal.firstUnfollow .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
@media (max-height: 374px) {
  .modal.firstUnfollow .button {
    min-width: 200px !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal.firstUnfollow .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.firstUnfollow .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.firstUnfollow .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.firstUnfollow .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
    width: 50%;
  }

  .modal.firstUnfollow .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
/* streamEnded */
.modal.streamEndedTiny {
  padding: 0px !important;
}

.modal.streamEndedTiny .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.modal.streamEnded {
  max-width: 550px;
  margin-left: -270px;
  margin-top: -183px;
}

@media (min-width: 1170px) {
  .modal.streamEnded {
    width: 550px;
  }
}
.modal.streamEnded .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal.streamEnded .followName {
  margin-bottom: 20px;
}

.modal.streamEnded img.endBroadcastImage {
  clear: both;
  display: block;
  margin: auto;
  width: 120px;
  height: auto;
  border-radius: 0;
}

.modal.streamEnded .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

.modal.streamEnded .button {
  min-width: 240px !important;
  margin: 20px 10px;
}

@media (max-width: 1169px) {
  .modal.streamEnded .button {
    margin: 10px;
  }
}
.modal.streamEnded .button.red {
  border: none;
  color: #FFF !important;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #EE2132;
}

.modal.streamEnded .button.blue {
  border: none;
  color: #FFF !important;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #118EFF;
}

.modal.streamEnded .followUnfollowButton a {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.15);
  color: #FFF;
  transition: opacity 0.1s;
}

.modal.streamEnded .followUnfollowButton a:hover {
  background: rgba(0, 0, 0, 0.3);
}

.modal.streamEnded .followUnfollowButton a i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  line-height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}

.modal.streamEnded .followUnfollowButton .isNotFollowing a {
  background: #7ac943;
}

.modal.streamEnded .followUnfollowButton .isNotFollowing a:hover {
  background: black;
}

.modal.streamEnded .profileBox {
  margin: 20px 10px;
  position: relative;
}

.modal.streamEnded .followUnfollowButton {
  position: absolute;
  right: 0;
  top: 0;
}

.modal.streamEnded .profileBox .picWrapper {
  float: left;
  padding-right: 60px;
  min-height: 60px;
  padding-left: 60px;
  position: relative;
}

.modal.streamEnded .profileBox .picWrapper h4 {
  padding: 0;
  margin: 0;
  padding-top: 7px;
  text-align: left;
  font-size: 15px;
  line-height: 15px;
  overflow: hidden;
  height: 1em;
}

.modal.streamEnded .profileBox .picWrapper span {
  display: block;
  text-align: left;
  margin-top: 5px;
  font-size: 12px;
  line-height: 12px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 300;
}

.modal.streamEnded .profileBox .picWrapper span.hidden {
  display: none;
}

.modal.streamEnded .profileBox .picWrapper a {
  text-decoration: none;
  color: #000;
}

.modal.streamEnded .profileBox .streamOwnerPicture {
  position: absolute;
  left: 0;
  top: 0;
}

.modal.streamEnded .profileBox .streamOwnerPicture img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

@media (max-width: 1170px) {
  .modal.streamEnded {
    position: absolute;
  }

  .modal.streamEnded .profileBox {
    margin: 30px 20px 10px;
  }
}
@media (max-height: 350px) {
  .modal.streamEnded .profileBox {
    margin: 0px;
  }
}
@media (max-width: 768px) and (max-height: 500px) {
  .modal.streamEnded .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.streamEnded {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }

  .modal.streamEnded .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
    margin-top: 5px;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.streamEnded {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }

  .modal.streamEnded .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
@media (max-height: 413px) {
  .modal.streamEnded .button {
    min-width: 200px !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal.streamEnded .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.streamEnded .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.streamEnded .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }

  .modal.streamEnded img.endBroadcastImage {
    height: 50px;
    width: auto;
  }
}
@media (max-height: 400px) {
  .modal.streamEnded .breakLine {
    display: none;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.streamEnded .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
    width: 50%;
  }

  .modal.streamEnded .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
/* confirmLogout */
.modal.confirmLogout {
  max-width: 550px;
  margin-left: -270px;
  margin-top: -183px;
}

.modal.confirmLogout .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal.confirmLogout .followName {
  margin-bottom: 20px;
}

.modal.confirmLogout img {
  display: block;
  margin: auto;
  width: 100px;
  height: auto;
  border-radius: 0px;
  margin-top: 30px;
}

.modal.confirmLogout .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

.modal.confirmLogout h4 {
  margin: 30px 0 20px;
}

.modal.confirmLogout .button {
  min-width: 240px !important;
  margin: 10px 10px;
}

.modal.confirmLogout .button.red {
  border: none;
  color: #FFF !important;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #EE2132;
}

@media (max-width: 1170px) {
  .modal.confirmLogout {
    margin-top: -190px;
  }
}
@media (max-width: 768px) and (max-height: 500px) {
  .modal.confirmLogout .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.confirmLogout {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }

  .modal.confirmLogout img {
    margin-top: 60px;
  }

  .modal.confirmLogout .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
    margin-top: 5px;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.confirmLogout {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }

  .modal.confirmLogout .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
@media (max-height: 413px) {
  .modal.confirmLogout img {
    margin-top: 40px;
  }
}
@media (max-height: 374px) {
  .modal.confirmLogout .button {
    min-width: 200px !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal.confirmLogout .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.confirmLogout .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.confirmLogout .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }

  .modal.confirmLogout img {
    margin-top: 20px;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.confirmLogout .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
    width: 50%;
  }

  .modal.confirmLogout .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
/* confirmDelete */
.modal.confirmDelete {
  max-width: 550px;
  margin-left: -270px;
  margin-top: -183px;
}

.modal.confirmDelete .modalText p {
  font-size: 14px;
  line-height: 22px;
  padding-top: 12px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal.confirmDelete .followName {
  margin-bottom: 20px;
}

.modal.confirmDelete img,
.modal.confirmDelete i.iconImageReplacement {
  display: block;
  margin: auto;
  width: 100px;
  height: auto;
  border-radius: 0px;
  margin-top: 30px;
  font-size: 84px;
}

.modal.confirmDelete i.iconImageReplacement {
  font-size: 84px;
  color: rgba(0, 0, 0, 0.15);
}

.modal.confirmDelete .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

.modal.confirmDelete h4 {
  margin: 30px 0 20px;
}

.modal.confirmDelete .button {
  min-width: 240px !important;
  margin: 10px 10px;
}

.modal.confirmDelete .button.red {
  border: none;
  color: #FFF !important;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #EE2132;
}

@media (max-width: 1170px) {
  .modal.confirmDelete {
    margin-top: -250px;
  }
}
@media (max-width: 768px) and (max-height: 500px) {
  .modal.confirmDelete .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.confirmDelete {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }

  .modal.confirmDelete img,
.modal.confirmDelete i.iconImageReplacement {
    margin-top: 20px;
  }

  .modal.confimDelete h4 {
    margin: 20px;
  }

  .modal.confirmDelete .modalText p {
    padding: 0;
    margin-bottom: 0;
  }

  .modal.confirmDelete .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
    margin-top: 5px;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.confirmDelete {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }

  .modal.confirmDelete .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
@media (max-height: 413px) {
  .modal.confirmDelete img,
.modal.confirmDelete i.iconImageReplacement {
    margin-top: 30px;
  }
}
@media (max-height: 374px) {
  .modal.confirmDelete .button {
    min-width: 200px !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal.confirmDelete .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.confirmDelete .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.confirmDelete .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }

  .modal.confirmDelete img,
.modal.confirmDelete i.iconImageReplacement {
    margin-top: 0px;
  }

  .modal.confirmDelete h4 {
    margin-bottom: 0;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.confirmDelete .modalText p {
    padding-top: 10px;
    padding-bottom: 20px;
    width: 50%;
  }

  .modal.confirmDelete .button {
    color: #FFF;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
  }
}
/* contactsent */
.modal.contactSent {
  max-width: 500px;
  margin-left: -270px;
  margin-top: -183px;
}

@media (min-width: 1000px) {
  .modal.contactSent {
    width: 500px;
  }
}
.modal.contactSent .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 0;
  padding-top: 0;
}

.modal .button.green {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #7AC943;
}

.modal.contactSent .followName {
  margin-bottom: 20px;
}

.modal.contactSent img {
  display: block;
  margin: auto;
  width: 140px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.contactSent h4 {
  margin: 20px;
  padding-bottom: 0;
}

.modal.contactSent .button.green {
  padding-left: 50px;
  padding-right: 50px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.contactSent .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.contactSent {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.contactSent {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.contactSent .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.contactSent .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.contactSent img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.contactSent .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
/* notificationsRequest */
.modal.notificationsRequest {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -183px;
}

.modal.notificationsRequest .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.notificationsRequest {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.notificationsRequest .button {
    display: block;
    width: 100%;
  }
}
.modal.notificationsRequest .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.notificationsRequest .followName {
  margin-bottom: 20px;
}

.modal.notificationsRequest img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.notificationsRequest h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.notificationsRequest .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.notificationsRequest .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.notificationsRequest {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.notificationsRequest {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.notificationsRequest .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.notificationsRequest .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.notificationsRequest img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.notificationsRequest .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
/* obsModal */
.modal.obsModal {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -183px;
}

.modal.obsModal .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.obsModal {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.obsModal .button {
    display: block;
    width: 100%;
  }
}
.modal.obsModal .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.obsModal .followName {
  margin-bottom: 20px;
}

.modal.obsModal img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.obsModal h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.obsModal .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.obsModal .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.obsModal {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.obsModal {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.obsModal .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.obsModal .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.obsModal img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.obsModal .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
.modal.obsModal i.obsIcon {
  font-size: 80px;
  line-height: 1em;
  color: rgba(0, 0, 0, 0.15);
}

/* obsStart */
.modal.obsStart {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -250px;
}

.modal.obsStart .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.obsStart {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.obsStart .button {
    display: block;
    width: 100%;
  }
}
.modal.obsStart .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.obsStart .followName {
  margin-bottom: 20px;
}

.modal.obsStart img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.obsStart h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.obsStart .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.obsStart .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.obsStart {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.obsStart {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.obsStart .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.obsStart .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.obsStart img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.obsStart .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
.modal.obsStart i.obsIcon {
  font-size: 80px;
  line-height: 1em;
  color: rgba(0, 0, 0, 0.15);
}

/* Download not ready */
/* downloadNotReady */
.modal.downloadNotReady {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -183px;
}

.modal.downloadNotReady .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.downloadNotReady {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.downloadNotReady .button {
    display: block;
    width: 100%;
  }
}
.modal.downloadNotReady .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.downloadNotReady .followName {
  margin-bottom: 20px;
}

.modal.downloadNotReady img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.downloadNotReady h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.downloadNotReady .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.downloadNotReady .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.downloadNotReady {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.downloadNotReady {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.downloadNotReady .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.downloadNotReady .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.downloadNotReady img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.downloadNotReady .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
/* Download not ready */
/* downloadReady */
.modal.downloadReady {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -183px;
}

.modal.downloadReady .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.downloadReady {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.downloadReady .button {
    display: block;
    width: 100%;
  }
}
.modal.downloadReady .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.downloadReady .followName {
  margin-bottom: 20px;
}

.modal.downloadReady img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.downloadReady h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.downloadReady .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.downloadReady .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.downloadReady {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.downloadReady {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.downloadReady .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.downloadReady .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.downloadReady img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.downloadReady .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
/* embedVideo */
.modal.embedModal {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -200px;
}

.modal.embedModal .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.embedModal {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.embedModal .button {
    display: block;
    width: 100%;
  }
}
.modal.embedModal .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.embedModal .followName {
  margin-bottom: 20px;
}

.modal.embedModal img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.embedModal h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.embedModal .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

.modal.embedModal textarea {
  display: none;
}

.modal.embedModal textarea.embedVideoVisible {
  display: block;
  width: 60%;
  height: 30px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin: -10px auto 10px auto;
  border-radius: 3px;
  min-height: 50px;
  transition: 0.2s;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.embedModal .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.embedModal {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.embedModal {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.embedModal .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.embedModal .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.embedModal img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.embedModal .modalText p {
    padding-top: 15px;
    padding-bottom: 10px;
  }
}
@media (max-height: 600px) {
  .modal.embedModal img {
    width: 30px;
  }
}
.modal.embedModal .modalLeft,
.modal.embedModal .modalRight {
  width: 49%;
  box-sizing: border-box;
  display: inline-block;
  padding-bottom: 10px;
}

.modal.embedModal .modalLeft {
  padding-right: 25px;
  text-align: right;
}

.modal.embedModal .modalRight {
  padding-left: 25px;
  text-align: left;
}

.modal.embedModal label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 10px;
}

/* embedVideo */
/* embedVideo */
.modal.embedProfileModal {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -200px;
}

.modal.embedProfileModal .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.embedProfileModal {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.embedProfileModal .button {
    display: block;
    width: 100%;
  }
}
.modal.embedProfileModal .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 10px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.embedProfileModal .followName {
  margin-bottom: 20px;
}

.modal.embedProfileModal img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.embedProfileModal h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.embedProfileModal .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

.modal.embedProfileModal textarea {
  display: none;
}

.modal.embedProfileModal textarea.embedProfileVisible {
  display: block;
  width: 60%;
  height: 20px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin: -10px auto 10px auto;
  border-radius: 3px;
  min-height: 40px;
  transition: 0.2s;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.embedProfileModal .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.embedProfileModal {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.embedProfileModal {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.embedProfileModal .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.embedProfileModal .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.embedProfileModal img {
    width: 50px;
    height: auto;
  }

  .modal.embedProfileModal h4 {
    margin: 10px;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.embedProfileModal .modalText p {
    padding-top: 20px;
    padding-bottom: 10px;
  }
}
.modal.embedProfileModal .modalLeft,
.modal.embedProfileModal .modalRight {
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  padding-bottom: 10px;
}

.modal.embedProfileModal .modalLeft {
  padding-right: 25px;
  text-align: right;
}

.modal.embedProfileModal .modalRight {
  padding-left: 0px;
  text-align: center;
}

.modal.embedProfileModal label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 10px;
}

/* embedVideo */
.modal.shareModal {
  max-width: 500px;
  margin-left: -250px;
  margin-top: -200px;
  box-sizing: border-box;
}

.modal.shareModal .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.shareModal {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.shareModal .button {
    display: block;
    width: 100%;
  }
}
.modal.shareModal .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.shareModal .followName {
  margin-bottom: 20px;
}

.modal.shareModal img {
  display: block;
  margin: auto;
  width: 200px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.shareModal h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.shareModal .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

.modal.shareModal textarea {
  display: none;
}

.modal.shareModal textarea.embedVideoVisible {
  display: block;
  width: 60%;
  height: 30px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin: -10px auto 20px auto;
  border-radius: 3px;
  min-height: 50px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.shareModal .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.shareModal {
    left: 15px;
    right: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.shareModal {
    background: #Fff;
    padding: 20px;
    max-width: 90% !important;
    width: 90%;
    left: 5%;
    margin-left: 0;
    box-sizing: border-box;
  }
}
@media (max-height: 374px) {
  .modal.shareModal .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.shareModal .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.shareModal img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.shareModal .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
.shareModal .title {
  position: absolute;
  top: 0px;
  left: 100px;
  right: 100px;
  text-align: center;
  font-size: 60px;
  line-height: 60px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 20px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.shareModal .linkBox {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 35px;
  left: 0px;
}

.shareModal .linkBox input[type=text] {
  width: 350px;
  border: 0px;
  border-radius: 100px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.3);
  color: #FFF;
  text-transform: none;
  line-height: 12px;
  height: 45px;
  margin-top: -22px;
  padding-left: 20px;
  display: inline-block;
  padding-top: 5px;
  margin-right: 10px;
  text-align: left;
}

.shareModal .button.blue {
  width: auto;
  border: none;
  color: #FFF;
  background: #168DFA;
  padding-left: 7px;
  padding-right: 7px;
  margin-right: 10px;
}

.shareModal .links {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 400px;
  top: 50%;
  margin-top: -200px;
  text-align: center;
}

.shareModal .links a.bordered {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.shareModal .links a span.imageWrapper {
  position: absolute;
  top: 50%;
  margin-top: -33px;
  height: 66px;
  left: 0;
  width: 100%;
  text-align: center;
}

.shareModal .links a img {
  height: 66px;
}

.shareModal .links a {
  display: inline-block;
  position: relative;
  text-align: center;
  height: 100%;
  color: #FFF;
  font-size: 18px;
  line-height: 18px;
  width: 25%;
  box-sizing: border-box;
  padding: 115px 0;
}

.shareModal .links a span.site {
  position: absolute;
  bottom: 20px;
  left: 0;
  font-size: 18px;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #FFF;
  letter-spacing: 2px;
}

@media (max-width: 1169px) {
  .shareModal .links {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 350px;
    top: 50%;
    margin-top: -175px;
    text-align: center;
  }
}
@media (max-width: 760px) {
  .shareModal .closer {
    top: 20px;
  }

  .shareModal .title {
    position: absolute;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    text-transform: uppercase;
  }

  .shareModal .links {
    height: 200px;
    margin-top: -100px;
  }

  .shareModal .links {
    height: 150px;
    margin-top: -75px;
  }

  .shareModal .links a {
    padding: 20px;
  }

  .shareModal .linkBox {
    bottom: 10px;
  }

  .shareModal .links a img {
    height: 45px;
  }

  .shareModal .links a span {
    bottom: 20px;
  }

  .shareModal .links a span.site {
    font-size: 16px;
  }
}
/* v2 changes */
.shareOpenButton {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-left: 0px;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s;
}

.shareOpenButton i {
  color: #FFF;
  background: #118EFF;
  padding: 10px;
  font-size: 20px;
  line-height: 20px;
  border-radius: 100px;
}

.shareModal .shareThumb {
  text-align: center;
}

.shareModal .shareThumb img {
  width: 80%;
  max-width: 200px;
  padding: 0;
  margin: 0 auto;
}

.shareModal .shareThumb {
  height: 200px;
}

.shareModal .right {
  text-align: center;
  position: relative;
}

.shareModal .right .rightInternal {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  margin-top: -169px;
}

.shareModal .linkBoxV2 {
  text-align: center;
  margin-top: 20px;
  clear: both;
}

.shareModal .linkBoxV2 input[type=text] {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  width: 350px;
  border: 0px;
  border-radius: 100px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.5);
  text-transform: none;
  line-height: 12px;
  height: 45px;
  padding-left: 20px;
  display: inline-block;
  padding-top: 5px;
  margin-right: 0px;
  width: 300px;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}

.shareModal .linksNew {
  text-align: center;
}

.shareModal .linksNew a {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.2s;
}

.shareModal .linksNew span {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
}

.shareModal .linksNew i {
  transition: 0.2s;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #BBBBBB;
  color: #BBBBBB;
  padding: 20px;
  font-size: 40px;
  border-radius: 100px;
  display: block;
  margin: 0px 15px 10px;
}

.shareModal .linksNew a:hover {
  color: #158EFC;
  border-color: #158EFC;
}

.shareModal .linksNew a:hover i {
  color: #FFF;
  background-color: #158EFC;
  border-color: #158EFC;
}

.shareModal .shareSelector {
  text-align: center;
  margin-top: 10px;
  color: #BBBBBB;
}

.shareModal .shareSelector i.active {
  color: #000;
}

.shareModal .shareSelector i {
  transition: 0.2s;
  font-size: 50px;
  margin: 0px;
  cursor: pointer;
}

.shareModal .shareSelector i::-moz-selection {
  background: transparent;
}

.shareModal .shareSelector i::selection {
  background: transparent;
}

.shareModal .shareSelector i.share1,
.shareModal .shareSelector i.share2,
.shareModal .shareSelector i.share3 {
  font-size: 15px;
  top: -17px;
  position: relative;
  padding: 0 2px;
}

@media (max-width: 760px) {
  .shareModal .title {
    margin-bottom: 10px;
  }

  .shareModal .linksNew i {
    padding: 15px;
    font-size: 30px;
  }

  .shareModal .linkBoxV2 {
    margin-top: 0px;
  }

  .shareModal .shareThumb img {
    max-width: 215px;
  }

  .shareModal .shareThumb {
    height: 230px;
  }

  .shareModal .right .rightInternal {
    margin-top: -113px;
  }
}
@media (max-width: 670px) {
  .shareModal .shareThumb img {
    max-width: 200px;
  }

  .shareModal .shareThumb {
    height: 200px;
  }
}
@media (max-width: 600px) {
  .shareModal .shareThumb img {
    max-width: 150px;
  }

  .shareModal .shareThumb {
    height: 150px;
  }

  .shareModal {
    top: 25px;
    left: 10px;
    right: 10px;
    height: auto;
  }

  .shareModal .right {
    float: right;
    width: 51%;
  }

  .shareModal .right .rightInternal {
    margin-top: -95px;
  }

  .shareModal .linksNew i {
    padding: 10px;
    font-size: 25px;
  }

  .shareModal .linkBoxV2 input[type=text] {
    width: 100%;
  }
}
@media (max-width: 410px) and (max-height: 400px) {
  .shareInternal .right,
.shareInternal .left {
    float: none;
    height: auto;
    width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1170px) {
  .shareModal .right,
.shareModal {
    float: none;
    height: auto;
    width: 100%;
  }

  .shareModal .shareSelector {
    margin-top: 25px;
  }

  .shareModal .right .rightInternal {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 50px;
  }
}
@media (orientation: portrait) and (max-height: 600px) {
  .shareModal .right .rightInternal {
    margin-top: 0px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .shareModal .shareThumb img {
    max-width: 100px;
  }

  .shareModal .shareThumb {
    height: 100px;
  }
}
.modal.shareProfileModal {
  max-width: 500px;
  margin-left: -250px;
  margin-top: -200px;
  box-sizing: border-box;
}

.modal.shareProfileModal .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.shareProfileModal {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.shareProfileModal .button {
    display: block;
    width: 100%;
  }
}
.modal.shareProfileModal .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.shareProfileModal .followName {
  margin-bottom: 20px;
}

.modal.shareProfileModal img {
  display: block;
  margin: auto;
  width: 200px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.shareProfileModal h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.shareProfileModal .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

.modal.shareProfileModal textarea {
  display: none;
}

.modal.shareProfileModal textarea.embedVideoVisible {
  display: block;
  width: 60%;
  height: 30px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin: -10px auto 20px auto;
  border-radius: 3px;
  min-height: 50px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.shareProfileModal .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.shareProfileModal {
    left: 15px;
    right: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.shareProfileModal {
    background: #Fff;
    padding: 20px;
    max-width: 90% !important;
    width: 90%;
    left: 5%;
    margin-left: 0;
    box-sizing: border-box;
  }
}
@media (max-height: 374px) {
  .modal.shareProfileModal .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.shareProfileModal .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.shareProfileModal img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.shareProfileModal .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
.shareProfileModal .title {
  position: absolute;
  top: 0px;
  left: 100px;
  right: 100px;
  text-align: center;
  font-size: 60px;
  line-height: 60px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 20px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.shareProfileModal .linkBox {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 35px;
  left: 0px;
}

.shareProfileModal .linkBox input[type=text] {
  width: 350px;
  border: 0px;
  border-radius: 100px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.3);
  color: #FFF;
  text-transform: none;
  line-height: 12px;
  height: 45px;
  margin-top: -22px;
  padding-left: 20px;
  display: inline-block;
  padding-top: 5px;
  margin-right: 10px;
  text-align: left;
}

.shareProfileModal .button.blue {
  width: auto;
  border: none;
  color: #FFF;
  background: #168DFA;
  padding-left: 7px;
  padding-right: 7px;
  margin-right: 10px;
}

.shareProfileModal .links {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 400px;
  top: 50%;
  margin-top: -200px;
  text-align: center;
}

.shareProfileModal .links a.bordered {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.shareProfileModal .links a span.imageWrapper {
  position: absolute;
  top: 50%;
  margin-top: -33px;
  height: 66px;
  left: 0;
  width: 100%;
  text-align: center;
}

.shareProfileModal .links a img {
  height: 66px;
}

.shareProfileModal .links a {
  display: inline-block;
  position: relative;
  text-align: center;
  height: 100%;
  color: #FFF;
  font-size: 18px;
  line-height: 18px;
  width: 25%;
  box-sizing: border-box;
  padding: 115px 0;
}

.shareProfileModal .links a span.site {
  position: absolute;
  bottom: 20px;
  left: 0;
  font-size: 18px;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #FFF;
  letter-spacing: 2px;
}

@media (max-width: 1169px) {
  .shareProfileModal .links {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 350px;
    top: 50%;
    margin-top: -175px;
    text-align: center;
  }
}
@media (max-width: 760px) {
  .shareProfileModal .closer {
    top: 20px;
  }

  .shareProfileModal .title {
    position: absolute;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    text-transform: uppercase;
  }

  .shareProfileModal .links {
    height: 200px;
    margin-top: -100px;
  }

  .shareProfileModal .links {
    height: 150px;
    margin-top: -75px;
  }

  .shareProfileModal .links a {
    padding: 20px;
  }

  .shareProfileModal .linkBox {
    bottom: 10px;
  }

  .shareProfileModal .links a img {
    height: 45px;
  }

  .shareProfileModal .links a span {
    bottom: 20px;
  }

  .shareProfileModal .links a span.site {
    font-size: 16px;
  }
}
/* v2 changes */
.shareOpenButton {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-left: 0px;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s;
}

.shareOpenButton i {
  color: #FFF;
  background: #118EFF;
  padding: 10px;
  font-size: 20px;
  line-height: 20px;
  border-radius: 100px;
}

.shareProfileModal .shareThumb {
  text-align: center;
}

.shareProfileModal .shareThumb img {
  height: 180px;
  width: auto;
  padding: 0;
  margin: 0 auto;
}

.shareProfileModal .shareThumb {
  height: 200px;
}

.shareProfileModal .right {
  text-align: center;
  position: relative;
}

.shareProfileModal .right .rightInternal {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  margin-top: -169px;
}

.shareProfileModal .linkBoxV2 {
  text-align: center;
  margin-top: 20px;
  clear: both;
}

.shareProfileModal .linkBoxV2 input[type=text] {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  width: 350px;
  border: 0px;
  border-radius: 100px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.5);
  text-transform: none;
  line-height: 12px;
  height: 45px;
  padding-left: 20px;
  display: inline-block;
  padding-top: 5px;
  margin-right: 0px;
  width: 300px;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}

.shareProfileModal .linksNew {
  text-align: center;
}

.shareProfileModal .linksNew a {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.2s;
}

.shareProfileModal .linksNew span {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
}

.shareProfileModal .linksNew i {
  transition: 0.2s;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #BBBBBB;
  color: #BBBBBB;
  padding: 20px;
  font-size: 40px;
  border-radius: 100px;
  display: block;
  margin: 0px 15px 10px;
}

.shareProfileModal .linksNew a:hover {
  color: #158EFC;
  border-color: #158EFC;
}

.shareProfileModal .linksNew a:hover i {
  color: #FFF;
  background-color: #158EFC;
  border-color: #158EFC;
}

.shareProfileModal .shareSelector {
  text-align: center;
  margin-top: 10px;
  color: #BBBBBB;
}

.shareProfileModal .shareSelector i.active {
  color: #000;
}

.shareProfileModal .shareSelector i {
  transition: 0.2s;
  font-size: 50px;
  margin: 0px;
  cursor: pointer;
}

.shareProfileModal .shareSelector i::-moz-selection {
  background: transparent;
}

.shareProfileModal .shareSelector i::selection {
  background: transparent;
}

.shareProfileModal .shareSelector i.share1,
.shareProfileModal .shareSelector i.share2,
.shareProfileModal .shareSelector i.share3 {
  font-size: 15px;
  top: -17px;
  position: relative;
  padding: 0 2px;
}

@media (max-width: 760px) {
  .shareProfileModal .title {
    margin-bottom: 10px;
  }

  .shareProfileModal .linksNew i {
    padding: 15px;
    font-size: 30px;
  }

  .shareProfileModal .linkBoxV2 {
    margin-top: 0px;
  }

  .shareProfileModal .shareThumb img {
    width: 215px;
    height: auto;
  }

  .shareProfileModal .shareThumb {
    height: 230px;
  }

  .shareProfileModal .right .rightInternal {
    margin-top: -113px;
  }
}
@media (max-width: 670px) {
  .shareProfileModal .shareThumb {
    height: 200px;
  }
}
@media (max-width: 600px) {
  .shareProfileModal .shareThumb {
    height: 150px;
  }

  .shareProfileModal {
    top: 25px;
    left: 10px;
    right: 10px;
    height: auto;
  }

  .shareProfileModal .right {
    float: right;
    width: 51%;
  }

  .shareProfileModal .right .rightInternal {
    margin-top: -95px;
  }

  .shareProfileModal .linksNew i {
    padding: 10px;
    font-size: 25px;
  }

  .shareProfileModal .linkBoxV2 input[type=text] {
    width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1170px) {
  .shareProfileModal .right,
.shareProfileModal {
    float: none;
    height: auto;
    width: 100%;
  }

  .shareProfileModal .shareSelector {
    margin-top: 25px;
  }

  .shareProfileModal .right .rightInternal {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 50px;
  }
}
@media (orientation: portrait) and (max-height: 600px) {
  .shareProfileModal .right .rightInternal {
    margin-top: 0px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .shareProfileModal .shareThumb img {
    max-width: 150px;
  }

  .shareProfileModal .shareThumb {
    height: 100px;
  }
}
/* Download not ready */
/* downloadFailed */
.modal.downloadFailed {
  max-width: 600px;
  margin-left: -300px;
  margin-top: -183px;
}

.modal.downloadFailed .button {
  width: 45%;
  margin-right: 5px;
  margin-left: 5px;
}

@media (max-width: 740px) {
  .modal .button {
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1000px) {
  .modal.downloadFailed {
    width: 600px;
  }
}
@media (max-width: 650px) {
  .modal.downloadFailed .button {
    display: block;
    width: 100%;
  }
}
.modal.downloadFailed .modalText p {
  font-size: 14px;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  line-height: 18px;
  margin-top: 0;
  padding-top: 0;
}

.modal.downloadFailed .followName {
  margin-bottom: 20px;
}

.modal.downloadFailed img {
  display: block;
  margin: auto;
  width: 80px;
  height: auto;
  border-radius: 0px;
  margin: 10px auto;
}

.modal.downloadFailed h4 {
  margin: 20px;
  font-size: 18px;
  padding-bottom: 0;
}

.modal.downloadFailed .button.green {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) and (max-height: 500px) {
  .modal.downloadFailed .closeModal {
    top: 10px;
    right: 10px;
  }

  .modal.downloadFailed {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    margin: 0;
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
  }
}
@media (min-height: 500px) and (max-width: 768px) {
  .modal.downloadFailed {
    background: #Fff;
    padding: 20px;
    max-width: 100% !important;
    left: 10px;
    right: 10px;
    margin-left: 0;
  }
}
@media (max-height: 374px) {
  .modal.downloadFailed .followName {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .modal.downloadFailed .modalText p {
    padding: 5px;
    margin: 5px auto;
  }

  .modal.downloadFailed img {
    width: 100px;
    height: auto;
  }
}
@media (min-height: 400px) and (max-height: 500px) {
  .modal.downloadFailed .modalText p {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}
@media (max-height: 321px) {
  .shareModal .linkBoxV2 input[type=text] {
    padding: 2px;
    font-size: 10px;
    height: 30px;
  }

  .shareModal .shareSelector {
    margin-top: 0px;
  }

  .shareModal .shareSelector i {
    font-size: 30px;
  }

  .shareModal .shareSelector i.share1,
.shareModal .shareSelector i.share2,
.shareModal .shareSelector i.share3 {
    top: -9px;
    font-size: 13px;
  }

  .shareModal .shareThumb img {
    max-width: 70px;
  }

  .shareModal .shareThumb {
    height: 70px;
  }

  .modal.shareModal {
    padding: 10px;
  }

  .shareModal .button.blue {
    margin-bottom: 0px;
  }
}
/* end modals */
.almostLive {
  cursor: default !important;
}

.homepageLogo {
  display: none;
}

@media (max-width: 1169px) {
  .statsLogo img {
    height: 30px;
    width: auto;
  }
}
.allNotifications {
  display: block;
  color: #000;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
  font-weight: 700;
  display: none;
}

.scbadge {
  background: #BBBBBB;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  line-height: 11px;
  border-radius: 100px;
  font-weight: 600;
}

.scbadge.grey,
.scbadge.gray {
  background: #BBB;
}

.scbadge.blue {
  background: #158EFC;
}

.scbadge.red {
  background: #F71E33;
}

.scbadge.green {
  background: #7AC943;
}

.scbadge.yellow {
  background: #FECF00;
}

.scbadge.orange {
  background: #F47924;
}

/*
	box
		wrap
			card
				content
				link

{#
<div style='position: absolute;width: 100%;top: 0%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 6.25%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 12.5%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 18.75%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 25%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 31.25%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 37.5%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 43.75%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 50%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 56.25%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 62.5%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 68.75%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 75%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 81.25%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;width: 100%;top: 87.5%;height: 6.25%;background: #EEE;'></div>
<div style='position: absolute;width: 100%;top: 93.75%;height: 6.25%;background: #DDD;'></div>
<div style='position: absolute;height: 100%;left: 6.25%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 18.75%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 31.25%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 43.75%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 56.25%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 68.75%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 81.25%;width: 6.25%;background: $BLACK-15;'></div>
<div style='position: absolute;height: 100%;left: 93.75%;width: 6.25%;background: $BLACK-15;'></div>
#}

*/
/* this is for the large video on the profile */
.largeVideo .largeVideoPillBox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
}

.largeVideo .scCardStreamOwner {
  position: absolute;
  left: 2.5%;
  top: 2.5%;
  width: 15%;
  height: 15%;
}

.largeVideo .scCardStreamOwner img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 100px;
}

.largeVideo .scCardPill {
  position: absolute;
  width: 15%;
  height: 15%;
  color: #FFF;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid #BBBBBB;
  left: 2.5%;
  transition: 0.2s;
  cursor: pointer;
}

.largeVideo .scCardPill i::selection,
.largeVideo .scCardPill i::-moz-selection {
  background: transparent;
  color: transparent;
}

.largeVideo .scCardPill:hover {
  background: #000;
}

.largeVideo .scCardPill.topSegment {
  border-radius: 50px 50px 0px 0px;
  top: 20%;
}

.largeVideo .scCardPill.bottomSegment {
  border-radius: 0px 0px 50px 50px;
  border-bottom: 0px;
}

.largeVideo .scCardPill.secondSegment {
  top: 35%;
}

.largeVideo .scCardPill.thirdSegment {
  top: 50%;
}

.largeVideo .scCardPill.fourthSegment {
  top: 65%;
}

.largeVideo .scCardPill i {
  font-size: 2em;
  line-height: 1em;
  position: absolute;
  left: 16.6666%;
  top: 16.6666%;
}

/* end large video */
.codeWrapper {
  text-align: center;
}

.modal.phoneType .codeWrapper input[type=text], .modal.phoneType .codeWrapper input[type=tel] {
  width: 65px;
  padding: 12px 11px;
  margin: 5px;
  font-size: 30px;
  font-weight: 700;
  border: 2px solid #bbb;
  height: auto;
}

.modal.phoneType .codeWrapper input[type=text]:focus, .modal.phoneType .codeWrapper input[type=tel]:focus {
  border-color: #000;
}

.modal.phoneType .codeWrapper input[type=text].error,
.modal.phoneType .codeWrapper input[type=text].error:focus,
.modal.phoneType .codeWrapper input[type=tel].error,
.modal.phoneType .codeWrapper input[type=tel].error:focus {
  border-color: #F71E33;
}

@media (max-width: 740px) {
  .modal.phoneType .codeWrapper input[type=text],
.modal.phoneType .codeWrapper input[type=tel] {
    border-color: #555;
  }

  .modal.phoneType .codeWrapper input[type=tel]:focus,
.modal.phoneType .codeWrapper input[type=text]:focus {
    border-color: #FFF;
  }
}
.modal.phoneType h4 {
  padding-bottom: 10px;
}

.modal.phoneType h5 {
  height: 1.3em;
  font-size: 11px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
  display: none;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: #333;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 0 px;
  bottom: -3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #158EFC;
}

input:focus + .slider {
  box-shadow: 0 0 1px #FFFF00;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 750px) {
  .nav .navRight {
    margin-top: 0px;
  }

  .nav .userLinks form {
    height: 38px;
  }

  .nav .userLinks i,
.nav .menu i {
    line-height: 30px;
  }

  .nav form a {
    display: inline;
    line-height: 30px;
  }

  .nav form a i {
    line-height: 30px;
  }

  .nav.searchOpen .menu {
    display: none;
  }

  .nav.searchOpen .searchIcon i {
    padding: 0px;
  }

  .nav .userLinks input {
    top: 3px;
  }

  .nav.searchOpen a.searchIcon {
    top: -3px;
  }
}
@media (max-width: 1023px) {
  .nav.searchOpen .logoColumn {
    width: 0%;
    display: inline-block;
  }

  .nav.searchOpen .linksColumn {
    width: 100%;
    display: inline-block;
    margin-left: 0px;
  }
}
/* This is the new navbar */
.navBar {
  height: 45px;
  margin: 30px 0px;
  position: relative;
}

.navBar i {
  color: rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  cursor: pointer;
}

.navBar i:hover {
  color: rgba(0, 0, 0, 0.5);
}

/* logo */
.navBar .navBarLogo {
  position: absolute;
  top: -5px;
  left: 0px;
}

.navBar .navBarLogo img {
  width: 200px;
  height: auto;
}

/* icons */
.navBar .navBarIcons {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  line-height: 0px;
}

.navBar .navBarIcons .navBarIconsIcon {
  float: right;
  height: 45px;
  width: 45px;
  margin-left: 15px;
  font-size: 45px;
  line-height: 45px;
  position: relative;
  top: 0px;
}

.navBar .navBarIcons .navBarIconsIcon.margin10 {
  margin-left: 10px;
}

.navBar .navBarIcons .navBarIconsIcon i {
  color: rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}

.navBar .navBarIcons .navBarIconsIcon i:hover {
  color: rgba(0, 0, 0, 0.5);
}

.navBar .navBarIcons .navBarIconsIcon .currentUserProfilePicNavBar {
  height: 45px;
  width: auto;
  border-radius: 200px;
}

/* notification count */
.navBar .notificationCount.hidden {
  display: none;
}

.navBar .notificationCount {
  position: absolute;
  right: 0px;
  top: -5px;
  background: rgba(247, 30, 51, 0.9);
  color: #FFF;
  font-size: 10px;
  line-height: 22px;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  display: block;
  text-align: center;
}

/* mobile menu link */
.navBar .navBarMenu {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  height: 45px;
  width: 60px;
  box-sizing: border-box;
  padding-left: 15px;
  font-size: 45px;
  line-height: 45px;
}

.navBar .navBarMenu .notificationCount {
  right: 0px;
  top: 0px;
}

/* main area */
.navBar .navBarMain {
  height: 45px;
  margin-right: 170px;
  margin-left: 200px;
}

@media (min-width: 767px) {
  .navBar .navBarMain.userHasChannel {
    margin-right: 230px;
  }
}
.navBar.loggedOut .navBarMain {
  margin-right: 0px;
}

@media (max-width: 767px) {
  .navBar.loggedOut .navBarMain,
.navBar .navBarMain {
    margin-right: 55px;
  }
}
.navBar .navBarMain > div {
  float: right;
}

.navBar .navBarMain .navBarGoLive a.disabled {
  color: #F71E33;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 45px;
}

.navBar .navBarMain .navSpacer {
  height: 65px;
  margin: 0 0 0 15px;
  width: 1px;
  background: rgba(0, 0, 0, 0.15);
  top: -10px;
  position: relative;
}

.navBar .navBarMain .navSpacer.navSpacerSearch {
  margin-left: 10px;
}

/* search */
.navBar .searchForm input[type=text]::-webkit-input-placeholder,
.navBar .searchForm input[type=email]::-webkit-input-placeholder,
.navBar .searchForm input[type=tel]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #DDD !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
}

.navBar form {
  display: inline-block;
  height: 100%;
  margin: 0px;
  padding: 0px;
  margin-right: 0px;
  overflow: hidden;
  width: 70px;
  width: 0px;
  height: 45px;
  transition: 0.2s;
}

.navBar form.active {
  width: 260px;
}

.navBar .searchOuter {
  white-space: nowrap;
}

.navBar .searchOuter i {
  line-height: 45px;
  font-size: 45px;
  box-sizing: border-box;
  padding-left: 15px;
  height: 45px;
  width: 60px;
  transition: 0s;
}

.navBar input {
  font-size: 12px !important;
  border: 0px !important;
  border-bottom: 0px solid rgba(0, 0, 0, 0.5) !important;
  border-radius: 0px !important;
  border-color: #ddd !important;
  position: relative !important;
  margin-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  text-transform: none !important;
  color: #000 !important;
  width: 206px !important;
  display: inline-block !important;
  top: -14px;
  background: transparent !important;
  letter-spacing: 1px !important;
  transition: 0s !important;
  text-align: start !important;
  padding-bottom: 6px !important;
  font-weight: 400 !important;
}

@media (max-width: 1000px) {
  .navBar.searchOpen .navBarMain {
    margin-left: 0px;
  }

  .navBar.searchOpen .navBarLogo,
.navBar.searchOpen .navSpacerGoLive,
.navBar.searchOpen .navBarGoLive {
    display: none;
  }

  .navBar form.active {
    width: 400px;
  }

  .navBar.searchOpen .navSpacerGoLive {
    display: none !important;
  }

  .navBar.searchOpen .searchOuter i {
    width: 45px;
    padding-left: 0px;
  }

  .navBar input {
    width: 360px !important;
  }
}
/* open size break points */
@media (max-width: 750px) {
  .navBar.searchOpen .navSpacer,
.navBar.searchOpen .navBarMenu {
    display: none;
  }

  .navBar.searchOpen .navBarMain {
    margin-right: 0px;
  }
}
@media (max-width: 660px) {
  .navBar form.active {
    width: 550px !important;
  }

  .navBar input {
    width: 490px !important;
  }
}
@media (max-width: 610px) {
  .navBar form.active {
    width: 500px !important;
  }

  .navBar input {
    width: 440px !important;
  }
}
@media (max-width: 560px) {
  .navBar form.active {
    width: 450px !important;
  }

  .navBar input {
    width: 390px !important;
  }
}
@media (max-width: 510px) {
  .navBar form.active {
    width: 400px !important;
  }

  .navBar input {
    width: 340px !important;
  }
}
@media (max-width: 460px) {
  .navBar form.active {
    width: 330px !important;
  }

  .navBar input {
    width: 290px !important;
  }
}
@media (max-width: 410px) {
  .navBar form.active {
    width: 280px !important;
  }

  .navBar input {
    width: 240px !important;
  }
}
@media (max-width: 360px) {
  .navBar form.active {
    width: 250px !important;
  }

  .navBar input {
    width: 190px !important;
  }
}
/* when search text is hidden */
@media (max-width: 1169px) {
  .navBar .navBarLogo {
    top: 5px;
  }

  .navBar .navBarMain {
    margin-left: 140px;
  }

  .navBar .navBarLogo img {
    width: 140px;
  }

  .navBar form {
    width: 0px;
  }

  .navBar .searchOuter i {
    width: 45px;
    padding-left: 0px;
  }

  .navBar .navBarMain .navSpacer {
    margin-left: 10px;
  }
}
.navBar .navBarMain .navSpacer {
  display: none;
}

@media (min-width: 768px) {
  .navBar .searchOuter i {
    padding-left: 10px;
  }

  .navBar .navBarMain .navSpacer {
    display: block;
  }
}
/* notifications */
.navBar .noNotifications {
  text-align: center;
  padding: 30px 0 10px 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.15);
}

.navBar .hoverNotifications {
  position: absolute;
  z-index: 70001;
  right: 11px;
  width: 500px;
  max-height: 400px;
  padding: 0px 20px 0px 20px;
  border-radius: 10px;
  text-align: left;
  top: 60px;
  background: #FFF;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.userHasChannel .navBar .hoverNotifications {
  right: 71px;
}

.navBar .hoverNotifications {
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.navBar .hoverNotifications:after,
.navBar .hoverNotifications:before {
  bottom: 100%;
  left: 410px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.navBar .hoverNotifications:after {
  border-color: rgba(255, 255, 255, 0);
  /*	border-bottom-color: #fff; */
  border-width: 10px;
  margin-left: -10px;
}

.navBar .hoverNotifications:before {
  border-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  border-color: white white transparent transparent;
  box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.1);
  border-width: 8px;
  margin-left: -8px;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  top: 0px;
}

.navBar .hoverNotifications .hoverInner {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.navBar .notificationItem {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: 20px;
  margin-top: 20px;
  /* 	background: #FFEEEE; */
  font-size: 15px;
  line-height: 15px;
  clear: both;
}

.navBar .notificationItem.lastItem {
  border-bottom: 0;
}

.navBar .notificationItem .isRead {
  width: 50px;
  height: 60px;
  float: left;
  /* 	background: #FFFFEE; */
  position: relative;
}

.navBar .notificationItem .isRead .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.15);
  display: inline-block;
  border-radius: 5px;
}

.navBar .notificationItem .isRead.unread .dot {
  background: #f71e33;
}

.navBar .notificationItem .liveNow .dot {
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -8px;
  width: 10px;
  height: 10px;
  background: #f71e33;
  border: 2px solid #fb8e99;
  display: inline-block;
  border-radius: 8px;
}

.navBar .notificationItem .replayNow .dot {
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -8px;
  width: 10px;
  height: 10px;
  background: #158efc;
  border: 2px solid #8ac6fd;
  display: inline-block;
  border-radius: 8px;
}

.navBar .notificationItem .profilePic {
  width: 60px;
  margin-right: 10px;
  height: 60px;
  float: left;
  position: relative;
}

.navBar .notificationItem .profilePic img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.navBar .notificationItem .profilePic .liveNow {
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background: rgba(247, 30, 51, 0.5);
  color: #FFF;
}

.navBar .notificationItem .profilePic .liveNow i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 30px;
  transition: opacity 0.2s;
}

.navBar .notificationItem .profilePic .replayNow {
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background: rgba(21, 142, 252, 0.5);
  color: #FFF;
}

.navBar .notificationItem .profilePic .replayNow i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 30px;
  transition: opacity 0.2s;
}

.navBar .notificationItem .profilePic .liveNow:hover i,
.navBar .notificationItem .profilePic .replayNow:hover i {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.navBar .notificationItem .info {
  width: 280px;
  height: 60px;
  float: left;
  /* 	background: #FFEEFF; */
  padding-top: 10px;
  overflow: hidden;
}

.navBar .notificationItem .info.liveNow,
.navBar .notificationItem .info.replayNow {
  padding-top: 9px;
}

.navBar .notificationItem .name a {
  text-decoration: none;
  color: #000;
}

.navBar .notificationItem .name {
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

.navBar .notificationItem .info .liveNow {
  position: relative;
  color: #f71e33;
  padding-left: 15px;
  font-size: 12px;
  font-weight: 300;
  font-weight: 700;
  text-transform: uppercase;
}

.navBar .notificationItem .info .replayNow {
  position: relative;
  color: #158efc;
  font-size: 12px;
  font-weight: 300;
  font-weight: 700;
  text-transform: uppercase;
}

.navBar .notificationItem .info .replayNow .whenLive {
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
}

.navBar .notificationItem .message {
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
}

.navBar .notificationItem .follow {
  width: 60px;
  margin-left: 10px;
  height: 60px;
  float: left;
  /* 	background: #EEEEFF; */
}

.navBar .notificationItem .follow a {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.15);
  color: #FFF;
  margin-top: 5px;
  transition: opacity 0.1s;
}

.navBar .notificationItem .follow a:hover {
  background: rgba(0, 0, 0, 0.3);
}

.navBar .notificationItem .follow a i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #FFF;
  font-size: 30px;
  line-height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}

.navBar .notificationItem .follow .isNotFollowing a {
  background: #7ac943;
}

.navBar .notificationItem .follow .isNotFollowing a:hover {
  background: black;
}

.notificationDate {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  color: #FFF;
  border-radius: 100px;
  text-align: center;
  text-transform: uppercase;
  line-height: 18px;
  transition: 0.2s;
  font-weight: 600;
  letter-spacing: 3px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.7);
}

.liveNow .notificationDate {
  background: rgba(247, 30, 51, 0.7);
}

.replayNow .notificationDate {
  background: rgba(21, 142, 252, 0.7);
}

.newFollower .notificationDate {
  background: rgba(122, 201, 67, 0.7);
}

.notificationDate span {
  display: block;
  padding: 12px 0px 0px 0px;
}

.notificationDate span:last-child {
  padding: 0px 0px 12px 0px;
}

.notificationItem:hover .notificationDate {
  opacity: 0;
}

.notificationItem .name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 3em;
}

.notificationItem .name a {
  font-size: 14px;
  line-height: 14px;
  height: 28px;
  max-width: 75%;
  letter-spacing: 1px;
}

.notificationItem .name a span {
  display: block;
  letter-spacing: 0px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  text-transform: none;
}

.notificationItem .info,
.notificationItem .info.liveNow,
.notificationItem .info.replayNow {
  padding-top: 6px;
}

.notificationItem .grayOut {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.notificationItem.newFollowing .grayOut.img,
.notificationItem.newFollowing .grayOut img {
  opacity: 0.3;
}

.notificationItem:hover .grayOut.profilePicture {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.notificationItem.newFollowing .leagueImage {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 40%;
  height: 40%;
  background: #FFF;
  border-radius: 100px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

.notificationItem.newFollowing .leagueImage img {
  width: 100%;
  height: auto;
  padding-top: 12.5%;
}

.notificationItem.newFollowing .teamLogo {
  position: absolute;
  right: 25px;
  top: 0px;
  height: 100%;
  width: 80px;
}

.notificationItem.newFollowing .teamLogo img {
  width: auto;
  height: 60px;
  padding-top: 0%;
}

.notificationItem.newFollowing .teamLogo:last-child {
  right: 125px;
}

.notificationItem.newFollowing {
  position: relative;
}

.notificationItem.newFollowing .info {
  width: 170px;
}

/* homepage color invert */
.homepageDISABLED .navBar i {
  color: white !important;
}

.homepageDISABLED .navBar i:hover {
  color: white !important;
}

.homepageDISABLED .navBar input {
  color: #FFF !important;
}

.homepageDISABLED .navBar .navBarMain .navSpacer {
  background: #FFF !important;
}

.homepageDISABLED .navBar .searchForm input[type=text]::-webkit-input-placeholder,
.homepageDISABLED .navBar .searchForm input[type=email]::-webkit-input-placeholder,
.homepageDISABLED .navBar .searchForm input[type=tel]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #FFF !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
}

.navBar .navBarMain .navBarGoLive a.disabled {
  color: #FFF;
  background: #F71E33;
  padding: 5px 10px;
  border-radius: 100px;
}

.navBar .navBarMain .navBarGoLive a:first-child {
  margin-right: 10px;
}

.navBar .navBarMain .navBarGoLive {
  margin-top: 10px;
}

.navFanChainOuter {
  background-image: url("https://castrstatic.b-cdn.net/upload/185233/1528827140/Chalkboard_Slice.png");
  height: 30px;
  overflow: hidden;
}

.navFanChain .row div, .navFanChain a {
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 31px;
  letter-spacing: 2px;
  text-align: right;
  color: #FFFFFF;
  text-transform: uppercase;
}

.navFanChain .row .nine:first-child {
  text-align: left;
}

.navFanChain .row .three:last-child {
  text-align: right;
}

.navFanChain i {
  font-size: 30px;
  line-height: 0px;
  position: relative;
  top: 9px;
}

.navFanChain .row.mobile {
  text-align: center;
}

.homepage .navFanChainOuter {
  background-image: none;
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.homepage .navBarOuter {
  margin-top: 60px;
}

.darkNav .navBar i {
  color: white !important;
}

.darkNav .navBar i:hover {
  color: white !important;
}

.darkNav .navBar input {
  color: #FFF !important;
}

.darkNav .navBar .navBarMain .navSpacer {
  background: #FFF !important;
}

.darkNav .navBar .searchForm input[type=text]::-webkit-input-placeholder,
.darkNav .navBar .searchForm input[type=email]::-webkit-input-placeholder,
.darkNav .navBar .searchForm input[type=tel]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #FFF !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
}

.navBar .navBarMain .navBarGoLive a.disabled {
  color: #FFF;
  background: #F71E33;
  padding: 5px 10px;
  border-radius: 100px;
}

.navBar .navBarMain .navBarGoLive a:first-child {
  margin-right: 10px;
}

.navBar .navBarMain .navBarGoLive {
  margin-top: 10px;
}

.navFanChainOuter {
  background-image: url("https://castrstatic.b-cdn.net/upload/185233/1528827140/Chalkboard_Slice.png");
  height: 30px;
  overflow: hidden;
}

.navFanChain .row div, .navFanChain a {
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 31px;
  letter-spacing: 2px;
  text-align: right;
  color: #FFFFFF;
  text-transform: uppercase;
}

.navFanChain .row .nine:first-child {
  text-align: left;
}

.navFanChain .row .three:last-child {
  text-align: right;
}

.navFanChain i {
  font-size: 30px;
  line-height: 0px;
  position: relative;
  top: 9px;
}

.navFanChain .row.mobile {
  text-align: center;
}

.darkNav .navFanChainOuter {
  background-image: none;
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.darkNav .navBarOuter {
  margin-top: 0px;
  padding-top: 30px;
}

.darkNav .navBar {
  margin-top: 0px;
}

.darkNav .nav .goLive .button {
  background: rgba(0, 0, 0, 0.5);
}

.darkNav .nav .goLive .button.createStream {
  color: #FFF;
}

.darkNav .nav .goLive .button.createStream:hover {
  color: #FFF;
}

.darkNav .nav .goLive.login .button {
  color: #FFF;
}

.darkNav .nav .userLinks a, .darkNav .nav .userLinks i, .darkNav .nav .menu i {
  color: #FFF !important;
}

.darkNav .nav .userLinks a:hover, .darkNav .nav .userLinks a.active {
  color: black;
}

.darkNav .notHomepageLogo {
  display: none;
}

.darkNav .homepageLogo {
  display: block;
}

.noticeModal {
  width: 666px;
  padding-top: 60px;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .noticeModal {
    width: 320px;
  }

  .noticeModal .row .columns {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }

  .noticeModal .row .columns:first-child {
    margin-bottom: 30px;
  }
}
.noticeModal .title {
  position: absolute;
  top: 0px;
  width: 100%;
  left: 0px;
  right: 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: 1.8px;
  text-align: center;
  color: #BBBBBB;
  line-height: 28px;
  padding-top: 2px;
  text-transform: uppercase;
}

a.scButton {
  text-decoration: none !important;
}

.noticeModal .modalIcon {
  text-align: center;
  color: rgba(0, 0, 0, 0.15);
  font-size: 100px;
  line-height: 0px;
  margin-bottom: 30px;
  height: 100px;
}

@media (max-width: 550px) {
  .noticeModal .modalIcon {
    text-align: center;
    color: rgba(0, 0, 0, 0.15);
    font-size: 60px;
    line-height: 0px;
    margin-bottom: 30px;
    height: 60px;
  }
}
.noticeModal .modalText {
  font-family: Roboto;
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.noticeModal .scButton {
  width: 100%;
}

@media (max-width: 550px) {
  .noticeModal .six:first-child {
    margin-bottom: 15px;
  }
}
.noticeModal h1 {
  font-family: Roboto;
  font-size: 30px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #333333;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.noticeModal.nflpaPartnership {
  padding-top: 30px;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 0px;
  background: #FFF !important;
}

.noticeModal.nflpaPartnership img {
  max-width: 100%;
  margin-bottom: 23px;
  line-height: 0px;
}

.noticeModal.nflpaPartnership .inner {
  padding-left: 30px;
  padding-right: 30px;
}

.noticeModal.nflpaPartnership .title {
  border-bottom: 0px;
}

.noticeModal.nflpaPartnership .modalText {
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
}

.noticeModal.nflpaPartnership .scButton {
  max-width: 334px;
  display: block;
  margin: 0 auto;
}

/* v2 footer */
.footerOuter .footer.container {
  margin: 0px auto;
  border: 0px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 100%;
}

.footerOuter .footerFanChain p {
  padding: 0px;
  margin: 0px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  color: #FFFFFF;
  letter-spacing: 1.83px;
  text-align: center;
  line-height: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 40px;
  padding-right: 40px;
  display: block;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .footerOuter .footerFanChain p {
    line-height: 10px;
  }
}
.footerOuter .footerFanChain a {
  text-align: center;
  margin-bottom: 50px;
  display: block;
  padding-left: 25px;
  padding-right: 25px;
}
.footerOuter .footerFanChain a img {
  width: 100%;
  max-width: 339px;
}

.footerOuter .footerSocial {
  text-align: center;
  height: 60px;
  overflow: hidden;
  padding: 15px 0px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.15);
}

.footerOuter .footerSocial a {
  display: inline-block;
  height: 30px;
  margin: 0 6px;
  overflow: hidden;
  color: #FFF;
}

.footerOuter .footerSocial a:first-child {
  margin-left: 0px;
}

.footerOuter .footerSocial a:last-child {
  margin-right: 0px;
}

.footerOuter .footerSocial i {
  font-size: 30px;
  line-height: 30px;
  color: #FFF;
}

@media (min-width: 768px) {
  .footerOuter .footerSocial {
    height: 70px;
    padding: 15px 0px;
  }

  .footerOuter .footerSocial a {
    height: 40px;
    margin: 0 15px;
  }

  .footerOuter .footerSocial i {
    font-size: 40px;
    line-height: 40px;
  }
}
.footerOuter .footer .outerLeft {
  display: none;
}

@media (min-width: 768px) {
  .footerOuter .footer .outerLeft {
    display: block;
  }

  .footerOuter .footer .internalLinksSet {
    display: inline-block;
    width: auto;
    margin-right: 30px;
  }
}
.footerOuter .footer .outerLeft, .footerOuter .footer .appStoreIcon {
  width: 25%;
  text-align: left;
}

.footerOuter .footer .buttons {
  width: 49%;
  float: right;
  margin-top: -5px;
  margin-top: -8px;
}

.footerOuter .footer .internalLinks a {
  font-size: 13x;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 1.8px;
  color: #FFFFFF;
}

.footerOuter .footer .buttons img {
  height: 25px;
}

.footerOuter .footer .buttons a {
  position: relative;
  top: -20px;
  margin-right: 15px;
  padding: 0px;
}

.footerOuter .footer .buttons a:first-child {
  top: 0px;
}

.footerOuter .footer .buttons a:last-child {
  margin-right: 0px;
}

.footerOuter .footer .buttons a:first-child img {
  height: 64px;
}

@media (min-width: 1170px) {
  .footerOuter .footer .buttons img {
    height: 35px;
  }

  .footerOuter .footer .buttons a {
    position: relative;
    top: -20px;
    margin-right: 30px;
    padding: 0px;
  }

  .footerOuter .footer .buttons a:first-child {
    top: 0px;
  }

  .footerOuter .footer .buttons a:first-child img {
    height: 85px;
  }

  .footerOuter .footer .outerLeft, .footerOuter .footer .appStoreIcon {
    margin-top: 25px;
    width: 25%;
    text-align: left;
  }

  .footerOuter .footer .buttons {
    margin-top: 0px;
  }
}
/* dedicated */
.footerOuter .footer .internalLinks {
  width: auto;
  margin-top: -10px;
}

.footerOuter .footer .internalLinksSet:last-child {
  margin-right: 0px;
}

.footerOuter .footer .outerLeft {
  margin-right: 30px;
}

@media (max-width: 1169px) {
  .footerOuter .footer .outerLeft {
    margin-right: 30px;
  }
}
.footerOuter .footer .outerLeft, .footerOuter .footer .appStoreIcon {
  float: left;
  width: auto;
}

@media (max-width: 767px) {
  .footerOuter .footer .outerLeft, .footerOuter .footer .appStoreIcon {
    float: none;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
  }

  .footerOuter .footer .buttons {
    width: 100%;
    float: none;
    text-align: center;
  }
}
.footerOuter .footer .appStoreIcon img {
  height: 47px;
  margin-right: 10px;
}

body:not(.footerSpacing):not(.homepage) .footerOuter.fixed {
  margin-top: 0px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
}
body:not(.footerSpacing).streamPlay .footerOuter {
  margin-top: 110px;
}
body:not(.footerSpacing).streamPlay .footerOuter.fixed {
  position: relative;
  margin-top: 40px;
}

/* pieces */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scAvatar {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 100px;
  position: relative;
  display: inline-block;
}
.scAvatar img {
  width: 60px;
  height: 60px;
}
.scAvatar .scAvatarOverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: transparent;
  display: block;
  border-radius: 100px;
  overflow: hidden;
}
.scAvatar .scAvatarDark {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: transparent;
  display: block;
  border-radius: 100px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}

/* follow / unfollow row */
.scUserFollowRow {
  position: relative;
  margin: 0px 0px 10px 0px;
  height: 70px;
}
.scUserFollowRow .scAvatar {
  position: absolute;
  left: 0px;
  top: 5px;
  padding: 0px !important;
}
.scUserFollowRow .scUserFollowRowText {
  margin-left: 75px;
  margin-right: 65px;
  position: relative;
  font-size: 11px;
  text-align: left;
  line-height: 2;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 55px;
  padding-top: 8px;
  color: #FFF;
  overflow: hidden;
}
.scUserFollowRow .scUserFollowRowText a {
  display: block;
  white-space: nowrap;
  font-size: 13px;
  color: #FFFFFF;
  line-height: 20px;
  text-transform: none;
  letter-spacing: 0px;
}
.scUserFollowRow .scUserFollowRowText a.scUserFollowName {
  font-weight: 700;
}
.scUserFollowRow .scUserFollowRowText a.scUserFollowUsername {
  color: rgba(255, 255, 255, 0.5);
}
.scUserFollowRow .scFollowButton {
  position: absolute;
  right: 0px;
  top: 5px;
  border-radius: 100%;
  overflow: hidden;
  display: block;
  width: 50px;
  height: 50px;
}
.scUserFollowRow a.scFollowButton:hover {
  color: #FFF;
}
.scUserFollowRow .scFollowButton i {
  position: absolute;
  line-height: 32px;
  font-size: 32px;
  left: 50%;
  top: 50%;
  margin-top: -16px;
  margin-left: -16px;
}

/* new tabs */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scTabs {
  display: block;
  margin-top: 12px;
  margin-bottom: 24px;
  margin-bottom: 30px;
}
.scTabs:after {
  content: "";
  display: table;
  clear: both;
}
.scTabs.scTabsIcons i {
  font-size: 32px;
  line-height: 32px;
  display: inline;
}
.scTabs.scTabsIcons span {
  display: inline-block;
  position: relative;
  top: -10px;
  padding-left: 10px;
}
.scTabs.scTabsIcons a.scTab {
  line-height: 0px;
  padding-top: 9px;
  padding-bottom: 8px;
}
.scTabs.scTabsIcons a.scTab.active {
  padding-bottom: 6px;
  border-bottom-width: 3px;
}
.scTabs.scTabsIcons a.scTab.hidden {
  display: none !important;
}
.scTabs.scTabsIcons.whiteHover a.scTab:not(.active):hover {
  color: #FFFFFF !important;
}
.scTabs a.scTab {
  display: inline-block;
  float: left;
  width: 50%;
  margin: 0px;
  padding: 0px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: 22px;
  padding-bottom: 14px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.3);
  padding-top: 24px;
  padding-top: 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  transition: 0.2s;
  line-height: 11px;
  padding-top: 20px;
  padding-bottom: 18px;
  border-bottom-width: 1px;
}
.scTabs.scTabsDark a.scTab {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
.scTabs.scTabsDark a.scTab:not(.active) i {
  color: rgba(255, 255, 255, 0.3);
}
.scTabs a.scTab.active {
  padding-bottom: 16px;
  border-bottom-width: 3px;
}
.scTabs.scTabsThree a.scTab {
  width: 33.32%;
}
.scTabs.scTabsFour a.scTab {
  width: 25%;
}
.scTabs.scTabsFive a.scTab {
  width: 20%;
}
.scTabs.scTabsSix a.scTab {
  width: 16.66%;
}

.activeBlack a.scTab.active {
  color: rgba(0, 0, 0, 0.9);
  border-color: rgba(0, 0, 0, 0.9);
}

.scTabs:not(.activeBlack):not(.noColor) a.scTab.active:nth-child(1) {
  border-color: #F71E33;
  color: #F71E33;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active:nth-child(2) {
  border-color: #158EFC;
  color: #158EFC;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active:nth-child(3) {
  border-color: #7AC943;
  color: #7AC943;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active:nth-child(4) {
  border-color: #FECF00;
  color: #FECF00;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active:nth-child(5) {
  border-color: #F47924;
  color: #F47924;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active:nth-child(6) {
  border-color: #158EFC;
  color: #158EFC;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active.scRed {
  border-color: #F71E33;
  color: #F71E33;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active.scPurple {
  border-color: #9E4CE6;
  color: #9E4CE6;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active.scBlue {
  border-color: #158EFC;
  color: #158EFC;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active.scGreen {
  border-color: #7AC943;
  color: #7AC943;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active.scYellow {
  border-color: #FECF00;
  color: #FECF00;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab.active.scOrange {
  border-color: #F47924;
  color: #F47924;
}
.scTabs:not(.activeBlack):not(.noColor) a.scTab:not(.active):hover {
  color: rgba(0, 0, 0, 0.5);
}

.scTabs.noColor a.scTab.active {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.scTabs.scTabsDark a.scTab:not(.active):hover {
  color: #FFFFFF;
}

.scTabs.scTabsIcons i {
  font-size: 32px;
  line-height: 32px;
  display: inline;
}
.scTabs.scTabsIcons a.scTab {
  line-height: 0px;
  padding-top: 9px;
  padding-bottom: 8px;
}
.scTabs.scTabsIcons a.scTab.active {
  padding-bottom: 6px;
  border-bottom-width: 3px;
}
.scTabs.scTabsBox {
  background: none;
}
.scTabs.scTabsBox.onDark a.scTab {
  color: #FFFFFF;
}
.scTabs.scTabsBox.onDark a.scTab:not(.active) {
  border-color: rgba(255, 255, 255, 0.3);
}
.scTabs.scTabsBox a.scTab {
  display: inline-block;
  float: left;
  width: calc(100%/3 - 20px/3);
  box-sizing: border-box;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  padding: 4px 0px 4px 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 10px;
  font-size: 13px;
  line-height: 20px;
}
.scTabs.scTabsBox a.scTab:last-child {
  margin-right: 0px;
}
.scTabs.scTabsBox a.scTab.active {
  background: #158EFC;
  color: white;
  border: 1px solid #158EFC;
  position: relative;
  z-index: 2;
}
.scTabs.scTabsBox.scTabsTwo a.scTab {
  width: calc(50% - 5px);
}
.scTabs.scTabsMixed a.scTab {
  font-size: 11px;
  line-height: 32px;
  border-bottom-width: 1px;
  padding-top: 9px;
  padding-bottom: 8px;
}
.scTabs.scTabsMixed a.scTab.active {
  padding-bottom: 6px;
  border-bottom-width: 3px;
}
.scTabs.scTabsMixed a.scTab i {
  position: relative;
  top: 11px;
  font-size: 32px;
  line-height: 0px;
  padding-right: 5px;
}

@media (max-width: 1170px) {
  .scTabs:not(.scTabsBox) {
    margin-left: -20px;
    margin-right: -20px;
  }
}
/* new buttons */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scBoxButton, .scBoxButtonIcon {
  cursor: pointer;
  height: 32px !important;
  border: solid 1px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  display: inherit;
  white-space: nowrap;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 32px;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0 7px;
  margin: 0 5px 0 0;
  transition: 0.2s;
  position: relative;
}
.scBoxButton:hover, .scBoxButtonIcon:hover {
  color: rgba(0, 0, 0, 0.9);
  border-color: rgba(0, 0, 0, 0.9);
}
.scBoxButton.active, .scBoxButtonIcon.active {
  color: rgba(0, 0, 0, 0.9);
  border-color: rgba(0, 0, 0, 0.9);
}
.scBoxButton.dark, .scBoxButtonIcon.dark {
  border: solid 1px rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}
.scBoxButton.dark:hover, .scBoxButtonIcon.dark:hover {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.scBoxButton.dark.active, .scBoxButtonIcon.dark.active {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.scBoxButton.disabled, .scBoxButtonIcon.disabled {
  cursor: not-allowed;
  color: rgba(0, 0, 0, 0.3);
}
.scBoxButton.disabled:hover, .scBoxButtonIcon.disabled:hover {
  color: rgba(0, 0, 0, 0.3);
  border-color: inherit;
}
.scBoxButton.disabled.dark, .scBoxButtonIcon.disabled.dark {
  color: rgba(255, 255, 255, 0.3);
}
.scBoxButton.hoverHighlighted:hover.red, .scBoxButtonIcon.hoverHighlighted:hover.red {
  color: #FFFFFF;
  background: #F71E33;
  border-color: #F71E33;
}
.scBoxButton.hoverHighlighted:hover.purple, .scBoxButtonIcon.hoverHighlighted:hover.purple {
  color: #FFFFFF;
  background: #9E4CE6;
  border-color: #9E4CE6;
}
.scBoxButton.hoverHighlighted:hover.blue, .scBoxButtonIcon.hoverHighlighted:hover.blue {
  color: #FFFFFF;
  background: #158EFC;
  border-color: #158EFC;
}
.scBoxButton.hoverHighlighted:hover.green, .scBoxButtonIcon.hoverHighlighted:hover.green {
  color: #FFFFFF;
  background: #7AC943;
  border-color: #7AC943;
}
.scBoxButton.hoverHighlighted:hover.yellow, .scBoxButtonIcon.hoverHighlighted:hover.yellow {
  color: #FFFFFF;
  background: #FECF00;
  border-color: #FECF00;
}
.scBoxButton.hoverHighlighted:hover.orange, .scBoxButtonIcon.hoverHighlighted:hover.orange {
  color: #FFFFFF;
  background: #F47924;
  border-color: #F47924;
}
.scBoxButton.highlighted, .scBoxButtonIcon.highlighted {
  color: #FFFFFF;
}
.scBoxButton.highlighted.primary, .scBoxButtonIcon.highlighted.primary {
  background: #222222;
  border-color: #222222;
  color: #FFFFFF;
}
.scBoxButton.highlighted.primary:hover, .scBoxButtonIcon.highlighted.primary:hover {
  background: #111111;
  border-color: #111111;
}
.scBoxButton.highlighted.primary.dark, .scBoxButtonIcon.highlighted.primary.dark {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #222222;
}
.scBoxButton.highlighted.primary.dark:hover, .scBoxButtonIcon.highlighted.primary.dark:hover {
  border-color: #FFFFFF;
}
.scBoxButton.highlighted.red, .scBoxButtonIcon.highlighted.red {
  background: #F71E33;
  border-color: #F71E33;
}
.scBoxButton.highlighted.red:hover, .scBoxButtonIcon.highlighted.red:hover {
  border-color: #F71E33;
}
.scBoxButton.highlighted.purple, .scBoxButtonIcon.highlighted.purple {
  background: #9E4CE6;
  border-color: #9E4CE6;
}
.scBoxButton.highlighted.purple:hover, .scBoxButtonIcon.highlighted.purple:hover {
  border-color: #9E4CE6;
}
.scBoxButton.highlighted.blue, .scBoxButtonIcon.highlighted.blue {
  background: #158EFC;
  border-color: #158EFC;
}
.scBoxButton.highlighted.blue:hover, .scBoxButtonIcon.highlighted.blue:hover {
  border-color: #158EFC;
}
.scBoxButton.highlighted.green, .scBoxButtonIcon.highlighted.green {
  background: #7AC943;
  border-color: #7AC943;
}
.scBoxButton.highlighted.green:hover, .scBoxButtonIcon.highlighted.green:hover {
  border-color: #7AC943;
}
.scBoxButton.highlighted.yellow, .scBoxButtonIcon.highlighted.yellow {
  background: #FECF00;
  border-color: #FECF00;
}
.scBoxButton.highlighted.yellow:hover, .scBoxButtonIcon.highlighted.yellow:hover {
  border-color: #FECF00;
}
.scBoxButton.highlighted.orange, .scBoxButtonIcon.highlighted.orange {
  background: #F47924;
  border-color: #F47924;
}
.scBoxButton.highlighted.orange:hover, .scBoxButtonIcon.highlighted.orange:hover {
  border-color: #F47924;
}
.scBoxButton.highlighted.gradient, .scBoxButton.highlighted.gradiant, .scBoxButton.highlighted.gradient2, .scBoxButton.highlighted.gradiant2, .scBoxButtonIcon.highlighted.gradient, .scBoxButtonIcon.highlighted.gradiant, .scBoxButtonIcon.highlighted.gradient2, .scBoxButtonIcon.highlighted.gradiant2 {
  border: none;
  height: 34px !important;
  line-height: 34px;
  padding: 0 8px;
}
.scBoxButton.highlighted.gradient.iconLeft, .scBoxButton.highlighted.gradiant.iconLeft, .scBoxButton.highlighted.gradient2.iconLeft, .scBoxButton.highlighted.gradiant2.iconLeft, .scBoxButtonIcon.highlighted.gradient.iconLeft, .scBoxButtonIcon.highlighted.gradiant.iconLeft, .scBoxButtonIcon.highlighted.gradient2.iconLeft, .scBoxButtonIcon.highlighted.gradiant2.iconLeft {
  padding-left: 0;
}
.scBoxButton.highlighted.gradient.iconRight, .scBoxButton.highlighted.gradiant.iconRight, .scBoxButton.highlighted.gradient2.iconRight, .scBoxButton.highlighted.gradiant2.iconRight, .scBoxButtonIcon.highlighted.gradient.iconRight, .scBoxButtonIcon.highlighted.gradiant.iconRight, .scBoxButtonIcon.highlighted.gradient2.iconRight, .scBoxButtonIcon.highlighted.gradiant2.iconRight {
  padding-right: 0;
}
.scBoxButton.highlighted.gradient:hover, .scBoxButton.highlighted.gradiant:hover, .scBoxButton.highlighted.gradient2:hover, .scBoxButton.highlighted.gradiant2:hover, .scBoxButtonIcon.highlighted.gradient:hover, .scBoxButtonIcon.highlighted.gradiant:hover, .scBoxButtonIcon.highlighted.gradient2:hover, .scBoxButtonIcon.highlighted.gradiant2:hover {
  border: none;
}
.scBoxButton.highlighted.gradient, .scBoxButton.highlighted.gradiant, .scBoxButtonIcon.highlighted.gradient, .scBoxButtonIcon.highlighted.gradiant {
  background: linear-gradient(45deg, #F71E33 0%, #FECF00 100%);
}
.scBoxButton.highlighted.gradient2, .scBoxButton.highlighted.gradiant2, .scBoxButtonIcon.highlighted.gradient2, .scBoxButtonIcon.highlighted.gradiant2 {
  background: linear-gradient(45deg, #722fd3 0%, #158EFC 100%);
}
.scBoxButton .appIcon, .scBoxButtonIcon .appIcon {
  width: 34px;
  border-radius: 4px;
  float: left;
  margin: -1px 7px 0 -8px;
}

.scBoxButtonIcon {
  padding: 0;
}
.scBoxButtonIcon i {
  font-size: 24px;
  line-height: inherit;
  float: left;
  padding: 0 4px;
}
.scBoxButtonIcon i.iconRed {
  color: #F71E33;
}
.scBoxButtonIcon i.iconPurple {
  color: #9E4CE6;
}
.scBoxButtonIcon i.iconBlue {
  color: #158EFC;
}
.scBoxButtonIcon i.iconGreen {
  color: #7AC943;
}
.scBoxButtonIcon i.iconYellow {
  color: #FECF00;
}
.scBoxButtonIcon i.iconOrange {
  color: #F47924;
}
.scBoxButtonIcon.iconLeft {
  padding: 0 7px 0 0;
}
.scBoxButtonIcon.iconRight {
  padding: 0 0 0 7px;
}
.scBoxButtonIcon.iconRight i {
  float: right;
}
.scBoxButtonIcon.iconRight.specialTag i {
  background: #F71E33;
  border: 1px solid #F71E33;
  border-radius: 5px;
  margin: -1px -1px 0 7px;
}
.scBoxButtonIcon.iconBoth {
  padding: 0;
}
.scBoxButtonIcon.iconBoth i:nth-child(2) {
  float: right;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  margin-left: 7px;
}

.scBoxButtonGroup {
  margin: 0;
  padding: 0;
  height: 34px;
  display: inline;
  position: relative;
  float: left;
}
.scBoxButtonGroup .scBoxButtonIcon {
  float: left;
}
.scBoxButtonGroup .scBoxButtonIcon:hover:not(.disabled) ~ .divider,
.scBoxButtonGroup .scBoxButtonIcon:hover:not(.disabled) ~ .dividerFix {
  background: #222222 !important;
}
.scBoxButtonGroup .scBoxButtonIcon:hover:not(.disabled) ~ .divider.dark,
.scBoxButtonGroup .scBoxButtonIcon:hover:not(.disabled) ~ .dividerFix.dark {
  background: #FFFFFF !important;
}
.scBoxButtonGroup .scBoxButton.scBoxButtonIcon {
  padding-right: 7px !important;
}
.scBoxButtonGroup .scBoxButtonIcon:first-child,
.scBoxButtonGroup .scBoxButtonIcon.first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 1px !important;
  border-right: none;
  float: left;
}
.scBoxButtonGroup .scBoxButtonIcon:last-child,
.scBoxButtonGroup .scBoxButtonIcon.last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  margin-right: 0;
}
.scBoxButtonGroup .iconBoth:first-child {
  padding: 0 7px 0 0;
}
.scBoxButtonGroup .iconBoth:nth-child(2) {
  width: 32px;
}
.scBoxButtonGroup .divider, .scBoxButtonGroup .dividerFix {
  position: absolute;
  top: 0px;
  right: 33px;
  width: 1px;
  height: 34px;
  float: left;
  transition: 0.2s;
}
.scBoxButtonGroup .divider:hover, .scBoxButtonGroup .dividerFix:hover {
  transition: 0.2s;
}
.scBoxButtonGroup .divider {
  background: rgba(0, 0, 0, 0.15);
}
.scBoxButtonGroup .divider.dark {
  background: rgba(255, 255, 255, 0.15);
}
.scBoxButtonGroup .dividerFix {
  background: rgba(0, 0, 0, 0.05);
}
.scBoxButtonGroup .dividerFix.dark {
  background: rgba(255, 255, 255, 0.15);
}

.scButton {
  text-transform: uppercase;
  transition: 0.2s;
  vertical-align: top;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 100px;
  padding: 15px 19px 15px 21px;
  font-size: 13px;
  border: 0px solid #7AC943;
  background: #7AC943;
  color: #FFF;
  font-family: Roboto;
  font-weight: bold;
  line-height: 20px;
  height: 50px;
  letter-spacing: 2px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  min-width: 150px;
}
.scButton.disabled {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 1px) {
  .scButton {
    font-size: 11px;
    line-height: 40px;
  }
}
.scButton:hover {
  color: #FFF;
}

a.scButton {
  display: inline-block;
}

a.scButton.scButtonFullWidth {
  display: block;
  text-align: center;
  margin-right: 0px;
}

a.scButton.withIconLeft {
  padding-left: 50px;
  position: relative;
}
a.scButton.withIconLeft i {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 30px;
  line-height: 30px;
}

a.scButton.withIconRight {
  padding-right: 50px;
  position: relative;
}
a.scButton.withIconRight i {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 30px;
  line-height: 30px;
}

a.scButton.scButtonOutline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.15);
}

/* Icon buttons */
.scIconButton {
  display: inline-block;
  height: 50px;
  width: 50px;
  font-size: 26px;
  line-height: 50px;
  text-align: center;
  border-radius: 100px;
  background: #7AC943;
  color: #FFF;
  position: relative;
  margin-right: 11px;
  cursor: pointer;
  box-sizing: border-box;
}

.scIconButton i {
  font-size: 30px;
  line-height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
}

a.scIconButton, .scIconButton {
  display: inline-block;
}

.scIconButton:hover {
  color: #FFF;
}

.scButtonSegment {
  display: inline-block;
  padding: 0;
  margin: 0;
  min-width: 90px;
  font-family: Roboto;
  font-size: 11px;
  line-height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-left-width: 0px;
  border-right-width: 0px;
  margin-left: -2px;
  margin-right: -2px;
  letter-spacing: 2px;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  padding-left: 10px;
  padding-right: 10px;
  min-height: 48px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.2s;
  vertical-align: top;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.scButtonSegment:hover {
  color: rgba(0, 0, 0, 0.5);
}

.scButtonSegment:active {
  color: #000;
}

.scButtonSegment.scButtonSegmentLeft {
  border-radius: 100px 0px 0px 100px;
  border-left-width: 1px;
}

.scButtonSegment.scButtonSegmentCenter {
  border-left-width: 1px;
}

.scButtonSegment.scButtonSegmentRight {
  border-radius: 0px 100px 100px 0px;
  border-right-width: 1px;
  border-left-width: 1px;
}

.scButtonSegment i {
  font-size: 22px;
  line-height: 0px;
  padding-right: 5px;
  position: relative;
  top: 5px;
}

.scButtonSegment.scButtonSegmentRight:hover {
  opacity: 0.85;
  color: #FFF;
}

.scButtonSegment.scButtonSegmentRight:active {
  opacity: 0.85;
  color: #FFF;
}

.scButtonSegment.scButtonSegmentRight:hover {
  color: #FFF !important;
}

/* common colorations */
.scButton.scBlue, .scIconButton.scBlue {
  background-color: #158EFC;
  border: 1px solid #158EFC;
}

.scButton.scRed, .scIconButton.scRed {
  background-color: #F71E33;
  border: 1px solid #F71E33;
}

.scButton.scButtonSecondary, .scIconButton.scButtonSecondary {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: #FFF;
}

.scButton.scButtonSecondary:hover, .scIconButton.scButtonSecondary:hover {
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #FFF;
}

.scButton.scButtonSecondaryWhite, .scIconButton.scButtonSecondaryWhite {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  color: #FFF;
}

.scButton.scButtonSecondaryWhite:hover, .scIconButton.scButtonSecondaryWhite:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid transparent;
  color: #FFF;
  opacity: 1;
}

.scButton.scButtonSecondaryTransparentWhite, .scIconButton.scButtonSecondaryTransparentWhite {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFF;
}

.scButton.scButtonSecondaryTransparentWhite:hover, .scIconButton.scButtonSecondaryTransparentWhite:hover {
  background-color: transparent;
  border: 1px solid white;
  color: #FFF;
  opacity: 1;
}

.scButton.scButtonDisabled, .scIconButton.scButtonDisabled {
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.3);
}

.scButton.scButtonDisabled:hover, .scIconButton.scButtonDisabled:hover {
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.3);
}

.scButton.scButtonDisabledWhite, .scIconButton.scButtonDisabledWhite {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

.scButton.scButtonDisabledWhite:hover, .scIconButton.scButtonDisabledWhite:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.3);
  opacity: 1;
  cursor: default;
}

.scButton.scButtonDisabledTransparentWhite, .scIconButton.scButtonDisabledTransparentWhite {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

.scButton.scButtonDisabledTransparentWhite:hover, .scIconButton.scButtonDisabledTransparentWhite:hover {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.3);
  opacity: 1;
  cursor: default;
}

.scButton.scButtonBorder, .scIconButton.scButtonBorder {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.3);
}

.scButton.scButtonBorder:hover, .scIconButton.scButtonBorder:hover {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.5);
}

.scButton.scButtonBorderWhite, .scIconButton.scButtonBorderWhite {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.scButton.scButtonBorderWhite:hover, .scIconButton.scButtonBorderWhite:hover {
  background-color: transparent;
  border: 1px solid white;
  color: white;
}

@media (max-width: 1170px) {
  .scButton.scButtonBorderWhite.scButtonBorderMobile, .scIconButton.scButtonBorderWhite.scButtonBorderMobile {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.3);
  }

  .scButton.scButtonBorderWhite.scButtonBorderMobile:hover, .scIconButton.scButtonBorderWhite.scButtonBorderMobile:hover {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.5);
  }
}
.scButtonBadge {
  text-transform: uppercase;
  transition: 0.2s;
  vertical-align: top;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 100px;
  padding: 2px 6px 2px 8px;
  font-size: 13px;
  border: 0px solid #7AC943;
  color: #FFF;
  font-family: Roboto;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  height: 24px;
  letter-spacing: 2px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  min-width: 60px;
}
.scButtonBadge.withIcon {
  padding-left: 24px;
  position: relative;
}
.scButtonBadge.withIcon i {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 24px;
}

.scButtonBadge:hover {
  color: #FFF;
}

.scButtonBadge.scButtonBorderWhite {
  line-height: 24px;
}

@media (max-width: 1023px) {
  .disabledSectionOfSCSS .scButtonBadge {
    line-height: 25px;
  }
  .disabledSectionOfSCSS .scButton.scButtonBadge.scColorBorderWhite {
    line-height: 25px;
  }
  .disabledSectionOfSCSS .scButton.scButtonBadge.scColorBorderTransparent {
    line-height: 25px;
  }
  .disabledSectionOfSCSS .scButtonBadge.scColorBorderWhite {
    line-height: 25px;
  }
  .disabledSectionOfSCSS .scButtonBadge.scColorBorderTransparent {
    line-height: 25px;
  }
}
.scButtonGhost {
  border: solid 1px rgba(0, 0, 0, 0.15);
  background: transparent;
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 20px;
  padding-top: 15px;
  transition: 0.2s;
}
.scButtonGhost.scButtonBadge {
  line-height: 20px;
  height: 24px;
}
.scButtonGhost.scButtonBadge {
  line-height: 20px;
  height: 24px;
}

.scButtonGhost:hover {
  border: solid 1px rgba(0, 0, 0, 0.3);
  color: black;
}

.scButtonGhostWhite.scButtonGhost {
  border: solid 1px rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  line-height: 20px;
  padding-top: 15px;
}
.scButtonGhostWhite.scButtonGhost.scButtonBadge {
  line-height: 20px;
  height: 24px;
  padding-top: 2px;
}
.scButtonGhostWhite.scButtonGhost.scButtonBadge {
  line-height: 20px;
  height: 24px;
}

.scButtonGhostWhite.scButtonGhost {
  border: solid 1px rgba(255, 255, 255, 0.3);
  color: white;
}

.scButtonGhostWhite.scButtonGhost.scButtonGhostWhiteHover:hover {
  border-color: #FFF;
}

.scButton.scColorBorderWhite {
  font-size: 12px;
  line-height: 20px;
  padding-top: 15px;
}

.scButton.scColorBorderTransparent {
  font-size: 12px;
  line-height: 20px;
  padding-top: 15px;
}

.scButton.scButtonBadge.scColorBorderWhite {
  line-height: 26px;
}

.scButton.scButtonBadge.scColorBorderTransparent {
  line-height: 26px;
}

.scButtonBadge.scColorBorderWhite {
  line-height: 26px;
}

.scButtonBadge.scColorBorderTransparent {
  line-height: 26px;
}

.scButtonPill {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-top: 10px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  left: 2.5%;
  transition: 0.2s;
  cursor: pointer;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.scButtonPill i::selection {
  background: transparent;
}

.scButtonPill::-moz-selection {
  background: transparent;
}

.scButtonPill::selection {
  background: transparent;
}

.scButtonPill::-moz-selection {
  background: transparent;
}

.scButtonPill:hover {
  background: rgba(0, 0, 0, 0.9);
}

.scButtonPill.topSegment {
  border-radius: 50px 0px 0px 50px;
  z-index: 5;
}

.scButtonPill.bottomSegment {
  border-radius: 0px 50px 50px 0px;
  border-right: 0px;
  z-index: 1;
}

.scButtonPill.secondSegment {
  z-index: 4;
}

.scButtonPill.thirdSegment {
  z-index: 3;
}

.scButtonPill.fourthSegment {
  z-index: 2;
}

.scButtonPill i {
  font-size: 24px;
  padding: 8px;
  display: inline-block;
}

.scButtonSquare, a.scButtonSquare, .scButton.scButtonSquare, a.scButton.scButtonSquare {
  display: block;
  margin-bottom: 10px;
  height: 50px;
  overflow: hidden;
  background: #158EFC;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 20px;
  padding: 15px 0px;
  letter-spacing: 2px;
  color: #FFFFFF;
  position: relative;
  border-radius: 0px;
  box-sizing: border-box;
  padding-left: 60px;
  text-align: left;
}

.scButtonSquare i {
  position: absolute;
  left: 15px;
  top: 10px;
  font-size: 30px;
}

.scButtonSquare i.arrow {
  right: 15px;
  left: inherit;
  font-size: 30px;
  top: 10px;
}

.scButton.scButtonWithIcon {
  position: relative;
  padding-left: 50px;
}
.scButton.scButtonWithIcon i {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 30px;
}

/* cards */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scCardBox {
  position: relative;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}

.scCardWrap {
  width: 33%;
  box-sizing: border-box;
  padding: 0 15px 30px 15px;
  float: left;
}

@media (max-width: 800px) {
  .scCardWrap {
    width: 50%;
  }
}
@media (max-width: 500px) {
  .scCardWrap {
    width: 100%;
    padding: 0 0 20px 0;
  }
}
.scCard {
  background: #FFFFFF;
  font-size: 17.1445px;
  line-height: 17.1445px;
  position: relative;
  width: 100%;
  border-radius: 5px 5px 0px 0px;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.scCard .scCardBorder {
  position: absolute;
  bottom: 0px;
  height: 2.5%;
  width: 100%;
  background: #CCC;
}
.scCard:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.scCard .scCardContent {
  position: absolute;
  width: 80%;
  height: 80%;
  overflow: hidden;
  left: 10%;
  top: 10%;
  font-size: 17.5439px;
  line-height: 17.5439px;
  font-size: 18.6455px;
  line-height: 18.6455px;
}
.scCard.scCardNews {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.scCard.scCardNews .scCardBorder {
  background: #158EFC;
}
.scCard.scCardPR {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.scCard.scCardPR:hover .scCardMouseOver {
  height: 10%;
}
.scCard.scCardPR:hover .scCardMouseOverText {
  opacity: 1;
}
.scCard.scCardPR .scCardBorder {
  background: #158EFC;
}
.scCard.scCardPR .scCardContent .quote {
  position: absolute;
  left: 0%;
  top: 59.375%;
  max-height: 6em;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 2em;
  text-transform: uppercase;
}
.scCard.scCardPR img {
  border-radius: 100px;
}
.scCard img {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 25%;
  top: 6.25%;
}
.scCard.scCardNews {
  border-bottom: 0px;
}
.scCard.scCardNews .scCardContent .quote {
  position: absolute;
  left: 0%;
  bottom: 15.625%;
  max-height: 4em;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 2em;
  text-transform: uppercase;
}
.scCard.scCardNews .scCardContent .source {
  position: absolute;
  left: 0%;
  bottom: 6.25%;
  height: 6.25%;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}

.scCardMouseOver {
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 10%;
  background: #158EFC;
  height: 0%;
  transition: 0.2s;
}

.scCard.scCardNews:hover .scCardMouseOver {
  height: 10%;
}
.scCard.scCardNews:hover .scCardMouseOverText {
  opacity: 1;
}

.scCardMouseOverText {
  position: absolute;
  bottom: 2.5%;
  width: 100%;
  text-align: center;
  line-height: 1em;
  font-size: 1em;
  color: #FFF;
  opacity: 0;
  transition: 0.2s;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 0em;
  font-size: 0.75em;
  bottom: 5%;
}

.scCard.scCardNews.scCardRadio .scCardBorder, .scCard.scCardNews.scCardRadio .scCardMouseOver {
  background: #7AC943;
}
.scCard.scCardNews.scCardRadio.scCardRadioVideo .scCardBorder, .scCard.scCardNews.scCardRadio.scCardRadioVideo .scCardMouseOver {
  background: #F71E33;
}
.scCard.scCardNews.scCardRadio .scCardContent .quote {
  position: absolute;
  left: 0%;
  bottom: 27.75%;
  max-height: 25%;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 2em;
  text-transform: uppercase;
}
.scCard.scCardNews.scCardRadio .scCardContent .timestamp {
  position: absolute;
  left: 0%;
  bottom: 18.75%;
  height: 6.25%;
  overflow: visible;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}
.scCard.scCardNews.scCardRadio .scCardContent .timestamp i {
  position: relative;
  top: 0.1em;
  font-size: 1.1em;
}
.scCard .scCardCoverLink {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.scCard.scCardTeam {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.scCard.scCardTeam .scCardBorderHover {
  position: absolute;
  bottom: 0px;
  height: 0%;
  width: 100%;
  background: #CCC;
  transition: 0.2s;
  overflow: hidden;
  text-align: center;
  font-size: 0.8em;
  color: #FFF;
  line-height: 2.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
.scCard.scCardTeam:hover .scCardBorderHover {
  height: 2.5em;
}
.scCard.scCardTeam .scCardContent .teamName {
  position: absolute;
  left: 0%;
  bottom: 18.75%;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 1em;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.scCard.scCardTeam .scCardContent .teamTitle {
  position: absolute;
  left: 0%;
  bottom: 6.25%;
  height: 6.25%;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}
.scCard.scCardTeam img {
  width: 56.25%;
  height: 56.25%;
  position: absolute;
  left: 21.875%;
  top: 6.25%;
}
.scCard.scCardTeam.teamAmbassador img {
  width: 75%;
  height: 45%;
  position: absolute;
  left: 12.5%;
  top: 11.875%;
}
.scCard.scCardTeam.teamAmbassador .scCardContent .teamName {
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 2px;
  text-align: center;
  color: #333333;
  bottom: 10%;
}
.scCard.scCardTeam.teamInternal .scCardBorder, .scCard.scCardTeam.teamInternal .scCardBorderHover {
  background: #F71E33;
}
.scCard.scCardTeam.teamUserProfile img {
  border-radius: 100px;
}
.scCard.scCardTeam.teamUserProfile .scCardBorder, .scCard.scCardTeam.teamUserProfile .scCardBorderHover {
  background: #7AC943;
}
.scCard.scCardTeam.teamAdvisorInvestor .scCardBorder, .scCard.scCardTeam.teamAdvisorInvestor .scCardBorderHover {
  background: #158EFC;
}
.scCard.scCardTeam.teamAmbassador .scCardBorder {
  background: #FECF00;
}
.scCard.scCardTeam.teamInvestor .scCardBorder, .scCard.scCardTeam.teamInvestor .scCardBorderHover {
  background: #FECF00;
}
.scCard.scCardTeam.teamCryptoPartner .scCardBorder, .scCard.scCardTeam.teamCryptoPartner .scCardBorderHover {
  background: #F47924;
}
.scCard.scCardTeam.teamInvestor img, .scCard.scCardTeam.teamCryptoPartner img {
  width: 75%;
  height: 45%;
  position: absolute;
  left: 12.5%;
  top: 11.875%;
}
.scCard.scCardBroadcaster {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
}
.scCard.scCardBroadcaster:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
}
.scCard.scCardBroadcaster .scCardContent .scCardBroadcasterName {
  position: absolute;
  left: 0%;
  top: 62.5%;
  height: 6.25%;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 1em;
  text-transform: uppercase;
}
.scCard.scCardBroadcaster .scCardContent .scCardBroadcasterUsername {
  position: absolute;
  left: 0%;
  top: 75%;
  height: 6.25%;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}
.scCard.scCardBroadcaster img.scCardBroadcasterProfilePicture {
  width: 56.25%;
  height: 56.25%;
  position: absolute;
  left: 21.875%;
  top: 0%;
  border-radius: 300px;
}
.scCard.scCardBroadcaster .scCardBroadcasterProfileLink {
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  overflow: hidden;
  left: 10%;
  top: 10%;
}
.scCard.scCardBroadcaster .scCardBroadcasterCTABox {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}
.scCard.scCardBroadcaster .scCardBroadcasterCTABoxBackground {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  width: 0%;
}
.scCard.scCardBroadcaster .scCardBroadcasterCTABoxBackground.activeUnfollow, .scCard.scCardBroadcaster .scCardBroadcasterCTABoxBackground.scCardBroadcasterFollowing {
  background: #7AC943;
  border-color: #7AC943;
  width: 100%;
}
.scCard.scCardBroadcaster .scCardBroadcasterFollowButton {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background: #7AC943;
  color: #FFF;
  display: block;
  height: 15%;
  width: 15%;
  border-top: 1px solid #7AC943;
}
.scCard.scCardBroadcaster .scCardBroadcasterFollowButton i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 2em;
  line-height: 2em;
  margin-top: -1em;
  margin-left: -0.5em;
}
.scCard.scCardBroadcaster .scCardBroadcasterFollowText {
  position: absolute;
  left: 5%;
  bottom: 5%;
  display: block;
  line-height: 1em;
  font-size: 1em;
  text-align: left;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
  font-weight: 600;
  bottom: 7.5%;
  line-height: 0em;
  font-size: 0.75em;
}
.scCard.scCardBroadcaster .scCardBroadcasterUnfollowed {
  transition: 0.2s;
}
.scCard.scCardBroadcaster .scCardBroadcasterUnfollowed.active {
  color: #FFF;
}
.scCard.scCardBroadcaster .scCardBroadcasterUnfollowed.scCardBroadcasterscUnfollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardBroadcaster .scCardBroadcasterFollowed.scCardBroadcasterscFollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardBroadcaster .scCardBroadcasterUnfollowed.scCardBroadcasterFollowing {
  display: none;
}
.scCard.scCardBroadcaster .scCardBroadcasterFollowed {
  display: none;
  color: #FFF;
}
.scCard.scCardBroadcaster .scCardBroadcasterFollowed.scCardBroadcasterFollowing {
  display: block;
}
.scCard.scCardUser {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
  overflow: hidden;
}
.scCard.scCardUser:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
}
.scCard.scCardUser .scCardContent .scCardUserName {
  position: absolute;
  left: 0%;
  top: 62.5%;
  height: 6.25%;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 1em;
  text-transform: uppercase;
}
.scCard.scCardUser .scCardContent .scCardUserUsername {
  position: absolute;
  left: 0%;
  top: 75%;
  height: 6.25%;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}
.scCard.scCardUser img.scCardUserProfilePicture {
  width: 32.5%;
  height: 32.5%;
  position: absolute;
  left: 33.75%;
  top: 17.5%;
  border-radius: 300px;
  border: 3px solid #FFF;
}
.scCard.scCardUser .scCardUserProfileLink {
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  overflow: hidden;
  left: 10%;
  top: 10%;
}
.scCard.scCardUser .scCardUserCTABox {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  background: #7AC943;
  border-color: #7AC943;
  width: 100%;
}
.scCard.scCardUser .scCardUserCTABoxBackground {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  background: #7AC943;
  border-color: #7AC943;
  width: 100%;
  width: 0%;
}
.scCard.scCardUser .scCardUserCTABoxBackground.activeUnfollow, .scCard.scCardUser .scCardUserCTABoxBackground.scCardUserFollowing {
  background: #7AC943;
  border-color: #7AC943;
  width: 100%;
}
.scCard.scCardUser .scCardUserFollowButton {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background: #7AC943;
  color: #FFF;
  display: block;
  height: 15%;
  width: 15%;
  border-top: 1px solid #7AC943;
}
.scCard.scCardUser .scCardUserFollowButton i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 2em;
  line-height: 2em;
  margin-top: -1em;
  margin-left: -0.5em;
}
.scCard.scCardUser .scCardUserFollowText {
  position: absolute;
  left: 5%;
  bottom: 5%;
  display: block;
  line-height: 1em;
  font-size: 1em;
  text-align: left;
  text-transform: uppercase;
  color: #FFF;
  letter-spacing: 2px;
  font-weight: 600;
  bottom: 7.5%;
  line-height: 0em;
  font-size: 0.75em;
}
.scCard.scCardUser .scCardUserUnfollowed {
  transition: 0.2s;
}
.scCard.scCardUser .scCardUserUnfollowed.active {
  color: #FFF;
}
.scCard.scCardUser .scCardUserUnfollowed.scCardUserscUnfollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardUser .scCardUserFollowed.scCardUserscFollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardUser .scCardUserUnfollowed.scCardUserFollowing {
  display: none;
}
.scCard.scCardUser .scCardUserFollowed {
  display: none;
  color: #FFF;
}
.scCard.scCardUser .scCardUserFollowed.scCardUserFollowing {
  display: block;
}
.scCard.scCardUser img.scCardUserProfileHeroImage {
  position: absolute;
  left: 0px;
  width: 100%;
  top: 0px;
  height: auto;
  opacity: 1;
  transition: 0.2s;
}
.scCard.scCardUser:hover img.scCardUserProfileHeroImage {
  opacity: 1;
}
.scCard.scCardGame {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
}
.scCard.scCardGame:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
}
.scCard.scCardGame .scCardContent .scCardGameName {
  position: absolute;
  left: 0%;
  top: 62.5%;
  height: 6.25%;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 100%;
  line-height: 1em;
  text-transform: uppercase;
}
.scCard.scCardGame .scCardContent .scCardGameUsername {
  position: absolute;
  left: 0%;
  top: 75%;
  height: 6.25%;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}
.scCard.scCardGame img.scCardGameProfilePicture {
  width: 56.25%;
  height: 56.25%;
  position: absolute;
  left: 21.875%;
  top: 0%;
  border-radius: 300px;
}
.scCard.scCardGame .scCardGameProfileLink {
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  overflow: hidden;
  left: 10%;
  top: 10%;
}
.scCard.scCardGame .scCardGameCTABox, .scCard.scCardGame .scCardGameCTABoxBackground {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  background: #F71E33;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}
.scCard.scCardGame .scCardGameCTABox.Final {
  background: #158EFC;
}
.scCard.scCardGame .scCardGameCTABox.Pre-Game {
  background: #7AC943;
}
.scCard.scCardGame .scCardGameCTAIcon {
  font-size: 2.5em;
  line-height: 1em;
  position: absolute;
  bottom: 1.3%;
  right: 1.3%;
  color: #FFF;
}
.scCard.scCardGame .scCardGameCTAText {
  position: absolute;
  left: 5%;
  bottom: 5%;
  display: block;
  line-height: 1em;
  font-size: 1em;
  text-align: left;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
  font-weight: 600;
  bottom: 7.5%;
  line-height: 0em;
  font-size: 0.75em;
  color: #FFF;
}
.scCard.scCardGame .scCardGameTeamIcon {
  position: absolute;
  width: 33.3333%;
  height: 25%;
  top: 20%;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.scCard.scCardGame .scCardGameTeamIcon img {
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  left: 0px;
  top: 0px;
  display: block;
}
.scCard.scCardGame .scCardGameTeamIcon.home {
  right: 13.3333%;
}
.scCard.scCardGame .scCardGameTeamIcon.away {
  left: 13.3333%;
}
.scCard.scCardGame .scCardGameTeamName {
  text-align: center;
  font-size: 1em;
  position: absolute;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  top: 50%;
  width: 20%;
}
.scCard.scCardGame .scCardGameTeamName.away {
  left: 20%;
}
.scCard.scCardGame .scCardGameTeamName.home {
  right: 20%;
}
.scCard.scCardGame .scCardGameTeamName.scCardGameTeamScore {
  top: 10%;
}
.scCard.scCardGame .scCardPeriodText {
  text-align: center;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  top: 10.625%;
  color: rgba(0, 0, 0, 0.3);
  left: 0%;
  width: 100%;
  text-transform: uppercase;
  position: absolute;
}
.scCard.scCardGame .scCardGameUnfollowed {
  transition: 0.2s;
}
.scCard.scCardGame .scCardGameUnfollowed.active {
  color: #FFF;
}
.scCard.scCardGame .scCardGameUnfollowed.scCardGamescUnfollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardGame .scCardGameFollowed.scCardGamescFollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardGame .scCardGameUnfollowed.scCardGameFollowing {
  display: none;
}
.scCard.scCardGame .scCardGameFollowed {
  display: none;
  color: #FFF;
}
.scCard.scCardGame .scCardGameFollowed.scCardGameFollowing {
  display: block;
}
.scCard.scCardGame .scCardGameEmptyImage {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 10%;
  overflow: hidden;
  text-align: center;
  bottom: 25%;
}
.scCard.scCardGame .scCardGameEmptyImage img {
  margin: 0;
  padding: 0;
  border-radius: 0;
  width: auto;
  height: 100%;
  position: initial;
  left: initial;
  top: initial;
  right: initial;
  bottom: initial;
  display: inline-block;
}

/* start scCardBroadcaster */
/* end scCardBroadcaster */
/* start scCardUser */
/* end scCardUser */
/* start scCardGame */
/*
			{% if event.streams %}
				<div class="scCardGameBroadcastBox">
					{% for stream in event.streams %}
						<div class="scCardGameStreamItem">
							<img src="{{ stream.owner.profilePicture }}" />
						</div>
					{% endfor %}
					{% if event.streamLivePlus %}
						<div class="scCardGameStreamItem">
							<span class="scCardGameStreamPlus">+{{ event.streamLivePlus }}</span>
						</div>
					{% endif %}
				</div>
			{% else %}
*/
.scCardGame .scCardGameBroadcastBox {
  position: absolute;
  bottom: 25%;
  overflow: hidden;
  text-align: center;
  height: 10%;
  left: 0%;
  width: 100%;
}
.scCardGame .scCardGameStreamItem {
  display: inline-block;
  width: 12.5%;
  text-align: center;
  height: 100%;
  position: relative;
}
.scCardGame .scCardGameStreamItem img {
  margin: 0;
  padding: 0;
  border-radius: 100px;
  width: auto;
  height: 100%;
  position: initial;
  left: initial;
  top: initial;
  right: initial;
  bottom: initial;
  display: inline-block;
}
.scCardGame .scCardGameStreamItem .scCardGameStreamPlus {
  display: inline-block;
  height: 100%;
  width: 80%;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.3);
  color: #FFF;
  position: absolute;
  top: 0%;
  left: 10%;
}
.scCardGame .scCardGameStreamItem .scCardGameStreamPlus span {
  font-size: 0.75em;
  line-height: 1em;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -0.5625em;
  text-align: center;
  display: block;
  font-weight: 600;
  letter-spacing: 1px;
}

/* end scCardGame */
/* scCardStream */
.scCard.scCardStream.scCardStreamPending .scCardBorder {
  background: #7AC943;
}
.scCard.scCardStream.scCardStreamLive .scCardBorder {
  background: #F71E33;
}
.scCard.scCardStream.scCardStreamReplay .scCardBorder {
  background: #158EFC;
}
.scCard.scCardStream.scCardStreamPremium .scCardBorder {
  background: #FECF00;
}
.scCard .scCardBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
}
.scCard .scCardBackground img {
  width: 100%;
  position: relative;
  top: 0px;
  left: 0px;
  height: auto;
}
.scCard .scCardStreamCTAIcon {
  position: absolute;
  right: 0px;
  bottom: 2.5%;
  width: 15%;
  height: 15%;
  background: #bbbbbb;
  color: #FFF;
}
.scCard.scCardStreamLive .scCardStreamCTAIcon {
  background: #F71E33;
}
.scCard.scCardStreamPending .scCardStreamCTAIcon {
  background: #7AC943;
}
.scCard.scCardStreamReplay .scCardStreamCTAIcon {
  background: #158EFC;
}
.scCard.scCardStreamPremium .scCardStreamCTAIcon {
  background: #FECF00;
}
.scCard.scCardStream .scCardStreamCTAIcon i {
  font-size: 2.5em;
  line-height: 1em;
  position: absolute;
  left: 8.3334%;
  top: 8.3334%;
}
.scCard.scCardStream .scCardStreamCTABox {
  position: absolute;
  bottom: 2.5%;
  height: 15%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #FFF;
}
.scCard.scCardStream .scCardStreamCTABoxText {
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1em;
  font-size: 0.75em;
  font-weight: 600;
  top: 50%;
  margin-top: -0.5em;
  position: absolute;
}
.scCard.scCardStream .scCardStreamCTABoxText.icon {
  left: 5%;
  line-height: 1em;
  font-size: 1em;
  top: 33%;
}
.scCard.scCardStream .scCardStreamCTABoxText.textLeft {
  left: 5%;
  width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 2px;
}
.scCard.scCardStream .scCardStreamCTABoxText.textRight {
  text-align: right;
  right: 20%;
}
.scCard.scCardStream .scCardStreamViewBox {
  position: absolute;
  right: 0%;
  top: 6.25%;
  height: 7.5%;
  background: rgba(0, 0, 0, 0.7);
  color: #FFF;
  font-size: 0.75em;
  line-height: 1.5em;
  width: auto;
  white-space: nowrap;
  border-radius: 100px 0 0 100px;
  padding-left: 1.5em;
}
.scCard.scCardStream .scCardStreamViewBox div {
  display: inline-block;
  padding: 0px 0.5em;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  top: 50%;
  margin-top: 0em;
  line-height: 2em;
}
.scCard.scCardStream .scCardStreamViewBox div.scCardStreamAge {
  background: #158EFC;
  height: 100%;
}
.scCard.scCardStream.scCardStreamLive .scCardStreamViewBox div.scCardStreamAge {
  background: #F71E33;
  height: 100%;
}
.scCard.scCardStream.scCardStreamPending .scCardStreamViewBox div.scCardStreamAge {
  background: #7AC943;
  height: 100%;
}
.scCard.scCardStream .scCardStreamViewBox i {
  position: absolute;
  left: 5%;
  top: 50%;
  margin-top: 0;
  font-size: 1em;
  line-height: 0em;
  width: 1em;
}
.scCard.scCardStream .scCardStreamLinkOverlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.scCard.scCardStream .scCardStreamOwner {
  position: absolute;
  left: 2.5%;
  top: 2.5%;
  width: 15%;
  height: 15%;
}
.scCard.scCardStream .scCardStreamOwner img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 100px;
}
.scCard.scCardStream .scCardPill {
  position: absolute;
  width: 15%;
  height: 15%;
  margin-top: 1px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  left: 2.5%;
  transition: 0.2s;
  cursor: pointer;
}
.scCard.scCardStream .scCardPill i::selection, .scCard.scCardStream .scCardPill i::-moz-selection {
  background: transparent;
  color: transparent;
}
.scCard.scCardStream .scCardPill:hover {
  background: rgba(0, 0, 0, 0.85);
}
.scCard.scCardStream .scCardPill.topSegment {
  border-radius: 50px 50px 0px 0px;
  top: 20%;
  z-index: 5;
}
.scCard.scCardStream .scCardPill.bottomSegment {
  border-radius: 0px 0px 50px 50px;
  border-bottom: 0px;
  z-index: 1;
}
.scCard.scCardStream .scCardPill.secondSegment {
  top: 35%;
  z-index: 4;
}
.scCard.scCardStream .scCardPill.thirdSegment {
  top: 50%;
  z-index: 3;
}
.scCard.scCardStream .scCardPill.fourthSegment {
  top: 65%;
  z-index: 2;
}
.scCard.scCardStream .scCardPill i {
  font-size: 2em;
  line-height: 1em;
  position: absolute;
  left: 16.6666%;
  top: 16.6666%;
}
.scCard.scCardOrganization {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
  overflow: hidden;
}
.scCard.scCardOrganization:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
}
.scCard.scCardOrganization .scCardOrganizationName {
  position: absolute;
  left: 10%;
  bottom: 30%;
  height: 5%;
  overflow: hidden;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1em;
  text-transform: uppercase;
}
.scCard.scCardOrganization .scCardContent .scCardOrganizationUsername {
  position: absolute;
  left: 0%;
  top: 75%;
  height: 6.25%;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 300;
  width: 100%;
}
.scCard.scCardOrganization img.scCardOrganizationProfilePicture {
  width: 60%;
  height: 45%;
  position: absolute;
  left: 20%;
  top: 10%;
}
.scCard.scCardOrganization .scCardOrganizationProfileLink {
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  overflow: hidden;
  left: 10%;
  top: 10%;
}
.scCard.scCardOrganization .scCardOrganizationCTABox {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  background: #158EFC;
  border-color: #158EFC;
  width: 100%;
}
.scCard.scCardOrganization .scCardOrganizationCTABoxBackground {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0px;
  height: 15%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  background: #158EFC;
  border-color: #158EFC;
  width: 100%;
  width: 0%;
}
.scCard.scCardOrganization .scCardOrganizationCTABoxBackground.activeUnfollow, .scCard.scCardOrganization .scCardOrganizationCTABoxBackground.scCardOrganizationFollowing {
  background: #158EFC;
  border-color: #158EFC;
  width: 100%;
}
.scCard.scCardOrganization .scCardOrganizationFollowButton {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background: #158EFC;
  color: #FFF;
  display: block;
  height: 15%;
  width: 15%;
  border-top: 1px solid #158EFC;
}
.scCard.scCardOrganization .scCardOrganizationFollowButton i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 2em;
  line-height: 2em;
  margin-top: -1em;
  margin-left: -0.5em;
}
.scCard.scCardOrganization .scCardOrganizationFollowText {
  position: absolute;
  left: 5%;
  bottom: 5%;
  display: block;
  line-height: 1em;
  font-size: 1em;
  text-align: left;
  text-transform: uppercase;
  color: #FFF;
  letter-spacing: 2px;
  font-weight: 600;
  bottom: 7.5%;
  line-height: 0em;
  font-size: 0.75em;
}
.scCard.scCardOrganization .scCardOrganizationUnfollowed {
  transition: 0.2s;
}
.scCard.scCardOrganization .scCardOrganizationUnfollowed.active {
  color: #FFF;
}
.scCard.scCardOrganization .scCardOrganizationUnfollowed.scCardOrganizationscUnfollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardOrganization .scCardOrganizationFollowed.scCardOrganizationscFollowedLink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardOrganization .scCardOrganizationUnfollowed.scCardOrganizationFollowing {
  display: none;
}
.scCard.scCardOrganization .scCardOrganizationFollowed {
  display: none;
  color: #FFF;
}
.scCard.scCardOrganization .scCardOrganizationFollowed.scCardOrganizationFollowing {
  display: block;
}
.scCard.scCardOrganization img.scCardOrganizationProfileHeroImage {
  position: absolute;
  left: 0px;
  width: 100%;
  top: 0px;
  height: auto;
  opacity: 1;
  transition: 0.2s;
}
.scCard.scCardOrganization:hover img.scCardOrganizationProfileHeroImage {
  opacity: 1;
}
.scCard.scCardUser .scCardGoLiveCTABackground {
  background-image: linear-gradient(81deg, #f71e33, #fecf00);
  border-color: #FFF;
}
.scCard.scCardUser .scCardCTALink {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 15%;
  cursor: pointer;
  background: transparent;
}
.scCard.scCardUser .scCardUserFollowButton.scCardGoLiveLink {
  background-color: transparent;
  border-color: transparent;
}
.scCard .scCardCenterIcon {
  position: absolute;
  top: 3.5em;
  left: 50%;
  margin-left: -3.5em;
  color: rgba(0, 0, 0, 0.15);
}
.scCard .scCardCenterIcon i {
  font-size: 7em;
}

/*
<div class="scCardStreamViewBox">
	<div class="scCardStreamViewCount">
		<i class="material-icons">person</i>
		{{ properties.viewCount|default(0) }}
	</div>
	<div class="scCardStreamAge">
		{% if live %}
			Live Now
		{% else %}
			{{ age }}
		{% endif %}				
	</div>
</div>
*/
/* end scCardOrganization */
/* goLiveCard */
/* modals */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scModalOverlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 90001;
  display: block;
  transition: opacity 0.2s;
  opacity: 0;
  display: none;
}

.scModal {
  position: absolute;
  background: #Fff;
  padding: 53px 20px 20px 20px;
  border-radius: 15px;
  left: 20px;
  top: 20px;
  height: auto;
  left: 50%;
  top: 50%;
  transition: opacity 0.2s;
  opacity: 0;
  box-sizing: border-box;
  display: none;
}
@media (min-width: 768px) {
  .scModal {
    padding: 53px 30px 30px 30px;
  }
}

.scModal .scModalClose {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #FFF;
  border-radius: 100px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: opacity 0.2s;
  width: 40px;
  height: 40px;
}

.scModal .scModalClose i {
  transition: opacity 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  line-height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  color: rgba(0, 0, 0, 0.15);
}

.scModal .scModalClose:hover i {
  color: rgba(0, 0, 0, 0.3);
}

.scModal .scModalTitle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  height: 32px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  color: #BBBBBB;
  padding-top: 0px;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 33px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  .scModal.scModalDarkMobile {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    margin-left: 0px !important;
    margin-top: 0px !important;
    border-radius: 0px !important;
  }

  .scModal.scModalDarkMobile .scModalClose {
    left: inherit;
    right: inherit;
    left: 0px;
    top: 0px;
    background: transparent;
    box-shadow: none;
  }

  .scModal.scModalDarkMobile .scModalClose i {
    color: #FFF;
  }

  .scModal.scModalDarkMobile .scModalTitle {
    border-color: rgba(255, 255, 255, 0.3);
    height: 39px;
    line-height: 38px;
  }

  .scModal.scModalDarkMobile {
    padding: 59px 20px 20px 20px;
  }

  .scModal.scModalDarkMobile .scModalBody {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 59px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
/* buy tickers */
.scModal.buyTickets .row {
  padding: 0px;
  width: 628px;
}

.scModal.buyTickets .row .buyColumn {
  width: 50%;
  box-sizing: border-box;
  float: left;
}

.scModal.buyTickets .row .buyColumn .ticketBox {
  margin: 0px auto;
  box-sizing: border-box;
  position: relative;
  width: 283px;
  height: 80px;
}

.scModal.buyTickets .row .buyColumn .ticketBox:first-child {
  margin-top: -20px;
}

.scModal.buyTickets .row .buyColumn .ticketBox:last-child {
  margin-bottom: 14px;
}

.scModal.buyTickets .ticketBox .ticketPackage {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0px;
  top: 10px;
}

.scModal.buyTickets .ticketBox .scButtonBadge {
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -13px;
}

.scModal.buyTickets .ticketBox .packageName {
  position: absolute;
  left: 65px;
  top: 19px;
  line-height: 22px;
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: left;
  color: #333333;
  display: inline-block;
  text-transform: uppercase;
}

.scModal.buyTickets .ticketBox .priceLine {
  display: inline-block;
  font-family: Roboto;
  font-size: 11px;
  line-height: 22px;
  text-align: left;
  color: #FECF00;
  letter-spacing: 1px;
  position: absolute;
  left: 65px;
  top: 40px;
}

.scModal.buyTickets .ticketBox .priceLine i {
  position: relative;
  top: 5px;
  font-size: 22px;
  line-height: 0px;
}

.scModal.buyTickets .ticketBox .priceLine span {
  font-size: 11px;
  line-height: 2;
  text-align: left;
  color: #333333;
}

.scModal.buyTickets .ticketBox .borderLine {
  position: absolute;
  right: 0px;
  left: 65px;
  bottom: 0px;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .scModal.buyTickets .row {
    margin: 0 auto;
  }

  .scModal.buyTickets .ticketBox .packageName {
    color: #FFF;
  }

  .scModal.buyTickets .ticketBox .priceLine span {
    color: #FFF;
  }

  .scModal.buyTickets .ticketBox .borderLine {
    background: rgba(255, 255, 255, 0.3);
  }
}
@media (max-width: 600px) {
  .scModal.buyTickets .row .buyColumn {
    width: 100%;
    text-align: center;
    float: none;
  }

  .scModal.buyTickets .row {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 335px) and (max-width: 600px) {
  .scModal.buyTickets .row .buyColumn .ticketBox {
    width: 85%;
  }
}
/* tix purchase thank you screen */
.scModal.tixPurchase .row {
  width: 628px;
  text-align: center;
}

.scModal.tixPurchase .packageImage {
  display: block;
  margin: 14px auto 9px;
  width: 100px;
  height: auto;
}

.scModal.tixPurchase strong, .scModal.tixPurchase small {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.2em;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  max-width: 333px;
  margin: auto;
}

.scModal.tixPurchase strong {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 1.5em;
}

.scModal.tixPurchase .scButton {
  margin-right: 0px;
}

@media (max-width: 767px) {
  .scModal.tixPurchase .row {
    width: auto;
    padding: 0 10px;
    min-height: 100%;
  }

  .scModal.tixPurchase .tixPurchaseButtonRow {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
  }

  .scModal.tixPurchase strong, .scModal.tixPurchase small {
    color: #FFF;
  }
}
@media (max-height: 330px) {
  .scModal.tixPurchase .packageImage {
    width: 64px;
    margin-top: 0px;
  }
}
@media (max-width: 450px) {
  .scModal.tixPurchase .packageImage {
    width: 55%;
    margin-bottom: 80px;
  }
}
@media (max-width: 325px) {
  .scModal.tixPurchase .packageImage {
    margin-bottom: 40px;
  }
}
/* cash out selection screen */
/*
	<div class="scModal cashOut scModalDarkMobile">

		<div class="scModalTitle">Purchase Successful!</div>
		<div class="scModalClose"><i class="material-icons desktop tablet">close</i><i class="material-icons mobile">chevron_left</i></div>
		<div class="scModalBody">
			<div class="row scNoPadding">
				<div class="currencyLogo"><div class="currencyWrapper"><i class="material-icons">coin</i></div></div>
				<strong>Cash out your {{ currentUser.currencyTypes.coin.balance|number_format }} coins</strong>
				<small>You need at least 2,500 coins to get Cash.</small>
				<div class="cashOutButtonRow">
					<div class="half">
						<a class="scButton scColorWhite scColorBackgroundGreen scColorBorderGren">Get ${{ (currentUser.currencyTypes.coin.balance / 100)|number_format }} in Cash</a>
					</div>
					<div class="half">
						<a class="scButton scColorWhite scColorBackgroundYellow scColorBorderYellow">Convert to {{ (currentUser.currencyTypes.coin.balance * 2)|number_format }} TIX</a>
					</div>
				</div>
			</div>
		</div>
	</div>
*/
.scModal.cashOut .scModalBody {
  width: 627px;
}

.scModal.cashOut strong, .scModal.cashOut small {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.2em;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  max-width: 400px;
  margin: auto;
  font-weight: 300;
}

.scModal.cashOut strong {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 1.5em;
  font-weight: bold;
}

.scModal.cashOut .scButton {
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.scModal.cashOut .cashOutButtonRow .half {
  float: left;
  width: 50%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.scModal.cashOut .cashOutButtonRow .half:first-child {
  padding-right: 10px;
}

.scModal.cashOut .cashOutButtonRow .half:last-child {
  padding-left: 10px;
}

.scModal.cashOut .currency .currencyLogo .currencyWrapper i {
  font-size: 100px;
  line-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  color: #FECF00;
}

@media (max-width: 767px) {
  .scModal.cashOut .scModalBody {
    width: auto;
  }

  .scModal.cashOut .row {
    width: auto;
    padding: 0 10px;
    min-height: 100%;
  }

  .scModal.cashOut .cashOutButtonRow {
    position: absolute;
    bottom: 20px;
    width: auto;
    text-align: center;
    left: 10px;
    right: 10px;
  }

  .scModal.cashOut strong, .scModal.cashOut small {
    color: #FFF;
  }

  .scModal.cashOut .cashOutButtonRow .half {
    float: right;
    padding: none;
    width: 100%;
    padding: 0 10px 0 10px;
  }

  .scModal.cashOut .cashOutButtonRow .half:first-child {
    padding-bottom: 20px;
  }

  .scModal.cashOut .currencyLogo {
    padding-bottom: 25%;
    padding-top: 20%;
  }
}
@media (max-width: 350px) {
  .scModal.cashOut .currencyLogo {
    padding-top: 10%;
  }
}
@media (max-height: 450px) {
  .scModal.cashOut .currencyLogo {
    padding-bottom: 10px;
    padding-top: 2.5%;
  }

  .scModal.cashOut .cashOutButtonRow .half {
    float: left;
    width: 50%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .scModal.cashOut .cashOutButtonRow .half:first-child {
    padding-right: 10px;
    padding-bottom: 0px;
  }

  .scModal.cashOut .cashOutButtonRow .half:last-child {
    padding-left: 10px;
    padding-bottom: 0px;
  }
}
@media (max-height: 350px) {
  .scModal.cashOut .currencyLogo {
    padding-top: 0px;
  }

  .scModal.cashOut .currencyLogo .currencyWrapper i {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    color: #FECF00;
  }

  .scModal.cashOut .currencyLogo .currencyWrapper {
    height: 60px;
  }
}
/* cash out convert modal */
.scModal.cashOutConvert .scModalBody {
  width: 627px;
}

.scModal.cashOutConvert strong, .scModal.cashOutConvert small {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.2em;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  max-width: 400px;
  margin: auto;
  font-weight: 300;
}

.scModal.cashOutConvert strong {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 1.5em;
  font-weight: bold;
}

.scModal.cashOutConvert .scButton {
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.scModal.cashOutConvert .cashOutButtonRow .half {
  float: left;
  width: 50%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.scModal.cashOutConvert .cashOutButtonRow .half:first-child {
  padding-right: 10px;
}

.scModal.cashOutConvert .cashOutButtonRow .half:last-child {
  padding-left: 10px;
}

.scModal.cashOutConvert .currency .currencyLogo .currencyWrapper i {
  font-size: 100px;
  line-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  color: #FECF00;
}

@media (max-width: 767px) {
  .scModal.cashOutConvert .scModalBody {
    width: auto;
  }

  .scModal.cashOutConvert .row {
    width: auto;
    padding: 0 10px;
    min-height: 100%;
  }

  .scModal.cashOutConvert .cashOutButtonRow {
    position: absolute;
    bottom: 20px;
    width: auto;
    text-align: center;
    left: 10px;
    right: 10px;
  }

  .scModal.cashOutConvert strong, .scModal.cashOutConvert small {
    color: #FFF;
  }

  .scModal.cashOutConvert .cashOutButtonRow .half {
    float: right;
    padding: none;
    width: 100%;
    padding: 0 10px 0 10px;
  }

  .scModal.cashOutConvert .cashOutButtonRow .half:first-child {
    padding-bottom: 20px;
  }

  .scModal.cashOutConvert .currencyLogo {
    padding-bottom: 25%;
    padding-top: 20%;
  }
}
@media (max-width: 350px) {
  .scModal.cashOutConvert .currencyLogo {
    padding-top: 10%;
  }
}
@media (max-height: 450px) {
  .scModal.cashOutConvert .currencyLogo {
    padding-bottom: 10px;
    padding-top: 2.5%;
  }

  .scModal.cashOutConvert .cashOutButtonRow .half {
    float: left;
    width: 50%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .scModal.cashOutConvert .cashOutButtonRow .half:first-child {
    padding-right: 10px;
    padding-bottom: 0px;
  }

  .scModal.cashOutConvert .cashOutButtonRow .half:last-child {
    padding-left: 10px;
    padding-bottom: 0px;
  }
}
@media (max-height: 350px) {
  .scModal.cashOutConvert .currencyLogo {
    padding-top: 0px;
  }

  .scModal.cashOutConvert .currencyLogo .currencyWrapper i {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    color: #FECF00;
  }

  .scModal.cashOutConvert .currencyLogo .currencyWrapper {
    height: 60px;
  }
}
/* coin convert complete */
.scModal.scCashOutConvertExecuteComplete .row {
  width: 628px;
  text-align: center;
}

.scModal.scCashOutConvertExecuteComplete .packageImage {
  display: block;
  margin: 14px auto 9px;
  width: 100px;
  height: auto;
}

.scModal.scCashOutConvertExecuteComplete strong, .scModal.scCashOutConvertExecuteComplete small {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.2em;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  max-width: 333px;
  margin: auto;
}

.scModal.scCashOutConvertExecuteComplete strong {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 1.5em;
}

.scModal.scCashOutConvertExecuteComplete .scButton {
  margin-right: 0px;
}

@media (max-width: 767px) {
  .scModal.scCashOutConvertExecuteComplete .row {
    width: auto;
    padding: 0 10px;
    min-height: 100%;
  }

  .scModal.scCashOutConvertExecuteComplete .scCashOutConvertExecuteCompleteButtonRow {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
  }

  .scModal.scCashOutConvertExecuteComplete strong, .scModal.scCashOutConvertExecuteComplete small {
    color: #FFF;
  }

  .scModal.scCashOutConvertExecuteComplete .currencyLogo {
    padding-bottom: 25%;
    padding-top: 20%;
  }

  .scModal.scCashOutConvertExecuteComplete .tixPurchaseButtonRow {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
  }
}
@media (max-width: 350px) {
  .scModal.scCashOutConvertExecuteComplete .currencyLogo {
    padding-top: 10%;
  }
}
@media (max-height: 450px) {
  .scModal.scCashOutConvertExecuteComplete .currencyLogo {
    padding-bottom: 10px;
    padding-top: 5%;
  }

  .scModal.scCashOutConvertExecuteComplete .cashOutButtonRow .half {
    float: left;
    width: 50%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .scModal.scCashOutConvertExecuteComplete .cashOutButtonRow .half:first-child {
    padding-right: 10px;
    padding-bottom: 0px;
  }

  .scModal.scCashOutConvertExecuteComplete .cashOutButtonRow .half:last-child {
    padding-left: 10px;
    padding-bottom: 0px;
  }
}
@media (max-height: 350px) {
  .scModal.scCashOutConvertExecuteComplete .currencyLogo {
    padding-top: 5%;
  }

  .scModal.scCashOutConvertExecuteComplete .currencyLogo .currencyWrapper i {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    color: #FECF00;
  }

  .scModal.scCashOutConvertExecuteComplete .currencyLogo .currencyWrapper {
    height: 60px;
  }
}
/* cash out for cash */
.scModal.cashOutCash .scModalBody {
  width: 627px;
}

.scModal.cashOutCash strong, .scModal.cashOutCash small {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.5em;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  max-width: 300px;
  margin: auto;
  font-weight: 300;
}

.scModal.cashOutCash strong {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 1.5em;
  font-weight: bold;
}

.scModal.cashOutCash .scButton {
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.scModal.cashOutCash .cashOutButtonRow .half {
  float: left;
  width: 50%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.scModal.cashOutCash .cashOutButtonRow .half:first-child {
  padding-right: 10px;
}

.scModal.cashOutCash .cashOutButtonRow .half:last-child {
  padding-left: 10px;
}

.scModal.cashOutCash .currency .currencyLogo .currencyWrapper i {
  font-size: 100px;
  line-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  color: #FECF00;
}

.scModal.cashOutCash .packageImageOuter {
  margin: 14px auto 40px;
  width: 300px;
  height: auto;
}

.scModal.cashOutCash .packageImage {
  width: 100%;
  height: auto;
}

.scModal.cashOutCash .scForm {
  margin: 0px auto 10px auto;
  padding: 0px;
  width: 300px;
}

.scModal.cashOutCash .scForm .scFormRow {
  margin: 0px auto;
}

@media (max-width: 767px) {
  .scModal.cashOutCash .scModalBody {
    width: auto;
  }

  .scModal.cashOutCash .row {
    width: auto;
    padding: 0 10px;
    min-height: 100%;
  }

  .scModal.cashOutCash .cashOutButtonRow {
    position: absolute;
    bottom: 20px;
    width: auto;
    text-align: center;
    left: 10px;
    right: 10px;
  }

  .scModal.cashOutCash strong, .scModal.cashOutCash small {
    color: #FFF;
  }

  .scModal.cashOutCash .cashOutButtonRow .half {
    float: right;
    padding: none;
    width: 100%;
    padding: 0 10px 0 10px;
  }

  .scModal.cashOutCash .cashOutButtonRow .half:first-child {
    padding-bottom: 20px;
  }

  .scModal.cashOutCash .currencyLogo {
    padding-bottom: 25%;
    padding-top: 20%;
  }

  .scModal.cashOutCash .scForm input {
    color: #FFF;
  }

  .scModal.cashOutCash .packageImageOuter {
    padding-top: 25%;
  }
}
@media (max-width: 350px) {
  .scModal.cashOutCash .packageImageOuter {
    padding-top: 10%;
  }
}
@media (max-height: 450px) {
  .scModal.cashOutCash .packageImageOuter {
    padding-bottom: 0px;
    padding-top: 0%;
    margin-bottom: 10px;
    margin-top: 0px;
    width: 250px;
  }

  .scModal.cashOutCash .cashOutButtonRow .half {
    float: left;
    width: 50%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .scModal.cashOutCash .cashOutButtonRow .half:first-child {
    padding-right: 10px;
    padding-bottom: 0px;
  }

  .scModal.cashOutCash .cashOutButtonRow .half:last-child {
    padding-left: 10px;
    padding-bottom: 0px;
  }
}
@media (max-height: 350px) {
  .scModal.cashOutCash .packageImageOuter {
    padding-top: 0px;
    width: 100px;
  }

  .scModal.cashOutCash .packageImageOuter .currencyWrapper {
    height: 60px;
  }
}
/* coin convert complete */
.scModal.scCashOutCashComplete .row {
  width: 628px;
  text-align: center;
}

.scModal.scCashOutCashComplete .packageImage {
  display: block;
  margin: 14px auto 9px;
  width: 100px;
  height: auto;
}

.scModal.scCashOutCashComplete strong, .scModal.scCashOutCashComplete small {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-family: Roboto;
  font-size: 14px;
  line-height: 1.2em;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  max-width: 333px;
  margin: auto;
}

.scModal.scCashOutCashComplete strong {
  text-transform: uppercase;
  color: #333;
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 1.5em;
}

.scModal.scCashOutCashComplete .scButton {
  margin-right: 0px;
}

@media (max-width: 767px) {
  .scModal.scCashOutCashComplete strong, .scModal.scCashOutCashComplete small {
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }

  .scModal.scCashOutCashComplete .row {
    width: auto;
    padding: 0 10px;
    min-height: 100%;
  }

  .scModal.scCashOutCashComplete .scCashOutCashCompleteButtonRow {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
  }

  .scModal.scCashOutCashComplete strong, .scModal.scCashOutCashComplete small {
    color: #FFF;
  }

  .scModal.scCashOutCashComplete .currencyLogo {
    padding-bottom: 25%;
    padding-top: 20%;
  }

  .scModal.scCashOutCashComplete .tixPurchaseButtonRow {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
  }
}
@media (max-width: 350px) {
  .scModal.scCashOutCashComplete .currencyLogo {
    padding-top: 10%;
  }
}
@media (max-height: 450px) {
  .scModal.scCashOutCashComplete .currencyLogo {
    padding-bottom: 10px;
    padding-top: 1.5%;
  }

  .scModal.scCashOutCashComplete .cashOutButtonRow .half {
    float: left;
    width: 50%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .scModal.scCashOutCashComplete .cashOutButtonRow .half:first-child {
    padding-right: 10px;
    padding-bottom: 0px;
  }

  .scModal.scCashOutCashComplete .cashOutButtonRow .half:last-child {
    padding-left: 10px;
    padding-bottom: 0px;
  }
}
@media (max-height: 350px) {
  .scModal.scCashOutCashComplete .currencyLogo {
    padding-top: 0%;
  }

  .scModal.scCashOutCashComplete .currencyLogo .currencyWrapper i {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    color: #FECF00;
  }

  .scModal.scCashOutCashComplete .currencyLogo .currencyWrapper {
    height: 60px;
  }
}
/* standard modal stuff */
.scModal.scModalStandard {
  max-width: 666px;
}
@media (min-width: 768px) {
  .scModal.scModalStandard {
    width: 666px;
  }
}

.scModal.scModalStandard .title {
  position: absolute;
  top: 0px;
  width: 100%;
  left: 0px;
  right: 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: 1.8px;
  text-align: center;
  color: #BBBBBB;
  line-height: 28px;
  padding-top: 2px;
  text-transform: uppercase;
}

.scModal.scModalStandard .scProfilePicture {
  margin: 10px auto 30px;
}

.scModal.scModalStandard .scModalBody > i {
  display: block;
  font-size: 100px;
  text-align: center;
  margin-bottom: 15px;
}

.scModal.scModalStandard .modalText {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 1.8px;
  text-align: center;
  color: #333333;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .scModal.scModalStandard .modalText {
    padding-left: 70px;
    padding-right: 70px;
  }
}
.scModal.scModalStandard .modalText p {
  padding-top: 15px;
  margin-bottom: 30px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.9);
  letter-spacing: 0;
  font-weight: 400;
  text-align: center;
  line-height: 20px;
  text-transform: none;
  font-weight: normal;
}
.scModal.scModalStandard .modalText p a {
  color: #000;
}

.scModal.scModalStandard .scButton {
  width: 100%;
}

@media (max-width: 700px) {
  .scModal.scModalStandard {
    width: 320px;
  }

  .scModal.scModalStandard .row .columns {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }

  .scModal.scModalStandard .row .columns:first-child {
    margin-bottom: 15px;
  }
}
/* testing */
.scModal.scShareProfieModal img {
  width: 220px;
}
.scModal.scShareProfieModal .scForm {
  margin-top: 10px;
  padding-top: 0px;
}
.scModal.scShareProfieModal .scForm input {
  font-weight: 300;
}
.scModal.scShareProfieModal .scButtonSquare:last-child {
  margin-bottom: 0px;
}
.scModal.scShareProfieModal .scShareProfileModalImage {
  line-height: 0px;
  margin-bottom: 10px;
  text-align: center;
}
.scModal.scShareProfieModal .buttons .mobile {
  margin-bottom: 10px;
}

.scModal .buttons.singleButton .scButton {
  max-width: 345px;
  display: block;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .scModal.scShareProfieModal {
    width: 666px;
  }
  .scModal.scShareProfieModal .buttons {
    text-align: center;
  }
  .scModal.scShareProfieModal img {
    width: 307px;
  }
  .scModal.scShareProfieModal .scButtonSquare {
    width: 192px;
    max-width: 192px;
    min-width: 192px;
    display: inline-block;
    margin-right: 15px;
  }
  .scModal.scShareProfieModal .scButtonSquare:last-child {
    margin-right: 0px;
  }
  .scModal.scShareProfieModal .scShareProfileModalImage {
    margin-bottom: 20px;
  }
  .scModal.scShareProfieModal .scForm {
    width: 307px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 30px;
    position: relative;
  }
  .scModal.scShareProfieModal .scForm .scButton {
    position: absolute;
    right: 0px;
    bottom: 13px;
    min-width: 60px;
    max-width: 60px;
    width: 60px;
  }
}
/* form elements */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scForm {
  margin-bottom: 15px;
}
.scForm .scFormLabel {
  display: block;
  color: #ddd;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  transition: 0.2s;
}
.scForm .scFormLabel span {
  opacity: 0;
  float: right;
  color: #F71E33;
  transition: 0.2s;
}
.scForm .scFormLabel i {
  position: absolute;
  right: 0px;
  color: #F71E33;
  font-size: 30px;
  bottom: -35px;
  opacity: 0;
  transition: 0.2;
}
.scForm .scFormLabel.error {
  color: #F71E33;
}
.scForm .scFormLabel.error .span {
  opacity: 1;
}
.scForm .scFormLabel.error i {
  opacity: 1;
}
.scForm .scFormInputText {
  border: 0px;
  background: transparent;
  border-bottom: 1px solid #ddd;
  padding: 0 40px 10px 10px;
  font-size: 13px;
  color: #000;
  border-radius: 0;
  display: block;
  width: 100%;
  transition: 0.2s;
  line-height: 20px;
}
.scForm .scFormInputText.dark {
  color: #FFFFFF;
}
.scForm .scFormInputText.error {
  border-color: #F71E33;
}
.scForm::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #bbb;
}
.scForm::-moz-placeholder {
  /* Firefox 19+ */
  color: #bbb;
}
.scForm:-ms-input-placeholder {
  /* IE 10+ */
  color: #bbb;
}
.scForm:-moz-placeholder {
  /* Firefox 18- */
  color: #bbb;
}
.scForm.dark .scFormLabel {
  color: #FFFFFF;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #bbb;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #bbb;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #bbb;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #bbb;
}

/* form elements */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scUserMiniCard {
  display: inline-block;
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  margin-right: 15px;
  width: 290px;
  height: 80px;
  overflow: hidden;
}
.scUserMiniCard.fullWidth {
  width: 100%;
  margin: 0 0 10px;
}

.scProfilePicture {
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 0px;
}
.scProfilePicture .scProfilePictureBackground {
  background: #FFFFFF;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  border-radius: 200px;
}
.scProfilePicture a {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
.scProfilePicture img, .scProfilePicture picture {
  width: 60px !important;
  height: 60px !important;
  border-radius: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.scProfilePicture span {
  border-radius: 100px;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  color: white;
}
.scProfilePicture .scProfilePictureRank {
  position: absolute;
  bottom: 0px;
  right: 0px;
  text-align: center;
  line-height: 21px;
  font-size: 11px;
  font-weight: 700;
}
.scProfilePicture .scProfilePictureFeatured {
  position: absolute;
  left: 0px;
  top: 0px;
}
.scProfilePicture .scProfilePictureFeatured i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14px;
  line-height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  color: #FFFFFF;
}
.scProfilePicture .scProfilePictureCrown {
  display: none;
}
.scProfilePicture .scProfilePictureCrown i {
  color: #FFFFFF;
  font-size: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14px;
  line-height: 14px;
  margin-left: -7px;
  margin-top: -7px;
}
.scProfilePicture .scProfilePictureCrown.silver, .scProfilePicture .scProfilePictureCrown.gold, .scProfilePicture .scProfilePictureCrown.bronze, .scProfilePicture .scProfilePictureCrown.red, .scProfilePicture .scProfilePictureCrown.purple, .scProfilePicture .scProfilePictureCrown.blue, .scProfilePicture .scProfilePictureCrown.green, .scProfilePicture .scProfilePictureCrown.yellow, .scProfilePicture .scProfilePictureCrown.orange {
  display: block;
}
.scProfilePicture .scProfilePictureCrown.silver {
  background: #BBBBBB;
}
.scProfilePicture .scProfilePictureCrown.gold {
  background: #FECF00;
}
.scProfilePicture .scProfilePictureCrown.bronze {
  background: #C68642;
}
.scProfilePicture .scProfilePictureCrown.red {
  background: #F71E33;
}
.scProfilePicture .scProfilePictureCrown.purple {
  background: #9E4CE6;
}
.scProfilePicture .scProfilePictureCrown.blue {
  background: #158EFC;
}
.scProfilePicture .scProfilePictureCrown.green {
  background: #7AC943;
}
.scProfilePicture .scProfilePictureCrown.yellow {
  background: #FECF00;
}
.scProfilePicture .scProfilePictureCrown.orange {
  background: #F47924;
}

.scProfilePicture.scProfilePicture30 {
  width: 30px;
  height: 30px;
}
.scProfilePicture.scProfilePicture30 img, .scProfilePicture.scProfilePicture30 picture {
  width: 30px !important;
  height: 30px !important;
}
.scProfilePicture.scProfilePicture30 .scProfilePictureRank {
  bottom: -5px;
  right: -5px;
}
.scProfilePicture.scProfilePicture30 span {
  width: 14px;
  height: 14px;
}
.scProfilePicture.scProfilePicture30 .scProfilePictureFeatured {
  top: -5px;
  left: -5px;
}
.scProfilePicture.scProfilePicture30 .scProfilePictureFeatured i {
  font-size: 10px;
  margin-left: -5px;
  margin-top: -5px;
  line-height: 10px;
}
.scProfilePicture.scProfilePicture30 .scProfilePictureCrown i {
  color: #FFFFFF;
  font-size: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 12px;
  line-height: 12px;
  margin-left: -6px;
  margin-top: -6px;
}

.scProfilePicture.scProfilePicture40 {
  width: 40px;
  height: 40px;
}
.scProfilePicture.scProfilePicture40 img, .scProfilePicture.scProfilePicture40 picture {
  width: 40px !important;
  height: 40px !important;
}
.scProfilePicture.scProfilePicture40 .scProfilePictureRank {
  bottom: -5px;
  right: -5px;
}
.scProfilePicture.scProfilePicture40 .scProfilePictureFeatured {
  top: -5px;
  left: -5px;
}

.scProfilePicture.scProfilePicture50 {
  width: 50px;
  height: 50px;
}
.scProfilePicture.scProfilePicture50 img, .scProfilePicture.scProfilePicture50 picture {
  width: 50px !important;
  height: 50px !important;
}
.scProfilePicture.scProfilePicture50 .scProfilePictureRank {
  bottom: 0px;
  right: 0px;
}
.scProfilePicture.scProfilePicture50 .scProfilePictureFeatured {
  top: 0px;
  left: 0px;
}

.scProfilePicture.scProfilePicture75 {
  width: 75px;
  height: 75px;
}
.scProfilePicture.scProfilePicture75 img, .scProfilePicture.scProfilePicture75 picture {
  width: 75px !important;
  height: 75px !important;
}
.scProfilePicture.scProfilePicture75 .scProfilePictureRank {
  bottom: 0px;
  right: 0px;
}
.scProfilePicture.scProfilePicture75 .scProfilePictureFeatured {
  top: 0px;
  left: 0px;
}

.scProfilePicture.scProfilePicture100 {
  width: 100px;
  height: 100px;
}
.scProfilePicture.scProfilePicture100 img, .scProfilePicture.scProfilePicture100 picture {
  width: 100px !important;
  height: 100px !important;
}
.scProfilePicture.scProfilePicture100 .scProfilePictureRank {
  bottom: 0px;
  right: 0px;
}
.scProfilePicture.scProfilePicture100 .scProfilePictureFeatured {
  top: 5px;
  left: 5px;
}

.scUserMiniCard {
  display: inline-block;
  position: relative;
  vertical-align: top;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  margin: 0px 10px 0px 0px;
  width: 290px;
  height: 80px;
  overflow: hidden;
  box-sizing: border-box;
}
@media (min-width: 420px) {
  .scUserMiniCard {
    margin: 0 10px 0 0;
  }
}
.scUserMiniCard .scProfilePicture {
  position: absolute;
  left: 15px;
  top: 10px;
}
.scUserMiniCard .name {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
  position: absolute;
  top: 20px;
  left: 90px;
  max-width: calc(100% - 150px);
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
  overflow: hidden;
}
.scUserMiniCard .username {
  font-size: 13px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.9);
  letter-spacing: 0;
  text-align: left;
  position: absolute;
  left: 90px;
  bottom: 20px;
  max-width: calc(100% - 150px);
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
  overflow: hidden;
}
.scUserMiniCard.tixAmount .name, .scUserMiniCard.tixAmount .username {
  max-width: calc(100% - 100px);
}
.scUserMiniCard a.cover {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 70px;
  left: 0px;
  bottom: 0px;
  display: block;
}
.scUserMiniCard .action {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  font-size: 40px;
  border-radius: 100px;
  color: #FFF;
  background: #7AC943;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.scUserMiniCard .action.follow {
  display: block;
  color: #FFFFFF;
}
.scUserMiniCard .action.follow i {
  color: #FFFFFF;
}
.scUserMiniCard .action i {
  font-size: 24px;
  position: absolute;
  left: 8px;
  top: 8px;
}
.scUserMiniCard .action.unfollow {
  background: rgba(0, 0, 0, 0.3);
}
.scUserMiniCard.following a.cover, .scUserMiniCard.scUserFollowing a.cover {
  right: 0px;
}
.scUserMiniCard.following .action.follow, .scUserMiniCard.scUserFollowing .action.follow {
  display: none;
}
.scUserMiniCard.following .action.following, .scUserMiniCard.scUserFollowing .action.following {
  display: block;
  background: transparent;
}
.scUserMiniCard.following .action.following i, .scUserMiniCard.scUserFollowing .action.following i {
  font-size: 30px;
  left: 10px;
  top: 5px;
  color: rgba(0, 0, 0, 0.3);
}
.scUserMiniCard.tixAmount .username, .scUserMiniCard.tixAmount .name, .scUserMiniCard.tixAmount a.cover, .scUserMiniCard.viewCount .username, .scUserMiniCard.viewCount .name, .scUserMiniCard.viewCount a.cover {
  width: auto;
  right: 15px;
}
.scUserMiniCard.tixAmount .username, .scUserMiniCard.viewCount .username {
  display: flex;
}
.scUserMiniCard.tixAmount .username .u, .scUserMiniCard.viewCount .username .u {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}
.scUserMiniCard.tixAmount .username .tixAmount, .scUserMiniCard.viewCount .username .tixAmount {
  display: inline-block;
}
.scUserMiniCard.tixAmount .tixAmount, .scUserMiniCard.tixAmount .viewCount, .scUserMiniCard.viewCount .tixAmount, .scUserMiniCard.viewCount .viewCount {
  padding-left: 3px;
  font-weight: 700;
}
.scUserMiniCard.tixAmount .tixAmount i, .scUserMiniCard.tixAmount .viewCount i, .scUserMiniCard.viewCount .tixAmount i, .scUserMiniCard.viewCount .viewCount i {
  padding-right: 3px;
  color: #FECF00;
  font-size: 20px;
  line-height: 0px;
  position: relative;
  top: 4px;
  display: inline;
}
.scUserMiniCard.tixAmount .viewCount i, .scUserMiniCard.viewCount .viewCount i {
  color: rgba(0, 0, 0, 0.9);
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scUserMiniCard.scTeamMiniCard .teamImage {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 80px;
}
.scUserMiniCard.scTeamMiniCard .teamImage img {
  max-width: 100%;
}
.scUserMiniCard.scTeamMiniCard .username .record {
  padding-left: 5px;
  font-weight: 700;
}
.scUserMiniCard.scTeamMiniCard .name i {
  color: rgba(0, 0, 0, 0.3);
  font-size: 18px;
  padding-left: 5px;
  line-height: 0px;
  top: 3px;
  position: relative;
}
.scUserMiniCard.scTeamMiniCard > .favorite {
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 40px;
  height: 40px;
  top: 20px;
  right: 20px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.scUserMiniCard.scTeamMiniCard > .favorite lottie-player {
  margin-top: 1px;
}

/* form elements */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scUserFollowing .scStreamItemFollow {
  display: none;
}

.scStreamItemFollow {
  cursor: pointer;
}

.scStreamItemCondensed {
  position: relative;
  max-width: 290px;
  margin: 0 auto 10px;
  border-radius: 5px;
  overflow: hidden;
  line-height: 0px;
}
.scStreamItemCondensed > img {
  width: 100%;
}
.scStreamItemCondensed .scStreamItemCornerFlag {
  position: absolute;
  top: 0px;
  right: 0px;
  width: auto;
  height: 60px;
}
.scStreamItemCondensed .scStreamItemCornerFlag.news {
  right: 10px;
  top: 10px;
  height: 60px;
}
.scStreamItemCondensed .condensedPlayer, .scStreamItemCondensed video {
  background: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
}
.scStreamItemCondensed .vjs-loading-spinner {
  display: none !important;
}
.scStreamItemCondensed .gradient {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  bottom: 0px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}
.scStreamItemCondensed a.cover {
  display: block;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
}
.scStreamItemCondensed .coverImage {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
}
.scStreamItemCondensed .scProfilePicture {
  position: absolute;
  left: 10px;
  top: 10px;
}
.scStreamItemCondensed .scProfilePicture.singleScreenBroadcaster1 {
  left: 40px;
}
.scStreamItemCondensed .scProfilePicture.singleScreenBroadcaster2 {
  left: 70px;
}
.scStreamItemCondensed .scProfilePicture.singleScreenBroadcaster3 {
  left: 100px;
}
.scStreamItemCondensed .singleScreenCount {
  position: absolute;
  top: 10px;
  left: 100px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
}
.scStreamItemCondensed .title {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  display: flex;
  font-size: 13px;
  line-height: 20px;
}
.scStreamItemCondensed .title span {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #FFFFFF;
  overflow: hidden;
}
.scStreamItemCondensed .title .statusBox {
  flex: 1;
  padding-left: 5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.scStreamItemCondensed .title .statusBox .inner {
  text-align: right;
  width: 100%;
  white-space: nowrap;
}
.scStreamItemCondensed .title .statusBox span {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.scStreamItemCondensed .title .statusBox span.live {
  color: #F71E33;
}
.scStreamItemCondensed .title .statusBox span.scheduled {
  color: #7AC943;
}
.scStreamItemCondensed .info {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 30px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
}
.scStreamItemCondensed .info > * {
  display: inline-flex;
}
.scStreamItemCondensed .info .username {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.scStreamItemCondensed .info .username a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  color: #FFFFFF;
  font-weight: 700;
}
.scStreamItemCondensed .info .viewerCount {
  padding-left: 5px;
  font-size: 13px;
  line-height: 20px;
}
.scStreamItemCondensed .info .viewerCount i {
  font-size: 20px;
}
.scStreamItemCondensed .info .timebox {
  font-weight: 700;
  flex: 1;
  padding-left: 5px;
  color: rgba(255, 255, 255, 0.5);
}
.scStreamItemCondensed .info .timebox .inner {
  text-align: right;
  width: 100%;
  white-space: nowrap;
}
.scStreamItemCondensed .info .timebox singleScreen {
  color: #158EFC;
}

.featured .scStreamItemCondensed {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  max-width: 100%;
  margin-bottom: 0px;
}
.featured .scStreamItemCondensed .info .username {
  display: none;
}
.featured .scStreamItemCondensed .title > span {
  display: none;
}

.scStreamItem {
  position: relative;
  width: 280px;
  padding-bottom: 90px;
  margin-bottom: 0px;
  display: inline-block;
  margin-right: 10px;
  box-sizing: border-box;
}
@media (min-width: 420px) {
  .scStreamItem {
    width: 320px;
  }
}
@media (min-width: 1170px) {
  .scStreamItem {
    width: 360px;
    height: 293px;
    display: inline-block;
    margin-right: 10px;
    box-sizing: border-box;
  }
}
.scStreamItem a.scButton.scStreamItemEmbedButton {
  position: absolute;
  left: 50%;
  bottom: 0px;
  bottom: -12px;
  width: 76px;
  min-width: 76px;
  margin-left: -38px;
}
.scStreamItem .scStreamItemBottom {
  padding: 5px 10px 10px;
  background: #FFF;
  white-space: normal;
}
@media (min-width: 1px) {
  .scStreamItem .scStreamItemBottom {
    padding: 5px 10px 15px;
    background: #FFF;
    border-top: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    height: 91px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 5px 5px;
    border-top: 0px;
  }
}
.scStreamItem .scStreamItemBottom .iconRow {
  height: 30px;
  position: relative;
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 0;
  text-align: left;
  line-height: 30px;
}
.scStreamItem .scStreamItemBottom .iconRow i {
  position: relative;
  top: 5px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.3);
}
.scStreamItem .scStreamItemBottom .iconRow i.scColorGreen {
  color: #7AC943;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 30px;
  line-height: 30px;
  line-height: 0px;
  color: rgba(0, 0, 0, 0.5);
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div {
  display: inline-block;
  position: relative;
  float: left;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div:first-child {
  padding-left: 0px;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div i {
  line-height: 0px;
  font-size: 20px;
  position: relative;
  top: 5px;
  padding-right: 5px;
  color: rgba(0, 0, 0, 0.3);
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5);
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream, .scStreamItem .scStreamItemBottom .iconRow .countOuter > div a:not(.favoriteStream):hover {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);
  height: 30px;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream {
  padding-left: 25px;
  position: relative;
  transition: 0.2s;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream i {
  position: absolute;
  left: 0px;
  top: 5px;
  font-size: 20px;
  line-height: 20px;
  transition: 0.2s;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream i.favorited {
  opacity: 0;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream.favorited {
  border-color: #F71E33;
  color: rgba(0, 0, 0, 0.9);
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream.favorited i {
  color: #F71E33;
  opacity: 0;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream.favorited i.favorited {
  opacity: 1;
}
.scStreamItem .scStreamItemBottom .iconRow .countOuter > div a.favoriteStream.favorited:hover {
  border-color: #F71E33;
}
.scStreamItem .scStreamItemBottom .iconRow .actionItems {
  position: absolute;
  right: 0px;
  top: 0px;
}
.scStreamItem .scStreamItemBottom .iconRow .actionItems a {
  margin-left: 10px;
}
.scStreamItem .scStreamItemBottom .textArea {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.9);
  letter-spacing: 0;
  text-align: left;
  line-height: 20px;
  text-transform: none;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 420px) {
  .scStreamItem .scStreamItemBottom .textArea {
    height: 40px;
    overflow: hidden;
  }
}
.scStreamItem .scStreamItemBottom .textArea strong {
  padding-right: 5px;
}
.scStreamItem .scStreamItemBottom .textArea a {
  font-weight: 700;
  font-size: 13px;
  color: #333333;
  letter-spacing: 0;
  text-align: left;
  line-height: 15px;
  text-decoration: none;
}
.scStreamItem .scStreamItemTopOuter {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
@media (min-width: 420px) {
  .scStreamItem .scStreamItemTopOuter {
    padding-top: 0px;
    height: 180px;
  }
}
@media (min-width: 1170px) {
  .scStreamItem .scStreamItemTopOuter {
    padding-top: 0px;
    height: 203px;
  }
}
.scStreamItem .scStreamItemTop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
}
@media (min-width: 1170px) {
  .scStreamItem .scStreamItemTop {
    position: relative;
    overflow: hidden;
    background: transparent;
    top: inherit;
    left: inherit;
    right: inherit;
    bottom: inherit;
    border-radius: 5px 5px 0px 0px;
    height: 202.5px;
  }
}
.scStreamItem .scStreamItemTop .imageHolder {
  padding-top: 56.25%;
}
.scStreamItem .scStreamItemTop .coverImage {
  width: 100%;
}
.scStreamItem .scStreamItemTop .coverImage.coverPicture {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  overflow: hidden;
}
.scStreamItem .scStreamItemTop .scStreamItemCornerFlag {
  position: absolute;
  top: 0px;
  right: 0px;
  width: auto;
  height: 60px;
}
.scStreamItem .scStreamItemTop .scStreamItemCornerFlag.news {
  right: 10px;
  top: 10px;
  height: 60px;
}
.scStreamItem .scStreamItemTop .scProfilePicture {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
}
.scStreamItem .scStreamItemTop .scProfilePicture.singleScreenBroadcaster1 {
  left: 40px;
}
.scStreamItem .scStreamItemTop .scProfilePicture.singleScreenBroadcaster2 {
  left: 70px;
}
.scStreamItem .scStreamItemTop .scProfilePicture.singleScreenBroadcaster3 {
  left: 100px;
}
.scStreamItem .scStreamItemTop .singleScreenCount {
  position: absolute;
  top: 10px;
  left: 100px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
}
.scStreamItem .scStreamItemTop .scStreamPlayIcon {
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
}
.scStreamItem .scStreamItemTop .scStreamPlayIcon i {
  color: #FFF;
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
}

.scStreamEvent {
  position: absolute;
  bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  height: 24px;
  overflow-y: hidden;
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 1.8px;
  text-align: right;
  color: #FFFFFF;
  background: #158EFC;
  text-transform: uppercase;
  position: absolute;
  left: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.scStreamItemTime {
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: 1.8px;
  text-align: right;
  color: #FFFFFF;
}

.scStreamfeaturedFlag {
  height: 24px;
  overflow-y: hidden;
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 1.8px;
  text-align: center;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 10px;
  right: 10px;
  text-transform: uppercase;
  padding: 0 5px;
}

.scStreamTimeBox {
  color: #FFFFFF;
  display: inline-block;
  height: 24px;
  overflow-y: hidden;
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 1.8px;
  text-align: right;
  color: #FFFFFF;
  background-color: transparent;
  text-transform: uppercase;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
@media (min-width: 420px) {
  .scStreamTimeBox {
    bottom: 22px;
  }
}
@media (min-width: 1170px) {
  .scStreamTimeBox {
    bottom: 10px;
    top: inherit;
  }
}
.scStreamTimeBox div {
  padding: 0 5px;
  display: inline-block;
  float: left;
  background: rgba(0, 0, 0, 0.5);
}
.scStreamTimeBox div:first-child {
  margin-right: 5px;
}
.scStreamTimeBox singleScreen {
  color: #158EFC;
}

.scStreamPlayIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.2s;
  margin-left: -25px;
  margin-top: -25px;
}
.scStreamPlayIcon i {
  color: #FFF;
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
}

.scStreamItem:hover .scStreamPlayIcon, .featuredVideo:hover .scStreamPlayIcon {
  background-color: rgba(0, 0, 0, 0.9);
}

@media (min-width: 420px) {
  .scStreamPlayIcon {
    width: 170px;
    height: 170px;
    margin-left: -85px;
    margin-top: -85px;
  }
  .scStreamPlayIcon i {
    font-size: 100px;
    margin-left: -50px;
    margin-top: -50px;
  }
}
a.scStreamCoverLink {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  display: block;
}

/* used in player */
.scStreamBigInfo {
  /* end info box */
  /* end streamer box */
}
.scStreamBigInfo .infoBox {
  padding: 15px;
  padding: 0px;
  padding-bottom: 15px;
  margin-bottom: 0px;
  position: relative;
}
@media (min-width: 1170px) {
  .scStreamBigInfo .infoBox {
    padding-left: 0px;
  }
}
.scStreamBigInfo .infoBox h1 {
  font-size: 30px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  margin: 0px;
  padding: 0px;
  margin-bottom: 5px;
}
@media (min-width: 420px) {
  .scStreamBigInfo .infoBox h1 {
    padding-right: 85px;
  }
}
@media (min-width: 1170px) {
  .scStreamBigInfo .infoBox h1 {
    padding-right: 200px;
  }
}
.scStreamBigInfo .infoBox h1 {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0px;
  font-weight: 700;
}
.scStreamBigInfo .infoBox h1 a {
  color: #222222;
}
.scStreamBigInfo .infoBox .blurb {
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
}
.scStreamBigInfo .infoBox .blurb a {
  color: #000;
  text-decoration: none;
  font-weight: bolder;
  padding-left: 0.5em;
}
.scStreamBigInfo .infoBox .tagBox {
  margin-bottom: 10px;
}
@media (min-width: 420px) {
  .scStreamBigInfo .infoBox .tagBox {
    margin-bottom: 0px;
  }
}
.scStreamBigInfo .infoBox .tagBox a {
  height: 30px;
  border: solid 1px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  display: inline-block;
  float: left;
  overflow-y: hidden;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 30px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0 7px;
  margin: 0 5px 5px 0px;
  transition: 0.2s;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream, .scStreamBigInfo .infoBox .tagBox a:not(.favoriteStream):hover {
  color: rgba(0, 0, 0, 0.9);
  border-color: rgba(0, 0, 0, 0.9);
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream {
  padding-left: 36px;
  position: relative;
  transition: 0.2s;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream i {
  position: absolute;
  left: 7px;
  top: 4px;
  font-size: 24px;
  transition: 0.2s;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream i.favorited {
  opacity: 0;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream.favorited {
  border-color: #F71E33;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream.favorited i {
  color: #F71E33;
  opacity: 0;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream.favorited i.favorited {
  opacity: 1;
}
.scStreamBigInfo .infoBox .tagBox a.favoriteStream.favorited:hover {
  border-color: #F71E33;
}
.scStreamBigInfo .infoBox .tagBox:after {
  content: "";
  display: table;
  clear: both;
}
.scStreamBigInfo .infoBox .tagBox .views {
  display: inline-block;
  float: left;
  margin-right: 15px;
}
.scStreamBigInfo .infoBox .bottomBorder {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
@media (min-width: 1170px) {
  .scStreamBigInfo .infoBox .bottomBorder {
    left: -30px;
    right: -30px;
  }
}
.scStreamBigInfo .infoBox .views {
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 1.8px;
  color: rgba(0, 0, 0, 0.9);
  height: 30px;
  overflow-y: hidden;
  line-height: 31px;
  text-transform: uppercase;
}
.scStreamBigInfo .infoBox .views span {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #F71E33;
  padding-left: 15px;
}
.scStreamBigInfo .infoBox .actionBox {
  position: absolute;
  right: 15px;
  bottom: 10px;
}
.scStreamBigInfo .infoBox .actionBox a {
  float: left;
  margin-right: 5px;
}
.scStreamBigInfo .infoBox .actionBox a:last-child {
  margin-right: 0px;
}
@media (min-width: 420px) {
  .scStreamBigInfo .infoBox .actionBox {
    top: 15px;
  }
}
@media (min-width: 1170px) {
  .scStreamBigInfo .infoBox .actionBox {
    bottom: inherit;
    top: 15px;
    right: 0px;
  }
}
.scStreamBigInfo .streamerBox {
  position: relative;
  padding: 15px;
  height: 40px;
  height: 60px;
}
@media (min-width: 420px) {
  .scStreamBigInfo .streamerBox {
    padding: 15px 30px;
  }
}
.scStreamBigInfo .streamerBox .scProfilePicture {
  position: absolute;
  left: 15px;
  top: 15px;
}
@media (min-width: 420px) {
  .scStreamBigInfo .streamerBox .scProfilePicture {
    left: 30px;
  }
}
@media (min-width: 1170px) {
  .scStreamBigInfo .streamerBox {
    padding-left: 0px;
  }
  .scStreamBigInfo .streamerBox .scProfilePicture {
    left: 0px;
  }
}
.scStreamBigInfo .streamerBox .nameBox {
  float: left;
  margin-left: 75px;
  padding-top: 10px;
}
.scStreamBigInfo .streamerBox .nameBox a {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 120px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: #222222;
  padding-top: 0;
  overflow-x: hidden;
}
.scStreamBigInfo .streamerBox .nameBox a.username {
  text-transform: none;
  font-weight: 400;
}
@media (min-width: 375px) {
  .scStreamBigInfo .streamerBox .nameBox a {
    max-width: 170px;
  }
}
@media (min-width: 414px) {
  .scStreamBigInfo .streamerBox .nameBox a {
    max-width: 205px;
  }
}
@media (min-width: 420px) {
  .scStreamBigInfo .streamerBox .nameBox a {
    max-width: 400px;
  }
}
.scStreamBigInfo .streamerBox .scBoxButton {
  float: left;
  margin-left: 10px;
  margin-top: 13px;
}

/* form navbar */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.minimalNavigation .navbar .navbarInner > a, .minimalNavigation .navbar .navbarInner > form, .minimalNavigation .navbar .navbarInner > .divider {
  display: none !important;
}

.navbarPlaceholder {
  height: 50px;
}

@media (max-width: 1023px) {
  .portraitVideoView .navbar, .streamPlay.mobileDetected .navbar, .replay.mobileDetected .navbar {
    display: none !important;
  }
}
@media (max-height: 767px) {
  .portraitVideoView .navbar, .streamPlay.mobileDetected .navbar, .replay.mobileDetected .navbar {
    display: none !important;
  }
}
.portraitVideoView .scSDP.belowNavBar, .streamPlay.mobileDetected .scSDP.belowNavBar, .replay.mobileDetected .scSDP.belowNavBar {
  top: 0px;
  z-index: 80001;
}

.navbar {
  background: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  height: 50px;
  position: relative;
  z-index: 80000;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  width: 100%;
  z-index: 80000;
}
.navbar .navbarInner {
  padding: 0px 15px 0 0;
}
.navbar .navbarInner:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 768px) {
  .navbar .navbarInner {
    padding: 0px 30px 0 0;
  }
}
.navbar .navbarInner .logo {
  position: absolute;
  top: 0px;
  left: 15px;
  padding-top: 15px;
  float: left;
  transition: 0.2s;
}
@media (min-width: 768px) {
  .navbar .navbarInner .logo {
    left: 30px;
  }
}
.navbar .navbarInner .logo.mobileHide {
  left: -250px;
}
.navbar .navbarInner .logo img {
  height: 16px;
  padding-top: 2px;
}
@media (min-width: 768px) {
  .navbar .navbarInner .logo img {
    height: 20px;
    padding-top: 0px;
  }
}
.navbar .navbarInner a {
  transition: 0.2s;
}
.navbar .navbarInner a.goLiveButton {
  float: right;
  margin-top: 8px;
  margin-right: 0px;
}
@media (max-width: 767px) {
  .navbar .navbarInner a.goLiveButton {
    display: none;
  }
}
.navbar .navbarInner a.currentUser {
  padding-top: 10px;
  float: right;
  line-height: 0px;
  background: transparent;
  padding-left: 10px;
  position: relative;
}
.navbar .navbarInner a.currentUser img {
  height: 30px;
  border-radius: 100px;
}
.navbar .navbarInner a.currentUser .notificationCount {
  background: #F71E33;
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  line-height: 21px;
  overflow: hidden;
  font-family: Roboto;
  font-weight: 700;
  font-size: 11px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  top: 5px;
  right: -5px;
}
.navbar .navbarInner a.currentUser svg {
  position: absolute;
  left: 5px;
  top: 5px;
  transform: rotate(-90deg);
}
.navbar .navbarInner a.currentUser svg circle {
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 2px;
}
.navbar .navbarInner a.currentUser svg circle.percent {
  stroke: #158EFC;
}
.navbar .navbarInner a.hamburgerClose, .navbar .navbarInner a.settingsIcon, .navbar .navbarInner a.notifications, .navbar .navbarInner a.leaderboard, .navbar .navbarInner a.searchClose, .navbar .navbarInner a.menu, .navbar .navbarInner a.mobileSearch {
  background: #FFF;
  padding-top: 10px;
  float: right;
  line-height: 0px;
  padding-left: 10px;
}
.navbar .navbarInner a.hamburgerClose i, .navbar .navbarInner a.settingsIcon i, .navbar .navbarInner a.notifications i, .navbar .navbarInner a.leaderboard i, .navbar .navbarInner a.searchClose i, .navbar .navbarInner a.menu i, .navbar .navbarInner a.mobileSearch i {
  font-size: 30px;
  color: rgba(0, 0, 0, 0.3);
  transition: 0.2s;
}
.navbar .navbarInner a.hamburgerClose:hover i, .navbar .navbarInner a.settingsIcon:hover i, .navbar .navbarInner a.notifications:hover i, .navbar .navbarInner a.leaderboard:hover i, .navbar .navbarInner a.searchClose:hover i, .navbar .navbarInner a.menu:hover i, .navbar .navbarInner a.mobileSearch:hover i {
  color: rgba(0, 0, 0, 0.5);
}
.navbar .navbarInner a.hamburgerClose {
  display: none;
}
.navbar .navbarInner a.searchClose {
  padding-left: 5px;
  display: none;
}
.navbar .navbarInner a.active i {
  color: rgba(0, 0, 0, 0.9) !important;
}
.navbar .navbarInner a.notifications.active i {
  color: rgba(0, 0, 0, 0.3) !important;
}
.navbar .navbarInner a.notifications, .navbar .navbarInner a.menu {
  position: relative;
}
.navbar .navbarInner a.notifications span, .navbar .navbarInner a.menu span {
  background: #F71E33;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  border-radius: 100px;
  right: -5px;
  text-align: center;
  line-height: 21px;
  overflow: hidden;
  font-family: Roboto;
  font-weight: 700;
  font-size: 11px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
}
.navbar .navbarInner a.notifications span.hidden, .navbar .navbarInner a.menu span.hidden {
  display: none !important;
}
@media (min-width: 768px) {
  .navbar .navbarInner a.leaderboard {
    padding-left: 10px;
  }
}
.navbar .navbarInner a.goLive, .navbar .navbarInner a.loginLink, .navbar .navbarInner a.loginTextLink {
  float: right;
  position: relative;
  top: 8px;
  margin-left: 10px;
  margin-right: 0px;
  display: none;
}
@media (min-width: 768px) {
  .navbar .navbarInner a.goLive, .navbar .navbarInner a.loginLink, .navbar .navbarInner a.loginTextLink {
    display: inline-block;
  }
}
.navbar .navbarInner a.loginTextLink {
  margin-left: 5px;
  float: right;
}
.navbar .navbarInner .divider {
  width: 1px;
  float: right;
  margin-left: 15px;
  background: rgba(0, 0, 0, 0.3);
  height: 30px;
  margin-top: 10px;
  display: none;
}
@media (min-width: 768px) {
  .navbar .navbarInner .divider {
    display: block;
  }
}
.navbar .navbarInner form {
  float: right;
  margin: 0px;
  padding: 0px;
  position: relative;
  top: 0px;
  height: 50px;
  display: none;
}
.navbar .navbarInner form i {
  color: rgba(0, 0, 0, 0.3);
  font-size: 30px;
  padding-top: 10px;
  padding-right: 5px;
  padding-top: 0px;
  padding-right: 5px;
  position: relative;
  top: 10px;
  float: right;
  transition: 0.2s;
  cursor: pointer;
}
.navbar .navbarInner form input[type=text] {
  float: right;
  font-family: Roboto;
  font-weight: 300;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  text-align: left;
  line-height: 20px;
  padding: 0px;
  height: auto;
  width: 55px;
  padding-top: 15px;
  border: 0px;
  transition: 0.2s;
}
.navbar .navbarInner form input[type=text]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.navbar .navbarInner form input[type=text]:focus, .navbar .navbarInner form input[type=text].active {
  width: 217px;
}
.navbar .navbarInner form input[type=text]:focus + i, .navbar .navbarInner form input[type=text].active + i {
  color: rgba(0, 0, 0, 0.9);
}
.navbar .navbarInner form input[type=text]::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  font-family: Roboto;
}
.navbar .navbarInner form input[type=text]:-moz-placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  font-family: Roboto;
}
.navbar .navbarInner form input[type=text]::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  font-family: Roboto;
}
.navbar .navbarInner form input[type=text]:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  font-family: Roboto;
}
.navbar .navbarInner form .touchCatcher {
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  position: absolute;
}
@media (min-width: 768px) {
  .navbar .navbarInner form .touchCatcher {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: text;
  }
}
.navbar .hoverNotifications {
  position: absolute;
  z-index: 70001;
  right: 11px;
  width: 500px;
  max-height: 400px;
  padding: 0px 20px 0px 20px;
  border-radius: 10px;
  text-align: left;
  top: 70px;
  background: #FFF;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.navbar .userHasChannel .hoverNotifications {
  right: 71px;
}
.navbar .hoverNotifications {
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.navbar .hoverNotifications:after, .navbar .hoverNotifications:before {
  bottom: 100%;
  left: 378px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.navbar .hoverNotifications:after {
  border-color: rgba(255, 255, 255, 0);
  /*	border-bottom-color: #fff; */
  border-width: 10px;
  margin-left: -10px;
}
.navbar .hoverNotifications:before {
  border-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  border-color: white white transparent transparent;
  box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.1);
  border-width: 8px;
  margin-left: -8px;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  top: 0px;
}
.navbar .hoverNotifications .hoverInner {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.navbar .notificationItem {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: 20px;
  margin-top: 20px;
  /* 	background: #FFEEEE; */
  font-size: 15px;
  line-height: 15px;
  clear: both;
}
.navbar .notificationItem.lastItem {
  border-bottom: 0;
}
.navbar .notificationItem .isRead {
  width: 50px;
  height: 60px;
  float: left;
  /* 	background: #FFFFEE; */
  position: relative;
}
.navbar .notificationItem .isRead .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.15);
  display: inline-block;
  border-radius: 5px;
}
.navbar .notificationItem .isRead.unread .dot {
  background: #f71e33;
}
.navbar .notificationItem .liveNow .dot {
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -8px;
  width: 10px;
  height: 10px;
  background: #f71e33;
  border: 2px solid #fb8e99;
  display: inline-block;
  border-radius: 8px;
}
.navbar .notificationItem .replayNow .dot {
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -8px;
  width: 10px;
  height: 10px;
  background: #158efc;
  border: 2px solid #8ac6fd;
  display: inline-block;
  border-radius: 8px;
}
.navbar .notificationItem .profilePic {
  width: 60px;
  margin-right: 10px;
  height: 60px;
  float: left;
  position: relative;
}
.navbar .notificationItem .profilePic img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.navbar .notificationItem .profilePic .liveNow {
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background: rgba(247, 30, 51, 0.5);
  color: #FFF;
}
.navbar .notificationItem .profilePic .liveNow i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 30px;
  transition: opacity 0.2s;
}
.navbar .notificationItem .profilePic .replayNow {
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background: rgba(21, 142, 252, 0.5);
  color: #FFF;
}
.navbar .notificationItem .profilePic .replayNow i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 30px;
  transition: opacity 0.2s;
}
.navbar .notificationItem .profilePic .liveNow:hover i, .navbar .notificationItem .profilePic .replayNow:hover i {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.navbar .notificationItem .info {
  width: 280px;
  height: 60px;
  float: left;
  /* 	background: #FFEEFF; */
  padding-top: 10px;
  overflow: hidden;
}
.navbar .notificationItem .info.liveNow, .navbar .notificationItem .info.replayNow {
  padding-top: 9px;
}
.navbar .notificationItem .name {
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.navbar .notificationItem .name a {
  text-decoration: none;
  color: #000;
}
.navbar .notificationItem .info .liveNow {
  position: relative;
  color: #f71e33;
  padding-left: 15px;
  font-size: 12px;
  font-weight: 300;
  font-weight: 700;
  text-transform: uppercase;
}
.navbar .notificationItem .info .replayNow {
  position: relative;
  color: #158efc;
  font-size: 12px;
  font-weight: 300;
  font-weight: 700;
  text-transform: uppercase;
}
.navbar .notificationItem .info .replayNow .whenLive {
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
}
.navbar .notificationItem .message {
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
}
.navbar .notificationItem .follow {
  width: 60px;
  margin-left: 10px;
  height: 60px;
  float: left;
  /* 	background: #EEEEFF; */
}
.navbar .notificationItem .follow a {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.15);
  color: #FFF;
  margin-top: 5px;
  transition: opacity 0.1s;
}
.navbar .notificationItem .follow a:hover {
  background: rgba(0, 0, 0, 0.3);
}
.navbar .notificationItem .follow a i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #FFF;
  font-size: 30px;
  line-height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}
.navbar .notificationItem .follow .isNotFollowing a {
  background: #7ac943;
}
.navbar .notificationItem .follow .isNotFollowing a:hover {
  background: black;
}
.navbar .notificationDate {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  color: #FFF;
  border-radius: 100px;
  text-align: center;
  text-transform: uppercase;
  line-height: 18px;
  transition: 0.2s;
  font-weight: 600;
  letter-spacing: 3px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.7);
}
.navbar .liveNow .notificationDate {
  background: rgba(247, 30, 51, 0.7);
}
.navbar .replayNow .notificationDate {
  background: rgba(21, 142, 252, 0.7);
}
.navbar .newFollower .notificationDate {
  background: rgba(122, 201, 67, 0.7);
}
.navbar .notificationDate span {
  display: block;
  padding: 12px 0px 0px 0px;
}
.navbar .notificationDate span:last-child {
  padding: 0px 0px 12px 0px;
}
.navbar .notificationItem:hover .notificationDate {
  opacity: 0;
}
.navbar .notificationItem .name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 3em;
}
.navbar .notificationItem .name a {
  font-size: 14px;
  line-height: 14px;
  height: 28px;
  max-width: 75%;
  letter-spacing: 1px;
}
.navbar .notificationItem .name a span {
  display: block;
  letter-spacing: 0px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  text-transform: none;
}
.navbar .notificationItem .info {
  padding-top: 6px;
}
.navbar .notificationItem .info.liveNow, .navbar .notificationItem .info.replayNow {
  padding-top: 6px;
}
.navbar .notificationItem .grayOut {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.navbar .notificationItem.newFollowing .grayOut.img, .navbar .notificationItem.newFollowing .grayOut img {
  opacity: 0.3;
}
.navbar .notificationItem:hover .grayOut.profilePicture {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}
.navbar .notificationItem.newFollowing {
  position: relative;
}
.navbar .notificationItem.newFollowing .leagueImage {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 40%;
  height: 40%;
  background: #FFF;
  border-radius: 100px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}
.navbar .notificationItem.newFollowing .leagueImage img {
  width: 100%;
  height: auto;
  padding-top: 12.5%;
}
.navbar .notificationItem.newFollowing .teamLogo {
  position: absolute;
  right: 25px;
  top: 0px;
  height: 100%;
  width: 80px;
}
.navbar .notificationItem.newFollowing .teamLogo img {
  width: auto;
  height: 60px;
  padding-top: 0%;
}
.navbar .notificationItem.newFollowing .teamLogo:last-child {
  right: 125px;
}
.navbar .notificationItem.newFollowing .info {
  width: 170px;
}

.navFanChainOuter {
  position: relative;
  background-image: none;
  background-color: #000;
  background-image: linear-gradient(to right, #F71E33, #FECF00);
  z-index: 2;
}
.navFanChainOuter.navNonCrypto {
  background: #158EFC;
}
.navFanChainOuter a.cover {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.container.navFanChain {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container.navFanChain {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.hamburger .inner {
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
}
.hamburger .inner .item {
  position: relative;
  height: 50px;
}
.hamburger .inner .item .notificationCount {
  background: #F71E33;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 15px;
  border-radius: 100px;
  right: 20px;
  text-decoration: none;
  text-align: center;
  line-height: 21px;
  overflow: hidden;
  font-family: Roboto;
  font-weight: 700;
  font-size: 11px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
}
.hamburger .inner .item .profilePicture {
  left: 15px;
  top: 10px;
  height: 30px;
  border-radius: 100px;
  position: absolute;
}
.hamburger .inner .item .goLive {
  left: 10px;
  top: 5px;
  width: 40px;
  position: absolute;
}
.hamburger .inner .item .cover {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
.hamburger .inner .item span {
  font-family: Roboto;
  font-weight: 700;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: 2px;
  line-height: 20px;
  position: absolute;
  left: 60px;
  top: 15px;
  text-transform: uppercase;
}
.hamburger .inner .item i.icon {
  position: absolute;
  left: 15px;
  top: 10px;
  color: white;
  font-size: 30px;
}
.hamburger .inner .item i.continue {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 30px;
  color: #FFF;
}
.hamburger .inner .item .divider {
  height: 1px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 60px;
  background: rgba(255, 255, 255, 0.3);
}

/* form navbar */
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.spinnerWrapper.white .sk-fading-circle .sk-circle:before, .spinnerWrapper.darkMode .sk-fading-circle .sk-circle:before, .spinnerWrapper.onDark .sk-fading-circle .sk-circle:before {
  background-color: rgba(255, 255, 255, 0.3);
}
.spinnerWrapper.noTopMargin .sk-fading-circle {
  margin-top: 0px;
}
.spinnerWrapper .sk-fading-circle {
  margin: 35px auto;
  width: 50px;
  height: 50px;
  position: relative;
}
.spinnerWrapper .sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.spinnerWrapper .sk-fading-circle .sk-circle:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.spinnerWrapper .sk-fading-circle .sk-circle2 {
  transform: rotate(30deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle2:before {
  animation-delay: -1.1s;
}
.spinnerWrapper .sk-fading-circle .sk-circle3 {
  transform: rotate(60deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle3:before {
  animation-delay: -1s;
}
.spinnerWrapper .sk-fading-circle .sk-circle4 {
  transform: rotate(90deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle4:before {
  animation-delay: -0.9s;
}
.spinnerWrapper .sk-fading-circle .sk-circle5 {
  transform: rotate(120deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle5:before {
  animation-delay: -0.8s;
}
.spinnerWrapper .sk-fading-circle .sk-circle6 {
  transform: rotate(150deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle6:before {
  animation-delay: -0.7s;
}
.spinnerWrapper .sk-fading-circle .sk-circle7 {
  transform: rotate(180deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle7:before {
  animation-delay: -0.6s;
}
.spinnerWrapper .sk-fading-circle .sk-circle8 {
  transform: rotate(210deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle8:before {
  animation-delay: -0.5s;
}
.spinnerWrapper .sk-fading-circle .sk-circle9 {
  transform: rotate(240deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle9:before {
  animation-delay: -0.4s;
}
.spinnerWrapper .sk-fading-circle .sk-circle10 {
  transform: rotate(270deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle10:before {
  animation-delay: -0.3s;
}
.spinnerWrapper .sk-fading-circle .sk-circle11 {
  transform: rotate(300deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle11:before {
  animation-delay: -0.2s;
}
.spinnerWrapper .sk-fading-circle .sk-circle12 {
  transform: rotate(330deg);
}
.spinnerWrapper .sk-fading-circle .sk-circle12:before {
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
  0% {
    opacity: 0;
  }
  39% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes sk-circleFadeDelay {
  0% {
    opacity: 0;
  }
  39% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scDropDown {
  position: absolute;
  background: #222222;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  border-radius: 5px;
  z-index: 1000;
  width: 290px;
  /*
  	&:before {
  	  position: absolute;
  	  z-index: -1;
  	  content: "";
  	  right: calc(50% - 10px);
  	  top: -10px;
  	  border-style: solid;
  	  border-width: 0 10px 10px 10px;
  	  border-color: transparent transparent $BLACK-15 transparent;
  	  transition-duration: 0.3s;
  	  transition-property: transform;
  	}
  */
}
.scDropDown .scDropDownTitle {
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.scDropDown .scDropDownFlagOuter {
  position: absolute;
  top: -10px;
  left: 0px;
  right: 0px;
  height: 10px;
  overflow: hidden;
}
.scDropDown .scDropDownFlagOuter .scDropDownFlag {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 15px;
  top: 5px;
  transform: rotate(45deg);
  background: #222222;
}
.scDropDown .scDropDownBody {
  padding: 0px 10px 10px 10px;
}
.scDropDown .scDropDownBody .scDropDownRow {
  line-height: 30px;
  position: relative;
  padding-left: 40px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.3);
}
.scDropDown .scDropDownBody .scDropDownRow:last-child {
  margin-bottom: 0px;
}
.scDropDown .scDropDownBody .scDropDownRow i {
  position: absolute;
  top: 0px;
  color: rgba(255, 255, 255, 0.3);
  left: 0px;
  font-size: 30px;
}
.scDropDown .scDropDownBody .scDropDownRow i.check {
  right: 0px;
  left: inherit;
  color: rgba(255, 255, 255, 0.3);
}
.scDropDown .scDropDownBody .scDropDownRow.active {
  color: #FFFFFF;
}
.scDropDown .scDropDownBody .scDropDownRow.active i {
  color: #FFFFFF;
}
.scDropDown .scDropDownBody .scDropDownRow.active i.check {
  color: #FFFFFF;
}
.scDropDown .scDropDownBody .scDropDownRow a.cover {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.scDropDown .scDropDownBody .scDropDownRow:hover {
  color: rgba(255, 255, 255, 0.5);
}
.scDropDown .scDropDownBody .scDropDownRow:hover i {
  color: rgba(255, 255, 255, 0.5);
}

.scDropDownBorder {
  position: absolute;
  box-shadow: 0px 0px 5px black;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  border-radius: 5px;
  z-index: 1000;
  width: 290px;
  letter-spacing: 2px;
  border: 1px solid #FFFFFF;
  /*
  	&:before {
  	  position: absolute;
  	  z-index: -1;
  	  content: "";
  	  right: calc(50% - 10px);
  	  top: -10px;
  	  border-style: solid;
  	  border-width: 0 10px 10px 10px;
  	  border-color: transparent transparent $BLACK-15 transparent;
  	  transition-duration: 0.3s;
  	  transition-property: transform;
  	}
  */
}
.scDropDownBorder .scDropDownTitle {
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 10px;
}
.scDropDownBorder:before {
  position: absolute;
  content: "";
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border: 1px solid #FFF;
  border-radius: 3px;
}
.scDropDownBorder .scDropDownFlagOuter {
  position: absolute;
  top: -11px;
  left: 0px;
  right: 0px;
  height: 10px;
  overflow: hidden;
}
.scDropDownBorder .scDropDownFlagOuter .scDropDownFlag {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 15px;
  top: 5px;
  transform: rotate(45deg);
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px black;
}
.scDropDownBorder .scDropDownBody {
  padding: 0px 10px 10px 10px;
}
.scDropDownBorder .scDropDownBody .scDropDownRow {
  line-height: 30px;
  position: relative;
  padding-left: 40px;
  margin-bottom: 10px;
}
.scDropDownBorder .scDropDownBody .scDropDownRow:last-child {
  margin-bottom: 0px;
}
.scDropDownBorder .scDropDownBody .scDropDownRow i {
  position: absolute;
  top: 0px;
  color: #FFFFFF;
  left: 0px;
  font-size: 30px;
}
.scDropDownBorder .scDropDownBody .scDropDownRow i.check {
  right: 0px;
  left: inherit;
  color: rgba(255, 255, 255, 0.5);
}
.scDropDownBorder .scDropDownBody .scDropDownRow.active i.check {
  color: #FFFFFF;
}
.scDropDownBorder .scDropDownBody .scDropDownRow a.cover {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.footerInfoArea {
  display: flex;
  flex-wrap: wrap;
}
.footerInfoArea .forCreators {
  background-image: url("https://castrstatic.b-cdn.net/upload/209427/1588700118/ForCreators_HeaderImage.jpg");
}
.footerInfoArea .forFans {
  background-image: url("https://castrstatic.b-cdn.net/upload/209427/1588700118/ForFans_HeaderImage.jpg");
}
.footerInfoArea .forPublishers {
  background-image: url("https://castrstatic.b-cdn.net/upload/209427/1588700118/ForPublishers_HeaderImage.jpg");
}
.footerInfoArea .forRightsHolders {
  background-image: url("https://castrstatic.b-cdn.net/upload/209427/1588700118/ForRightsHolders_HeaderImage.jpg");
}
.footerInfoArea .forCreators,
.footerInfoArea .forFans,
.footerInfoArea .forPublishers,
.footerInfoArea .forRightsHolders {
  height: 260px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: center center;
}
@media (min-width: 1170px) {
  .footerInfoArea .forCreators,
.footerInfoArea .forFans,
.footerInfoArea .forPublishers,
.footerInfoArea .forRightsHolders {
    width: 50%;
  }
}
.footerInfoArea .forCreators .dotPattern,
.footerInfoArea .forFans .dotPattern,
.footerInfoArea .forPublishers .dotPattern,
.footerInfoArea .forRightsHolders .dotPattern {
  width: 100%;
  height: 100%;
  background-image: url("https://castrstatic.b-cdn.net/upload/209427/1588700285/Halftone_Dots_1920x1080.png");
  background-position: center top;
  background-size: 140%;
}
.footerInfoArea .forCreators .content,
.footerInfoArea .forFans .content,
.footerInfoArea .forPublishers .content,
.footerInfoArea .forRightsHolders .content {
  position: absolute;
  left: 15px;
  bottom: 15px;
  right: 15px;
  color: #FFFFFF;
  line-height: 0px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1170px) {
  .footerInfoArea .forCreators .content,
.footerInfoArea .forFans .content,
.footerInfoArea .forPublishers .content,
.footerInfoArea .forRightsHolders .content {
    left: 30px;
    bottom: 30px;
    right: 30px;
  }
}
.footerInfoArea .forCreators .content h1,
.footerInfoArea .forFans .content h1,
.footerInfoArea .forPublishers .content h1,
.footerInfoArea .forRightsHolders .content h1 {
  font-size: 30px;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 48px;
  margin: 0px;
  padding: 0px;
}
.footerInfoArea .forCreators .content p,
.footerInfoArea .forFans .content p,
.footerInfoArea .forPublishers .content p,
.footerInfoArea .forRightsHolders .content p {
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 400;
  text-align: left;
  line-height: 24px;
  margin-bottom: 10px;
}
.footerInfoArea .forCreators .content .scBoxButton,
.footerInfoArea .forFans .content .scBoxButton,
.footerInfoArea .forPublishers .content .scBoxButton,
.footerInfoArea .forRightsHolders .content .scBoxButton {
  text-shadow: none;
  float: left;
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.withFooterMargin .globalFooter {
  margin-top: 30px;
}

.globalFooter {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px;
  background: #111111;
  font-size: 13px;
  line-height: 20px;
}
@media (min-width: 1170px) {
  .globalFooter {
    padding: 0px 30px 30px;
  }
}
.globalFooter .footerRow {
  padding-bottom: 30px;
}
.globalFooter .footerRow:after {
  content: "";
  display: table;
  clear: both;
}
.globalFooter .footerRow:last-child {
  padding-bottom: 0px;
}
@media (min-width: 768px) {
  .globalFooter .powered {
    float: left;
    width: 50%;
  }
}
.globalFooter .powered img {
  height: 40px;
}
.globalFooter .appStoreIcon {
  padding-top: 30px;
  line-height: 0px;
}
@media (min-width: 768px) {
  .globalFooter .appStoreIcon {
    padding-top: 0px;
    float: right;
    width: 50%;
    text-align: right;
  }
}
.globalFooter .appStoreIcon a {
  display: inline-block;
}
.globalFooter .appStoreIcon a:last-child {
  padding-left: 10px;
}
.globalFooter .appStoreIcon a img {
  height: 40px;
}
.globalFooter .column {
  padding-top: 30px;
  float: left;
  width: 50%;
  box-sizing: border-box;
  margin: 0px;
}
.globalFooter .column:nth-child(2n+1) {
  clear: left;
}
@media (min-width: 768px) {
  .globalFooter .column {
    width: 33%;
  }
  .globalFooter .column:nth-child(2n+1) {
    clear: none;
  }
  .globalFooter .column:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 1170px) {
  .globalFooter .column {
    width: calc(100% / 6);
  }
  .globalFooter .column:nth-child(3n+1) {
    clear: none;
  }
}
.globalFooter .column .title {
  font-size: 20px;
  line-height: 20px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  color: #FFFFFF;
  padding-bottom: 10px;
}
.globalFooter .column a {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  font-family: Roboto;
  font-size: 13px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #ffffff;
}
.globalFooter .column.partners a {
  padding-bottom: 15px;
  line-height: 0px;
}
.globalFooter .column.social a {
  height: 30px;
  position: relative;
  padding-left: 40px;
  line-height: 30px;
}
.globalFooter .column.social a i {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 30px;
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.scScheduleItemBig {
  width: 290px;
  height: 210px;
  box-sizing: border-box;
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 0px;
  overflow: hidden;
}
.scScheduleItemBig.sliderItem {
  margin-right: 10px;
}
.scScheduleItemBig .scScheduleItemBigTeam {
  position: absolute;
  top: 15px;
  width: 120px;
}
.scScheduleItemBig .scScheduleItemBigTeam img {
  width: 120px;
  height: 90px;
  max-width: 100%;
  max-height: auto;
}
.scScheduleItemBig .scScheduleItemBigTeam.away {
  left: 0px;
}
.scScheduleItemBig .scScheduleItemBigTeam.home {
  right: 0px;
}
.scScheduleItemBig .scScheduleItemBigTeam.subTypeTournament img {
  float: left;
  width: 50%;
  height: auto;
}
.scScheduleItemBig .scScheduleItemBigTeam .subTypePlus {
  position: absolute;
  bottom: 0px;
  width: 50%;
  height: 33%;
  background: rgba(255, 255, 255, 0.7);
  right: 0px;
  vertical-align: center;
  text-align: center;
  line-height: 44px;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  font-size: 20px;
}
.scScheduleItemBig .casters {
  text-align: center;
  position: absolute;
  top: 40px;
  width: 100%;
}
.scScheduleItemBig .casters img {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  vertical-align: top;
  margin-right: -10px;
  border: 1px solid #CCC;
}
.scScheduleItemBig .casters span {
  border: 1px solid #CCC;
  width: 35px;
  height: 35px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.9);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}
.scScheduleItemBig .scScheduleItemBigScore {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  text-align: center;
  line-height: 25px;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 5px 10px 0px;
  padding-top: 0px;
}
.scScheduleItemBig .scScheduleItemBigName {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.scScheduleItemBig .scScheduleItemBigButton {
  position: absolute;
  bottom: 0px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  left: 0px;
  right: 0px;
  height: 40px;
  overflow: hidden;
  line-height: 0px;
  text-align: left;
  vertical-align: top;
  display: flex;
}
.scScheduleItemBig .scScheduleItemBigButton a.cover {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.scScheduleItemBig .scScheduleItemBigButton i {
  font-size: 30px;
  color: #000;
  display: inline-block;
  padding-top: 5px;
}
.scScheduleItemBig .scScheduleItemBigButton a:not(.cover) {
  flex-grow: 2;
}
.scScheduleItemBig .scScheduleItemBigButton a:not(.cover) span {
  display: none;
}
.scScheduleItemBig .scScheduleItemBigButton a:not(.cover) span.favorite {
  display: inline-block;
  padding-left: 5px;
}
.scScheduleItemBig .scScheduleItemBigButton a:not(.cover).active span {
  display: none;
}
.scScheduleItemBig .scScheduleItemBigButton a:not(.cover).active span.unfavorite {
  display: inline-block;
  padding-left: 5px;
}
.scScheduleItemBig .scScheduleItemBigButton a.chev {
  padding-right: 10px;
  top: 0px;
  display: block;
  flex-grow: 1;
}
.scScheduleItemBig .scScheduleItemBigButton a.chev i {
  float: right;
}
.scScheduleItemBig .scScheduleItemBigButton a.chev img {
  float: right;
  margin-left: -10px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
  border-radius: 100px;
}
.scScheduleItemBig .scScheduleItemBigButton .scFavoriteHeart {
  width: 30px;
  height: 30px;
  display: inline-block;
  padding-top: 5px;
  padding-left: 10px;
}
.scScheduleItemBig .scScheduleItemBigButton .scFavoriteHeart lottie-player {
  height: 30px;
  width: 30px;
}
.scScheduleItemBig .scScheduleItemBigButton span {
  vertical-align: top;
  display: inline-block;
  position: relative;
  top: 0px;
  line-height: 40px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.9);
  letter-spacing: 0;
  padding-left: 35px;
}
.scScheduleItemBig .scScheduleItemBigButton span i {
  position: absolute;
  left: 0px;
  top: 0px;
}
.scScheduleItemBig .scScheduleItemBigButton span.watch {
  margin-left: 10px;
}
.scScheduleItemBig a.cover {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 40px;
}
.scScheduleItemBig .scScheduleItemBigStatus {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 40px;
  text-align: center;
  line-height: 20px;
}
.scScheduleItemBig .scScheduleItemBigStatus .date {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.5);
}
.scScheduleItemBig .scScheduleItemBigStatus .date.live {
  color: #F71E33;
}
.scScheduleItemBig .scScheduleItemBigStatus .ball {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  width: 40px;
  height: 40px;
  text-align: center;
}
.scScheduleItemBig .scScheduleItemBigStatus .ball i {
  font-size: 30px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.3);
}
.scScheduleItemBig .scScheduleItemBigStatus .time {
  position: absolute;
  left: 0px;
  right: 0px;
  text-align: center;
  top: 90px;
}
.scScheduleItemBig .scScheduleItemBigStatus .time > div {
  text-align: center;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
}
.scScheduleItemBig .scScheduleItemBigStatus .time > div i {
  color: rgba(0, 0, 0, 0.9);
  font-size: 20px;
}
.scScheduleItemBig.live .scScheduleItemBigStatus .ball {
  border-color: #F71E33;
}
.scScheduleItemBig.live .date {
  color: #F71E33;
}
.scScheduleItemBig.preGame .scScheduleItemBigStatus .ball {
  border-color: #7AC943;
}
.scScheduleItemBig.preGame .date {
  color: #7AC943;
}

.scScheduleItem {
  height: 70px;
  width: 160px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.9);
  position: relative;
}
.scScheduleItem.sliderItem {
  margin-right: 10px;
}
.scScheduleItem .casters {
  position: absolute;
  top: 5px;
  right: 10px;
}
.scScheduleItem .casters img {
  float: right;
  margin-left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}
.scScheduleItem .date {
  position: absolute;
  top: 5px;
  left: 10px;
  max-width: 100%;
  letter-spacing: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scScheduleItem.live .date strong {
  color: #F71E33;
}
.scScheduleItem strong {
  font-weight: 700;
}
.scScheduleItem .team {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 25px;
  letter-spacing: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
  line-height: 20px;
  padding-left: 25px;
}
.scScheduleItem .team.home {
  top: 45px;
}
.scScheduleItem .team .score {
  position: absolute;
  right: 0px;
  top: 0px;
}
.scScheduleItem .team.loser {
  color: rgba(0, 0, 0, 0.5);
}
.scScheduleItem .team:not(.preGame) .score {
  font-weight: 700;
}
.scScheduleItem .team img {
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -7.5px;
  width: 20px;
  height: 15px;
}
.scScheduleItem.preGame .scScheduleItemBig .scScheduleItemBigStatus .ball {
  border-color: #7AC943;
}
.scScheduleItem.preGame .team {
  color: rgba(0, 0, 0, 0.9);
}
.scScheduleItem.preGame .team .score {
  color: rgba(0, 0, 0, 0.5);
}
.scScheduleItem a.cover {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.scBackgroundChalkboard {
  background: #000;
  background-image: url("../images/Chalkboard_1280x300.png?v1566864000Spinner");
  background-position: center center;
  background-size: cover;
}

.scColorBackgroundWhite {
  background: #FFF !important;
}

.scColorBackgroundRed {
  background: #F71E33 !important;
}

.scColorBackgroundPurple {
  background: #9E4CE6 !important;
}

.scColorBackgroundBlue {
  background: #158EFC !important;
}

.scColorBackgroundGreen {
  background: #7AC943 !important;
}

.scColorBackgroundYellow {
  background: #FECF00 !important;
}

.scColorBackgroundOrange {
  background: #F47924 !important;
}

.scColorBackground5black, .scColorBackground5Black, .scColorBackgroundBlack5, .scColorBackground5 {
  background: rgba(0, 0, 0, 0.05) !important;
}

.scColorBackground15black, .scColorBackground15Black, .scColorBackgroundBlack15, .scColorBackground15 {
  background: rgba(0, 0, 0, 0.15) !important;
}

.scColorBackground30black, .scColorBackground30Black, .scColorBackgroundBlack30, .scColorBackground30 {
  background: rgba(0, 0, 0, 0.3) !important;
}

.scColorBackground30white, .scColorBackground30White, .scColorBackground30white, .scColorBackground30White {
  background: rgba(255, 255, 255, 0.3) !important;
}

.scColorBackground50black, .scColorBackground50Black, .scColorBackgroundBlack50, .scColorBackground50 {
  background: rgba(0, 0, 0, 0.5) !important;
}

.scColorBackground85black, .scColorBackground85Black, .scColorBackgroundBlack85, .scColorBackground85 {
  background: rgba(0, 0, 0, 0.85) !important;
}

.scColorBackground5White, .scColorBackground5White, .scColorBackgroundWhite5 {
  background: rgba(255, 255, 255, 0.05) !important;
}

.scColorBackground15White, .scColorBackground15White, .scColorBackgroundWhite15 {
  background: rgba(255, 255, 255, 0.15) !important;
}

.scColorBackground30White, .scColorBackground30White, .scColorBackgroundWhite30 {
  background: rgba(255, 255, 255, 0.3) !important;
}

.scColorBackground30white, .scColorBackground30White, .scColorBackground30white, .scColorBackground30White {
  background: rgba(255, 255, 255, 0.3) !important;
}

.scColorBackground50White, .scColorBackground50White, .scColorBackgroundWhite50 {
  background: rgba(255, 255, 255, 0.5) !important;
}

.scColorBackground85White, .scColorBackground85White, .scColorBackgroundWhite85 {
  background: rgba(255, 255, 255, 0.85) !important;
}

.scColorBackgroundGradient, .scColorBackgroundGradiant {
  background-color: transparent !important;
  background: transparent !important;
  background-image: linear-gradient(to right, #f6003e, #fecf00) !important;
}

.scColorBackgroundGradient2, .scColorBackgroundGradiant2 {
  background-color: transparent !important;
  background: transparent !important;
  background-image: linear-gradient(to right, #722fd3, #389ffc) !important;
}

.scColorBorderBlue {
  border-color: #158EFC;
}

.scColorBorderPurple {
  border-color: #9E4CE6;
}

.scColorBorderRed {
  border-color: #F71E33;
}

.scColorBorderGreen {
  border-color: #7AC943;
}

.scColorBorderYellow {
  border-color: #FECF00;
}

.scColorBorderOrange {
  border-color: #F47924;
}

.scColorBorderWhite {
  border-color: transparent;
  border-width: 0px;
}

.scBorderColorWhite {
  border-color: white;
}

.scColorBorderTransparent {
  border-color: transparent;
  border-width: 0px;
}

.scColorBorder15black, .scColorBorder15Black {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.scColorBorder30black, .scColorBorder30Black {
  border-color: rgba(0, 0, 0, 0.3) !important;
}

.scColorBorder50black, .scColorBorder50Black {
  border-color: rgba(0, 0, 0, 0.5) !important;
}

.scColor30Black, .scColor30black, .scColorBlack30 {
  color: rgba(0, 0, 0, 0.3);
}

.scColor15Black, .scColor15black, .scColorBlack15 {
  color: rgba(0, 0, 0, 0.15);
}

.scColor30White, .scColor30white, .scColorWhite30 {
  color: rgba(255, 255, 255, 0.3);
}

.scColor15White, .scColor15white, .scColorWhite15 {
  color: rgba(255, 255, 255, 0.3);
}

.scColorWhite {
  color: #FFF;
}

.scColorRed {
  color: #F71E33;
}

.scColorPurple {
  color: #9E4CE6;
}

.scColorBlue {
  color: #158EFC;
}

.scColorGreen {
  color: #7AC943;
}

.scColorYellow {
  color: #FECF00;
}

.scColorOrange {
  color: #F47924;
}

.scColorBorderRedImportant {
  border-color: #F71E33 !important;
}

.scColorBorderPurpleImportant {
  border-color: #9E4CE6 !important;
}

.scColorBorderBlueImportant {
  border-color: #158EFC !important;
}

.scColorBorderGreenImportant {
  border-color: #7AC943 !important;
}

.scColorBorderYellowImportant {
  border-color: #FECF00 !important;
}

.scColorBorderOrangeImportant {
  border-color: #F47924 !important;
}

.scColorBorderWhiteImportant {
  border-color: white !important;
}

.scColorBorderTransparentImportant {
  border-color: white !important;
}

.scColorWhiteImportant {
  color: #FFF !important;
}

.scColorRedImportant {
  color: #F71E33 !important;
}

.scColorPurpleImportant {
  color: #9E4CE6 !important;
}

.scColorBlueImportant {
  color: #158EFC !important;
}

.scColorGreenImportant {
  color: #7AC943 !important;
}

.scColorYellowImportant {
  color: #FECF00 !important;
}

.scColorOrangeImportant {
  color: #F47924 !important;
}

.scStatus {
  background: #7AC943;
  color: #FFF;
  font-family: Roboto;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 11px;
  padding: 10px 0px;
  letter-spacing: 1.8px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
  padding: 10px 0px;
  text-transform: uppercase;
}

.scStatus.noMargin {
  margin-bottom: 0px;
}

/*# sourceMappingURL=basicElements.css.map */