<div id="nav_wrap">
<h1 id="logo">THELogo</h1>
<nav role='navigation'>
<a href="#" id="intro">Introduction</a>
<a href="#" id="first">First Section</a>
<a href="#" id="second">Second Section</a>
<a href="#" id="contact">Contact<a>
</nav>
</div>
<div id="topbar-section">
<div id="top-p8-logo">Title or Logo Goes Here</div>
<div id="top-blurb"># Social Icons #</div>
</div>
<section id="hero-section" class="">
<div id="mainlogo">
<h3>welcome to blank website</h3>
<h2>a cool example of a useful sticky nav, but not really much of a site of the non-technical crowd, ya know?</h2>
<div class="THElogo">
<img src="" alt="THELogo" /></div id="THElogo">
</div>
</div>
</section>
<section id="first" class="bodysec">
<div class="copy">
<h1>First Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sed laudantium ad odit error numquam suscipit provident recusandae eum rem libero culpa? Voluptas enim provident voluptatibus aperiam dolore amet inventore!<p></div>
</section>
<section id="second" class="bodysec">
<div class="copy">
<h1>Second Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus aliquam debitis vel vero dignissimos quidem voluptatum nihil molestiae natus alias in qui blanditiis maiores illo harum iusto perferendis eligendi odit odio tempora ipsa sequi voluptatem nesciunt laboriosam iste nostrum doloribus. Fugit quis sunt laborum corrupti facere eius illo enim quisquam ea natus ducimus debitis ipsum explicabo ex dolorum atque illum placeat sed molestiae veniam labore maxime tenetur optio esse nesciunt aspernatur consequatur maiores mollitia earum similique delectus odio rem animi non est pariatur culpa. Illum accusantium eaque deserunt sed fugiat odit repellendus. Numquam odit laudantium labore hic officiis modi porro minus molestiae molestias fugit tempora asperiores nam dolor quas alias deserunt odio pariatur velit libero iure saepe consequatur necessitatibus. Ab vitae eius animi id quibusdam hic facere odit quae magnam odio ullam fugit similique et esse quis ipsam nisi! Blanditiis quis officiis similique a dolorum voluptate sint est! Minus ea harum porro reprehenderit natus.</p>
</div>
</div>
</section>
<section id="contact" class="bodysec">
<div class="copy">
<h1>Getting Started</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quisquam asperiores rerum cumque eaque soluta natus nostrum odio amet pariatur perspiciatis in quod nihil sunt ducimus vitae doloribus. Minus reiciendis unde repellat sed optio laborum autem corrupti id aliquid. Mollitia dolores accusamus consequuntur voluptate animi eos impedit. Labore aspernatur est earum reprehenderit ratione quibusdam blanditiis adipisci eum consequatur non laudantium repudiandae. Aperiam ex itaque recusandae et a inventore praesentium soluta enim sint obcaecati deserunt distinctio magni unde earum quia asperiores architecto? Vel maxime rerum harum nam ducimus es vel soluta incidunt tempore maxime illo rerum nemo non iure ab quas provident adipisci illum odit rem excepturi dolor hic vero debitis in distinctio nihil dicta quaerat itaque. Possimus quae quia nam nesciunt ullam maiores similique voluptatum ad voluptatem molestiae architecto debitis harum. Earum mollitia repellendus totam ut placeat pariatur sit deleniti natus minima reprehenderit labore officia fugit saepe. Iure in odio perspiciatis consectetur laboriosam dolorum repellendus facilis eluri dolorem maiores hic debitis accusamus! Odio earum odit veritatis quis eaque exercitationem natus soluta ipsum sit ipsam perspiciatis tempore illo accusamus quod asperiores rerum deleniti? Aspernatur eius doloremque sit officia ea temporibus iste consequuntur perspiciatis enim fugit ipsa non iure esse corporis ab sapiente tempora assumenda doloribus! Delectus earum velit pariatur nobis autem expedita minus quaerat nesciunt mollitia aliquam provident eligendi. Corporis repellat laboriosam quas magnam voluptates earum modi qui atque iusto ut laborum iure explicabo fugiat aspernatur odit dolores hic. </p>
</div>
</section>
<section id="howsec" class="bodysec">
<div class="login copy">
<h1 class="login-heading">
Yet another header?</h1>
</div>
</section>@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
.highlight{color:#657b83;background-color:#fdf6e3}.highlight .cp{color:#93a1a1;font-weight:700}.highlight .cs{color:#93a1a1;font-weight:700;font-style:italic}.highlight .gd{background-color:#fdd}.highlight .gd .x{background-color:#faa}.highlight .ge{font-style:italic}.highlight .gi{background-color:#dfd}.highlight .gi .x{background-color:#afa}.highlight .go{color:#657b83}.highlight .gu{color:#d33682;font-weight:700}.highlight .gs{font-weight:700}.highlight .gr,.highlight .gt{color:#d33682}.highlight .gh,.highlight .gp{color:#93a1a1}.highlight .nb{color:#859900}.highlight .ni{color:#d33682}.highlight .nt{color:#268bd2}.highlight .w{color:#93a1a1}.highlight .sr{color:#859900}.highlight .ss{color:#2aa198}.highlight .c,.highlight .c1,.highlight .cm{color:#93a1a1;font-style:italic}.highlight .k,.highlight .kc,.highlight .kd,.highlight .kp,.highlight .kr,.highlight .kt,.highlight .o,.highlight .ow{font-weight:700}.highlight .k{color:#859900}.highlight .kt{color:#b58900}.highlight .bp,.highlight .nn{color:#586e75}.highlight .nc{color:#b58900;font-weight:700}.highlight .il,.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .na,.highlight .nv,.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#2aa198}.highlight .no{color:#b58900}.highlight .vc,.highlight .vg,.highlight .vi{color:#268bd2}.highlight .ne,.highlight .nf{color:#dc322f;font-weight:700}*{box-sizing:border-box;box-sizing:border-box;box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}section.neat,section.usage{box-shadow:0 -1px #bfccd4,0 -1px 0 1px #d8e1e5,0 -2px 0 2px #bfccd4;background-color:#f1f4f6;margin:3rem 0 0;padding:3rem 0 8rem}section.apps h3,section.neat h3{margin-bottom:3rem;text-align:center}@media screen and (max-width:480px){section.apps h3,section.neat h3{margin-bottom:1.5rem}}body,html{background:#f5f4f1;font-size:16px}body{min-width:320px;font-size:16px;font-family:proxima-nova-soft,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#5a5a5a}div.inner-wrapper{padding:20px}h1,h2,h3,h4,h5,h6{font-family:proxima-nova-soft,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:100;line-height:1.5}h3{font-size:3rem;font-weight:800}@media screen and (max-width:480px){h3{font-size:2rem}}h4{font-size:1.75rem;font-weight:600;margin-top:1.75em}@media screen and (max-width:480px){h4{font-size:1.25rem}}h5{font-size:1.375rem;font-weight:600;margin-top:1em}@media screen and (max-width:480px){h5{font-size:1.125em}}p{font-size:1.125rem;margin:.5em 0;line-height:1.5em}a,a:active,a:link,a:visited{transition:all .15s ease-out 0;transition:all .15s ease-out 0;transition:all .15s ease-out 0;color:#de5c00;text-decoration:none}a:hover{color:#923c00;text-decoration:underline}i{text-transform:italic}code{font-size:.8125em;font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace}::selection{background:#fefa83}::selection{background:#fefa83}.container{*zoom:1;max-width:68em;margin-left:auto;margin-right:auto}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}@media screen and (max-width:68em){.container{padding:0 20px}}button{border:1px solid #076fe4;border-radius:3px;box-shadow:inset 0 1px 0 0 #8ebcf1;color:#fff;display:inline-block;font-size:11px;font-weight:700;background-color:#4294f0;background-image:gradient(linear,left top,left bottom,color-stop(0%,#4294f0),color-stop(100%,#0776f3));background-image:linear-gradient(#4294f0,#0776f3);background-image:linear-gradient(#4294f0,#0776f3);padding:7px 18px;text-decoration:none;text-shadow:0 1px 0 #0065d6;background-clip:padding-box}button:hover:not(:disabled){box-shadow:inset 0 1px 0 0 #60a2ec;cursor:pointer;background-color:#2f87ea;background-image:gradient(linear,left top,left bottom,color-stop(0%,#2f87ea),color-stop(100%,#086fe3));background-image:linear-gradient(#2f87ea,#086fe3);background-image:linear-gradient(#2f87ea,#086fe3)}button:active:not(:disabled){border:1px solid #076fe4;box-shadow:inset 0 0 8px 4px #0868d3,inset 0 0 8px 4px #0868d3,0 1px 1px 0 #eee}button:disabled{opacity:.5;cursor:not-allowed}.highlight pre{border-radius:3px;background-color:#fffbea;border:1px solid #d2caa7;font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;margin-bottom:2em;overflow:scroll;padding:7px;width:100%}a.button{border-radius:5px;box-shadow:inset 0 1px rgba(255,255,255,.4);display:block;float:left;padding:20px 0;font-size:.875rem;font-weight:600;text-align:center;text-transform:uppercase;width:154px}a.button:hover{text-decoration:none}a.button:active{box-shadow:inset 0 0 10px rgba(0,0,0,.2);transition:.25s;transition:.25s;transition:.25s}a.button.installation{background-color:#afe4ec;background-image:gradient(linear,left top,left bottom,color-stop(0%,#afe4ec),color-stop(100%,#68cad8));background-image:linear-gradient(#afe4ec,#68cad8);background-image:linear-gradient(#afe4ec,#68cad8);border:1px solid #40a9b8;color:#156571;text-shadow:0 1px #b2e4eb}a.button.installation:hover{background-color:#c4ebf1;background-image:gradient(linear,left top,left bottom,color-stop(0%,#c4ebf1),color-stop(100%,#7cd1dd));background-image:linear-gradient(#c4ebf1,#7cd1dd);background-image:linear-gradient(#c4ebf1,#7cd1dd)}a.button.docs{background-color:#afece4;background-image:gradient(linear,left top,left bottom,color-stop(0%,#afece4),color-stop(100%,#68d8ca));background-image:linear-gradient(#afece4,#68d8ca);background-image:linear-gradient(#afece4,#68d8ca);border:1px solid #22baa8;color:#216e64;margin-left:20px;text-shadow:0 1px #b0ebe4}a.button.docs:hover{background-color:#c4f1eb;background-image:gradient(linear,left top,left bottom,color-stop(0%,#c4f1eb),color-stop(100%,#7cddd1));background-image:linear-gradient(#c4f1eb,#7cddd1);background-image:linear-gradient(#c4f1eb,#7cddd1)}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.show{animation-name:poopin;animation-name:poopin;animation-name:poopin;animation-duration:.5s;animation-duration:.5s;animation-duration:.5s;animation-timing-function:cubic-bezier(0.175,.885,.32,1.275);animation-timing-function:cubic-bezier(0.175,.885,.32,1.275);animation-timing-function:cubic-bezier(0.175,.885,.32,1.275);animation-fill-mode:forwards;animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes poopin{50%{opacity:0;transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@-moz-keyframes poopin{50%{opacity:0;transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@keyframes poopin{50%{opacity:0;transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}.hide{animation-duration:.5s;animation-duration:.5s;animation-duration:.5s;animation-fill-mode:forwards;animation-fill-mode:forwards;animation-fill-mode:forwards;animation-name:poopout;animation-name:poopout;animation-name:poopout;animation-timing-function:cubic-bezier(0.6,-.28,.735,.045);animation-timing-function:cubic-bezier(0.6,-.28,.735,.045);animation-timing-function:cubic-bezier(0.6,-.28,.735,.045)}@-webkit-keyframes poopout{from{transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);opacity:1}50%{opacity:0;transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}}@-moz-keyframes poopout{from{transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);opacity:1}50%{opacity:0;transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}}@keyframes poopout{from{transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);
transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);opacity:1}50%{opacity:0;transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}}header{padding:2rem 0}header .buttons{*zoom:1;float:left;width:328px}header .buttons:after,header .buttons:before{content:" ";display:table}header .buttons:after{clear:both}@media screen and (max-width:700px){header .buttons{display:block;float:left;margin-right:2.35765%;width:100%;margin-bottom:20px}header .buttons:last-child{margin-right:0}header .buttons .button{margin:0;display:block;float:left;margin-right:2.35765%;width:48.82117%}header .buttons .button:last-child{margin-right:0}}header h1.brand{color:transparent;font:0/0 a;text-shadow:none;width:calc(100% - (154px * 2 + 20px));width:calc(100% - (154px * 2 + 20px));width:calc(100% - (154px * 2 + 20px));width:calc(100% - (154px * 2 + 20px));background:url(../images/shared/bourbon-logo.png) no-repeat;display:block;height:4.125rem;float:left;margin-bottom:2rem}@media screen and (max-width:700px){header h1.brand{display:block;float:left;margin-right:2.35765%;width:100%}header h1.brand:last-child{margin-right:0}}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){header h1.brand{background-image:url(../images/shared/bourbon-logo@2x.png);background-size:contain}}.content-wrapper{overflow:hidden}section.demo{box-shadow:inset 0 -1px #eb412b,0 1px #e3e2dd;background-color:#f47a33;background-image:gradient(linear,left top,left bottom,color-stop(0%,#f47a33),color-stop(100%,#f26234));background-image:linear-gradient(#f47a33,#f26234);background-image:linear-gradient(#f47a33,#f26234);border-top:1px solid #eb412b;margin-bottom:-100px}section.demo h2{color:#fff;font-size:4.5rem;line-height:1.2em;padding:50px 0;text-align:center;text-shadow:0 2px 2px #af5422}@media screen and (max-width:768px){section.demo h2{font-size:2rem;line-height:1.4em}}section.demo .browser-wrapper{border-image:url(../images/marketing/browser-frame.png) 23 10 0 62 repeat;border-image:url(../images/marketing/browser-frame.png) 23 10 0 62 repeat;border-image:url(../images/marketing/browser-frame.png) 23 10 0 62 repeat;border-image:url(../images/marketing/browser-frame.png) 23 10 0 62 repeat;border-radius:6px 6px 0 0;border-style:solid;border-width:23px 10px 0 62px;margin:0 auto;max-width:960px}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){section.demo .browser-wrapper{border-image:url(../images/marketing/browser-frame@2x.png) 46 20 0 124 repeat;border-image:url(../images/marketing/browser-frame@2x.png) 46 20 0 124 repeat;border-image:url(../images/marketing/browser-frame@2x.png) 46 20 0 124 repeat;border-image:url(../images/marketing/browser-frame@2x.png) 46 20 0 124 repeat;border-width:23px 10px 0 62px}}section.demo #browser-container{background:#494f57;box-shadow:0 0 3px rgba(0,0,0,.3);margin:0 auto;max-width:960px;position:relative;font-size:18px;border-radius:0 0 5px 5px}.browser-code{position:relative;color:#888;padding-left:30px;width:100%;overflow-x:scroll;overflow-y:hidden}.browser-code pre{background:#494f57;border-radius:0 0 5px 5px}.browser-code .row ::before{background:rgba(255,255,255,0);content:"";height:19px;left:0;position:absolute;width:100%;z-index:0;transition:background .3s;transition:background .3s;transition:background .3s}.browser-code .row.active ::before,.browser-code .row:hover ::before{background:rgba(255,255,255,.025)}.browser-code .row:hover{cursor:pointer}.browser-code .a{color:#F3712B}.browser-code .b{color:#6aade0}.browser-code .c{color:#90d8e3}.tooltip{background:#fff;border-radius:4px;padding:15px 30px 30px;position:absolute;opacity:0;top:0;left:60%;box-shadow:1px 1px 3px rgba(0,0,0,.2);pointer-events:none}.tooltip::before{content:"";height:12px;width:12px;position:absolute;left:-6px;top:46%;transform:rotate(45deg);transform:rotate(45deg);transform:rotate(45deg);transform:rotate(45deg);transform:rotate(45deg);background:#fff;line-height:0}.tooltip p{margin-top:0}.tooltip code{color:#5A5A5A}.show{pointer-events:auto}.tooltip.pos-under{left:20px!important;padding:15px 20px 20px!important;width:auto!important}.tooltip.pos-under::before{left:60px;top:-5px;background:#fff}.tooltip.pos-under code{white-space:pre-wrap}@media screen and (max-width:640px){.browser-code{padding-left:0}.tooltip{width:90%!important;left:20px!important;padding:15px 20px 20px!important}.tooltip::before{left:60px;top:-5px;background:#fff}.tooltip code{white-space:pre-wrap}}section.examples{box-shadow:0 -5px 0 5px white,0 -6px 0 6px #eb412b;background-color:#f5f4f1;border-top:1px solid #e3e2dd;padding-top:100px}section.examples .sass-wrapper{display:block;float:left;margin-right:2.35765%;width:40.29137%}section.examples .sass-wrapper:last-child{margin-right:0}@media screen and (max-width:768px){section.examples .sass-wrapper{display:block;float:left;margin-right:2.35765%;width:100%}section.examples .sass-wrapper:last-child{margin-right:0}}section.examples .css-wrapper{display:block;float:left;width:57.35098%;margin-right:0}section.examples .css-wrapper:last-child{margin-right:0}@media screen and (max-width:768px){section.examples .css-wrapper{display:block;float:left;margin-right:2.35765%;width:100%}section.examples .css-wrapper:last-child{margin-right:0}}@media screen and (max-width:480px){section.usage{margin:1.5rem 0;padding:1.5rem 0 4rem}}section.usage h3{font-size:2rem;margin-bottom:4rem;text-align:center;text-transform:uppercase}@media screen and (max-width:480px){section.usage h3{margin-bottom:2rem}}section.usage img.ruby{display:block;float:none;margin:1rem auto;width:125px}section.usage .install-info{display:block;float:left;margin-right:2.35765%;width:31.76157%;margin-left:34.11922%;clear:both;text-align:center}section.usage .install-info:last-child{margin-right:0}@media screen and (max-width:768px){section.usage .install-info{display:block;float:left;width:100%;margin:0}section.usage .install-info:last-child{margin-right:0}}section.usage .install-instructions{display:block;float:left;margin-right:2.35765%;width:65.88078%;margin-left:17.05961%;clear:both}section.usage .install-instructions:last-child{margin-right:0}@media screen and (max-width:768px){section.usage .install-instructions{display:block;float:left;width:100%;margin:0}section.usage .install-instructions:last-child{margin-right:0}}section.usage span a{width:100%;margin-top:3rem;text-align:center;display:block}section.apps{background-color:#d8e1e5;border-bottom:1px solid #ced1d3;border-top:1px solid #ced1d3;color:#535454;padding:6rem 0;text-shadow:0 1px #fff}@media screen and (max-width:480px){section.apps{padding:3rem 0}}section.apps ul.app-list{display:block;float:left;margin-right:2.35765%;width:40.29137%;margin-top:3rem}section.apps ul.app-list:last-child{margin-right:0}@media screen and (max-width:768px){section.apps ul.app-list{display:block;float:left;margin-right:2.35765%;width:100%}section.apps ul.app-list:last-child{margin-right:0}}@media screen and (max-width:480px){section.apps ul.app-list{margin-top:1.5rem}}section.apps ul.app-list li{*zoom:1;margin-bottom:2rem;padding-right:20px}section.apps ul.app-list li:after,section.apps ul.app-list li:before{content:" ";display:table}section.apps ul.app-list li:after{clear:both}section.apps ul.app-list li>a{color:transparent;font:0/0 a;text-shadow:none;display:block;height:71px;width:71px;float:left}section.apps ul.app-list li>a.codekit{background:url(../images/marketing/codekit.png) no-repeat}section.apps ul.app-list li>a.hammer{background:url(../images/marketing/hammer.png) no-repeat}section.apps ul.app-list li>a.livereload{background:url(../images/marketing/livereload.png) no-repeat}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){section.apps ul.app-list li>a.codekit{background:url(../images/marketing/codekit@2x.png) no-repeat;background-size:71px}section.apps ul.app-list li>a.hammer{background:url(../images/marketing/hammer@2x.png) no-repeat;background-size:71px}section.apps ul.app-list li>a.livereload{background:url(../images/marketing/livereload@2x.png) no-repeat;background-size:71px}}section.apps ul.app-list li p{padding-left:90px}section.apps ul.app-list li p a{color:#535454}section.apps img{display:block;float:left;width:57.35098%;margin-right:0}section.apps img:last-child{margin-right:0}@media screen and (max-width:768px){section.apps img{display:block;float:left;margin-right:2.35765%;width:100%}section.apps img:last-child{margin-right:0}}section.websites{padding:6rem 0}@media screen and (max-width:480px){section.websites{padding:3rem 0}}section.websites a.website{*zoom:1;color:transparent;font:0/0 a;text-shadow:none;float:left;margin-right:2.35765%;width:23.23176%;box-shadow:0 1px 2px rgba(0,0,0,.2);border:3px solid #fff;display:block;margin-top:2rem}section.websites a.website:after,section.websites a.website:before{content:" ";display:table}section.websites a.website:after{clear:both}section.websites a.website:last-child{margin-right:0}@media screen and (max-width:768px){section.websites a.website{display:block;float:left;margin-right:2.35765%;width:48.82117%}section.websites a.website:last-child,section.websites a.website:nth-child(2n){margin-right:0}}@media screen and (max-width:350px){section.websites a.website{display:block;float:left;margin-right:2.35765%;width:100%}section.websites a.website:last-child{margin-right:0}}section.websites a.website img{max-width:100%}section.websites a.website img:hover{filter:brightness(5%);filter:brightness(105%);filter:brightness(105%)}section.neat{padding-bottom:0}section.neat img{border:0;display:block;height:auto;max-width:100%;interpolation-mode:bicubic}@media screen and (max-width:480px){section.neat img{margin:0 auto;margin-bottom:20px}}section.neat div.neat-images{display:block;float:left;margin-right:2.35765%;width:53.08608%;margin-left:25.58941%;clear:both}section.neat div.neat-images:last-child{margin-right:0}@media screen and (max-width:768px){section.neat div.neat-images{display:block;float:left;margin-right:2.35765%;width:74.41059%;margin-left:12.79471%}section.neat div.neat-images:last-child{margin-right:0}}@media screen and (max-width:480px){section.neat div.neat-images{display:block;float:left;margin-right:2.35765%;width:100%;margin-left:0}section.neat div.neat-images:last-child{margin-right:0}}section.neat div.neat-images .neat-demo{transition:all .15s ease-out 0;transition:all .15s ease-out 0;transition:all .15s ease-out 0;display:block;float:left;width:55.81334%;margin-right:3%;max-width:300px}section.neat div.neat-images .neat-demo:last-child{margin-right:0}section.neat div.neat-images .neat-demo:hover{transform:translateY(-10px);transform:translateY(-10px);transform:translateY(-10px);transform:translateY(-10px);transform:translateY(-10px)}section.neat div.neat-images .neat-demo a{display:block;padding-right:10%}@media screen and (max-width:480px){section.neat div.neat-images .neat-demo a{padding:0}}section.neat div.neat-images .neat-demo img{box-shadow:0 1px 2px rgba(0,0,0,.2)}section.neat div.neat-images .neat-logo{margin-top:24px;display:block;margin-right:4.44119%;width:39.74547%;float:right}section.neat div.neat-images .neat-logo:last-child{margin-right:0}section.neat div.neat-images .neat-logo a.more-info{margin-top:10px;padding-left:2%;display:block}@media screen and (max-width:480px){section.neat div.neat-images .neat-demo,section.neat div.neat-images .neat-logo{float:none;margin:0 auto 30px}section.neat div.neat-images .neat-demo:last-child,section.neat div.neat-images .neat-logo:last-child{margin-right:auto}section.neat div.neat-images .neat-demo a.more-info,section.neat div.neat-images .neat-logo a.more-info{text-align:center}}section.neat .neat-tagline{background-color:#53aee0;background-image:gradient(linear,left top,left bottom,color-stop(0%,#53aee0),color-stop(100%,#3da4dc));background-image:linear-gradient(#53aee0,#3da4dc);background-image:linear-gradient(#53aee0,#3da4dc);margin-top:-48px;padding:100px 0}@media screen and (max-width:480px){section.neat .neat-tagline{margin-top:-88px}}section.neat .neat-tagline .container{*zoom:1;max-width:68em;margin-left:auto;margin-right:auto}section.neat .neat-tagline .container:after,section.neat .neat-tagline .container:before{content:" ";display:table}section.neat .neat-tagline .container:after{clear:both}section.neat .neat-tagline h3{padding:0 10px;padding-right:2.35765%;width:76.76824%;color:#fff;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:100;margin:0 auto;text-align:center;text-shadow:0 2px 2px #1b6c98}section.neat .neat-tagline h3:last-child{width:74.41059%;padding-right:0}section.neat .neat-tagline h3 strong{font-weight:500}footer{background-color:#494f57;padding:3rem 0}footer section.footer-text p{color:#bbb}footer section.buttons{margin-top:2rem;display:block;float:left;margin-right:2.35765%;width:100%}footer section.buttons:last-child{margin-right:0}footer section.buttons .button.docs,footer section.buttons .button.installation{border-color:#000}@media screen and (max-width:480px){footer section.buttons .button.docs{display:block;float:left;width:100%;margin:10px 0 0}footer section.buttons .button.docs:last-child{margin-right:0}}@media screen and (max-width:480px){footer section.buttons .button.installation{display:block;float:left;margin-right:2.35765%;width:100%}footer section.buttons .button.installation:last-child{margin-right:0}}nav.bourbon{*zoom:1;font-smoothing:antialiased;background-color:#5b5e63;padding:0 2em 0 1em}nav.bourbon:after,nav.bourbon:before{content:" ";display:table}nav.bourbon:after{clear:both}@media screen and (max-width:31.875em){nav.bourbon{padding:0}}nav.bourbon ul{text-align:center}@media screen and (min-width:56.3125em){nav.bourbon ul{float:left;text-align:left}}nav.bourbon li{display:inline-block}nav.bourbon a{background-position:1em center;background-repeat:no-repeat;color:#fff;display:inline-block;font-weight:700;padding:1em 1em 1em 3em}@media screen and (max-width:32.1875em){nav.bourbon a{padding:.75em .5em;text-align:center}}@media screen and (max-width:56.25em){nav.bourbon a{display:block}}nav.bourbon a:hover{background-color:#434548;text-decoration:none}nav.bourbon a.current{background-color:#4f5156}nav.bourbon a.bourbon{background-image:url(/images/bourbon-nav/bourbon.png)}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){nav.bourbon a.bourbon{background-image:url(/images/bourbon-nav/bourbon@2x.png);background-size:20%}}@media screen and (max-width:32.1875em){nav.bourbon a.bourbon{background-image:none}}nav.bourbon a.neat{background-image:url(/images/bourbon-nav/neat.png)}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){nav.bourbon a.neat{background-image:url(/images/bourbon-nav/neat@2x.png);background-size:20%}}@media screen and (max-width:32.1875em){nav.bourbon a.neat{background-image:none}}nav.bourbon a.bitters{background-image:url(/images/bourbon-nav/bitters.png)}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){nav.bourbon a.bitters{background-image:url(/images/bourbon-nav/bitters@2x.png);background-size:20%}}@media screen and (max-width:32.1875em){nav.bourbon a.bitters{background-image:none}}nav.bourbon a.refills{background-image:url(/images/bourbon-nav/refills.png)}@media only screen and (min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (min-device-pixel-ratio:1.3 / 1),only screen and (min-resolution:125dpi),only screen and (min-resolution:1.3dppx){nav.bourbon a.refills{background-image:url(/images/bourbon-nav/refills@2x.png);background-size:20%}}@media screen and (max-width:32.1875em){nav.bourbon a.refills{background-image:none}}nav.bourbon h1{color:rgba(255,255,255,.6);float:right;font-size:1em;line-height:1}@media screen and (max-width:56.25em){nav.bourbon h1{display:none}}nav.bourbon h1 a{padding:1em 0}nav.bourbon h1 a:hover{background-color:transparent}
* {
box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
font-size: 62.5%;
}
h1 {
font-size: 75px;
font-size: 7.5rem;
margin: 20px 0;
margin: 2rem 0;
color: #F2F2F2;
}
body {
font-family: 'Source Sans Pro', helvetica, arial, sans-serif;
}
section {
height: 100%;
min-height: 25rem;
min-height: 250px;
}
.bodysec {
min-height: 700px;
min-height: 70rem;
}
#hero-sec {
background: black;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
margin-bottom: 80px;
margin-bottom: 8rem;
}
#nav_wrap {
background-color: #333333;
border-color: #43749a;
border-width: 1px;
border-style: solid;
border-width: 0;
color: #f2f2f2;
height: 44px;
height: 4.4rem;
text-align: left;
width: 100%;
position: absolute;
bottom: 0;
overflow: hidden;
z-index: 100;
box-shadow: 0 0 4px #343434;
}
nav {
background-color: #333333;
border: 1px solid #aaa;
font-family: 'Source Sans Pro';
width: 100%;
margin: 0 0 0 auto;
transition: .5s;
border-width: 0 0 1px 0;
}
#nav_wrap nav a {
color:white;
font-size: 16px;
text-transform: uppercase;
}
.nav_animate {
width: 82.5%;
transition: .5s;
}
nav a {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
color: #f2f2f2;
/* width: 20%;*/
text-align: center;
line-height: 40px;
text-transform: uppercase;
}
section:nth-child(3n-1) {
background: #5289b4;
}
section:nth-child(3n) {
background: #fafeff;
}
section:nth-of-type(3n-1) h1
{
color: #505050;
}
section:nth-child(3n+1) {
background: #569a56;
}
nav a:hover {
border-bottom: 50px solid #4a4a4a;
transition: .4s;
box-sizing: border-box !important;
line-height: 440%;
}
.sticky {
position: fixed !important;
top: 0;
}
#logo, #social {
position: absolute;
color: #fafeff;
z-index: 100;
transition: 1s;
line-height: 80px;
}
#logo {
left: -150px;
font-size: 25px;
height: 65px;
line-height: 65px;
padding: 0 10px;
margin: 0;
cursor: pointer;
font-weight: bolder;
}
#social {
top: -7px;
right: -150px;
font-size: 35px;
z-index: 100;
color: #4a4a4a;
}
#mainlogo {
font-size: 36px;
color: white;
display: inline-block;
padding: 35px;
position: absolute;
height: 225px;
line-height: 100px;
top: 50%;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000;
}
.THElogo {
display: block;
position: relative;
margin: 4rem auto 0;
width: 350px;
height: 150px;
border: 8px solid #ab2323;
padding: 20px 0;
}
#mainsocial {
font-size: 35px;
line-height: 80px;
}
.right {
position: relative;
float: right;
}
img.right {
margin: 0 0 0 40px;
border-radius: 200px;
}
.copy {
padding: 20px 80px;
font-size: 24px;
text-align: justify;
}
#iconrow {
font-size: 300%;
text-align: justify;
margin-top: 50px;
color: #505050;
}
#iconrow::after {
content: '';
display: inline-block;
width: 100%;
}
.center {
text-align: center;
}
.large {
font-size: 45px;
}
.hoverblk {
transition: .3;
}
.hoverblk:hover {
color: #5656B3;
transition: .3s;
}
.login {
margin: 50px auto 0;
}
.input-txt {
background: #3498DB;
border: 0;
border-bottom: 1px dotted rgba(250, 250, 250, 0.4);
box-sizing: border-box;
color: #fff;
font-size: 1em;
padding: 20px 10px;
transition: background-color .5s ease-in-out;
width: 100%;
}
.input-txt:focus {
background-color: #4478a0;
}
.login-footer {
float: left;
margin: 10px 0;
overflow: hidden;
width: 100%;
}
.btn {
background: #FAFEFF;
border: 0;
color: #505050;
padding: 15px 30px;
}
.btn--right {
float: right;
}
.icon {
display: inline-block;
}
.icon--min {
font-size: .9em;
}
.lnk {
color: #fff;
font-size: .8em;
line-height: 3em;
text-decoration: none;
}
.input-txt:placeholder {
color: #828282;
}
.input-txt:input-placeholder {
color: #828282;
}
.input-txt::input-placeholder {
color: #828282;
}
textarea, input[type=text], input[type=password] {
display: inline-block;
color: #505050;
border: 0;
outline: 0;
resize: none;
font: inherit;
font-size: 1em;
margin: 0;
margin-top: .5em;
padding: .5em;
min-width: 5em;
height: 2em;
border-bottom: 1px dotted rgba(250, 254, 255, 0.4);
background: #fafeff;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #D4D8D9;
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
h1 {
font-size: 100px;
margin: 20px 0;
color: #F2F2F2;
}
body {
font-family: 'Source Sans Pro', helvetica, arial, sans-serif;
}
section {
height: 100%;
min-height: 250px;
}
.bodysec {
min-height: 700px;
}
#hero-section {
background: black;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
#nav_wrap {
background-color: #5289b4;
border-color: #43749a;
border-width: 1px;
border-style: solid;
border-width: 0;
color: #fafeff;
height: 64px;
text-align: left;
width: 100%;
position: absolute;
bottom: 0;
overflow: hidden;
z-index: 100;
box-shadow: 0 0 4px #343434;
}
nav {
background-color: #333333;
border-color: #df2e1b;
border-width: 1px;
border-style: solid;
font-family: 'Source Sans Pro';
width: 100%;
margin: 0 0 0 auto;
transition: .5s;
border-width: 0 0 1px 0;
}
.nav_animate {
width: 82.5%;
transition: .5s;
}
nav a {
display: inline-block;
font-size: 21px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
line-height: 65px;
text-transform: uppercase;
}
section:nth-child(3n-1) {
background: #5289b4;
}
section:nth-child(3n) {
background: #fafeff;
}
section:nth-of-type(3n-1) h1
{
color: #505050;
}
section:nth-child(3n+1) {
background: black;
}
nav a:hover {
border-bottom: 5px solid #4a4a4a;
transition: .4s;
box-sizing: border-box !important;
height: 64px;
line-height: 64px;
}
.sticky {
position: fixed !important;
top: 0;
}
#logo, #social {
position: absolute;
color: #fafeff;
z-index: 100;
transition: 1s;
line-height: 80px;
}
#logo {
left: -150px;
font-size: 25px;
height: 65px;
line-height: 65px;
padding: 0 10px;
margin: 0;
cursor: pointer;
font-weight: bolder;
}
#social {
top: -7px;
right: -150px;
font-size: 35px;
z-index: 100;
color: #4a4a4a;
}
#mainlogo {
font-size: 36px;
color: white;
display: inline-block;
padding: 35px;
position: absolute;
height: 225px;
line-height: 100px;
top: 50%;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000;
}
#mainsocial {
font-size: 35px;
line-height: 80px;
}
.right {
position: relative;
float: right;
}
img.right {
margin: 0 0 0 40px;
border-radius: 200px;
}
.copy {
padding: 20px 80px;
font-size: 24px;
text-align: justify;
}
#iconrow {
font-size: 300%;
text-align: justify;
margin-top: 50px;
color: #505050;
}
#iconrow::after {
content: '';
display: inline-block;
width: 100%;
}
.center {
text-align: center;
}
.large {
font-size: 45px;
}
.hoverblk {
transition: .3;
}
.hoverblk:hover {
color: #5656B3;
transition: .3s;
}
.login {
margin: 50px auto 0;
}
.input-txt {
background: #3498DB;
border: 0;
border-bottom: 1px dotted rgba(250, 250, 250, 0.4);
box-sizing: border-box;
color: #fff;
font-size: 1em;
padding: 20px 10px;
transition: background-color .5s ease-in-out;
width: 100%;
}
.input-txt:focus {
background-color: #4478a0;
}
.login-footer {
float: left;
margin: 10px 0;
overflow: hidden;
width: 100%;
}
.btn {
background: #FAFEFF;
border: 0;
color: #505050;
padding: 15px 30px;
}
.btn--right {
float: right;
}
.icon {
display: inline-block;
}
.icon--min {
font-size: .9em;
}
.lnk {
color: #fff;
font-size: .8em;
line-height: 3em;
text-decoration: none;
}
.input-txt:placeholder {
color: #828282;
}
.input-txt:input-placeholder {
color: #828282;
}
.input-txt::input-placeholder {
color: #828282;
}
textarea, input[type=text], input[type=password] {
display: inline-block;
color: #505050;
border: 0;
outline: 0;
resize: none;
font: inherit;
font-size: 1em;
margin: 0;
margin-top: .5em;
padding: .5em;
min-width: 5em;
height: 2em;
border-bottom: 1px dotted rgba(250, 254, 255, 0.4);
background: #fafeff;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #D4D8D9;
}
a:hover{text-decoration:none;}
#topbar-section {
background: black;
}
#top-p8-logo {
background: black;
font-size: 2rem;
color: white;
padding: 1.5rem;
float: left;
}
#top-blurb {
background: black;
font-size: 2rem;
color: white;
padding: 1.5rem;
float: right;
}
#nav_wrap nav {
margin: 0 auto;
width: 55%;
}
#nav_wrap nav a {
text-align: center;
display: inline-block;
float :left;
margin: 0 auto;
margin-left: 3%;
margin-right: 3%;
}
div#nav_wrap {
background: #333;
}var $window = $(window),
height = $window.height(),
width = $window.width(),
navheight = $('#nav_wrap').height();
$(window).resize(function() {
height = $window.height(),
width = $window.width(),
navheight = $('#nav_wrap').height();
});
function sticky(){
var scrollTop = $window.scrollTop();
if (scrollTop > (height - navheight)) {
$('#nav_wrap').addClass('sticky');
$('nav').addClass('nav_animate');
setTimeout(function(){
$('#logo').css({
'left': 3 + '%',
'transition':'.5s'
});
$('#social').css({
'right': 5 + '%',
'transition':'.5s'
});
}, 200);
} else {
$('#nav_wrap').removeClass('sticky');
$('nav').removeClass('nav_animate');
setTimeout(function(){
$('#logo').css({
'left':-150,
'transition':'.5s'
});
}, 200);
}
}
$window.on('touchmove', sticky);
$window.on('scroll', sticky);
//Navigational Menu
$('nav a').click(function(a){
var menuPlace = $(this).index();
a.preventDefault();
$('html, body').animate({
scrollTop : $('section').eq(menuPlace).offset().top - $('nav').height()
}, 700);
});
External CSS
This Pen doesn't use any external CSS resources.