#mainnav {
	z-index: 2;
}

#nav_close,
.nav_toggle_btn { 
	display: none; 
}

#mainnav .nav_content ul > li,
#mobilenav .nav_content ul > li { 
	position: relative;
	overflow: visible;
}
#mainnav .nav_content ul > li > a,
#mobilenav .nav_content ul > li > a {
	text-decoration: none;
	display: block;
	height: 100%;
	width: 100%;
}

#mobilenav .nav_content ul > li .open_sub { 
	position: absolute;
	top: 7px;
	right: 0;
	font-weight: bold;
}
#mobilenav .nav_content ul > li .open_sub > span {
	display: none;
}

@media all and (max-width: 991px) { /* Phones & tablets */
	
	#mobilenav {
    position: fixed;
    top: 0;
    bottom: 0;
    display: none;
  }
  #mobilenav.open {
  	display: block;
  }

  .nav_mobile_btn { 
  	position: absolute;
  	top: 0;
  	right: 10px;
  	width: 50px;
  }
	.nav_toggle_btn {
		display: block;
		position: relative;
		padding: 9px 10px;
		border: 1px solid;
		border-color: #FFF;
		border-radius: 4px;
		float: left;
		cursor: pointer;
	}
	.icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
		background-color: #FFF;
		margin: 3px 0 3px 0;
	}
	
	#nav_close {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1;
	}
	#nav_close.open { display: block; }

	#mobilenav .nav_content { 
		/*display: none;*/
		background-color: #FFF;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}
	#mobilenav.open .nav_content,
	#mobilenav .nav_content.open {
		display: block;
		height: 100%;
		min-width: 30%;
		max-width: 90%;
		box-shadow: 3px 0px 1px 0px rgba(0,0,0,0.5);
	}

	#mobilenav .nav_content ul {
		overflow: hidden;
	}
	#mobilenav .nav_content > ul {
		/*padding-top: 10px;*/
	}

	#mobilenav .nav_content ul > li .open_sub {
		display: block;
	}
	#mobilenav .nav_content ul > li .open_sub > span {
		padding: 0px 15px 0 20px;
		font-size: 1.5em;
	}
	#mobilenav .nav_content ul > li .open_sub > span.arrow-right,
	#mobilenav .nav_content ul > li .open_sub.open > span.arrow-down {
		display: block;
	}
	#mobilenav .nav_content ul > li .open_sub.open > span.arrow-right {
		display: none;
	}

	#mobilenav .nav_content ul > li > a {
		color: #000;
		padding: 10px 0px 10px 10px;
		text-align: left;
		box-sizing: border-box;
	}
	#mobilenav .nav_content > ul > li.current > a,
  #mobilenav .nav_content ul ul > li.current { 
    background-color: #085a93;
    color: #FFF;
  }
  #mobilenav .nav_content ul ul > li.current a { 
  	background-color: transparent;
  	color: #FFF;
  }

	#mobilenav .nav_content > ul > li {
		height: auto;
		display: block;
		width: 100%;
		border-bottom: 1px solid; 
		border-color: #666;
	}	
	#mobilenav .nav_content > ul > li.current > a,
	#mobilenav .nav_content > ul > li.open > a {
		border-bottom: none;
	}

	#mobilenav .nav_content > ul > li .open_sub { 
		display: block; 
	}
	#mobilenav .nav_content ul ul > li .open_sub { 
		top: 2px;
	}

	#mobilenav .nav_content ul ul.open {
		display: block;
		visibility: visible;
		max-height: 1000px;

		transition: max-height 0.6s ease-in;
	  -ms-transition: max-height 0.6s ease-in;
	  -moz-transition: max-height 0.6s ease-in;
	  -webkit-transition: max-height 0.6s ease-in;
	}

	#mobilenav .nav_content ul ul {
		background-color: #CCC;
		visibility: hidden;
		max-height: 0;
	}
	#mobilenav .nav_content ul ul li {
		box-sizing: border-box;
		padding-left: 15px;
	}

	#mobilenav .nav_content ul ul ul {
		margin-left: -15px;
	}
	#mobilenav .nav_content ul ul ul li {
		padding-left: 30px;
	}

	#mobilenav div.nav_content ul ul li > a {
		padding: 5px 0 5px 0;
		background-color: transparent;
	}

}
/* Phones & tablets end */

@media all and (min-width: 992px) { /* Dekstops */

	#mainnav {
		position: absolute;
		/*width: 100%;*/
		top: 140px;
	}
	
	#mainnav .nav_content {
		text-align: right;
	}

	#mainnav .nav_content > ul > li { 
		padding: 0px;
		display: inline-block;
	}
	#mainnav .nav_content > ul > li:last-child {
		/*padding-right: 0;*/
	}

	#mainnav .nav_content ul ul > li {
		padding: 5px 30px 5px 15px;
		white-space: nowrap;
	}

	#mainnav .nav_content li > a {
		color: #333;
	}
	#mainnav .nav_content li.current > a,
	#mainnav .nav_content li > a:hover {
		color: #085a93;
	}
	#mainnav .nav_content ul ul li:hover {
		background-color: #FFF;
	}

	#mainnav div.nav_content > ul > li .open_sub { 
		display: none;
	}
	#mainnav .nav_content ul ul > li .open_sub { 
		position: absolute;
		top: 6px;
		right: 5px;
		display: block; 
		color: #000; 
	}
	#mainnav .nav_content ul ul > li .open_sub > span.arrow-right { 
		display: block; 
		height: 100%;
		font-size: 1em;
	}

	#mainnav .nav_content ul ul {
		display: none;
		z-index: 999;
		position: absolute;
		top: 0px;
		background-color: rgba(255, 255, 255, 0.85);
		visibility: visible;
		max-height: none;
	}
	#mainnav .nav_content ul > li:hover > ul {
		display: block; 
	}
	#mainnav .nav_content > ul > li > ul {
		min-width: 100%;
	}

}
/* Desktops end */

@media all and (max-width: 767px) { /* Phones */
	
	#mobilenav { width: 70% !important; }
	#mobilenav.open .nav_content,
	#mobilenav .nav_content.open { 
		width: 100%;
	}
}

@media all and (min-width: 768px) and (max-width: 991px) { /* Tablets */
	#mobilenav { width: 50% !important; }
	#mobilenav.open .nav_content,
	#mobilenav .nav_content.open {
	 width: 100%;
	}

}
