html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Roboto';
  background-color: #292627;
  color: #fff;
  letter-spacing: 0.03em; }

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

a {
  cursor: pointer;
  color: #fff; }

* {
  box-sizing: border-box; }

/* clearfix float hack */
.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  *zoom: 1; }

/***
Bootstrap styles
****/
.configList {
  margin: 1em;
  padding: 1em;
  font-size: 20px; }
  .configList a {
    display: block;
    margin: 1em; }

.wallClient[data-count="1"] #topics li {
  visibility: hidden; }

.wallClient[data-count="1"] .instruction1 {
  display: none; }

.wallClient[data-count="1"] .instruction2 {
  display: block; }

body {
  font-size: 16px;
  background: linear-gradient(180deg, #11161f, #111111 60%, #1f1f1f 85%, #252523, #1f1f1f, #111111 100%);
  color: #e0e0e0; }
  body .wallClient {
    display: block;
    width: 100%;
    height: 100%; }
  body a#reset {
    cursor: pointer;
    color: #97dbe6;
    font-size: 200%;
    position: fixed;
    top: 150px;
    right: 200px;
    text-transform: uppercase;
    visibility: hidden;
    font-weight: lighter; }
  body header {
    position: fixed;
    top: 1.75em;
    left: 2.5em; }
    body header h2 {
      margin: 0;
      font-weight: 300;
      font-size: 320%;
      letter-spacing: 2px;
      padding-right: 1em;
      background: -webkit-linear-gradient(#97dbe6, #97dbe6 50%, transparent);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    body header h3 {
      margin: 0.4em 0;
      font-style: italic;
      font-weight: 300;
      font-size: 100%;
      letter-spacing: 1px;
      color: #97dbe6;
      letter-spacing: 1px;
      padding-bottom: 0.2em; }
    body header p {
      font-size: 80%;
      font-weight: 300;
      line-height: 1.5em;
      padding-bottom: 1em;
      border-width: 0 0 8px 0;
      border-image: linear-gradient(to right, #97dbe6, transparent) 1;
      width: 25em; }
    body header .instruction {
      font-weight: 300;
      color: #97dbe6; }
    body header .instruction2 {
      display: none; }
    body header ul#topics {
      position: relative;
      list-style-type: none;
      margin: 3em 0 0;
      padding: 0;
      font-size: 133.33333%; }
      body header ul#topics li {
        margin: 0 0;
        margin-bottom: 1em;
        padding: 0;
        text-transform: uppercase;
        transition: top 250ms;
        opacity: 0.5;
        font-weight: 100; }
        body header ul#topics li.on {
          opacity: 1;
          font-weight: bold; }
        body header ul#topics li:before {
          content: " ";
          margin-right: 30px; }
      body header ul#topics.ranked li:nth-child(1):before {
        content: "1"; }
      body header ul#topics.ranked li:nth-child(2):before {
        content: "2"; }
      body header ul#topics.ranked li:nth-child(3):before {
        content: "3"; }
      body header ul#topics.ranked li:nth-child(4):before {
        content: "4"; }
      body header ul#topics.ranked li:nth-child(5):before {
        content: "5"; }
      body header ul#topics.ranked li:nth-child(6):before {
        content: "6"; }
      body header ul#topics.ranked li:nth-child(7):before {
        content: "7"; }
      body header ul#topics.ranked li:nth-child(8):before {
        content: "8"; }
      body header ul#topics.ranked li:nth-child(9):before {
        content: "9"; }
      body header ul#topics.ranked li:nth-child(10):before {
        content: "10"; }
      body header ul#topics.ranked li:nth-child(11):before {
        content: "11"; }
      body header ul#topics.ranked li:nth-child(12):before {
        content: "12"; }
      body header ul#topics.ranked li:nth-child(13):before {
        content: "13"; }
      body header ul#topics.ranked li:nth-child(14):before {
        content: "14"; }
      body header ul#topics.ranked li:nth-child(15):before {
        content: "15"; }
      body header ul#topics.ranked li:nth-child(16):before {
        content: "16"; }
      body header ul#topics.ranked li:nth-child(17):before {
        content: "17"; }
      body header ul#topics.ranked li:nth-child(18):before {
        content: "18"; }
      body header ul#topics.ranked li:nth-child(19):before {
        content: "19"; }
      body header ul#topics.ranked li:nth-child(20):before {
        content: "20"; }
  body #logo {
    position: fixed;
    bottom: 0;
    right: 2.5em; }
    body #logo h1 {
      background-size: 100%;
      text-indent: -9999px;
      width: 350px;
      height: 180px; }
  body #globe {
    position: fixed; }
    body #globe canvas {
      transition: margin-left 250ms; }
  body #notifications {
    position: fixed;
    right: 180px;
    top: 100px;
    width: 300px;
    pointer-events: none;
    text-align: right; }
    body #notifications .notification {
      height: 200px;
      width: 100%;
      transition: opacity 200ms 400ms ease-in, height 400ms;
      text-transform: uppercase; }
      body #notifications .notification h3 {
        padding-bottom: 0.5em;
        margin: 0;
        font-size: 76.66667%;
        font-weight: 500;
        border-width: 0 0 3px 0; }
      body #notifications .notification h4 {
        margin: 0.5em 0;
        font-size: 60%;
        font-weight: 500; }
      body #notifications .notification.off {
        opacity: 0.0;
        height: 0; }
      body #notifications .notification.first-laptop h3 {
        border-image: linear-gradient(to right, #80deea, transparent) 1; }
      body #notifications .notification.first-laptop .accent {
        color: #80deea; }
      body #notifications .notification.first-laptop svg.miniGraph path {
        stroke: #80deea; }
      body #notifications .notification.second-laptop h3 {
        border-image: linear-gradient(to right, #ab47bc, transparent) 1; }
      body #notifications .notification.second-laptop .accent {
        color: #ab47bc; }
      body #notifications .notification.second-laptop svg.miniGraph path {
        stroke: #ab47bc; }
      body #notifications .notification.third-laptop h3 {
        border-image: linear-gradient(to right, #69f0ae, transparent) 1; }
      body #notifications .notification.third-laptop .accent {
        color: #69f0ae; }
      body #notifications .notification.third-laptop svg.miniGraph path {
        stroke: #69f0ae; }
      body #notifications .notification.fourth-laptop h3 {
        border-image: linear-gradient(to right, #ffd600, transparent) 1; }
      body #notifications .notification.fourth-laptop .accent {
        color: #ffd600; }
      body #notifications .notification.fourth-laptop svg.miniGraph path {
        stroke: #ffd600; }
      body #notifications .notification.animated {
        -webkit-animation: pulse 0.8s ease-in-out infinite alternate; }
      body #notifications .notification svg.miniGraph path {
        fill: none;
        stroke-width: 2; }
      body #notifications .notification svg.miniGraph line {
        stroke: white; }
      body #notifications .notification svg.miniGraph circle {
        fill: white; }
  body svg#notification-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 3840px;
    height: 2160px;
    pointer-events: none; }
    body svg#notification-line line {
      stroke: white;
      stroke-dasharray: 2, 10; }

