@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900');
@import url("reset.css");

body {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	font-size: 100%;
	letter-spacing: 0;
	color: #FFF;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

a:link    {color:#4D4D4D; text-decoration:none;}
a:visited {color:#4D4D4D; text-decoration:none;}
a:hover   {color:#696969; text-decoration:none;}
a:active  {color:#000; text-decoration:none;}



/***** navbar *****/
#navBar {
	position: absolute;
	width: 100%;
	height: 60px;
	top: 0;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); 
	z-index: 950;

	opacity: 1;
	visibility: visible;
}

#navBar h1 {
	position: relative;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 0.875em;
	font-weight: 400;
	text-transform: uppercase;
	display: inline;
}

#navBar-bg-p {
	position: absolute;
	width: 100%;
	height: 60px;
	top: 0;
	background: rgba(255, 255, 255, 0.9);
	z-index: 800;
}

nav ul {
	width: calc(100vw - 20px);
	height: 60px;

	list-style: none;

	display: flex;
	align-items: flex-end;
	justify-content: center;
}

nav ul:after {
 	content: '';
	display: block;
	clear: both;
}

nav li {
	padding: 40px 0 10px;
	margin: 0;	
	display:inline-block;
}

nav li a {
	width: 180px;
	
	padding: 40px 0 20px 0;
	margin: -40px 0 -20px 0;
	
	text-align: center;
	display: block;
	-webkit-transition: all .2s ease-out;
	   -moz-transition: all .2s ease-out;
	     -o-transition: all .2s ease-out;
	        transition: all .2s ease-out;
}

nav li:hover a {
	-webkit-transition: all .1s ease-in;
	   -moz-transition: all .1s ease-in;
	     -o-transition: all .1s ease-in;
	        transition: all .1s ease-in;
}