/* Swarmapp.com Homepage Styles */
/* -------------------------------------------------------------------- */
/* Foursquare common variables */
/* This file compiles to 0b, so can be imported freely without fear */
/* -------------------------------------------------------------------- */
/* The grand z-index index */
/* This file compiles to 0b, so can be imported freely without fear */
/* -------------------------------------------------------------------- */
/**
 * How to use this file:
 *  All z-indices should be expressed in relation to another z-index.
 *  Those relations should always be positive.
 *  The "other" z-zindex should always appear earlier in the file.
 *  Following these rules, z-indices should be increasing the further down the file you go.
 *  The only variables that get an acutal number are the "root" z-indices, all others is relative to those.
 *  Inserting a new z-index is a simple as adding a line _i_ and updating all references to the variable on line _i-1_,
 *    likely just the variable on line _i+1_ as long as this list has no branching.
 */
/* Foursquare 8 colors July 2014 */
/* -------------------------------------------------------------------- */
/* Corporate colors */
/* -------------------------------------------------------------------- */
/* Enterprise colors */
/* -------------------------------------------------------------------- */
/* Common color variables */
/* -------------------------------------------------------------------- */
/* Mobile color variables */
/* Warning: Yellow */
/* Notices: Blue */
/* Errors: Red */
/* Introduction: Green */
/* Grid Variables */
/* -------------------------------------------------------------------- */
/* Grid variable for desktop */
/* 600px column - 64px category icon - 20px margin */
/* Chrome */
/* -------------------------------------------------------------------- */
/* Rating Colours */
/* -------------------------------------------------------------------- */
/* Brand colors July 2013 */
/* -------------------------------------------------------------------- */
/** New colors */
/* -------------------------------------------------------------------- */
/* Foursquare common functions */
/* This file compiles to 0b, so can be imported freely without fear */
/* -------------------------------------------------------------------- */
/* Button style functions, generates a whole bunch of different button styles */
/* -------------------------------------------------------------------- */
/* Green Button */
/* Orange Button */
/* Grey Button */
/* Black Button */
/* Blue Button */
/* Red Button */
/* White Button */
/* Disabled Button */
/* Loading button */
/* Bigger Button */
/* Delete Button */
/* Wide Social Buttons */
.saveButton.saveToListAction .buttonLeft,
.doubleShareButton .buttonLeft,
.saveButton.saveToListAction.active .buttonLeft,
a.saveButton.saveToListAction .buttonLeft,
a.saveButton.saveToListAction.active .buttonLeft,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft {
  background: #efeff4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-right: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0;
  position: relative;
  width: 26px;
}
.saveButton.saveToListAction .buttonLeft:after,
.doubleShareButton .buttonLeft:after,
.saveButton.saveToListAction.active .buttonLeft:after,
a.saveButton.saveToListAction .buttonLeft:after,
a.saveButton.saveToListAction.active .buttonLeft:after,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton .buttonLeft:after,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft:after {
  background-image: url('/img/actions/action-sprite.png');
  background-position: -9px -8px;
  content: '';
  display: block;
  height: 17px;
  left: 10px;
  position: absolute;
  top: 6px;
  width: 18px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .saveButton.saveToListAction .buttonLeft:after,
  .doubleShareButton .buttonLeft:after,
  .saveButton.saveToListAction.active .buttonLeft:after,
  a.saveButton.saveToListAction .buttonLeft:after,
  a.saveButton.saveToListAction.active .buttonLeft:after,
  #container
    .localQueryDetail
    .contents
    .inner
    .main
    .listing
    .actions
    .saveButton
    .buttonLeft:after,
  #container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft:after {
    background-image: url('/img/actions/action-sprite@2x.png');
    background-size: 256px 128px;
  }
}
.saveButton.saveToListAction .buttonLeft img,
.doubleShareButton .buttonLeft img,
.saveButton.saveToListAction.active .buttonLeft img,
a.saveButton.saveToListAction .buttonLeft img,
a.saveButton.saveToListAction.active .buttonLeft img,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton .buttonLeft img,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft img {
  display: none;
}
.saveButton.saveToListAction .buttonRight,
.doubleShareButton .buttonRight,
.saveButton.saveToListAction.active .buttonRight,
a.saveButton.saveToListAction .buttonRight,
a.saveButton.saveToListAction.active .buttonRight,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton .buttonRight,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonRight,
.saveButton.saveToListAction:hover .buttonRight,
.doubleShareButton:hover .buttonRight,
.saveButton.saveToListAction.active:hover .buttonRight,
a.saveButton.saveToListAction:hover .buttonRight,
a.saveButton.saveToListAction.active:hover .buttonRight,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:hover
  .buttonRight,
