/* CSS for home.html */
/* This is applied in addition to common.css */

html,
body {
  color: white;
  background: black;
}

#top-container {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  height: 110px;
  background: linear-gradient(black 0%, black 70%, transparent 100%);
}

@media (max-width: 700px) {
  #top-container {
    height: 90px;
  }
}

/* If the explore tab is open, the top container acts as a fixed component,
   it doesn't scroll with the page. */
.explore-tab-open #top-container {
  position: fixed;
  z-index: 3;
}

#topbar {
  max-width: 1500px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media (max-width: 700px) {
  #topbar {
    /* padding-left: 16px;
    padding-right: 16px;
    margin-top: 16px; */
  }
}

.bar-button {
  display: inline-block;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  margin-left: 16px;
  margin-right: 16px;
  cursor: pointer;
  text-decoration: none;
}

.bar-button.icon {
  margin: 0px 8px 0px 8px;
}

/* Last one should be flush with right edge of container */
.bar-button:last-child {
  margin-right: 0px;
}

.bar-button:hover {
  color: white;
}

#bell-button {
  position: relative;
  display: none;
}

#bell-circle {
  background: #e00;
  color: white;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: -7px;
  right: -7px;
}

@media (max-width: 700px) {
  .bar-button {
    margin-left: 8px;
    margin-right: 8px;
  }

  .bar-button.hide-on-mobile {
    display: none !important;
  }
}

.bar-button.active {
  color: white;
  cursor: default;
}

/* The .only-for-about-tab shows the button only if the about tab is open. */
.bar-button.only-for-about-tab {
  display: none;
}

.about-tab-open .bar-button.only-for-about-tab {
  display: inline-block;
}

/* Box that holds the page's content, such that it's limited
   in width and centered horizontally in the page. */
.content {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  margin-top: 110px;
  /* to make room for the top bar */
}

@media (max-width: 700px) {
  .content {
    margin-top: 90px;
  }
}

body.explore-tab-open,
body.profile-tab-open {
  background: linear-gradient(black 0%, #1b0b5d 100%);
  background-attachment: fixed;
}

body.about-tab-open {
  background: linear-gradient(black 35%,
      #409cd4,
      #4b87c7,
      #7962bc,
      #b14fb3,
      #e549a1,
      #f15a87,
      #f47b60,
      #f4934d);
}

#logo {
  display: inline-block;
  font-size: 0px;
  color: white;
  text-decoration: none;

  /* Moving this 3px up because otherwise it's 3px too low.
   *   ^ Most useful comment in the history of CSS */
  transform: translateY(-3px);
}

#hero-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 40px 0px 70px 0px;
}

@media (max-width: 800px) {
  #hero-box {
    flex-direction: column;
    align-items: first;
    margin-top: 24px;
    margin-bottom: 32px;
  }
}

.hero-text {
  font: 50px "Helvetica Neue", HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 24px;
  line-height: 0.98;
  font-weight: 200;
}

@media (max-width: 1200px) {
  .hero-text {
    font-size: 36px;
  }
}

@media (max-width: 800px) {
  .hero-text {
    width: 100%;
    text-align: left;
    margin-bottom: 36px;
    margin-right: 0;
    font-size: 32px;
  }
}

.hero-text b {
  color: white;
  font-weight: 400;
}

#hero-cta-button-bar {
  display: flex;
  flex-direction: row;
}

#hero-vid-container, #hero-image-container {
  position: relative;
  width: min(60vw, 860px);
}

#hero-vid-container {
  overflow: hidden;
}

#hero-image-container {
  aspect-ratio: 1.7;
}

@media (max-width: 800px) {
  #hero-vid-container, #hero-image-container {
    width: 100%;
  }
}

@media (max-width: 450px) {
  #hero-vid-container, #hero-image-container {
    width: 110%;
  }
}

#hero-vid, #hero-vid-ios {
  width: 100%;
  border-radius: 12px;
}

#hero-image-container {
  /* Note: some attributes are set above in the #hero-vid-container rule. */
}

@keyframes device-appear {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes promo-bar-appear {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}


#hero-image-imac {
  position: absolute;
  top: 2%;
  left: 21%;
  width: 68%;
  animation: 1s device-appear ease-out;
  animation-fill-mode: both;
}

