h1 {
  text-align: center;
  font-size: 47px;
  margin-top: 350px;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 630ms ease-out, transform 930ms cubic-bezier(0,.74,.36,1);
}
h1.show {
  transform: translateY(0);
  opacity: 1;
}
h1 img {
  margin-top: -7px;
}
h2 {
  margin-top: 0;
  margin-bottom: 35px;
  font-size: 52px;
}
.app-store-button {
  width:173px;
  display: inline-block;
}

#android-button-link {
  margin-top: 10px;
}

section {
  max-width: 1366px;
  margin: 0 auto;
}

.main-container {
  background: transparent url('https://cdn-prod.prod.fair.engineering/web/images/DOT_PATTERN_2X.png') repeat;
  background-size: 38px 36px;
  padding-top: 250px;
}
.iOS-button-container {
  text-align: center;
  margin-top: 50px;
}
.phone-image {
  position: absolute;
  /* transition: transform 50ms ease-in-out; */
}
.phone-image {
  opacity: 0;
  transform: translateY(100px);
}
#phone1 {
  top: -40px;
  left: calc(50% - 314px);
  /* transition: opacity 200ms ease-out, transform 700ms cubic-bezier(0,.74,.36,1); */
}
#phone1.show {
  animation: 
    phone1-show 700ms,
    phone1-animation1 3500ms 700ms ease-in-out, 
    phone1-animation2 8s 4200ms infinite alternate ease-in-out;
}

#phone1-img {
  width: 637px;
}

#phone2 {
  top: 125px;
  left: calc(50% - 805px);
  /* transition: opacity 160ms ease-out, transform 500ms cubic-bezier(0,.74,.36,1); */
}
#phone2.show {
  animation:
    phone2-show 1200ms,
    phone2-animation1 4500ms 1200ms ease-out,
    phone2-animation2 11s 5700ms infinite alternate cubic-bezier(.39,.01,.67,.99);
  /* transition: opacity 160ms ease-out, transform 500ms cubic-bezier(0,.74,.36,1); */
}
#phone2-img {
  width: 530px;
}
#phone3 {
  bottom: -250px;
  left: 64%;
  transform: translateY(140px);
  /* transition: opacity 170ms ease-out, transform 880ms cubic-bezier(0,.74,.36,1); */
}
#phone3.show {
  animation: 
    phone3-show 500ms ease-out,
    phone3-animation1 2900ms 500ms ease-out,
    phone3-animation2 11s 3400ms infinite alternate ease-in-out;
}
#phone3-img {
  width: 513px;  
}
.hero {
  height: 768px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  /* opacity: 0;
  transform: translateY(200px);
  transition: opacity 800ms, transform 800ms;
  transition-timing-function: cubic-bezier(.1,.66,.61,.98); */
}
.hero.show {
  /* opacity: 1;
  transform: translateY(0); */
}
.text-container {
  background-color: white;
  font-size: 24px;
  padding-top: 100px;
}
.fade-in-section .text-container h2, .fade-in-section .text-container p {
  opacity: 0;
}
.text-container h2 {
  clear: both;
  transition: opacity 250ms 270ms ease-out, transform 200ms ease-out;
}
.text-container p {
  transition: opacity 300ms 570ms ease-out, transform 200ms ease-out;
  font-size: 21px;
}
.text-container h2, .text-container p {
  position:relative;
  z-index: 10;
}

.image-container {
  position: absolute;
  height: 723px;
  width: 392px;
  top: -116px;
  z-index: 10;
  overflow: hidden;
  transition: transform 200ms ease-out;
}

.image-container img {
  position:absolute;
  left: 0;
  top: 0;
}

.main-container .fade-in-section {
  position: relative;
  opacity: 0;
  z-index: 1;
}

.main-container .fade-in-section.show {
  opacity: 1;
}

.text-inner-container {
  position: relative;
  z-index: 50;
  transform: translateY(-70px);
  transition: transform 1200ms ease-out;
}

.show .text-inner-container {
  transform: translateY(0);
}