#container .listDetail .contents .inner .main .listing .actions .saveButton:hover .buttonRight,
.saveButton.saveToListAction:active .buttonRight,
.doubleShareButton:active .buttonRight,
.saveButton.saveToListAction.active:active .buttonRight,
a.saveButton.saveToListAction:active .buttonRight,
a.saveButton.saveToListAction.active:active .buttonRight,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonRight,
#container .listDetail .contents .inner .main .listing .actions .saveButton:active .buttonRight,
.saveButton.saveToListAction .buttonRight:hover,
.doubleShareButton .buttonRight:hover,
.saveButton.saveToListAction.active .buttonRight:hover,
a.saveButton.saveToListAction .buttonRight:hover,
a.saveButton.saveToListAction.active .buttonRight:hover,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton
  .buttonRight:hover,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonRight:hover,
.saveButton.saveToListAction .buttonRight:active,
.doubleShareButton .buttonRight:active,
.saveButton.saveToListAction.active .buttonRight:active,
a.saveButton.saveToListAction .buttonRight:active,
a.saveButton.saveToListAction.active .buttonRight:active,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton
  .buttonRight:active,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonRight:active {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: none;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 10px 0 5px;
}
.saveButton.saveToListAction .buttonLeft,
.doubleShareButton .buttonLeft,
.saveButton.saveToListAction.active .buttonLeft,
a.saveButton.saveToListAction .buttonLeft,
a.saveButton.saveToListAction.active .buttonLeft,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft,
.saveButton.saveToListAction:hover .buttonLeft,
.doubleShareButton:hover .buttonLeft,
.saveButton.saveToListAction.active:hover .buttonLeft,
a.saveButton.saveToListAction:hover .buttonLeft,
a.saveButton.saveToListAction.active:hover .buttonLeft,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton:hover .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton:hover .buttonLeft,
.saveButton.saveToListAction:active .buttonLeft,
.doubleShareButton:active .buttonLeft,
.saveButton.saveToListAction.active:active .buttonLeft,
a.saveButton.saveToListAction:active .buttonLeft,
a.saveButton.saveToListAction.active:active .buttonLeft,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton:active .buttonLeft,
.saveButton.saveToListAction .buttonLeft:hover,
.doubleShareButton .buttonLeft:hover,
.saveButton.saveToListAction.active .buttonLeft:hover,
a.saveButton.saveToListAction .buttonLeft:hover,
a.saveButton.saveToListAction.active .buttonLeft:hover,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton .buttonLeft:hover,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft:hover,
.saveButton.saveToListAction .buttonLeft:active,
.doubleShareButton .buttonLeft:active,
.saveButton.saveToListAction.active .buttonLeft:active,
a.saveButton.saveToListAction .buttonLeft:active,
a.saveButton.saveToListAction.active .buttonLeft:active,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton
  .buttonLeft:active,