#hero-image-iphone {
  position: absolute;
  top: 56%;
  left: 85%;
  width: 13%;
  animation: 1s device-appear .8s ease-out;
  animation-fill-mode: both;
}

#hero-image-ipad {
  position: absolute;
  top: 56%;
  left: 0%;
  width: 35%;
  animation: 1s device-appear 0.4s ease-out;
  animation-fill-mode: both;
}

.promo-bar {
  font: 16px "Helvetica Neue", HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, .8);
  background-color: rgba(255, 255, 255, .1);
  padding:10px;
  font-weight: 200;
  border-radius: 5px;
  text-align: center;
  animation: 2s promo-bar-appear .25s ease;
  animation-fill-mode: both;
}

.promo-bar a{
  font-weight: 400;
  color: #E9AB5D;
  cursor: pointer;
  text-decoration: none;
}


.trophy{
  width: 24px;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -3px;
}







button.square {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 10px;
  color: white;
  cursor: pointer;
}

button.square:hover {
  background: linear-gradient(to right, #000000, #202020, #000000);
  background-size: 200%;
  background-position: left;
  animation: move 5s ease;
  border-color: white;
}

#honeycomb-iframe {
  /* Ugly hack to make it full-bleed and "counter" the 28px padding on each side */
  width: calc(100% + 56px);
  margin-left: -28px;
  height: 870px;
  border: none;
  margin-top: 16px;
}

@media (max-width: 900px) {
  #honeycomb-iframe {
    height: 760px;
  }
}

@media (max-width: 800px) {
  #honeycomb-iframe {
    height: 660px;
  }
}

@media (max-width: 700px) {
  #honeycomb-iframe {
    height: 600px;
  }
}

@media (max-width: 600px) {
  #honeycomb-iframe {
    height: 500px;
  }
}

@media (max-width: 500px) {
  #honeycomb-iframe {
    height: 420px;
  }
}

@media (max-width: 440px) {
  #honeycomb-iframe {
    height: 346px;
  }
}

@media (max-width: 390px) {
  #honeycomb-iframe {
    height: 310px;
  }
}

.h1-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 0px;
}