.show .text-container h2, .show .text-container p {
  opacity: 1;
}

.section1, .section3 {
  transform: translateY(150px);
  transition: opacity 500ms linear, transform 500ms ease-out;
  margin-bottom: 160px;
}

.section1.show, .section3.show {
  transform: none;
}

.section1 .text-container, .section3 .text-container {
  padding-left: 173px;
  padding-left: 12.65%;
  width: 72.1%;
  max-width: 935px;
  min-height: 540px;
  position:relative;
}
.section1 .text-container:before, .section3 .text-container:before {
  content: '';
  display: block;
  background-color: #fff;
  width: calc(100vw + 100px + 72.1%);
  transform: translate(-100vw, -100px);
  position:absolute;
  z-index: 5;
  min-height: 540px;
  box-shadow: -105px 2px 20px -2px rgba(0, 0, 0, 0.05);
}

.section1 .text-container:before {
  /* box-shadow: -105px 2px 30px -2px rgba(0, 0, 0, 0.04); */
}

.section1 .text-container p, .section3 .text-container p {
  max-width: 500px;
  width: 76%;
}

.section1 .image-container, .section3 .image-container {
  left: 58.15%;
  opacity: 0;
  transition: opacity 500ms 300ms ease-out;
}

/* .section1 .image-container { 
  opacity: 0;
  transition: opacity 500ms 300ms ease-out;
} */

.section1.show .image-container, .section3.show .image-container { 
  opacity: 1;
}

.section1 .image-container img, .section3 .image-container img {
  transform: translate(-111px, -177px);
  margin-top: 300px;
  transition: margin-top 1500ms cubic-bezier(0,.74,.61,.92);
}

.section1.show .image-container img, .section3.show .image-container img {
  margin-top: 0;
}

.section1 .image-container img, .section2 .image-container img {
  width: 620px;
}

.section3 .image-container img {
  margin-top: 100px;
  width: 732px;
}

.section3.show .image-container img {
  margin-top: 20px;
}

.section2 {
  margin-bottom: 200px;
}

.section2 .text-container, .section2 .image-container {
  transition: opacity 500ms linear, transform 500ms ease-out;
  opacity: 0;
}

.section2 .text-container.show, .section2 .image-container.show {
  opacity: 1;
  transform: translate(0, 0);
}

.section2 .text-container {
  margin-left: 25.5%;
  padding-left: 25%;
  padding-top: 195px;
  position:relative;
  width: 100vw;
  min-height: 600px;
  box-shadow: 30px 2px 20px -2px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  opacity: 0;
  transform: translateY(150px);
}

.section2 .text-container h2, .section2 .text-container p {
  max-width: 415px;
  width: 52%;
}
.section2 .text-container p {
  margin-bottom: 50px;
}

.section2 .image-container {
  width: 518px;
  height: 600px;
  top: 100px;
  left: calc(50% - 594px);
  transform: translatex(-200px);
}

.section2 .image-container img {
  transform: translate(-11px, -152px);
}

.section2 .image-container .phone2-anim {
  transform: translate(2px, -146px);
}

.main-container .section3 {
  margin-bottom: -10px;
}

.section3 .text-container {
  min-height: 630px;
  padding-top: 170px;
  width: 72.1%;
  max-width: 980px;
}

.section3 .text-container:before {
  width: calc(100vw + 100px + 72.1%);
  transform: translate(-100vw, -160px);
  min-height: 630px;
  /* box-shadow: 0px -5px 80px rgba(0, 0, 0, 0.05); */
}

.section3 .text-container h2, .section3 .text-container p {
  /* max-width: 450px; */
  width: 59%;
}

.section3 .image-container {
  width: 680px;
  height: 800px;
  top: 100px;
  left: 47%;
}

.section3 .image-container img {
  transform: translate(-23px, -171px);
}

.dot-fader {
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 100px 500px 500px rgba(255, 255, 255, 1);
  z-index: 0;
}

#dot-fader1 {
  top: 650px;
  height: 200px;
  width: 100px;
  left: -500px;
  border-radius: 10%;
  box-shadow: 0 100px 1000px 1000px rgba(255, 255, 255, 0.95);
}

