.mainbg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-position: center;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.mainbg:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    display: block;
}
    .mainbg:after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background: #000;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        -webkit-transition: opacity 2s cubic-bezier(.72,.16,.345,.875);
        transition: opacity 2s cubic-bezier(.72,.16,.345,.875);
    }

    .mainbg.loaded:after {
        opacity: 0.2;
    }

#mainp {
    line-height: 1.3em;  
    width: 90%;
    background: #fff;
    -webkit-transition: transform 0.5s cubic-bezier(.72,.16,.345,.875);
    transition: transform 0.5s cubic-bezier(.72,.16,.345,.875);
}

#mainp span {
        display: block;
        width: 830px;
        max-width: 100%;
    }

#mainp {
    position: absolute;
    top: 100%;
    z-index: 2;
    background: #fff;
    height: 1px;
    overflow: hidden;
    opacity:0;
    font-size:24px;

 
}

    #mainp.loaded {
        -webkit-transform: translateY(-3em);
        transform: translateY(-3em);
        height: auto;
        overflow: initial;
padding-top: 4.5em;
        opacity:1;
    }
#maincontainer {
    height: 0;
    opacity: 0;
    overflow: hidden;
}





#maincontainer.loaded {
    opacity: 1;
    height: auto;
    overflow: initial;
        position: relative;
    z-index: 1;
        margin-bottom: 300px;
}


@media screen and (max-width : 1010px) 
{
     #mainp
     {top:auto;
         position:relative;

     }
       #mainp.loaded {
    -webkit-transform: translateY(0);
    transform: translateY(0);
padding-top:75px;

    opacity: 1;
        padding-right: 15px;
        width:100%;
        font-size:21px;
}
       #maincontainer.loaded {

    margin-bottom: 0;

}
}