.background {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

.content-7, .content-8 {
  padding-top: 60px;
  padding-bottom: 60px; }

.content-8 h3 {
  margin: 0px 0px 10px; }
.content-8 p {
  margin: 0px;
  font-size: 19px; }

.content-23 {
  height: auto;
  padding: 20px 0; }

.allH {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%; }

.bg {
  width: 100%;
  height: 100%;
  z-index: -100; }
  .bg > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center; }
  .bg .bg-normal {
    z-index: 10;
    background-image: url("../img/hero.jpg");
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/hero.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/hero.jpg', sizingMethod='scale')"; }
  .bg .bg-blur {
    z-index: 20;
    background-image: url("../img/hero_blur.jpg");
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/hero_blur.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/hero_blur.jpg', sizingMethod='scale')";
    opacity: 0; }

.hero-unit {
  text-align: left;
  z-index: 2000 !important;
  margin: 50px auto !important; }
  .hero-unit .icon-app {
    background: url(../img/icon.png) no-repeat;
    width: 128px;
    height: 128px;
    margin-bottom: 20px;
    border: 4px solid rgba(50, 58, 68, 0.2);
    border-radius: 32px;
    background-clip: padding-box; }
  .hero-unit h1 {
    margin-bottom: 10px !important;
    text-transform: uppercase;
    font-size: 300% !important;
    font-weight: 100 !important;
    letter-spacing: 2px !important; }
  .hero-unit p {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 100 !important;
    letter-spacing: 2px !important; }
  .hero-unit .device2 {
    width: 100%;
    height: 100%; }

.hero-device {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 0; }
  .hero-device img {
    position: absolute;
    right: 0%;
    top: 0;
    max-height: 600px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }

.artist-caption {
  position: relative;
  bottom: 0px; }
  .artist-caption .artist-heading {
    font-size: 10px; }
  .artist-caption .artist-name a {
    margin: 10px; 
  }

.store-btn {
  width: 178px;
  height: 60px;
  display: block; }
  .store-btn .appstore {
    width: 178px;
    height: 60px; }
    .store-btn .appstore.appstore-btn {
      background: url("../img/app_store_off.png") no-repeat;
      background-size: contain;
      -webkit-transition: background 0.3s ease-in;
      -moz-transition: background 0.3s ease-in;
      transition: background 0.3s ease-in; }
      .store-btn .appstore.appstore-btn:hover {
        background: url("../img/app_store_on.png") no-repeat;
        background-size: contain; }
    .store-btn .appstore.googlestore-btn {
      background: url("../img/google_play_off.png") no-repeat;
      background-size: contain;
      -webkit-transition: background 0.3s ease-in;
      -moz-transition: background 0.3s ease-in;
      transition: background 0.3s ease-in; }
      .store-btn .appstore.googlestore-btn:hover {
        background: url("../img/google_play_on.png") no-repeat;
        background-size: contain; }
    .store-btn .appstore.coming-soon:after {
      content: "";
      width: 178px;
      height: 60px;
      background: url("../img/coming_soon.png") no-repeat;
      display: block; }

.logo-store {
  height: 80px;
  display: inline-block !important;
  text-align: center; }
  .logo-store > div {
    width: 80px;
    height: 80px;
    margin: 0 20px;
    border: 3px solid #cdcdcd;
    border-radius: 50%;
    padding: 20px;
    float: left;
    background-repeat: no-repeat;
    background-size: 30px; }
  .logo-store .app-store {
    background-image: url("../img/logo_app_store.png");
    background-position: 50% 48%; }
  .logo-store .google-play {
    background-image: url("../img/logo_gp.png");
    background-position: 55% 50%; }
  .logo-store .windows-store {
    background-image: url("../img/logo_win.png");
    background-position: 50% 50%; }


.subscribe-btn {
  width: 178px;
  height: 60px;
  display: block;
  background: #88BF59;
  border-radius: 200px;
  color: white !important;
  box-shadow: none;
  text-shadow: none;
  text-align: center;
  font-size: 20px;
  line-height: 60px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase; }
  .subscribe-btn:hover {
    background: #568032; }
  .subscribe-btn.middle-btn {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto; }

.content-23 {
  text-align: center; }

@media (max-width: 480px) {
  html, body {
    font-weight: 300 !important;
    letter-spacing: 2px !important; } }
@media (max-width: 767px) {
  .hero-unit {
    margin: 0px auto 40px !important; }

  .icon-app {
    margin: 0 auto; }

  .hero-fade {
    text-align: center; }

  .background {
    opacity: 20;
    filter: alpha(opacity=2000);
    opacity: 0.2;
    filter: alpha(opacity=20); }

  .artist-caption {
    display: none; }

  .hero-device img {
    display: none; }

  .bg-blur {
    opacity: 1; }

  .store-btn {
    margin-left: auto;
    margin-right: auto; }

  .subscribe-btn {
    margin-left: auto;
    margin-right: auto; } }
@media (min-width: 1300px) {
  .hero-device img {
    right: 10%; } }
.delay-0h {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.25s;
  -ms-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s; }

.delay-1 {
  animation-delay: 1s;
  -webkit-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s; }

.delay-1h {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s; }

.delay-2 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -moz-animation-delay: 2s; }

.delay-2h {
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s; }