.h1-box-line {
  flex-grow: 1;
  transform: translateY(50%);
  margin-left: 22px;
  margin-right: 22px;
  background-image: linear-gradient(to right,
      rgb(255, 255, 255) 13%,
      rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

@media (max-width: 700px) {
  .h1-box-line {
    margin-left: 8px;
    margin-right: 8px;
    background-size: 4px 1px;
  }
}

h1 {
  margin: 0;
  font: bold 38px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: white;
}

@media (max-width: 700px) {
  h1 {
    font-size: 32px;
  }
}

.h1-subtitle {
  text-align: center;
  font: 18px HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .h1-subtitle {
    font-size: 17px;
    margin-top: 1px;
    margin-bottom: 5px;
  }
}

.feature-box {
  display: flex;
  flex-direction: row;
  margin: 90px 32px 90px 32px;
  align-items: center;
  justify-content: center;
}

.feature-box.mirrored {
  flex-direction: row-reverse;
}

@media (max-width: 700px) {
  .feature-box {
    flex-direction: column;
    margin: 32px 32px 50px 32px;
  }

  .feature-box.mirrored {
    flex-direction: column;
  }
}

.feature-image {
  position: relative;
}

.feature-image img {
  width: min(860px, 60vw);
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.3);
}

.feature-image.smaller img {
  width: min(688px, 50vw);
}

.feature-image.smallest img {
  width: min(360px, 30vw);
}

.tilt-animation {
  animation: tiltAnimation 8s 0.5s infinite ease;
}

.feature-image.smallest img.device-shadow {
  z-index: -1;
  position: absolute;
  width: min(500px, 40vw);
  left: -4vw;
  bottom: -8vw;
  animation: none;
}

@keyframes tiltAnimation {
  0% {
    transform: scale(1) rotateX(0deg) rotateY(0deg) translateY(0);
  }

  50% {
    transform: rotateX(4deg) rotateY(-16deg) translateY(12px);
  }

  100% {
    transform: scale(1) rotateX(0deg) rotateY(0deg) translateY(0);
  }
}

@media (max-width: 700px) {

  .feature-image img,
  .feature-image.smaller img {
    width: 90vw;
  }
}

.feature-spacer {
  flex-grow: 1;
  min-width: 8px;
}

@media (max-width: 700px) {
  .feature-spacer {
    display: none;
  }
}

@media (max-width: 700px) {
  .hide-on-mobile {
    display: none !important;
  }
}

.feature-desc {
  width: 340px;
  margin-bottom: 32px;
}

@media (max-width: 1200px) {
  .feature-desc {
    width: 250px;
  }
}

@media (max-width: 850px) {
  .feature-desc {
    width: 190px;
  }
}

@media (max-width: 700px) {
  .feature-desc {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}

.feature-desc-title {
  font: bold 38px HelveticaNeue, Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  .feature-desc-title {
    font-size: 28px;
  }
}

@media (max-width: 850px) {
  .feature-desc-title {
    font-size: 24px;
  }
}

@media (max-width: 700px) {
  .feature-desc-title {
    font-size: 26px;
    margin-bottom: 1px;
  }
}

.feature-desc-text {
  font: 26px HelveticaNeueLight, Helvetica, Arial, sans-serif;
}

@media (max-width: 1200px) {
  .feature-desc-text {
    font-size: 18px;
  }
}

@media (max-width: 850px) {
  .feature-desc-text {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .feature-desc-text {
    font-size: 16px;
    line-height: 1.05;
    opacity: 0.6;
  }
}

.bottom-cta-desktop,
.bottom-cta-mobile {
  text-align: center;
  font: 18px HelveticaNeueLight, Helvetica, Arial, sans-serif;
  margin: 64px;
}

@media (max-width: 700px) {
  .bottom-cta-desktop {
    display: none;
  }
}

@media (min-width: 700px) {
  .bottom-cta-mobile {
    display: none;
  }
}

.bottom-cta-mobile b {
  font: bold 18px HelveticaNeue, Helvetica, Arial, sans-serif;
}

#bottom-bar {
  background: black;
  height: 80px;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 16px;
}

.fly-from-left-when-seen,
.fly-from-right-when-seen {
  opacity: 0;
}

@keyframes fly-from-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fly-from-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.fly-from-left {
  animation-delay: 500ms;
  animation: fly-from-left 0.5s cubic-bezier(0.5, 0.9, 0.25, 1.1);
  animation-fill-mode: forwards;
}

.fly-from-right {
  animation-delay: 500ms;
  animation: fly-from-right 0.5s cubic-bezier(0.5, 0.9, 0.25, 1.1);
  animation-fill-mode: forwards;
}

#explore-tab {
  /* display: flex; 
  flex-direction: row; */
  max-width: 1500px;
  margin-top: 128px;
  /* room for top bar to show on top */
  margin-bottom: 32px;
  min-height: 2000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

@media (max-width: 700px) {
  #explore-tab {
    margin-top: 108px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

#explore-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  justify-items: center;
}

@media (max-width: 1435px) {
  #explore-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1150px) {
  #explore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 870px) {
  #explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.explore-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 350px;
  position: relative;
  border-radius: 8px;
  border: 1px solid #fff;
  padding: 6px;
  background: radial-gradient(#c6d0ff 0%, #122eff 100%);
  text-decoration: none;
  color: white;
  transform-style: preserve-3d;
  /* allows parallax effect */
  transform: perspective(1000px) scale(0.9) rotateX(75deg);
  transition: transform 200ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
  will-change: transform;
}

.light-mode {
  color: black !important;
}

/* loading */
.explore-card.placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  transform: perspective(1000px) scale(0.9) rotateX(0deg);
}

.explore-card-star {
  width: 25px;
  height: 25px;
  top: -13px;
  right: -13px;
  position: absolute;
  pointer-events: none;
}

.explore-card-thumb-wrapper {
  pointer-events: none;
  display: flex;
  position: absolute;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  transition: transform 0.25s ease-out;
}

.explore-card.hover .explore-card-thumb-wrapper {
  transform: translateZ(30px);
}

.explore-card.hover .explore-card-room-shadow {
  opacity: 0.5;
}

.explore-card.hover .explore-card-info {
  transform: translateZ(20px);
}

.explore-card-room-thumb {
  width: 256px;
  height: auto;
  margin-top: 20px;
}

.explore-card-room-shadow {
  opacity: 0;
  width: 256px;
  position: absolute;
  margin-top: 22px;
  z-index: -1;
  transition: opacity 0.25s ease-out;
}


.roomsvg {
  z-index: 1;
  position: absolute;
  width: 256px;
  height: 256px;
  margin-top: 1px;
}

.g {
  transform-origin: 43% 44%;
  transform: scale(1.01);
}

.glare {
  pointer-events: none;
  width: 300px;
  height: 300px;
  transform-origin: 43% 50%;
  opacity: 0;
}

.explore-card-info {
  pointer-events: none;
  padding: 12px 4px 2px 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease-out;
}

.explore-card-footer {
  flex: 0 0 auto;
  align-self: flex-end;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  font: 12px HelveticaNeue, Helvetica, Arial, sans-serif;
  padding: 6px 0px 0px 0px;
}

.explore-card-author-pic {
  width: 24px;
  height: 24px;
  border-radius: 12px;
}

.explore-card-title {
  width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
  text-align: center;
  font: 20px Coolvetica;
  /* Adds ellipses to long titles */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-card-room-info {
  flex-grow: 1;
  margin: 8px;
  overflow: hidden;
}

.explore-card-subtitle {
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-card-room-stats {
  flex-shrink: 0;
}

.explore-card-room-stat {
  opacity: 0.6;
  text-align: right;
}

.explore-card-unlisted {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #222;
  color: white;
  font-size: 12px;
  padding: 4px;
  border-radius: 4px;
}

@media (max-width: 650px) {
  .explore-card {
    height: 400px;
  }

  .explore-card-room-thumb {
    transform: scale(1.35);
  }

  .explore-card-room-shadow {
    display: none;
  }

  .roomsvg {
    transform: scale(1.35);
    margin-top: -4px !important;
  }

  #explore-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Used instead of the 'hidden' property because this can
  override "display: flex" correctly without an inner div,
  and more importantly, without requiring me to actually know
  what I'm doing. */
.hidden {
  display: none !important;
}

#profile-tab {
  max-width: 1500px;
  margin-top: 128px;
  /* room for top bar to show on top */
  padding-bottom: 32px;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

#profile-loading {
  font: 12pt HelveticaNeue, Helvetica, Arial, sans-serif;
  opacity: 0.2;
}

#profile-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media (max-width: 500px) {
  #profile-tab {
    margin-top: 100px;
  }

  #profile-header {
    flex-direction: column;
    gap: 15px;
  }
}

#profile-photo {
  width: 64px;
  height: 64px;
  border-radius: 32px;
}