#dot-fader2 {
  top: 1550px;
  height: 30px;
  width: 40px;
  right: 19%;
  border-radius: 10%;
  /* opacity: 0.97; */
  box-shadow: 0 0 400px 400px rgba(255, 255, 255, 1);
}

#dot-fader3 {
  top: 2250px;
  height: 30px;
  width: 40px;
  left: -300px;
  border-radius: 10%;
  box-shadow: 0 0 550px 550px rgba(255, 255, 255, 1);
}

#dot-fader4 {
  top: 2950px;
  height: 30px;
  width: 40px;
  right: -400px;
  border-radius: 10%;
  box-shadow: 0 100px 800px 800px rgba(255, 255, 255, 0.95);
}

.what-is-fair, .peace-of-mind-section {
  position: relative;
  background-color: #fff;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 205px 0;
  z-index: 1;
  text-align: center;
}

.what-is-fair {
  padding-bottom: 0;
  padding-top: 130px;
}

.what-is-fair > h2,
.what-is-fair > p {
  opacity: 0;
  transform: translateY(100px);
  transition:
    opacity 200ms ease-in-out,
    transform 400ms ease-in-out;
}

.what-is-fair.show > h2,
.what-is-fair.show > p {
  opacity: 1;
  transform: translateY(0);
}

.what-is-fair h2 {
  color: #ff5a00;
}

.what-is-fair p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 36px;
}

.peace-of-mind-section {
  margin-top: 200px;
  margin-bottom: 200px;
}

.peace-of-mind-section > h2.show,
.peace-of-mind-section > p.show,
.peace-of-mind-section > .peace-of-mind-icons-row.show {
  opacity: 1;
  transform: translateY(0);
}

.peace-of-mind-section > * {
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity 200ms ease-in-out,
    transform 400ms ease-in-out;
}

.commitment-section {
  margin-top: 80px;
  margin-bottom: 450px;
  position: relative;
  z-index: 1;
  height: 930px;
}

.parallax-image-container {
  width: 40%;
  height: 600px;
  position: absolute;
  top: 280px;
  z-index: 10;
  overflow-y: hidden;
  opacity: 0;
  transition:
    opacity 400ms ease-in-out;
}
.parallax-image-container img {
  width: 100%;
}

/* .section2 .text-container, .section2 .image-container {
  transition: opacity 500ms linear, transform 500ms ease-out;
  opacity: 0;
} */

/* .section2 .text-container.show, .section2 .image-container.show {
  opacity: 1;
  transform: translate(0, 0);
} */

.commitment-section {
  margin-bottom: 150px;
}

.commitment-section .text-container {
  margin-left: 25.5%;
  padding-left: 25%;
  padding-top: 195px;
  position:relative;
  width: 100vw;
  min-height: 600px;
  box-shadow: 30px 2px 20px -2px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  opacity: 0;
  transform: translateY(300px);
  transition:
    opacity 200ms ease-in-out,
    transform 400ms ease-in-out;
}

.commitment-section .text-container a {
  transition: transform 200ms ease-in-out;
}

.commitment-section .text-container h2, .commitment-section .text-container p {
  max-width: 430px;
  width: 52%;
}
.commitment-section .text-container p {
  margin-bottom: 50px;
}

.commitment-section.show .text-container,
.commitment-section.show .parallax-image-container {
  opacity: 1;
}

.commitment-section.show .text-container {
  transform: translateY(150px);
}

.commitment-section .image-container img {
  transform: translate(-11px, -152px);
}

.fair-price-icon {
  width: 123px;
  margin-top: -60px;
  margin-bottom: 70px;
  float: left;
}

.commitment-modal-content {
  max-width: 514px;
  float: right;
  height: auto;
}

.commitment-modal-body {
  font-size: 18px;
  text-align: center;
}

.commitment-modal-body h4 {
  font-size: 30px;
  margin-bottom: 40px;
}

