@import url(tools.css);


@-webkit-keyframes headerobj {
  0%   { opacity: 0; margin-top:40px; }
  100% { opacity: 1; margin-top:0; }
}

@keyframes headerobj {
  0%   { opacity: 0; margin-top:40px; }
  100% { opacity: 1; margin-top:0; }
}


header{height:100vh; width:100%; background:url(images/bg-header.jpg) no-repeat fixed 0 0; background-position:right 50%; background-size:cover;}
h1,
h2,
p,
nav{position:absolute; text-indent:-1000em; left:48px; background-repeat:no-repeat; background-position:0 0; opacity:0;
    -webkit-animation: headerobj 2s forwards ease-out;
            animation: headerobj 2s forwards ease-out;
}
h1{height:47px; width:264px; top:48px; background-image:url(images/logo.png);
    -webkit-animation-delay: .5s;
        animation-delay: .5s;
}
h2{height:54px; width:795px; top:151px; background-image:url(images/tagline.png);
    -webkit-animation-delay: 1.75s;
        animation-delay: 1.75s;
}
p{height:67px; width:742px; top:217px; background-image:url(images/intro.png);
    -webkit-animation-delay: 2s;
        animation-delay: 2s;
}
nav{height:118px; width:171px; top:327px; background-image:url(images/nav.png);
    -webkit-animation-delay: 2.5s;
        animation-delay: 2.5s;
}

#positioner{position:absolute; top:0; left:50%; width:1296px; margin-left:-648px;}
#zip1{height:106px; width:1200px; opacity:0; position:absolute; bottom:48px; left:50%; margin-left:-600px; background:url(images/zip1.png) no-repeat 0 0;
    -webkit-animation: headerobj 2s forwards ease-out;
            animation: headerobj 2s forwards ease-out;
            -webkit-animation-delay: 3s;
                animation-delay: 3s;
}

#zip2{position:fixed; top:-100px; left:0; width:100%; padding:12px 0; background:#faf9f7 url(images/zip2.png) no-repeat center 12px; z-index:1000; height:44px; border-bottom:6px solid rgba(35,31,32,0.2); -webkit-transition:top 0.75s ease-out; transition:top 0.75s ease-out;}
#zip2.on{top:0;}

main{background:#faf9f7;}

#why{background:url(images/bg-why.png) repeat-x 0 0;}
#why .inner{position:relative; height:420px; width:100%; background:url(images/why.png) no-repeat center top;}
#why a{position:absolute; width:268px; height:124px; background-repeat:no-repeat; background-position:0 0; top:275px; left:50%; text-decoration:none;}
#why .one{background-image:url(images/button-1-off.png); margin-left:-446px;}
#why .one.on{background-image:url(images/button-1-on.png);}
#why .two{background-image:url(images/button-2-off.png); margin-left:-134px;}
#why .two.on{background-image:url(images/button-2-on.png);}
#why .three{background-image:url(images/button-3-off.png); margin-left:178px;}
#why .three.on{background-image:url(images/button-3-on.png);}

#well{background:url(images/bg-well.png) repeat-x 0 0; position:relative; width:100%; height:664px;}
#well .inner{position:absolute; width:1296px; height:100%; top:0; left:50%; margin-left:-648px; background-repeat:no-repeat; background-position:center top; opacity:0; -webkit-transition:opacity 0.75s ease-out; transition:opacity 0.75s ease-out;}
#well .inner.on{opacity:1;}
#well .one{background-image:url(images/well1.png);}
#well .two{background-image:url(images/well2.png);}


#bottom{background:url(images/bg-bottom.png) repeat-x 0 0;}
#bottom .inner{height:602px; width:100%; background:url(images/bottom.png) no-repeat center top;}