.menu-container {
  opacity: 0; }

#contain {
  display: block;
  opacity: 0;
  position: absolute; }

#streetaudio {
  opacity: 0; }

#instructions {
  height: 100%;
  width: 100%;
  position: fixed;
  opacity: 0;
  background-image: url("https://theworldintenblocks.com/interactive/images/banner.jpg");
  background-position: center 10%;
  background-size: cover; }

.inst-outer {
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5); }

.mobile .inst-outer {
  height: 100vh;
  content: 'viewport-units-buggyfill; height: 110vh;'; }

.saf.mobile .inst-outer {
  height: 100vh; }

.inst-inner {
  color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  height: auto;
  width: 100%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%); }

.browserinst p {
  font-size: 2.6rem;
  width: 900px;
  max-width: 90%;
  margin: 2vh auto 4vh;
  line-height: 110%; }

.inst-inner .col p, .inst p {
  font-size: 2rem;
  margin: 4px 5px 0px;
  white-space: pre-line; }

.cont {
  width: 800px;
  max-width: 90%;
  margin: 6vh auto; }

.col i {
  font-size: 8rem;
  line-height: 8rem;
  margin: 0px auto; }

.col .fa-arrows-v {
  font-size: 6rem; }

.inst-inner .howto p {
  font-size: 3.4rem;
  letter-spacing: 2px;
  margin: 0 auto 0; }

.fa-headphones:before {
  content: "\f025"; }

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%; }

.fa-stack {
  position: relative;
  display: inline-block;
  width: 8rem;
  height: 8rem;
  line-height: 8rem;
  margin-top: -24px;
  margin-left: 1.5rem;
  vertical-align: middle; }

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center; }

.col .fa-stack-1x {
  line-height: 8rem;
  font-size: 5rem; }

.col .fa-stack-2x {
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.6); }

.fa-arrows-v:before {
  content: "\f07d"; }

.fa-arrows-h:before {
  content: "\f07e"; }

.fa-ban:before {
  content: "\f05e"; }

.fa-clock-o:before {
  content: "\f017"; }

#intro, #soundinst {
  font-family: "Alegreya Sans SC", sans-serif;
  position: fixed;
  opacity: 0;
  z-index: 100;
  text-align: center;
  width: 100%;
  text-shadow: 0px 0px 5px #000, 1px 1px 2px #000;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.5px;
  top: 35%; }

.hspot {
  display: block; }

.hspot-bg {
  background-color: rgba(0, 0, 0, 0.6); }

.hspot-content {
  background-color: rgba(0, 0, 0, 0.8); }

.hspot-content p {
  background-color: transparent; }

#intro-info .intro-p1 {
  padding-bottom: 0; }

#intro-info .intro-p2 {
  padding-top: 0; }

.circles-cont {
  display: table;
  height: auto;
  width: 580px;
  max-width: 90%;
  margin: 6% auto 0;
  position: relative; }

.circles-inner {
  display: table-cell;
  width: 50%;
  vertical-align: top;
  text-align: center; }

.learn-about {
  opacity: 1;
  width: 120px;
  height: 120px;
  line-height: 120px;
  position: relative;
  margin: auto; }

.learn-about p {
  line-height: 100%;
  font-size: 2.4rem; }

.hspot {
  position: fixed; }

.first-circle, .first-grow {
  position: relative;
  margin: auto;
  top: 0;
  left: auto;
  z-index: 1001;
  width: 120px;
  height: 120px;
  line-height: 120px;
  font-size: 3.5rem;
  font-weight: 400; }

.start-text p {
  font-size: 3.2rem;
  font-weight: 500; }

.first-grow {
  z-index: 1000;
  margin-top: -120px; }

.skip-to-new {
  position: absolute;
  z-index: 1000;
  width: 130px;
  height: 130px;
  line-height: 131px;
  left: 13.5%;
  top: 100%;
  display: none;
  opacity: 0;
  content: 'viewport-units-buggyfill; top: 60vh;'; }

.skip-to-new p {
  font-size: 2.4rem;
  line-height: 100%;
  top: 50%; }

.skip-arrow {
  position: relative;
  z-index: 9999;
  margin-top: -225%;
  left: -123%;
  height: 280%; }

.slide {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  z-index: 10;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; }

