body{
  margin: 0;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}
.wrapper {
  text-align:center;
  position: relative;
  margin: 0 auto;
}

.cover {
  height: 700px;
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  overflow: hidden;
}

.sky {
   background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/bg1.png');
}
.ground {
   background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/bg2.png');
  background-repeat: no-repeat;
  height: 400px;
  margin-top: 30px;
  
}
.base{
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/base2.png');
  background-repeat: repeat-x;
  width: 100%;
  height: 100%;
  background-position-y: 100%;
}

.tree1 {
  margin-left: 5%;
  margin-top: 200px;
  height: 500px;
  width: 450px;
 
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/tree1.png');
  background-repeat: no-repeat;
  background-size: contain;

}

.tree2 {
  margin-left: 70%;
  margin-top: -500px;
  height: 765px;
  width: 400px;
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/tree2.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sun {
  margin-left: 70%;
  margin-top: -200px;
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/sun.png');
  height: 120px;
  width: 120px;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 16000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 16000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 16000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spin;
  animation-duration: 16000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.logo {
  position: relative;
  z-index:2;
  margin: -1050px auto 0px;
  height: 420px;
  max-width: 400px;
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/logo.png');
  background-position:center;
  background-repeat: no-repeat;
  background-size: contain;
 -webkit-animation-name: hover;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: hover;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: hover;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: hover;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  animation-direction: alternate;
}

.cloud1 {
  position: relative;
   margin-left: 12%;
  margin-top: -100px;
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/cloud.png');
  height: 120px;
  width: 250px;
  background-repeat: no-repeat;
  background-size: contain;
  
   -webkit-animation-name: go-right;
  -webkit-animation-duration: 270000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: go-right;
  -moz-animation-duration: 270000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: go-right;
  -ms-animation-duration: 270000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: go-right;
  animation-duration: 270000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  animation-direction: alternate;
  z-index:1;
}

.cloud2 {
  position: relative;
  margin-left: 70%;
  margin-top: 10px;
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/cloud1.png');
  height: 120px;
  width: 250px;
  background-repeat: no-repeat;
  background-size: contain;
  
   -webkit-animation-name: go-left;
  -webkit-animation-duration: 150000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: go-left;
  -moz-animation-duration: 150000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: go-left;
  -ms-animation-duration: 150000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: go-left;
  animation-duration: 150000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  animation-direction: alternate;
   z-index:1;
}

video {
  object-fit: contain;
  width: 275px;
  height: 595px;
  margin-left: 0px;
  margin-top: 23px;
  margin-bottom: 15px;
}

.film-background {
  position:relative;
  background-image: url('https://s3-us-west-2.amazonaws.com/reza-light/iphone.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 315px;
  height: 640px;
  margin: -480px auto 0;
  z-index:999;
}

.reflection {
  width: 395px;
  height: 300px;
  background-image: url('https://s3-us-west-1.amazonaws.com/reza-word/phone-ref.png');
  background-size: cover;
  margin: -70px auto;
  padding-left:20px;

}

.content {
  margin: -150px auto 0;
  color: #393939;
  font-size: 14pt;
  text-align: left;
  /*max-width: 860px;*/
  line-height: 1.5;
}

.content p {
  padding: 20px 0;
  margin: 0;
}

.non-bold {
  font-weight: normal
}

.right-content {
  margin-top:17px;
  margin-left: 70px;
  font-weight:bold;

}

.right-content ul {
  margin-top:20px;
  font-weight:normal;
  line-height: 2.0;
  list-style: none;
  margin-left: -40px
  
}

.right-content ul li {
     background-image: url(https://s3-us-west-1.amazonaws.com/reza-word/checkmark.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 40px;
    margin-top: 10px
}

.app {
  width: 60%
}
.app-store {
  margin-top:30px;
}

.screenshots img{
  border-radius: 10px;
  margin: 15px auto;
  max-width: 80%;
  height: auto;
}

.footer {
  padding-top:35px;
  color: #ffffff;
  text-align: center;
}
.margin-top-25{
  margin-top: 25px;
}


@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from {
      transform:rotate(0deg);
  }
  to {
      transform:rotate(360deg);
  }
}

@-ms-keyframes hover {
    from { -ms-transform: translate3d(0px, 0px, 0px); }
    to { -ms-transform: translate3d(0px, 0px, 0px); }
}
@-moz-keyframes hover {
    from { -moz-transform: translate3d(0px, 0px, 0px); }
    to { -moz-transform: translate3d(0px, 0px, 0px); }
}

@-webkit-keyframes hover {
     from {-webkit-transform: translate3d(0px, 0px, 0px);}
    to {-webkit-transform: translate3d(0px, 10px, 0px); }
}
@keyframes hover {
     from {transform: translate3d(0px, 0px, 0px); }
    to {transform: translate3d(0px, 10px, 0px);}
}

@-ms-keyframes go-left {
    from { -ms-transform: translate3d(0px, 0px, 0px); }
    to { -ms-transform: translate3d(-940px, 0px, 0px); }
}
@-moz-keyframes go-left {
    from { -moz-transform: translate3d(0px, 0px, 0px); }
    to { -moz-transform: translate3d(-940px, 0px, 0px); }
}

@-webkit-keyframes go-left {
     from {-webkit-transform: translate3d(0px, 0px, 0px);}
    to {-webkit-transform: translate3d(-940px, 10px, 0px); }
}
@keyframes go-left {
     from {transform: translate3d(0px, 0px, 0px); }
    to {transform: translate3d(-940px, 10px, 0px);}
}


@-ms-keyframes go-right {
    from { -ms-transform: translate3d(0px, 0px, 0px); }
    to { -ms-transform: translate3d(940px, 0px, 0px); }
}
@-moz-keyframes go-right {
    from { -moz-transform: translate3d(0px, 0px, 0px); }
    to { -moz-transform: translate3d(940px, 0px, 0px); }
}

@-webkit-keyframes go-right {
     from {-webkit-transform: translate3d(0px, 0px, 0px);}
    to {-webkit-transform: translate3d(940px, 10px, 0px); }
}
@keyframes go-right {
     from {transform: translate3d(0px, 0px, 0px); }
    to {transform: translate3d(940px, 10px, 0px);}
}