#container .listDetail .contents .inner .main .listing .actions .saveButton .buttonLeft:active {
  padding-right: 0;
}
.saveButton.saveToListAction:hover .buttonLeft,
.doubleShareButton:hover .buttonLeft,
.saveButton.saveToListAction.active:hover .buttonLeft,
a.saveButton.saveToListAction:hover .buttonLeft,
a.saveButton.saveToListAction.active:hover .buttonLeft,
#container .localQueryDetail .contents .inner .main .listing .actions .saveButton:hover .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton:hover .buttonLeft,
.saveButton.saveToListAction:active .buttonLeft,
.doubleShareButton:active .buttonLeft,
.saveButton.saveToListAction.active:active .buttonLeft,
a.saveButton.saveToListAction:active .buttonLeft,
a.saveButton.saveToListAction.active:active .buttonLeft,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton:active .buttonLeft {
  background: #e3e3e8;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}
.saveButton.saveToListAction:hover .buttonLeft:after,
.doubleShareButton:hover .buttonLeft:after,
.saveButton.saveToListAction.active:hover .buttonLeft:after,
a.saveButton.saveToListAction:hover .buttonLeft:after,
a.saveButton.saveToListAction.active:hover .buttonLeft:after,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:hover
  .buttonLeft:after,
#container .listDetail .contents .inner .main .listing .actions .saveButton:hover .buttonLeft:after,
.saveButton.saveToListAction:active .buttonLeft:after,
.doubleShareButton:active .buttonLeft:after,
.saveButton.saveToListAction.active:active .buttonLeft:after,
a.saveButton.saveToListAction:active .buttonLeft:after,
a.saveButton.saveToListAction.active:active .buttonLeft:after,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft:after,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft:after {
  background-position: -9px -40px;
}
.saveButton.saveToListAction:hover .buttonLeft:hover,
.doubleShareButton:hover .buttonLeft:hover,
.saveButton.saveToListAction.active:hover .buttonLeft:hover,
a.saveButton.saveToListAction:hover .buttonLeft:hover,
a.saveButton.saveToListAction.active:hover .buttonLeft:hover,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:hover
  .buttonLeft:hover,
#container .listDetail .contents .inner .main .listing .actions .saveButton:hover .buttonLeft:hover,
.saveButton.saveToListAction:active .buttonLeft:hover,
.doubleShareButton:active .buttonLeft:hover,
.saveButton.saveToListAction.active:active .buttonLeft:hover,
a.saveButton.saveToListAction:active .buttonLeft:hover,
a.saveButton.saveToListAction.active:active .buttonLeft:hover,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft:hover,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft:hover,
.saveButton.saveToListAction:hover .buttonLeft:active,
.doubleShareButton:hover .buttonLeft:active,
.saveButton.saveToListAction.active:hover .buttonLeft:active,
a.saveButton.saveToListAction:hover .buttonLeft:active,
a.saveButton.saveToListAction.active:hover .buttonLeft:active,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:hover
  .buttonLeft:active,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:hover
  .buttonLeft:active,
.saveButton.saveToListAction:active .buttonLeft:active,
.doubleShareButton:active .buttonLeft:active,
.saveButton.saveToListAction.active:active .buttonLeft:active,
a.saveButton.saveToListAction:active .buttonLeft:active,
a.saveButton.saveToListAction.active:active .buttonLeft:active,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft:active,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft:active {
  background: #e3e3e8;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}
.saveButton.saveToListAction:active .buttonLeft,
.doubleShareButton:active .buttonLeft,
.saveButton.saveToListAction.active:active .buttonLeft,
a.saveButton.saveToListAction:active .buttonLeft,
a.saveButton.saveToListAction.active:active .buttonLeft,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonLeft,
#container .listDetail .contents .inner .main .listing .actions .saveButton:active .buttonLeft,
.saveButton.saveToListAction:active .buttonRight,
.doubleShareButton:active .buttonRight,
.saveButton.saveToListAction.active:active .buttonRight,
a.saveButton.saveToListAction:active .buttonRight,
a.saveButton.saveToListAction.active:active .buttonRight,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton:active
  .buttonRight,
#container .listDetail .contents .inner .main .listing .actions .saveButton:active .buttonRight {
  background: #d7d7dc;
}
.saveButton.saveToListAction.active .buttonLeft:after,
.doubleShareButton.active .buttonLeft:after,
.saveButton.saveToListAction.active.active .buttonLeft:after,
a.saveButton.saveToListAction.active .buttonLeft:after,
a.saveButton.saveToListAction.active.active .buttonLeft:after,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton.active
  .buttonLeft:after,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton.active
  .buttonLeft:after {
  background-position: -9px -72px;
}
.saveButton.saveToListAction.doubleShareButton .buttonLeft:after,
.doubleShareButton.doubleShareButton .buttonLeft:after,
.saveButton.saveToListAction.active.doubleShareButton .buttonLeft:after,
a.saveButton.saveToListAction.doubleShareButton .buttonLeft:after,
a.saveButton.saveToListAction.active.doubleShareButton .buttonLeft:after,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton.doubleShareButton
  .buttonLeft:after,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton.doubleShareButton
  .buttonLeft:after {
  background-position: -105px -8px;
}
.saveButton.saveToListAction.doubleShareButton:hover .buttonLeft:after,
.doubleShareButton.doubleShareButton:hover .buttonLeft:after,
.saveButton.saveToListAction.active.doubleShareButton:hover .buttonLeft:after,
a.saveButton.saveToListAction.doubleShareButton:hover .buttonLeft:after,
a.saveButton.saveToListAction.active.doubleShareButton:hover .buttonLeft:after,
#container
  .localQueryDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton.doubleShareButton:hover
  .buttonLeft:after,
#container
  .listDetail
  .contents
  .inner
  .main
  .listing
  .actions
  .saveButton.doubleShareButton:hover
  .buttonLeft:after {
  background-position: -105px -40px;
}
.simpleIconButton {
  font: normal 13px/140% 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
  letter-spacing: 0px;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-text-shadow: none;
  -webkit-text-shadow: none;
  text-shadow: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #efeff4;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #4e595d;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: normal;
  height: 30px;
  line-height: 28px;
  text-align: center;
  text-transform: none;
  -webkit-appearance: none;
  padding: 0 10px;
}
.simpleIconButton:hover,
.simpleIconButton:active {
  background: #e3e3e8;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
  color: #4e595d;
}
.simpleIconButton:active,
.simpleIconButton.active {
  background: #d7d7dc;
}
.simpleIconButton:disabled {
  background: #fcfcfd;
  cursor: default;
}
.simpleIconButton .simpleIcon {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.simpleIconButton .simpleButtonText {
  display: inline-block;
}
/*
 * Triangles and carets.
 *
 * These triangles are not absolutely positioned by default. You must specify
 * the offsets. Note that if you want to use triangles at the bottom of boxes,
 * you should use *-box-caret below.
 */
/* -------------------------------------------------------------------- */
/*
 * Carets, for use as arrows attached to boxes.
 *
 * These styles should be appled to the box itself. These have sane defaults for
 * absolute positioning, but you may want to override them.
 */
/* -------------------------------------------------------------------- */
/* Activity stream spriting functions */
/* -------------------------------------------------------------------- */
/* Action Buttons - Misc Non-concrete Functions */
/* -------------------------------------------------------------------- */
/* Standard common setpieces */
/* -------------------------------------------------------------------- */
/* Comment and photo activity indicator */
/* -------------------------------------------------------------------- */
/* General functions */
/* -------------------------------------------------------------------- */
/* Rounding and shadows */
/* -------------------------------------------------------------------- */
/* Character Counter */
/* -------------------------------------------------------------------- */
/* Note: This needs positioned on a per page basis, these are base visual styles. */
/* Forms style */
/* -------------------------------------------------------------------- */
/* Columns (x = number of columns and any additional horizontal padding) */
/* -------------------------------------------------------------------- */
/* Individual column declaations, with and without a gutter */
/** Animation functions to generate various animation properties */
/* -------------------------------------------------------------------- */
/** Animations here. Concrete styles for various animations */
/* -------------------------------------------------------------------- */
.borderPulse {
  -webkit-animation-name: borderPulseFrames;
  -moz-animation-name: borderPulseFrames;
  -o-animation-name: borderPulseFrames;
  animation-name: borderPulseFrames;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -ms-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
}
/* Íwarm common variables */
/* This file compiles to 0b, so can be imported freely without fear */
/* -------------------------------------------------------------------- */
/* Swarm Brand Colors */
/* -------------------------------------------------------------------- */
/* ORANGES */
/* GREYS */
/* OTHERS */
/* Swarm typography */
/* -------------------------------------------------------------------- */
/* Constant sizes */
/* -------------------------------------------------------------------- */
/* Font Weights */
/* -------------------------------------------------------------------- */
/* Good type stuff */
/* -------------------------------------------------------------------- */
body {
  color: #fff;
}
.header,
.fixedUpsellBottom {
  display: none;
}
body.withVisibleModal #wrapper {
  position: static;
}
body.withVisibleModal #wrapper #container #content {
  filter: blur(8px);
  transition: filter 0.75s;
}
#modalOverlay {
  background: #ffffff;
}
#modalDialogBox .popup .content {
  padding: 0;
}
#modalDialogBox
  .popup
  .content
  .modalLoadingContainer
  .contents
  #languagesContainer
  .languageContents
  p {
  color: #646464;
  padding: 8px 32px 0 8px;
}
#modalDialogBox
  .popup
  .content
  .modalLoadingContainer
  .contents
  #languagesContainer
  .languageContents
  .languages
  li
  span {
  border-bottom: 1px solid #f2f2f2;
  color: #2182eb;
  display: block;
  padding: 8px;
}
#modalDialogBox
  .popup
  .content
  .modalLoadingContainer
  .contents
  #languagesContainer
  .languageContents
  .languages
  li:last-child
  span {
  border-bottom: none;
}
#container {
  background: #fff;
  margin-top: 0;
  width: auto;
}
#content {
  background: #ff9c31;
  background: -moz-linear-gradient(top, #ffb049, #ff8819);
  background: -ms-linear-gradient(top, #ffb049, #ff8819);
  background: -o-linear-gradient(top, #ffb049, #ff8819);
  background: -webkit-linear-gradient(top, #ffb049, #ff8819);
  overflow: hidden;
}
#content .wrap {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 1024px;
}
.text {
  float: left;
  margin: 0 13px 0 0;
  padding: 227px 0 0 0;
  width: 319px;
}
.text #logo {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 320px;
  text-align: center;
  width: 100%;
}
.text #downloads {
  margin: 16px 0 32px 0;
  text-align: center;
}
.text #downloads li {
  display: inline;
  margin: 0 8px 0 0;
}
.text #downloads li a {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #000;
  display: inline-block;
  height: 40px;
  text-indent: -9999em;
  width: 140px;
}
.text #downloads li#apple a {
  background: transparent url('/img/swarm/homepage/5.0/appStores/apple.png') no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .text #downloads li#apple a {
    background-image: url('/img/swarm/homepage/5.0/appStores/apple@2x.png');
    background-size: 135px 40px;
  }
}
.text #downloads li#android a {
  background: transparent url('/img/swarm/homepage/5.0/appStores/android.png') no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .text #downloads li#android a {
    background-image: url('/img/swarm/homepage/5.0/appStores/android@2x.png');
    background-size: 136px 40px;
  }
}
.text #downloads li#huawei a {
  margin-top: 12px;
  background: transparent url('/img/swarm/homepage/5.0/appStores/huawei.png') no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .text #downloads li#huawei a {
    background-image: url('/img/swarm/homepage/5.0/appStores/huawei@2x.png');
    background-size: 136px 40px;
  }
}
.text #tagline h2 {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -0.26px;
  position: relative;
}
.text #tagline h2:after {
  content: '';
  background: transparent url('/img/swarm/homepage/5.0/weebee.png') no-repeat 0 8px;
  height: 48px;
  position: absolute;
  right: -3px;
  top: -25px;
  width: 48px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .text #tagline h2:after {
    background-image: url('/img/swarm/homepage/5.0/weebee@2x.png');
    background-size: 38px 34px;
  }
}
/* PHONES */
.phones {
  float: left;
  padding: 24px 0 20px 0;
  width: 678px;
}
.phones .phone {
  display: inline-block;
  position: relative;
  text-align: center;
}
.phones .phone > img {
  height: auto;
  max-width: 100%;
  position: relative;
}
.phones .phone #screen {
  overflow: hidden;
  position: absolute;
}
.phones .phone #screen > img {
  background-color: #f2f2f2;
  height: auto;
  max-width: 100%;
  z-index: -1;
}
.phones .phone #screen .tap {
  background: transparent;
  cursor: pointer;
  position: absolute;
  z-index: 1000;
}
.phones .phone #screen #leftTap {
  bottom: 0;
  height: 60px;
  left: 0;
  width: 120px;
}
.phones .phone #screen #rightTap {
  bottom: 0;
  height: 60px;
  right: 0;
  width: 120px;
}
.phones .phone #screen #tab > img {
  z-index: -1;
}
.phones #iphone {
  margin-left: 54px;
  z-index: 20;
}
.phones #iphone #screen {
  height: 488px;
  left: 50%;
  margin-left: -150px;
  top: 142px;
  width: 305px;
}
.phones #iphone #screen img {
  left: -3px;
  position: relative;
}
.phones #iphone #screen #pulse {
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  animation: pulsate 1.5s ease-out;
  animation-iteration-count: infinite;
  border: 3px solid #2182eb;
  bottom: -3px;
  cursor: pointer;
  height: 40px;
  left: 216px;
  opacity: 0;
  position: absolute;
  width: 40px;
  z-index: 200;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