#profile-uname {
  font: bold 30px HelveticaNeue, Helvetica, Arial, sans-serif;
  margin-left: 24px;
  margin-right: 32px;
  transform: translateY(-2.5px);
}

.profile-stats-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.profile-stats-label {
  font: 16px HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: white;
  color: rgba(255, 255, 255, 0.3);
}

.profile-stats-value {
  color: rgba(255, 255, 255, 0.7);
  padding-right: 8px;
}

.profile-tab-wrapper {
  margin-top: 32px;
}

@media (max-width: 500px) {
  .profile-tab-wrapper {
    margin-top: 24px;
  }
}

.profile-tab {
  font: 16px HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: white;
  padding: 16px 16px 16px 0px;
  display: inline-block;
  cursor: pointer;
}

.profile-tab-value {
  color: rgba(255, 255, 255, 0.3);
  margin-left: 10px;
  margin-right: 4px;
}

.profile-box-line {
  height: 1px;
  flex-grow: 1;
  background-image: linear-gradient(to right,
      rgb(255, 255, 255) 13%,
      rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

#profile-tab #explore-grid {
  margin-top: 32px;
}

#profile-no-rooms {
  margin-top: 128px;
  text-align: center;
}

#topbar-search {
  display: none;
  /* overridden below when explore tab is open */
  flex-direction: row;
  flex-grow: 1;
}

