/* ==================================================================
Template Specific Styles (Custom CSS here)
================================================================== */

/* Mobile App Promo(Animating Colors)
-------------------------------------------------------------- */

/* Set Font Family to teaser */
body {
    font-family: 'Dosis', sans-serif;
}

#mobileapp {
    background: none transparent;
    text-transform: uppercase;
}

#mobileapp h1 {
    -webkit-text-stroke: 0px;
}

/* Main Text */
#mobileapp .lt-main {
    font-weight: 400;
    font-size: 1.75em;
    text-transform: none;
}

/* Sub Text */
#mobileapp .lt-sub {
    color: #fff;
}

/* Sub Text Background Box Color */
#mobileapp .lt-boxed {
    background: none transparent;
}

#mobileapp .img-responsive {
    max-width: 50%;
}

/* Set Preloader Background*/
.loader-container {
    background: none #E7464F;
}

/* Set Preloader Color */
.stretcher > div, .sq-fill, .bouncer > div {
    background: none #FFF;
}

.loader::after {
    opacity: 1;
}

/* ==================================================================
Responsive styles
================================================================== */

/* Small Devices, Tablets
-------------------------------------------------------------- */
@media only screen and (min-width : 768px) {

    #mobileapp .lt-main {
        font-size: 2.75em;
    }

    #mobileapp .img-responsive {
        max-width: 80%;
    }

}

/* Medium Devices, Desktops, Laptops
-------------------------------------------------------------- */
@media only screen and (min-width : 1224px) {

    #mobileapp .lt-main {
        font-size: 3.75em;
    }

    #mobileapp .img-responsive {
        max-width: 100%;
    }

}

/* Large Devices, Wide Screens
-------------------------------------------------------------- */
@media only screen and (min-width : 1824px) {

    #mobileapp .lt-main {
        font-size: 5em;
    }

}