@media (max-width : 768px) { 
  #hero .fair-logo {
    height: 27px;
    margin-top: -8px;
  }

  #hero h1 {
    font-size: 32px;
  }

  .iOS-button-container {
    margin-top: 31px;
  }
  
  #phone2 {
    top: 336px;
    left: calc(50% - 560px);
  }

  #phone2-img {
    transform: scale(0.85);
  }

  #phone3 {
    left: 38%;
    bottom: -360px;
  }

  #phone3-img {
    transform: scale(0.9);
  }

  .text-container {
    font-size: 17px;
  }
  
  .section1 .text-container, .section3 .text-container {
    padding-left: 9.1%;
  }

  .section1 .text-container p, .section3 .text-container p {
    max-width: 311px;
  }
  
  .section3 .text-container p {
    max-width: 315px;
    width: 70%;
  }

  .section1 .text-container {
    max-width: 553px;
  }

  .section1 .text-container:before {
    margin-top: 23px;
  }

  .section1 .image-container {
    left: 48.15%;
  }

  .image-container img {
    transform: translate(-111px, -177px) scale(0.70);
  }

  .section1 .image-container img {
    transform: translate(-111px, -177px) scale(0.80);
  }

  .section2 .text-container {
    padding-top: 120px;
    padding-left: 21.3%;
    min-height: 566px;
  }

  .section2 .text-container h2 {
    width: 60%;
    max-width: 400px;
  }

  .section2 .image-container {
    left: calc(50% - 440px);
    top: 165px;
  }

  .section2 .image-container img {
    transform: translate(-11px, -152px) scale(0.80);
  }
  .section2 .image-container .phone2-anim {
    transform: translate(-1px, -148px) scale(0.80)
  }
  .section3 .text-container, .section3 .text-container:before {
    min-height: 680px;
  }

  .section3 .text-container {
    padding-top: 80px;
  }

  .section3 .text-container h2, .section3 .text-container p {
    width: 90%;
    max-width: 500px;
  }

  .section3 .text-container h2 {
    max-width: 400px;
  }

  .section3 .text-container:before {
    width: calc(100vw + 80px + 72.1%);
    transform: translate(-100vw, -85px);
  }

  .section3 .image-container {
    top: 260px;
    left: 20%;
    height: 650px;
  }

  .section3 .image-container img {
    transform: translate(-23px, -171px) scale(0.8);
  }

  .what-is-fair h2 {
    font-size: 42px;
  }

  .what-is-fair p {
    font-size: 30px;
    max-width: 545px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .commitment-section {
    margin-top: 120px;
    margin-bottom: 350px;
  }

  .commitment-section .text-container,
  .commitment-section.show .text-container {
    transform: translateY(355px);
    padding-top: 350px;
    padding-left: 120px;
  }


  .commitment-section .text-container h2, .commitment-section .text-container p {
    width: 57%;
  }

  .parallax-image-container {
    top: 0;
    width: 100%;
    max-width: 500px;
    height: 565px;
  }

  .commitment-modal-content {
    float: none;
  }
}

