@font-face {
  font-family: 'Main';
  src: url(../fonts/main.ttf);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
}

img {
  width: 100%;
  display: block;
}

.block-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.app {
  font-family: 'Marvin';
  background-image: url(../image/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  font-weight: bolder;
  height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  display: block;
}

.smoke {
  position: absolute;
  width: 100%;
  bottom: -2%;
  left: 2%;
}

.text1 {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 40%;
  opacity: 0;
  -webkit-animation: sh2 ease-out 1.4s;
          animation: sh2 ease-out 1.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

.text2 {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 40%;
  opacity: 0;
  -webkit-animation: sh1 ease-out 1.4s;
          animation: sh1 ease-out 1.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

.logo {
  position: absolute;
  bottom: 2%;
  left: 2%;
  width: 16%;
}

.btn {
  position: absolute;
  top: 62%;
  left: 51%;
  width: 40%;
}

.btn img {
  -webkit-animation: btn 1.4s ease-in-out;
          animation: btn 1.4s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}

.btn img:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

.btn:hover img:first-child {
  opacity: 0;
}

@-webkit-keyframes btn {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(7%);
            transform: translateY(7%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes btn {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(7%);
            transform: translateY(7%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes sh1 {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes sh1 {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes sh2 {
  from {
    opacity: 0;
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes sh2 {
  from {
    opacity: 0;
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}