.mobile .slide {
  height: 100vh;
  content: 'viewport-units-buggyfill; height: 120vh;'; }

#slide1 {
  height: 140vh;
  background-image: url("https://theworldintenblocks.com/interactive/images/banner.jpg");
  background-position: center 10%;
  content: 'viewport-units-buggyfill; height: 150vh;'; }

.logo-cont {
  height: 15%;
  min-height: 15vh;
  width: 86%;
  max-width: 1400px;
  position: relative;
  margin: 2.5vh auto;
  background-image: url("https://theworldintenblocks.com/interactive/images/ten-blocks-logo-lrg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  content: 'viewport-units-buggyfill; min-height: 13vh;'; }

.mobile .logo-cont {
  margin: 1.5vh auto;
  content: 'viewport-units-buggyfill; margin: 1.5vh auto;'; }

.bg-logo-img {
  z-index: 1999;
  width: 84%;
  height: auto;
  top: 15vh;
  left: 8%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  position: fixed;
  visibility: hidden; }

.mobile .bg-logo-img {
  top: 15vh; }

#slide2 {
  position: fixed;
  opacity: 1;
  top: 0;
  height: 100vh;
  z-index: 9;
  content: 'viewport-units-buggyfill; height: 120vh;';
  -webkit-transform: translate3d(0, 0, 0px);
          transform: translate3d(0, 0, 0px); }

.mobile #slide2 {
  -webkit-backface-visibility: hidden; }

.saf.mobile #slide2 {
  height: 100vh;
  content: 'viewport-units-buggyfill; height: 100vh;'; }

.bus-img {
  position: absolute;
  height: 100%;
  width: 150vw;
  background-image: url("https://theworldintenblocks.com/interactive/images/bus-lrg.jpg");
  background-repeat: no-repeat;
  background-size: 120% auto;
  background-position: 0 center;
  background-color: #000;
  background-attachment: scroll;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  content: 'viewport-units-buggyfill; width: 150vw;'; }

.no-mobile .bus-img {
  background-attachment: fixed; }

.mobile .bus-img {
  background-size: 105% auto;
  background-position: 0 70%; }

.introtext {
  position: absolute;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 0px 0px 4px #000000, 0px 0px 6px #000000, 0px 0px 10px #000000;
  z-index: 100;
  font-size: 3rem;
  text-align: center;
  line-height: 3rem;
  opacity: 0; }

.toronto {
  top: 12%;
  left: 12%;
  height: 32px; }

.half {
  top: 60%;
  right: 12%; }

.people {
  bottom: 14%;
  left: 12%; }

.spacer1, .mobile .spacer1 {
  height: 320vh;
  content: 'viewport-units-buggyfill; height: 320vh;'; }

.iOS.mobile .spacer1 {
  height: 280vh;
  content: 'viewport-units-buggyfill; height: 280vh;'; }

.spacer2, .mobile .spacer2 {
  height: 150vh;
  z-index: -100;
  visibility: hidden;
  content: 'viewport-units-buggyfill; height: 190vh;'; }

.iOS.mobile .spacer2 {
  height: 170vh;
  content: 'viewport-units-buggyfill; height: 170vh;'; }

.spacer4, .mobile .spacer4 {
  height: 50vh;
  content: 'viewport-units-buggyfill; height: 90vh;'; }

.mobile .spacer4 {
  height: 0vh;
  content: 'viewport-units-buggyfill; height: 100vh;'; }

.mobile.saf .spacer4 {
  height: 100vh;
  content: 'viewport-units-buggyfill; height: 100vh;'; }

.full-img {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 8;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-backface-visibility: hidden; }

.welcome {
  position: absolute;
  bottom: 28%;
  right: 5%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

.ent {
  bottom: 8%;
  right: 15%;
  z-index: 100;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

.cultures {
  top: 32%;
  left: 25%; }

#slide3 {
  height: 80vh;
  background-image: url("https://theworldintenblocks.com/interactive/images/sign.jpg");
  z-index: 12; }

.mobile #slide3 {
  height: 110vh;
  content: 'viewport-units-buggyfill; height: 120vh;'; }

.sign-img {
  width: 100%;
  left: 0; }

