@media only screen and (max-width:700px){
    .heroContentWrp{
        width:95%;
        min-width:260px;
        margin:0 auto;
        position:relative;
        top:0;
        left:0;
        -webkit-transform:none;
           -moz-transform:none;
            -ms-transform:none;
             -o-transform:none;
                transform:none;
    }
    .preload .heroContentWrp{
        top:2%;
    }
        .heroContent{
            padding:60px 2em 2em 2em;
        }
}

@media only screen and (max-width:400px){
    .heroContent{
        padding:50px 1em 1em 1em;
    }
}

@media only screen and (max-height:650px){
    .heroContentWrp{
        margin:0 auto 2em auto;
    }

    .footer{
        position:relative;
        background:none;
    }
}