/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */

a, li {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* Global CSS that are applied for all screen sizes */

nav {
 height:100px;
 padding:30px;
 float:right;
}

.nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 1em;
 font-weight: 300;
 width:;
}

nav ul li {
 display: inline;
}

nav ul li a {
 color:#000;
 text-decoration:none;
 margin-right:1.75em;
 text-transform:uppercase;
 font-weight:600;
 font-size:1em;
}

nav ul li:last-child a {
 margin-right:0;
}

.nav ul:hover a:hover {
 color: #ec850c;
}

/* For screen bigger than 800px */
@media (min-width: 800px) {
/* Transforms the list into a horizontal navigation */
.nav li {
 float: left;
 text-align: center;
 -webkit-transition: border .5s;
 -moz-transition: border .5s;
 -o-transition: border .5s;
 -ms-transition: border .5s;
transition: border .5s;
}

.nav a {
 display: block;
 width: auto;
}
}

@media (min-width: 960px) {
/* Size and font adjustments to make it fit into the screen*/
.nav ul {
 font-size: 1.2em;
}
}

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
	display: none;	
	width: 100%;
	padding: 0.5em 0.5em 0.8em;
	font-family: 'Lato',Calibri,Arial,sans-serif;
	font-weight: normal;
	text-align: left;
	color: rgb(7, 16, 15);
	font-size: 1.2em;
	background: none;	
	border: none;
	cursor: pointer;
}

.navtoogle i{
	z-index:-1;
}

.icon-menu {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1.6em;
}

@media (max-width: 780px) {

	/* Unhiding the styled menu link */
	.nav .navtoogle{
		margin: 0;
		display: block;
	}
	
	/* Animating the height of the navigation when the button is clicked */
	
	/* When JavaScript is disabled, we hide the menu */
	.no-js .nav ul {
		max-height: 30em;
		overflow: hidden;
	}
	
	/* When JavaScript is enabled, we hide the menu */
	.js .nav ul {
		max-height: 0em;
		overflow: hidden;
	}
	
	/* Displaying the menu when the user has clicked on the button*/
	.js .nav .active + ul {		
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}
	
	nav ul li {
	 display:block;
	 line-height:4em;
	 background:white;
	 padding-left:2em;
	}

	
	/* Adding a left border of 8 px with a different color for each menu item
	.nav li:nth-child(6n+1) {
		border-left: 8px solid rgba(0,48,103,1);
		padding-left:2em;
	}

	.nav li:nth-child(6n+2) {
		border-left: 8px solid rgba(0,48,103,.8);
		padding-left:2em;
	}

	.nav li:nth-child(6n+3) {
		border-left: 8px solid rgba(0,48,103,.6);
		padding-left:2em;
	}

	.nav li:nth-child(6n+4) {
		border-left: 8px solid rgba(0,48,103,.4);
		padding-left:2em;
	}

	.nav li:nth-child(6n+5) {
		border-left: 8px solid rgba(0,48,103,.2);
		padding-left:2em;
	}

	.nav li:nth-child(6n+6) {
		border-left: 8px solid rgba(0,48,103,.05);
		padding-left:2em;
	}*/

	/* make the nav bigger on touch screens */
	.touch .nav a {
		padding: 0.8em;
	}
}