#scroll-animate
{
    overflow: hidden;
}

#scroll-animate-main
{
    width: 100%;
    left: 0;
    position: relative;
}

#heightPage,
#heightScroll
{
    width: 10px;
    top: 0;
    position: relative;
    z-index: 99;
}

#heightPage
{
    left: 0;
}

#heightScroll
{
    right: 0;
}

meechen-top
{
    width: 100%;
    height: 100vh; /* full viewport height */
    background: url(https://raw.githubusercontent.com/hudsonmarinho/header-and-footer-parallax-effect/master/assets/images/bg-header.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

meechen-bottom
{
    width: 100%;
    height: 300px;
    background: gray;
    bottom: -300px;
    position: relative;
    z-index: -1;
}

.content
{
    height: 1000px;
    background: #ededed;
    position: relative;
    z-index: 2;
}

.wrapper-parallax {
    position: relative;
    margin-top: 100%;
    margin-bottom: 300px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    font-family: Helvetica;
    font-size: 150px;
    color: #fff;
}

header h1{}

.content h1{
    line-height: 1000px;
    color: #999;
}

footer h1
{
    line-height: 300px;
}

header,
footer,
#scroll-animate-main
{
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;

    -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
}