<div id="nav">
  <div class="brand"><h1>a thing</h1></div>
  <div class="menu">
    <ul>
      <li><a href="#blank-one" class="scroll">One</a></li>
      <li><a href="#blank-two" class="scroll">Two</a></li>
      <li><a href="#blank-three" class="scroll">Three</a></li>
    </ul>
  </div>
</div>

<div id="blank-one" class="blank-one">
  <h2>Magna Sit</h2>
</div>

<div class="white">
  <div class="text"><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p></div>
</div>

<div id="blank-two" class="blank-two">
  <h2>Cras Tellus</h2>
</div>

<div class="black">
  <div class="text"><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p></div>
</div>

<div id="blank-three" class="blank-three">
  <h2>Mattis Nibh</h2>
</div>

<div class="white">
  <div class="text"><p>Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>

@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);

*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

div {
  width: 100%;
  height: 100%;
  font-family: 'Ropa Sans', sans-serif;
}

#nav {
  height: 80px;
  font-size: 36px;
  margin-top: 0;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(255, 255, 255, 0.75);
  position: fixed;
  z-index: 100;
  overflow: hidden;
}

#nav .sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

#nav .brand {
  font-size: 40px;
  line-height: 80px;
  text-transform: uppercase;
  float: left;
  width: 50%;
  color: rgb(50, 50, 50);
}

#nav menu {
  float: left;
  width: 50%;
}

#nav ul {
  text-align: right;
}

#nav li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  font-size: 20px;
  line-height: 80px;
  text-transform: lowercase;
}

a {
  color: rgb(50, 50, 50);
  text-decoration: none;
  transition: all .25s ease-in-out;
}

a:hover {
  color: rgb(100, 100, 100);
  border-bottom: 4px solid rgb(100, 100, 100);
}

.black {
  background-image: url(https://subtlepatterns.com/patterns/gray_sand.png); background-position: initial initial; background-repeat: initial initial; 
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

.white {
  background-image: url(https://subtlepatterns.com/patterns/white_carbon.png); background-position: initial initial; background-repeat: initial initial; 
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.blank-one {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVQIHWP8//8/AwwwMjL+Z0LmACUZwQIgGRAHJAki4ByQAAAg9BADCJJs7QAAAABJRU5ErkJggg==) repeat,
 url(https://1.bp.blogspot.com/_7xI3tGf5dMY/TUXjiEOE09I/AAAAAAAAAAs/2VgUkofo-ws/s1600/foggy+forest+3.jpg) right bottom no-repeat fixed;
  text-align: center;
}

.blank-two {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIHWNkYGD4DwSMQBoMGIEcGBtMM8F4jIyMYBkMFQDP0wr/yEGXyAAAAABJRU5ErkJggg==) repeat,
 url(http://www.chrishoneysett.com/data/photos/174_1trees_in_fog_16bit.jpg) center center no-repeat fixed;
  text-align: center;
}

.blank-three {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAS0lEQVQYGY2P0QoAIAgDW///z+aCwZSEejHWdUxExPIDIKOAZ7xvDwRxel5AQQxp7PA1OiRTh9nl2UkfJGFzZeMk/AXSULYelflwAPHTKwUaIRJKAAAAAElFTkSuQmCC) repeat,
 url(http://farm8.staticflickr.com/7191/6802641014_66dc3ddaa1_o.jpg) center center no-repeat fixed;
  text-align: center;
}

.text {
  width: 700px;
  margin: auto;
  line-height: 30px;
}

h2 {
  font-size: 80px;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px #000;
  line-height: 100vh;
}

p {
  font-size: 24px;
  padding: 60px;
}

jQuery.easing.def = "easeInOutCubic";

$(document).ready(function($) {
  
	$(".scroll").click(function(event){		
		event.preventDefault();
		$('html, body').animate({scrollTop:$(this.hash).offset().top}, 1000);
	});
});