/* ======================================================

	MENU.CSS
	
=========================================================*/


/* will need to resort to the :nth-child() pseudo selectors for desktop - to work with CMS gen menu */

/* Responsive navigation menu (minimise menu and provide toggle button on mobile) */
	
header {
	-moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
	height: auto;
	padding-bottom: 20px;
	text-align: left;
}

.menu-btn {
	display: block;
	position: absolute;
    top: 1.4em;
    right: 1em;
	border: none;
	border-radius: 5%;
    width: 40px;
    height: 30px;
    background: url('../img/menu.png') no-repeat 0 0;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
}
.menu-btn:hover,
.menu-btn:active,
.menu-btn:focus {
	background: url('../img/menu.png') no-repeat 0 0;
    background-size: contain;
	border: none;
    outline:none;
}
.flaggedScroll nav {
	margin-top: 10px;
}
nav li a:hover,
nav li a:active,
nav li a.menuactive {
	color: #c8c8c8;
	
}

/* main nav */
.nav {
  margin-top: 20px;
  padding-top: 10px;
}
.nav li {
	display: block;
	width: 100%;	
}
nav li {
	margin: .5em 0;
	font-size: 1.2em;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
}

.nav li.menuactive {
	background: #f2f2f0;
}
/* scroll subnav (for home and gallery) */
.scroll-nav {
	display: block;
	background: #f2f2f0;
}
.building .building--scrollnav,
.gallery .gallery--scrollnav {
	display: block;
}

/* mobilenav transitions */
.menu.mobile-menu {
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    text-align: center;
    background: #fff;
    height: 180px;
	-webkit-transform: translateY(0);
	-moz-transform:    translateY(0);
	-ms-transform:     translateY(0);
	-o-transform:      translateY(0);
	transform:         translateY(0);
}
.menu.mobile-menu.is-collapsed {
	-webkit-transform: translateY(-10%);
	-moz-transform:    translateY(-10%);
	-ms-transform:     translateY(-10%);
	-o-transform:      translateY(-10%);
	transform:         translateY(-10%);
}
.building .menu.mobile-menu {
	height: 300px;
}
.gallery .menu.mobile-menu {
	height: 220px;
}

.scroll-nav ul li a {
	color: #000;
}
.scroll-nav ul li a:hover,
.scroll-nav ul li a:focus {
	color: #565043;
}

/* nav menu - Media Queries
================================================== */

/* Tablet Portrait size and up */
@media only screen and (min-width: 768px){
	.menu-btn {
		/*hide from desktop*/
		display: none;
	}
	.menu {
	    overflow: visible;
		display: block !important;
	}

	nav li {	
		display: inline-block;
	    vertical-align: top;
	    *display: inline;
	    zoom: 1;
	    
	    margin-top: 1em;
	    margin-bottom: 0;
		width: 13%;
		text-align: left; 
	}
	nav li a {
		color: #565043;		
		display: block;
	}

	/* main nav */
	nav.nav {
		display: block !important;
		min-height: 30px;
	}
	/* full width nav (horizontal nav) */
	.nav {
		margin-top: 0;
		padding: 0 1%;
	}
	
	.nav li.menuactive {
		background: none;
	}

	/* allow for logo in the centre */
	
	/*first 3 items:*/
	.nav li:nth-child(-n+3) {
		float: left;
		width: 12%;
	} 
	/*last 3*/
	.nav li:nth-child(n+4){
		float: left;
		text-align: right;
		width: 12%;
	}
	/*the first*/
	.nav li:first-child {
		width: 14%;
	}
	.nav li:nth-child(2) {
		width: 15%;
	}
	.nav li:nth-child(3) {
		width: 12%;

	}
	.nav li:nth-child(4) {
		width: 14%;
		margin-left: 177px;
	}
	.nav li:nth-child(5) {
		width: 15%;
	}
	.nav li:nth-child(6) {
		width: 16%;
	}

	/* scroll subnav (for home and gallery) */
	.scroll-nav {
		-moz-transition: all .5s ease;
	    -o-transition: all .5s ease;
	    -webkit-transition: all .5s ease;
	    transition: all .5s ease;
/*
		opacity: 0;
		height: 0px;
*/
		width: 100%;
		top: 40px;
		z-index: 10;
	}
	.scroll-nav.is-visible {
		opacity: .5;
		height: 38px;
	}
	.no-js .scroll-nav {
		display: block;
	}
	.flaggedScroll .scroll-nav {
		/*top: 25px;*/
		top: 5px;
	}
	.scroll-nav ul {
		margin-bottom: 0;
		text-align: center;
	}

	.scroll-nav ul li {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 30px;
		width: auto;
	}
	.scroll-nav ul li a.active {
		color: #f5cd2f;
	}

	.building.flaggedScroll header,
	.gallery.flaggedScroll header {
		padding-bottom: 5px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 960px){
	nav li {	
		font-size: 1.1em;
		text-align: left;
	}
}
/* >= 960 */
@media only screen and (min-width: 960px) {
	/*the first*/
	.nav li:first-child {
		width: 15%;
	}
	.nav li:nth-child(2) {
		width: 15%;
	}
	.nav li:nth-child(3) {
		width: 12%;
	}
	.nav li:nth-child(4) {
		width: 11%;
		margin-left: 165px;
	}
	.nav li:nth-child(5) {
		width: 15%;
	}
	.nav li:nth-child(6) {
		width: 13%;
	}

}