@media (max-width : 480px) {
  h1 {
    font-size: 28px;
    margin-top: 215px;
    line-height: 1.3;
    opacity: 1;
    transform: none;
  }

  h2 {
    font-size: 35px;
  }

  h4 {
    font-size: 18px;
  }

  #hero {
    opacity: 1;
    transform: none;
    height: 545px;
  }

  #hero .inner-container {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 200;
  }

  #hero .fair-logo {
    height: 24px;
  }

  #hero h1 {
    font-size: 28px;
  }

  .main-container .fade-in-section {
    opacity: 1;
    transform: 0;
  }

  .phone-image {
    transform: none;
  }

  #phone1 {
    opacity: 1;
    left: calc(50% - 417px);
    top: -90px;
  }

  #phone1-img, #phone3-img {
    transform: scale(0.7) !important;
  }

  #phone2 {
    display: none !important;
  }

  #phone3 {
    bottom: initial;
    left: 1%;
    top: 350px;
    opacity: 1;
    transform: none !important;
  }

  .main-container {
    padding-top: 150px;
    margin-top: 150px;
  }

  .show .text-inner-container, .text-inner-container {
    transform: none;
  }

  .text-container {
    font-size: 15px;
  }

  .text-container h2, .text-container p {
    opacity: 1 !important;
    transform: none !important;
  }

  .text-container p {
    font-size: 15px;
  }

  .show.section1, .show.section3 {
    transform: translateY(150px);
  }

  .section1 {
    margin-bottom: 400px;
  }

  .section1 .text-container, .section3 .text-container {
    padding: 0 40px;
    width: calc(100% - 35px);
  }

  .section1 .text-container h2, .section1 .text-container p,
  .section3 .text-container h2, .section3 .text-container p {
    max-width: 100%;
    width: 100%;
  }

  .section1 .text-container p {
    max-width: 260px;
  }

  .section1 .text-container h2 {
    padding-top: 15px;
  }

  .section1 .text-container:before, .section3 .text-container:before {
    transform: translate(-40px, 0) !important;
    width: 100%;
  }

  .section1 .image-container, .section3 .image-container {
    top: 160px;
    left: calc(50% - 196px);
    opacity: 1;
  }

  .section1 .image-container img, .section3 .image-container img {
    margin-top: 0;
  }

  .section1 .image-container{
    transform: scale(0.85) !important;
    top: 280px;
  }
  
  .section2 {
    margin-bottom: 80px;
  }

  .section2 .text-container, .section2 .image-container {
    opacity: 1;
  }

  .section2 .image-container {
    top: -40px;
    left: calc(50% - 284px);
    transform: translate(0, 0) scale(0.85) !important;
  }

  .section2 .image-container img {
    transform: translate(-11px, -152px) scale(0.8) !important;
  }
  .section2 .image-container .phone2-anim {
    transform: translate(-1px, -147px) scale(0.8) !important
  }

  .section2 .text-container, .commitment-section .text-container {
    margin-left: 40px;
    padding: 365px 40px 50px !important;
    width: calc(100% - 40px);
    min-height: 400px;
    transform: translateY(150px) !important;
  }

  .section2 .text-container h2, .section2 .text-container p,
  .commitment-section .text-container h2, .commitment-section .text-container p {
    width: 100%;
    max-width: 330px;
  }

  .section2 .text-container p,
  .commitment-section .text-container p {
    max-width: 235px;
  }

  .section2 .text-container p {
    margin-bottom: 30px;
  }

  .main-container .section3 {
    margin-bottom: 320px;
  }

  .section3 .text-container, .section3 .text-container:before {
    min-height: 480px;
  }

  .section3 .text-container h2 {
    padding-top: 90px;
    max-width: 330px;
  }

  .section3 .text-container p {
    max-width: 280px;
  }

  .section3 .image-container {
    top: 290px;
    left: calc(50% - 300px);
    transform: none !important;
  }
  .dot-fader {
    box-shadow: 0 100px 200px 200px rgba(255, 255, 255, 1);
  }
  #dot-fader1 {
    width: 1px;
    height: 1px;
    top: 450px;
  }
  #dot-fader2 {
    top: 1450px;
    box-shadow: 0 0 200px 200px rgba(255, 255, 255, 1);
  }
  #dot-fader3 {
    display: none;
  }
  #dot-fader4 {
    top: 2400px;
    box-shadow: 0 0 200px 200px rgba(255, 255, 255, 1);
  }
  .what-is-fair {
    padding: 120px 40px;
  }

  .what-is-fair {
    padding-top: 60px;
    padding-bottom: 0;
  }

  .what-is-fair > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .what-is-fair p {
    font-size: 21px;
  }
  
  .commitment-section {
    margin-top: 120px;
    margin-bottom: 150px;
    height: auto;
  }
  .commitment-section .text-container {
    padding-top: 210px !important;
    min-height: 520px;
    opacity: 1 !important;
  }
  .commitment-section .text-container p {
    margin-bottom: 30px; 
  }

  .commitment-section .text-container a {
    transform: translateY(0) !important;
  }
  .parallax-image-container {
    max-width: 290px;
    height: 330px;
    opacity: 1 !important;
  }
  .fair-price-icon {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .commitment-modal-dialog {
    margin: 30px;
  }

  .commitment-modal-content {
    width: calc(100vw - 60px);
    min-height: calc(100vh - 60px);
    height: auto;
  }

  .peace-of-mind-section {
    padding: 120px 40px;
  }

  .peace-of-mind-section > * {
    opacity: 1 !important;
    transform: translateY(0);
  }

  .peace-of-mind-section > .peace-of-mind-icons-row.show {
    display: block !important;
  }

  .peace-of-mind-icons-row {
    margin: 15px auto 0;
  }

  .peace-of-mind-section h2 {
    font-size: 35px;
  }
}

