#navbar {
	position: relative;
	width: 900px;
	text-align: center;
}

#navbar-left, #navbar-right {
	position: relative;
	display: inline-block;
}

#navbar-left:after {
	content: "-";
	margin: 0 7px;
	font-size: 11pt;
	color: #ababab;
}

.navbar-item {
	display: inline-block;
	margin: 4px 6px;
	font-size: 11pt;
	color: #ababab;
}

.navbar-item.selected a {
	color: white;
	background-color: hsla(0, 0%, 0%, 0.4);
	margin: 0px 0px;
	padding: 4px 6px;
	border-radius: 4px;
}

.navbar-item a {
	color: #ababab;
}

.tint-home .navbar-item a:hover {
	color: #C8E164;
}

.tint-4peaks .navbar-item a:hover {
	color: #FF71A5;
}

.tint-enzymex .navbar-item a:hover {
	color: #FFC000;
}

.tint-about .navbar-item a:hover {
	color: #60d4ff;
}

.tint-support .navbar-item a:hover {
	color: #97A981;
}

.tint-df .navbar-item a:hover {
	color: #A7DCEE;
}

.navbar-item a:active {
	color: black;
}


/*  */
/** ---------------------------------------- */
/** MEDIA QUERY: 900 PX */

/* iPhone 6  = 750 px */
/* iPhone 6+ = 828 px */

@media screen and (max-width: 900px) {
	
	#navbar {
		width: 450px;
	}
	
	#navbar-left, #navbar-right {
		display: block;
		text-align: center;
		width: 440px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}
	
	#navbar-left:after {
		content: none;
	}
	
	.navbar-itembar.left, .navbar-itembar.right {
		float: none;
	}
	
	.navbar-item {
		margin-left: 5px;
		margin-right: 5px;
	}
}


/*   */
/** MEDIA QUERY: 700 PX */

/* iPhone 5S = 640 px */
@media screen and (max-width: 700px) {
	
	#navbar {
		width: 300px;
	}

	#navbar-left, #navbar-right {
		width: 270px;
		line-height: 20px;
	}
}