/*
Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS
Description: Create a sticky navigation bar that remains fixed to the top after scroll
Author: Stanislav Kostadinov
Author URI: http://stanislav.it
Version: 1.0.0 - 11.01.2014
*/

* {margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed {
	position: fixed; 
	top: 0; 
	height: 70px; 
	z-index: 1;
}

body {
	color: #fff;
	font-family: 'open-sans-bold'; 
	font-size: 18px;
	text-align: center;
}

/* Font Face Settings */
@font-face {
    font-family: 'open-sans-bold';
	src: url('../fonts/open-sans/OpenSans-Bold.eot');
    src: url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'),
		 url('../fonts/open-sans/OpenSans-Bold.ttf');
    font-weight: normal;
}	

/* Navigation Settings */
nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70px;
	background: #fff;
}

nav li {
	display: inline-block;
	padding: 24px 10px;
}

nav li a {
	color: #757575;
	text-transform: uppercase;
}

section {
	height: 100vh;
}

/* Screens Settings */
#screen1 {	
	background: #43b29d;
}

#screen1 p {
	padding-top: 200px;
}

#screen2 {
	background: #efc94d;
}

#screen3 {
	background: #e1793d;
}

@media only screen and (max-width: 520px) {

	nav li {
		padding: 24px 4px;
	}

	nav li a {
		font-size: 14px;
	}

}