@-webkit-keyframes pulse {
  from {
    opacity: 0.4; }
  to {
    opacity: 1.0; } }
  body #city-names {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    body #city-names.hideUnselected .city-name .content .name {
      display: none; }
      body #city-names.hideUnselected .city-name .content .name.on {
        display: block; }
    body #city-names .city-name {
      width: 100%;
      height: 100%;
      pointer-events: none;
      text-transform: uppercase;
      font-size: 80%; }
      body #city-names .city-name.backside {
        display: none; }
      body #city-names .city-name .content {
        pointer-events: auto;
        position: absolute; }
        body #city-names .city-name .content .name {
          position: relative;
          top: 0;
          transition: font-size 150ms, top 150ms;
          text-shadow: 1px 1px 10px #333;
          cursor: pointer; }
          body #city-names .city-name .content .name.on {
            top: -24px;
            font-size: 200%; }
        body #city-names .city-name .content .rank {
          display: none !important;
          opacity: 0;
          visibility: hidden;
          position: absolute;
          bottom: 0.66em;
          left: 0;
          font-size: 150%;
          transform: scale(0.5);
          transition: opacity 150ms, transform 150ms, visibility 150ms; }
    body #city-names.ranked .city-name .content .rank {
      visibility: visible;
      opacity: 1.0;
      transform: scale(1); }
  body #stats {
    position: fixed;
    top: 0;
    left: 0; }
  body .majorCities {
    overflow: hidden;
    left: 100%;
    width: 100%;
    height: 100%;
    opacity: 0.0;
    position: fixed;
    pointer-events: all;
    transition: all 0.3s ease-in-out; }
    body .majorCities .majorCityViewport .mainView {
      position: relative;
      float: left;
      box-sizing: content-box; }
      body .majorCities .majorCityViewport .mainView h3 {
        margin-bottom: 0; }
      body .majorCities .majorCityViewport .mainView .graph svg path {
        fill: none; }
      body .majorCities .majorCityViewport .mainView .graph svg .yearLabel {
        text-anchor: middle;
        fill: #fff;
        opacity: 0.5;
        font-size: 40px;
        font-weight: bold; }
      body .majorCities .majorCityViewport .mainView .graph svg .legend text {
        fill: #fff;
        text-transform: uppercase; }
      body .majorCities .majorCityViewport .mainView .showHideOtherUsersButton {
        position: absolute;
        right: 0;
        bottom: 37px;
        text-decoration: underline;
        text-transform: uppercase; }
        body .majorCities .majorCityViewport .mainView .showHideOtherUsersButton.show .hide {
          display: none; }
        body .majorCities .majorCityViewport .mainView .showHideOtherUsersButton.hide .show {
          display: none; }
    body .majorCities .majorCityViewport .questionButton {
      position: absolute;
      right: 11.5em;
      bottom: 0em;
      cursor: pointer;
      padding: 0.5em 1.5em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.8); }
    body .majorCities .majorCityViewport .questionView {
      position: relative;
      float: left;
      padding-right: 32px;
      -webkit-transition: margin-left 0.5s ease-in-out;
      -ms-transition: margin-left 0.5s ease-in-out;
      -moz-transition: margin-left 0.5s ease-in-out;
      -o-transition: margin-left 0.5s ease-in-out;
      transition: margin-left 0.5s ease-in-out;
      height: 520px;
      padding-top: 20px;
      width: 100%;
      font-weight: lighter; }
      body .majorCities .majorCityViewport .questionView .gradientBorderTB {
        border-image: linear-gradient(to bottom, white, transparent) 1; }
      body .majorCities .majorCityViewport .questionView .gradientBorderBottomLR {
        border-width: 0 0 2px 0;
        padding-bottom: 1em;
        border-image: linear-gradient(to left, white, transparent) 1; }
      body .majorCities .majorCityViewport .questionView .labelAndQuestions {
        width: 50%;
        margin-left: 50px;
        float: left; }
        body .majorCities .majorCityViewport .questionView .labelAndQuestions h3 {
          padding-top: 250px; }
        body .majorCities .majorCityViewport .questionView .labelAndQuestions ul.questions {
          margin: 0;
          padding: 0;
          list-style-type: none; }
          body .majorCities .majorCityViewport .questionView .labelAndQuestions ul.questions li {
            font-size: 25px;
            margin-bottom: 1em;
            display: block; }
            body .majorCities .majorCityViewport .questionView .labelAndQuestions ul.questions li span {
              padding-bottom: 3px;
              line-height: 1.5em; }
      body .majorCities .majorCityViewport .questionView ul.ranks {
        margin: 0;
        padding: 0;
        list-style-type: none;
        border-width: 0 2px 0 0;
        width: 30%;
        float: left;
        padding-top: 27px; }
        body .majorCities .majorCityViewport .questionView ul.ranks li {
          font-weight: 300;
          font-size: 37px;
          margin-bottom: 1em;
          text-align: right;
          margin-right: 50px;
          margin-left: 100px; }
          body .majorCities .majorCityViewport .questionView ul.ranks li.borderHighlight {
            border-bottom: 2px solid white;
            padding-bottom: 1em; }
          body .majorCities .majorCityViewport .questionView ul.ranks li .rank {
            font-size: 90px; }
            body .majorCities .majorCityViewport .questionView ul.ranks li .rank span {
              float: right;
              display: block; }
            body .majorCities .majorCityViewport .questionView ul.ranks li .rank .poundSign {
              font-size: 40px;
              padding-top: 10px;
              padding-right: 8px; }
          body .majorCities .majorCityViewport .questionView ul.ranks li .rankText {
            margin-bottom: 10px;
            font-size: 18px;
            text-transform: uppercase; }
          body .majorCities .majorCityViewport .questionView ul.ranks li .label {
            text-transform: uppercase;
            font-weight: bold;
            font-size: 22px; }
          body .majorCities .majorCityViewport .questionView ul.ranks li .rank {
            font-weight: bold; }
    body .majorCities .majorCityViewport .swipeBackButton {
      text-transform: uppercase;
      padding: 0.5em 1.5em;
      font-size: 14px;
      display: inline-block;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.8); }
    body .majorCities .majorCityViewport .questionView,
    body .majorCities .majorCityViewport .mainView {
      height: 600px; }
    body .majorCities .mainView h3 {
      font-weight: 100; }
    body .majorCities .labelAndQuestions {
      min-height: 30em; }
      body .majorCities .labelAndQuestions h3 {
        font-weight: 100;
        margin-top: 0;
        padding-top: 0;
        line-height: 1.3em; }
    body .majorCities .majorCityViewport .questionButton,
    body .majorCities .majorCityViewport .swipeBackButton {
      text-transform: uppercase;
      padding: 0.5em;
      background-color: #333; }
    body .majorCities .majorCityViewport .swipeBackButton {
      position: absolute;
      bottom: 0; }
    body .majorCities .showHideOtherUsersButton {
      display: none !important; }

body.wall.planar a#reset {
  font-size: 250%;
  top: 200px; }