/* If wider than 1000px show search box in explore mode.
   If narrower than 1000px, don't show, because it would be hard to align it.
   Side-effect: mobile web users can't search, but they're used to being treated badly
   by our site anyway and search results would be useless to them.
   They can use the mobile app to search, which is way better.
*/
@media (min-width: 1000px) {
  .explore-tab-open #topbar-search {
    display: flex;
  }

  .explore-tab-open #topbar-nosearch {
    display: none;
  }
}

/* Magnifying glass icon next to search term input field */
#topbar-search-icon {
  width: 20px;
  height: 20px;
  filter: invert();
  opacity: .6;
  margin-left: 32px;
}

/* Field that the user types the search term in */
#topbar-search-field {
  flex-grow: 1;
  max-width: 400px;
  border: none;
  margin-left: 16px;
  background: transparent;
  color: white;
  outline: none;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* The search results box that shows up after the user types in
   a few characters as a search term */
#search-results-box {
  display: none;
  /* programmatically changed to 'flex' when shown */
  border-radius: 4px;
  flex-direction: column;
  position: fixed;
  top: 72px;
  left: 275px;
  width: 300px;
  max-height: 400px;
  overflow: hidden auto;
  background: white;
  z-index: 4;
  /* must appear above the top bar */
}

@media (min-width: 1500px) {
  #search-results-box {
    left: calc((100vw - 1500px) / 2 + 270px);
  }
}

/* Each of the search results */
#search-results-box a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 8px;
  cursor: pointer;
}

#search-results-box a:hover {
  background: #eee;
}

/* Search results headings ("users" and "rooms" headings) */
#search-results-box h1 {
  color: #888;
  font-weight: 400;
  font-size: 12px;
  margin: 8px 8px 0px 8px;
}

#search-results-box h1:nth-child(2) {
  margin: 16px 8px 0px 8px;
}

/* NOTE: there's an almost identical .app-store-button class in /style.css, keep
   them in sync. */
.app-store-button, .try-it-now-button {
  display: inline-block;
  height: 50px;
  width: 150px;
  background: url(/app-store-download-button.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 24px;
}

.try-it-now-button {
  position: relative;
  margin-right: 16px;
}
/* Hack to make this look the same as the App Store button -- we use the same button
   image but then we put this inner div with a black background to show the text */
.try-it-now-button-inner {
  background: black;
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  border-radius: 8px;
  overflow: hidden;
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: white;
  text-decoration: none;
  line-height: 44px;
  text-align: center;
}

#profile-pic-container {
  margin-left: 8px;
  width: 32px;
  height: 32px;
  text-align: right;
}

#profile-pic {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  overflow: hidden;
  margin-left: 8px;
  cursor: pointer;
}

#notifications-window {
  background: white;
  position: absolute;
  z-index: 3;
  top: 75px;
  right: 70px;
  width: 350px;
  border-radius: 8px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

.notification-cell {
  display: flex;
  flex-direction: row;
  padding: 8px;
  align-items: center;
  min-height: 56px;
  overflow: hidden;
  text-decoration: none;
}

.notification-cell.unread {
  background: rgb(230, 232, 255);
}

.notification-img-left {
  width: 32px;
  height: 32px;
  border-radius: 16px;
}

.notification-text {
  flex-grow: 1;
  max-width: 260px;
  color: #888;
  padding: 8px;
  overflow: hidden;
}

.notification-img-right {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

#explore-categories-bar {
  margin-bottom: 20px;
}

#explore-categories-bar a {
  display: inline-block;
  text-decoration: none;
  border:  rgba(255, 255, 255, 0) 1px solid;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0.6;
  padding:8px 14px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: white;
  font: 16px "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  /* allows zoom on hover */
  transform: perspective(5000px) scale(0.99);
  transition: transform 1000ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
}

#explore-categories-bar a.active-category {
  opacity: 1;
}

#explore-categories-bar a.inactive-category:hover {
  box-sizing: border-box;
  opacity: .9;
  transform: translateZ(1000px);
}

.sorry-android {
  font-size: 14px;
  margin-top: 32px;
  opacity: 0.8;
}