.animate-title {
  font-size: 30px;
  line-height: 1.3;
  color: #ffcc33;
  text-shadow: 0 0 8px #ffcc33;
  position: absolute;
  left: 0;
  top: -300px;
  opacity: 0;
}

.main-title {
  top: 180px;
  opacity: 1;
}

.main-title2 {
  top: 180px;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.75, 0, 0.75, 0.9);
}

.main-logo {
  top: 180px;
  opacity: 0;
}

.animate-desc {
  font-size: 19px;
  color: #fff;
  position: absolute;
  top: 218px;
  left: 2px;
}

.logo-wrapper {
  color: #ffcc33;
  text-shadow: 0 0 8px #ffcc33;
  transition: opacity 1s cubic-bezier(0.75, 0, 0.75, 0.9);
  display: flex;
  align-items: center;
  opacity: 0;
}

.animate-logo {
  height: 36px;
  margin-left: 16px;
  margin-right: 8px;
}

.fade-title {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.75, 0, 0.75, 0.9);
}

.animate-desc > span {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.75, 0, 0.75, 0.9);
}

.show-animate-title0 {
  animation: show-animate-title1 0.1s cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}


.show-animate-title1 {
  animation: show-animate-title1 1.8s cubic-bezier(0, 0, 0.58, 1);
  animation-fill-mode: forwards;
}

.hide-animate-title1 {
  animation: hide-animate-title1 1.8s cubic-bezier(0.75, 0, 0.75, 0.9);
  animation-fill-mode: forwards;
}

.hide-animate-desc1 {
  animation: hide-animate-desc1 1.8s cubic-bezier(0.75, 0, 0.75, 0.9);
  animation-fill-mode: forwards;
}

@-webkit-keyframes show-animate-title1 {
  0% {top: -400px; opacity: 0} 100% { top: 180px; opacity: 1}
}

@-webkit-keyframes hide-animate-title1 {
  0% {top: 180px; opacity: 1} 100% { top: -300px; opacity: 0}
}

@-webkit-keyframes hide-animate-desc1 {
  0% {top: 218px; opacity: 1} 100% { top: 600px; opacity: 0}
}

@media (min-width: 450px) {
  .animate-title {
    top: 170px;
    font-size: 38px;
  }

  .animate-desc {
    top: 215px;
    font-size: 24px;
  }

  .animate-logo {
    height: 40px;
  }

  @-webkit-keyframes show-animate-title1 {
    0% {top: -400px; opacity: 0} 100% { top: 170px; opacity: 1}
  }

  @-webkit-keyframes hide-animate-title1 {
    0% {top: 170px; opacity: 1} 100% { top: -300px; opacity: 0}
  }

  @-webkit-keyframes hide-animate-desc1 {
    0% {top: 215px; opacity: 1} 100% { top: 600px; opacity: 0}
  }
}

@media (min-width: 550px) {
  .animate-title {
    top: 170px;
    font-size: 45px;
  }

  .animate-desc {
    top: 218px;
    font-size: 30px;
  }

  .animate-logo {
    height: 46px;
  }

  @-webkit-keyframes show-animate-title1 {
    0% {top: -400px; opacity: 0} 100% { top: 160px; opacity: 1}
  }

  @-webkit-keyframes hide-animate-title1 {
    0% {top: 170px; opacity: 1} 100% { top: -300px; opacity: 0}
  }

  @-webkit-keyframes hide-animate-desc1 {
    0% {top: 218px; opacity: 1} 100% { top: 600px; opacity: 0}
  }
}

@media (min-width: 576px) {
  .animate-title {
    /*top: 200px;*/
  }

  .animate-desc {
    /*top: 250px;*/
  }

  /*@-webkit-keyframes show-animate-title1 {*/
    /*0% {top: -400px; opacity: 0} 100% { top: 200px; opacity: 1}*/
  /*}*/

  /*@-webkit-keyframes hide-animate-title1 {*/
    /*0% {top: 200px; opacity: 1} 100% { top: -300px; opacity: 0}*/
  /*}*/

  /*@-webkit-keyframes hide-animate-desc1 {*/
    /*0% {top: 240px; opacity: 1} 100% { top: 1000px; opacity: 0}*/
  /*}*/
}

@media (min-width: 768px) {
  .animate-title {
    top: 230px;
    font-size: 62px;
  }

  .animate-desc {
    top: 296px;
    font-size: 38px;
  }

  .animate-logo {
    height: 60px;
  }

  @-webkit-keyframes show-animate-title1 {
    0% {top: -400px; opacity: 0} 100% { top: 230px; opacity: 1}
  }

  @-webkit-keyframes hide-animate-title1 {
    0% {top: 230px; opacity: 1} 100% { top: -300px; opacity: 0}
  }

  @-webkit-keyframes hide-animate-desc1 {
    0% {top: 296px; opacity: 1} 100% { top: 600px; opacity: 0}
  }
}

@media (min-width: 992px) {
  .animate-title {
    top: 210px;
    font-size: 68px;
  }

  .animate-desc {
    top: 275px;
    font-size: 45px;
  }

  .animate-logo {
    height: 70px;
    margin-right: 10px;
  }

  @-webkit-keyframes show-animate-title1 {
    0% {top: -400px; opacity: 0} 100% { top: 210px; opacity: 1}
  }

  @-webkit-keyframes hide-animate-title1 {
    0% {top: 210px; opacity: 1} 100% { top: -300px; opacity: 0}
  }

  @-webkit-keyframes hide-animate-desc1 {
    0% {top: 275px; opacity: 1} 100% { top: 600px; opacity: 0}
  }
}

@media (min-width: 1200px) {
  .animate-title {
    top: 200px;
    font-size: 72px;
  }

  .animate-desc {
    top: 280px;
    font-size: 56px;
  }

  /*.logo-wrapper {*/
    /*top: -60px;*/
    /*position: absolute;*/
    /*left: 4px;*/
    /*font-size: 30px;*/

  /*}*/

  @-webkit-keyframes hide-animate-title1 {
    0% {top: 200px; opacity: 1} 100% { top: -300px; opacity: 0}
  }

  @-webkit-keyframes hide-animate-desc1 {
    0% {top: 280px; opacity: 1} 100% { top: 600px; opacity: 0}
  }
}