/*navigation.css

/*It's a navigation bar with a logo on the left. How lovely!
I wrote it, but as we all know, no ideas are original. 
Some are just marketed better than others.
*/

/*navPlaceholder goes ABOVE nav s

/*******************************/
/*			navigation
/*******************************/





#navPlaceholder {
	height:5vw;
	background-color:#21201d;
	width:100%;
	display:inline-block;
	position:fixed;
	top:0px;
	float:left;

}

.nav {
	width:100%;
	height:5vw;
	background-color:#21201d;

	top:0px;
	text-align:center;

	z-index:4;


	position:fixed;
	min-height:40px;


}


.nav div {
	float:left;
	max-height:100%;

}

#logoLeft {

	width:10%;
	float:left;
	height:100%;
	background-color:blue;

}

#logoLeft img {

	height:100%;

}



#logoLeft img {

}

.mainBar { 

	
	width:69%;
	height:100%;
	background-color:purple;


}

.mainBar div {
	visibility:hidden;
}


.mainBar p {
	
	opacity:1;
	visibility:visible;

	transition-property:background-color;
	-webkit-transition-property:background-color;
	-moz-transition-propery:background-color;
	-ms-transition-property:background-color;
	-o-transition-property:background-color;

	-moz-transition-duration:0.3s;
	-webkit-transitionduration:0.3s;
	-o-transition-duration:0.3s;
	transition-duration:0.3s;
	-ms-transition-duration:0.3s;

float:left;
font-size:1.4vw;
color:white;

border-radius:5%;
cursor:pointer;

	position:relative;
	left:4%;
	padding-top:0.5%;
	margin-top:2vw;

	bottom:10%;
	padding-left:0.5%;
	padding-right:0.5%;


}

.mainBar a:link, .mainBar a:visited, .mainBar a:active {
	cursor:pointer;
	color:white;
	text-decoration:none;
	height:100%;
	background-color:transparent;





	



}

.mainBar p:hover {
	
	color:black;
	background-color:rgba(255,255,255,0.6);	
	cursor:pointer;





}

.mainBar p:nth-child(n+2) {
	margin-left:4.5%;
	cursor:pointer;
}



#contactDetails {
	/*Set this based on length of text string. Affects
	all others, must equal 100*/
	width:21%;
	text-align:right;
	color:white;
	background-color:green;
		min-height:100%;
}

#contactDetails p {
	position:relative;



	font-size:1.3vw;
	right:5%;
}


/***************************
Fade Out Pt.1 of 2
***************************/
/*(copy this and add a media query for everyone also)*/

.nav {

	-moz-transition-property:visibility, opacity, top;
	-webkit-transition-property:visibility, opacity, top;
	-o-transition-property:visibility, opacity, top;
	transition-property:visibility, opacity, top;
	-ms-transition-property:visibility, opacity, top;
	opacity:1;



	-moz-transition-duration:0.3s;
	-webkit-transition-duration:0.3s;
	-o-transition-duration:0.3s;
	transition-duration:0.3s;
	-ms-transition-duration:0.3s;

}





  /******************************\
  \*****************************\
   \/*Turn Background Colours Off\

*/

.nav div, #logoLeft, #contactDetails {
	background-color:transparent;
}


/*********************
Media Queries for EVERYTHING ELSE EXCEPT DROPDOWN
/********************/

/*NUMBER MUST BE THE SAME AS mobileSwitch.js*/

@media(max-width:1050px){

	/***************************
	Fade Out Pt.2 of 2
	***************************/
	.nav {
		opacity:0;
		/*switch me off for fade but button doesn't work*/
		/*display:none;*/
		top:-10vw;
	}
		.mainBar p { 
			/*stops links from working in place*/
	visibility:hidden;

	}


}