@-webkit-keyframes phone1-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes phone1-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes phone1-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes phone1-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes phone1-animation1 {
  0% { 
    opacity: 1;
    transform: translateY(0px); 
  }
  100%   { 
    transform: translateY(-15px); 
    opacity: 1;
  }
}
@-moz-keyframes phone1-animation1 {
  0% { 
    opacity: 1;
    transform: translateY(0px); 
  }
  100%   { 
    transform: translateY(-15px); 
    opacity: 1;
  }
}
@-o-keyframes phone1-animation1 {
  0% { 
    opacity: 1;
    transform: translateY(0px); 
  }
  100%   { 
    transform: translateY(-15px); 
    opacity: 1;
  }
}
@keyframes phone1-animation1 {
  0% { 
    opacity: 1;
    transform: translateY(0px); 
  }
  100%   { 
    transform: translateY(-15px); 
    opacity: 1;
  }
}
@-webkit-keyframes phone1-animation2 {
  0% { 
    transform: translateY(-15px); 
    opacity: 1;
  }
  100% 
  { 
    transform: translateY(25px);
    opacity: 1;
  }
}
@-moz-keyframes phone1-animation2 {
  0% { 
    transform: translateY(-15px); 
    opacity: 1;
  }
  100% 
  { 
    transform: translateY(25px);
    opacity: 1;
  }
}
@-o-keyframes phone1-animation2 {
  0% { 
    transform: translateY(-15px); 
    opacity: 1;
  }
  100% 
  { 
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes phone1-animation2 {
  0% { 
    transform: translateY(-15px); 
    opacity: 1;
  }
  100% 
  { 
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes phone2-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@-moz-keyframes phone2-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@-o-keyframes phone2-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@keyframes phone2-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@-webkit-keyframes phone2-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px);
    opacity: 1;
  }
}
@-moz-keyframes phone2-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px);
    opacity: 1;
  }
}
@-o-keyframes phone2-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px);
    opacity: 1;
  }
}
@keyframes phone2-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px);
    opacity: 1;
  }
}
@-webkit-keyframes phone2-animation2 {
  0% {
    transform: translateY(-80px);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 1;
  }
}
@-moz-keyframes phone2-animation2 {
  0% {
    transform: translateY(-80px);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 1;
  }
}
@-o-keyframes phone2-animation2 {
  0% {
    transform: translateY(-80px);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 1;
  }
}
@keyframes phone2-animation2 {
  0% {
    transform: translateY(-80px);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 1;
  }
}
@-webkit-keyframes phone3-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@-moz-keyframes phone3-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@-o-keyframes phone3-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@keyframes phone3-show {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}
@-webkit-keyframes phone3-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 1;
  }
}
@-moz-keyframes phone3-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 1;
  }
}
@-o-keyframes phone3-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 1;
  }
}
@keyframes phone3-animation1 {
  0% {
    transform: translateY(-40px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 1;
  }
}
@-webkit-keyframes phone3-animation2 {
  0% {
    transform: translateY(-60px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes phone3-animation2 {
  0% {
    transform: translateY(-60px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-o-keyframes phone3-animation2 {
  0% {
    transform: translateY(-60px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes phone3-animation2 {
  0% {
    transform: translateY(-60px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}