@keyframes slideInUp {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -400px, 0);
  }
}
.phones #iphone #screen #tab {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
}
.phones #iphone #screen #tab img {
  bottom: 0;
  position: absolute;
}
.phones #iphone.social #screen .me,
.phones #iphone.social #screen #tab .me,
.phones #iphone.social #screen #pulse {
  display: none;
}
.phones #iphone.social #screen > img {
  animation: slideInUp 3s forwards;
  animation-delay: 0.75s;
  display: block;
  top: -1px;
}
.phones #pixel {
  margin-left: -48px;
}
.phones #pixel > img {
  top: -48px;
}
.phones #pixel #screen {
  height: 494px;
  left: 50%;
  margin-left: -141px;
  top: 17px;
  width: 278px;
}
.phones #pixel #screen img {
  border: 1px solid #000;
}
/* LOGIN */
#login {
  position: absolute;
  right: 0;
  text-align: right;
  top: 20px;
  width: 90%;
}
#login .btn {
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 22px;
  text-decoration: none;
}
#login .btn:hover {
  background: #fff;
  color: #ffa633;
  cursor: pointer;
}
/* WAVE */
#wave {
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
#wave #base {
  background: rgba(255, 255, 255, 0.085);
  height: 240px;
}
#wave #image {
  animation: slide 40s linear infinite;
  background: transparent url('/img/swarm/homepage/5.0/wave/bg.png') repeat-x;
  height: 200px;
  opacity: 0.085;
  width: 3000px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  #wave #image {
    background-image: url('/img/swarm/homepage/5.0/wave/bg@2x.png');
    background-size: 3000px 200px;
  }
}
@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-420px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.footer {
  border-top: none;
}
.footer ul li,
.footer ul a {
  color: #2182eb;
}
@media screen and (max-width: 1024px) {
  #content .wrap {
    margin: 0 auto;
    width: 90%;
  }
  .text,
  .phones {
    float: none;
  }
  .text {
    width: 100%;
  }
  .phones {
    padding-bottom: 0;
    width: auto;
  }
  .phones .phone {
    display: block;
  }
  .phones #iphone {
    margin-left: 0;
  }
  .phones #pixel {
    display: block;
    margin: 0 auto;
    margin-left: 0;
    margin-top: 80px;
  }
  .text {
    padding-top: 80px;
  }
  .text #tagline {
    text-align: center;
  }
  .text #tagline h2 {
    display: inline-block;
  }
  .text #tagline h2:after {
    right: -48px;
    top: -25px;
  }
}
@media screen and (max-width: 500px) {
  .text #tagline {
    padding-top: 32px;
  }
  .text #tagline h2:after {
    margin-right: -24px;
    right: 50%;
    top: -52px;
  }
}
@media screen and (max-width: 320px) {
  .phones #iphone #screen {
    height: 397px;
    left: 21px;
    margin-left: 0;
    top: 117px;
    width: 250px;
  }
  .phones #iphone #screen #tab img {
    height: auto;
    max-width: 100%;
  }
  .phones #iphone #screen #pulse {
    display: none;
  }
  .phones #pixel #screen {
    height: 455px;
    left: 154px;
    top: 11px;
    width: 258px;
  }
}