#slide4 {
  position: fixed;
  opacity: 1;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 6;
  content: 'viewport-units-buggyfill; height: 120vh;'; }

.lbm-img {
  background-image: url("https://theworldintenblocks.com/interactive/images/lbm.jpg");
  -webkit-transform-origin: 50%, 50%;
      -ms-transform-origin: 50%, 50%;
          transform-origin: 50%, 50%;
  background-size: 100% auto;
  background-color: #000; }

.iOS.mobile .lbm-img {
  background-size: auto 100%; }

.iOS.mobile .ent {
  bottom: 15%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

.iOS.phone.mobile .ent {
  bottom: 25%; }

#slide5 {
  background-image: url("https://theworldintenblocks.com/interactive/images/roti.jpg");
  z-index: 12;
  content: 'viewport-units-buggyfill; height: 120vh;'; }

#slide6 {
  position: fixed;
  opacity: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 3;
  content: 'viewport-units-buggyfill; height: 120vh;'; }

.saf #slide2, .saf #slide3, .saf #slide4, .saf #slide5, .saf #slide6 {
  height: 100vh;
  content: 'viewport-units-buggyfill; height: 100vh;'; }

.businesses {
  bottom: 11%;
  left: 8%; }

.mobile .businesses {
  left: 17%; }

.wire-open-img, .wire-closed-img {
  width: 100%;
  height: 100%;
  background-image: url("https://theworldintenblocks.com/interactive/images/wire-open.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000; }

.wire-closed-img {
  background-image: url("https://theworldintenblocks.com/interactive/images/wire-closed.jpg");
  z-index: 1; }

.white {
  background: #fff;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden; }

#main {
  position: fixed;
  width: 1px;
  min-width: 100%;
  *width: 100%;
  z-index: 0; }

@media screen and (max-height: 640px) {
  .cont {
    margin: 4vh auto; }
  .inst-inner .howto p {
    font-size: 2.8rem; }
  .introtext {
    font-size: 2.8rem;
    line-height: 2.8rem; }
  .col i {
    font-size: 5rem;
    line-height: 5rem; }
  .col .fa-arrows-v {
    font-size: 3.75rem; }
  .fa-stack {
    width: 5rem;
    height: 5rem;
    margin-top: -8px; }
  .col .fa-stack-1x {
    line-height: 5rem;
    font-size: 3.2rem; }
  .col .fa-stack-2x {
    line-height: 5rem;
    font-size: 5rem; } }

@media screen and (max-height: 600px) {
  .inst-inner .howto p {
    font-size: 2.4rem; }
  .logo-cont {
    margin-top: 1vh; }
  .cont {
    margin: 3vh auto; }
  .circles-cont {
    margin-top: 4vh; }
  .first-circle, .first-grow, .learn-about {
    height: 90px;
    width: 90px;
    line-height: 92px; }
  .first-grow {
    margin-top: -90px; }
  .learn-about p, .first-circle p {
    font-size: 2rem; }
  .first-circle p {
    font-size: 2.2rem; } }

@media screen and (max-width: 720px), (max-height: 480px) {
  .logo-cont {
    margin: 0.5% auto;
    height: 10vh;
    min-height: 10vh;
    background-image: url("https://theworldintenblocks.com/interactive/images/ten-blocks-logo.png");
    content: 'viewport-units-buggyfill; height: 10vh; min-height: 10vh;'; }
  .inst-inner .howto p {
    font-size: 1.7rem; }
  .circles-cont {
    width: 400px; }
  .saf .inst-inner {
    top: 46%; }
  .inst-inner .col p {
    font-size: 1.5rem;
    margin: 1px 5px 0px; }
  .browserinst p {
    width: 600px;
    font-size: 1.8rem;
    margin: 1vh auto; }
  .col i {
    font-size: 3rem;
    line-height: 3rem; }
  .col .fa-arrows-v {
    font-size: 2.6rem; }
  .fa-stack {
    width: 3.5rem;
    height: 3.5rem;
    margin-top: 0px; }
  .col .fa-stack-1x {
    line-height: 3.5rem;
    font-size: 2.2rem; }
  .col .fa-stack-2x {
    line-height: 3.5rem;
    font-size: 3.5rem; }
  .first-circle, .first-grow, .learn-about {
    height: 70px;
    width: 70px;
    line-height: 70px; }
  .first-circle p {
    font-size: 2.2rem; }
  .first-grow {
    margin-top: -70px; }
  .learn-about p {
    font-size: 1.6rem; }
  .mobile .scroll-instruction {
    top: 60vh;
    content: 'viewport-units-buggyfill; top: 60vh;'; }
  .arrow {
    margin-top: 20px; }
  .intro-p {
    font-size: 1.8rem; }
  .introtext {
    font-size: 2.4rem;
    line-height: 2.4rem; }
  .mobile .bus-img {
    background-position: 0 70%; }
  .toronto {
    top: 16%;
    left: 10%; }
  .half {
    top: 50%;
    right: 5%; }
  .mobile .people, .mobile .ent, .mobile .businesses {
    bottom: auto;
    top: 74vh;
    content: 'viewport-units-buggyfill; top: 74vh;'; }
  .welcome {
    bottom: 23%; }
  .skip-to-new {
    width: 80px;
    height: 80px;
    line-height: 80px; }
  .skip-to-new p {
    font-size: 1.6rem; } }

@media screen and (max-width: 640px) {
  .logo-cont {
    margin: 1.5vh auto; }
  .browserinst p {
    font-size: 2rem; }
  .col p {
    font-size: 1.7rem; } }

@media screen and (max-height: 350px) {
  .cont {
    max-width: 95%; }
  .first-circle, .first-grow, .learn-about {
    height: 65px;
    width: 65px;
    line-height: 67px; }
  .first-grow {
    margin-top: -65px; }
  .learn-about p {
    font-size: 1.4rem; }
  .inst-inner .howto p {
    font-size: 1.6rem; }
  .logo-cont {
    height: 13%;
    min-height: 13vh;
    margin: 1vh auto; }
  .browserinst p {
    font-size: 1.6rem; }
  .people, .businesses {
    bottom: auto;
    top: 65vh;
    content: 'viewport-units-buggyfill; top: 65vh;'; } }

@media screen and (max-device-width: 320px), (max-device-height: 320px) {
  .logo-cont {
    height: 10%;
    min-height: 10vh;
    margin: 1vh auto; }
  .cont .col i, .cont .col span {
    display: none; }
  .browserinst p {
    font-size: 1.4rem; }
  .inst-inner .col p {
    font-size: 1.3rem; }
  .circles-cont {
    width: 300px; }
  .saf .inst-inner {
    top: 10px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none; }
  .mobile .scroll-instruction {
    top: 40vh; }
  .introtext {
    font-size: 2rem;
    line-height: 2rem; }
  .mobile .people, .mobile .ent, .mobile .businesses {
    bottom: auto;
    top: 75vh;
    content: 'viewport-units-buggyfill; top: 75vh;'; } }

@media only screen and (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1), (max-width: 960px), (max-height: 540px) and (orientation: landscape) {
  #instructions {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/banner.jpg"); }
  .logo-cont {
    background-image: url("https://theworldintenblocks.com/interactive/images/ten-blocks-logo.png"); }
  #slide1 {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/banner.jpg"); }
  .bus-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/bus-lrg.jpg"); }
  #slide3 {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/sign.jpg"); }
  .lbm-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/lbm.jpg"); }
  #slide5 {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/roti.jpg"); }
  .wire-open-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/wire-open.jpg"); }
  .wire-closed-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/small/wire-closed.jpg"); } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  #instructions {
    background-image: url("https://theworldintenblocks.com/interactive/images/banner.jpg"); }
  #slide1 {
    background-image: url("https://theworldintenblocks.com/interactive/images/banner.jpg"); }
  .logo-cont {
    background-image: url("https://theworldintenblocks.com/interactive/images/ten-blocks-logo-lrg.png"); }
  .bus-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/bus-lrg.jpg"); }
  #slide3 {
    background-image: url("https://theworldintenblocks.com/interactive/images/sign.jpg"); }
  .lbm-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/lbm.jpg"); }
  #slide5 {
    background-image: url("https://theworldintenblocks.com/interactive/images/roti.jpg"); }
  .wire-open-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/wire-open.jpg"); }
  .wire-closed-img {
    background-image: url("https://theworldintenblocks.com/interactive/images/wire-closed.jpg"); } }