body.wall.planar .majorCities {
  transform: scale(1.2);
  left: 35% !important;
  top: 30%; }
  body.wall.planar .majorCities .majorCityViewport .questionView,
  body.wall.planar .majorCities .majorCityViewport .mainView {
    height: 650px; }
  body.wall.planar .majorCities .majorCityViewport .questionButton {
    right: 200px;
    font-size: 75%; }
  body.wall.planar .majorCities .majorCityViewport .swipeBackButton {
    font-size: 75%; }

body.wall.planar .browser-support-disclaimer {
  display: none; }

/**
 * Overrides for Chrome experiment
 */
body.wall.combo {
  font-size: 16px; }
  body.wall.combo a#reset {
    top: 200px;
    right: 100px; }
  body.wall.combo .majorCities {
    top: 10%;
    transform: scale(0.6) translate(25%); }
    body.wall.combo .majorCities .mainView h3,
    body.wall.combo .majorCities .labelAndQuestions h3 {
      font-size: 300%; }
    body.wall.combo .majorCities .majorCityViewport .questionButton {
      transform: none;
      right: auto; }
    body.wall.combo .majorCities .majorCityViewport .questionButton,
    body.wall.combo .majorCities .majorCityViewport .swipeBackButton {
      font-size: 150%; }
  body.wall.combo #logo h1 {
    width: 150px; }

#google-logo {
  position: absolute;
  right: 1em;
  bottom: 1em;
  width: 160px; }

/*# sourceMappingURL=style.css.map */