#intro {
  background: url('/why/static/site/img/intro-back.jpg') no-repeat 0 0;
  background-size: cover;
}
#intro #arrowDown {
  position: absolute;
  z-index: 100;
  background-image: url('/why/static/site/img/arrow-down-intro.png');
  background-repeat: no-repeat;
  background-position: center 34px;
}
#intro #arrowDown.finish {
  background-image: url('/why/static/site/img/arrow-down.png');
  background-position: center center;
}
#intro #screen1 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: opacity 1s, transform 1s;
  opacity: 1;
}
#intro #screen1.top {
  transform: translate(0, -500px);
  -webkit-transform: translate(0, -500px);
  opacity: 0;
}
#intro #screen1.hide {
  display: none;
}
#intro #screen1 #logoIntro {
  position: absolute;
  top: 49px;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  font-family: 'FuturaBook', 'Trebuchet MS', Arial, sans-serif;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity 2s;
}
@media screen and (max-height: 670px) {
  #intro #screen1 #logoIntro {
    top: 29px;
  }
}
#intro #screen1 #logoIntro.show {
  opacity: 1;
}
#intro #screen1 #logoIntro img {
  margin-top: 5px;
  display: block;
  clear: both;
}
#intro #screen1 #logoQ {
  position: absolute;
  top: 166px;
  left: 50%;
  transform: translate(-50%, 100px);
  -webkit-transform: translate(-50%, 100px);
  width: 263px;
  height: 172px;
  background: url('/why/static/site/img/logo-q-intro.png') no-repeat 0 0;
  opacity: 0;
  transition: opacity 0.2s, transform 0.7s;
}
@media screen and (max-height: 670px) {
  #intro #screen1 #logoQ {
    top: 126px;
  }
}
@media screen and (max-height: 590px) {
  #intro #screen1 #logoQ {
    top: 90px;
  }
}
#intro #screen1 #logoQ.show {
  opacity: 1;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}
#intro #screen1 .description {
  position: absolute;
  top: 377px;
  left: 50%;
  transform: translate(-50%, 100px);
  -webkit-transform: translate(-50%, 100px);
  font-size: 22px;
  color: #ffffff;
  font-family: 'FuturaBook', 'Trebuchet MS', Arial, sans-serif;
  text-align: center;
  width: 680px;
  opacity: 0;
  transition: opacity 0.4s, transform 0.7s;
  line-height: 25px;
}
@media screen and (max-height: 710px) {
  #intro #screen1 .description {
    font-size: 18px;
    width: 555px;
  }
}
@media screen and (max-height: 670px) {
  #intro #screen1 .description {
    top: 300px;
  }
}
@media screen and (max-height: 590px) {
  #intro #screen1 .description {
    top: 270px;
  }
}
#intro #screen1 .description.show {
  opacity: 1;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}
#intro #screen1 #logoFA {
  position: absolute;
  bottom: 15px;
  left: 21px;
  font-family: 'FuturaBook', 'Trebuchet MS', Arial, sans-serif;
  color: #ffffff;
  font-size: 16px;
  transition: opacity 0.2s;
}
#intro #screen1 #logoFA.hide {
  opacity: 0;
}
#intro #screen1 #logoFA img {
  margin-top: 8px;
  display: block;
  clear: both;
}