.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;
    background-size: contain;
    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: -20px;
}

.artist-caption .artist-heading {
    font-size: 10px;
}

.mobinteg-logo {
    width: 140px;
    opacity: 0.6;
}

.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: "";
    height: 60px;
    background: url("../img/coming_soon.png") no-repeat;
    background-size: contain;
    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%;
}

.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;
}