nav {
	font-family: Questrial
}

#main-logo {
	text-align: center;
	/* weird float center trick to retain the height */
	float: right;
	position: relative;
	left: -50%;
	padding-top: 15px;
	padding-bottom: 15px
}

.main-logo a {
	display: inline-block;
	z-index: 1;
	position: relative;
	width: 125px;
	/* weird float center trick to retain the height */
	left: 50%;
	float: left
}

.main-logo object {
	width: 100%;
	pointer-events: none;
	/* weird float center trick to retain the height */
	float: left
}

nav .content-area {
	overflow: hidden
}

nav.navbar-default {
	border: none;
	background: transparent;
	position: relative;
	/* this is important, header height is always 165px + 20px margin-bottom, if this changes change these next two rows */
	/* height: 165px;*/
	margin-top: -213px;
	transform: translateY(213px)
}

.navbar-default .navbar-nav>li>a  {
	color: #fff !important
}

.navbar-default .navbar-nav>li>a:hover:before,
.navbar-default .navbar-nav>li>a:focus:before {
	content: '';
	position: absolute;
	background-color: #fff;
	bottom: -5px;
	left: -10px;
	right: -10px;
	height: 2px;
}

/* navbar left slide */



/* end navbar left side */

@media screen and (min-width: 1200px) {
	nav {
		font-size: 20px
	}
	.container-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100%
	}
	
	ul.nav.navbar-nav {
		width: 100%;
	}
	
	.navbar-header {
		text-align: left
	}

	.navbar-nav>li {
		width: calc(((100% - (30px * 2) - (125px + (15px * 2))) / 8));
		text-align: center
	}
	
	.nav>li>a {
		padding-left: 0;
		padding-right: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-left: 15px;
		margin-right: 15px;
		display: inline-block
	}
	
	.md-pull-right {
		float: right !important
	}
	/*
	nav.navbar-default .navbar-nav > li.md-left-side > a::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background: #b95730;
		opacity: 0;
		transform: translateY(5px);
		transition: transform 0.3s, opacity 0.3s;
		pointer-events: none
	}
	*/
	
}
	
/*change break point for nav */
@media screen and (max-width: 1199px) {
	.navbar-header {
		float: none
	}
	.navbar-toggle {
		display: inline-block;
		position: absolute;
		float: none;
		right: 30px;
		top: 30px;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 0;
		border: none;
		background-color: transparent !important
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #fff
	}
	.navbar-collapse {
		border-top: 1px solid transparent;
		/*box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);*/
		position: fixed;
		z-index: 99999;
		top: 0px;
		transition-property: transform;
		transition-duration: 1s
	}
	.navbar-collapse.collapse {
		transform: translateX(-100%)
	}
	.navbar-collapse.collapse.in {
		transform: translateX(0)
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		border: none
	}
	.navbar-collapse.in .nav.navbar-nav{
		height: 100vh !important;
		transform: none;
		background-color: #000;
		margin-top: 0;
		margin-bottom: 0
	}
	
	/* hide during collapsing */
	.navbar-collapse.collapsing .nav.navbar-nav > li {
		visibility: hidden
	}

	.navbar-collapse.collapse {
		/*display: none!important*/
	}
	.navbar-nav {
		float: none!important;
		margin: 7.5px -15px;
		transform: translateX(-100%)
	}
	.navbar-nav>li {
		float: none;
		width: auto
	}
	.navbar-nav>li>a {
		padding-top: 15px;
		padding-bottom: 15px;
		margin-left: 15px;
		margin-right: 15px
	}
	.navbar-text {
		float: none;
		margin: 15px 0
	}
	/* since 3.1.0 */
	.navbar-collapse.collapse.in { 
		display: block!important
	}
	.collapsing {
		overflow: hidden!important
	}
	[data-fixMobileOrder="1"] {
		transform: translateY(300%)
	}
	[data-fixMobileOrder="2"] {
		transform: translateY(100%)
	}
	[data-fixMobileOrder="3"] {
		transform: translateY(-100%)
	}
	[data-fixMobileOrder="4"] {
		transform: translateY(-300%)
	}
	.navbar-default .navbar-nav>li>a:hover:before,
	.navbar-default .navbar-nav>li>a:focus:before {
		bottom: 8px;
		left: 15px;
		right: 15px;
	}
}