
/* --- NAVIGATION BAR ---------------------------------------------- */

.navbar.navbar-inverse .nav > li > a {
      /* font-size: 13px; */
      font-size: 20px;
      /* font-weight: bold; */
      color: #fff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
      opacity: .8;  /*opacity of the actual menu text*/
      filter: alpha(opacity=60);
      -webkit-transition: all .2s linear;
      -moz-transition: all .2s linear;
      transition: all .2s linear;

}
.navbar.navbar-inverse .nav > li > a:hover, .navbar.navbar-inverse .nav > li > a:active {
        color: #fff;
        opacity: 1;
        filter: alpha(opacity=100); }
.navbar.navbar-inverse .nav > li.active > a {
      color: #fff;
      opacity: 1;
      filter: alpha(opacity=100);
      background-color: transparent; }
.navbar .nav-container {
/*
    margin-top: 10px;
    margin-bottom: 10px;
*/
    -webkit-transition: margin .2s ease-in-out;
    -moz-transition: margin .2s ease-in-out;
    transition: margin .2s ease-in-out; }

.navbar .nav-container .collapse .nav .dropdown .caret {
      margin-bottom: 4px; 
}
/** main dropdown menu appearance **/
.navbar .nav-container .collapse .nav .dropdown .dropdown-menu {
      background: #cccccc; /*almond color #efddbe */ /*grey #cccccc */
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      margin-top: 2px; 
}
.navbar .nav-container .collapse .nav .dropdown .dropdown-menu > li > a {
      color: #000; 
}
.navbar .nav-container .collapse .nav .dropdown .dropdown-menu > li > a:hover {
      background: #ffffff; 
}


/******** MENU CSS ********/
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0
}
.nav {
	list-style: none
}
.nav>li>a {
	position: relative;
	display: block;
	padding: 10px 15px
}

/**-- NAVBAR-BRAND MAIN TOP MENU BAR TEXT --**/
.navbar-brand {
	float: right;
	line-height: 20px;
	margin:10px 10px 0px 0px;
	padding:0px;
	/* height: 50px; */
}
.navbar-brand:hover,.navbar-brand:focus {
	text-decoration: none
}
.navbar .nav-container .navbar-header .navbar-brand {
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      text-align:right;
      font-size: 20px;
      padding:0px;
      /*margin-left: -20px;*/
      /*padding: 10px 20px 10px; */
}
/** FOR CELL **/
@media ( max-width :580px) {
	.navbar-brand {
		display:none
	}
}

/** -- mobile menu collapse and opening -- **/
.collapse {
	display: none
}
.collapse.in {
	display: block
}
.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height .35s ease;
	transition: height .35s ease
}

/** -- caret for dropdown menu -- **/
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent
}

/** -- DROPDOWN MENU -- **/
.dropdown {
	position: relative
}
.dropdown-toggle:focus {
	outline: 0
}
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	background-clip: padding-box
}
.dropdown-menu.pull-right {
	right: 0;
	left: auto
}
/** REFINE SUBMENU APPEARANCE **/
.dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.428571429;
	color: #333;
	white-space: nowrap
}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus {
	text-decoration: none;
	color: #262626;
	background-color: #f5f5f5
}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus
{
	color: #fff;
	text-decoration: none;
	outline: 0;
	background-color: #f15f4c
}
.open>.dropdown-menu {
	display: block
}
.open>a {
	outline: 0
}
.pull-right>.dropdown-menu {
	right: 0;
	left: auto
}
@media ( min-width :992px) {
	.navbar-right .dropdown-menu {
		left: auto;
		right: 0
	}
	.navbar-right .dropdown-menu-left {
		left: 0;
		right: auto
	}
}

/** DESKTOP: NAVBAR SETTING **/
.navbar {
	padding: 0px 0px 0px 0px;
	position: relative;
	min-height: 50px;
	border: 1px solid transparent;
	margin-top: 0px;
    margin-bottom: 20px;
    -webkit-transition: margin .2s ease-in-out;
    -moz-transition: margin .2s ease-in-out;
    transition: margin .2s ease-in-out; 
}
.navbar-header {
	padding-left:50px;
	/* height: 60px; */  /* this ensures the mobile menu is completely visible */
	/*float: right;*/
}
.navbar-header h2 {
	padding:0px;
	line-height: 27px;
}

@media /*WIDE DESKTOP*/ ( min-width :992px) {
	.navbar {
		border-radius: 4px
	}
	.navbar-header {
	    /* padding-left:100px; */
		/* float: left;*/
		padding-right:11px;
		padding-bottom:11px;
		float: right;
	}
}

/**-- fix the navbar position NOT relative or absolute --**/
.navbar-fixed-top{
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	border-width: 0 0 1px;
	z-index: 1030
}
/**-- collapse navbar when on mobile device -- **/
.navbar-collapse {
	max-height: 340px;
	overflow-x: visible;
	padding-right: 15px;
	padding-left: 15px;
	border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	-webkit-overflow-scrolling: touch
}
.navbar-collapse.in {
	overflow-y: auto
}

@media /*WIDE DESKTOP*/ ( min-width :992px) {
	.navbar-collapse {
		width: auto;
		border-top: 0;
		box-shadow: none
	}
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important
	}
	.navbar-collapse.in {
		overflow-y: visible
	}
	.navbar-fixed-top{
		border-radius: 0
	}
	.navbar .nav-container .navbar-brand{
		margin-left: 15px
	}
	.navbar-nav {
		float: left;
		margin: 0
	}
	.navbar-nav>li {
		float: left
	}
	.navbar-nav>li>a {
		padding-top: 15px;
		padding-bottom: 15px
	}
	.navbar-nav.navbar-right:last-child {
		margin-right: -15px
	}
	.navbar-right {
		float: right;
		float: right !important
	}
	.navbar-right:last-child {
		margin-right: -15px
	}
	.navbar.navbar-inverse {
	    /* brown tone semi transparent menu color background: rgba(100, 50, 6, 0.4); */
   	    /* brown tone			      background: rgba(93, 27, 12, 0.7); */
	    /* blue tone semi transparent menu color background: rgba(0, 77, 251, 0.4); */
	    /* top portion background color behind logo and menu */
	    background: rgba(66, 156, 158, 0.7); 
	}
}
@media /*MOBILE*/( max-width :991px) {
	.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		box-shadow: none
	}
	.navbar-right {
		float: left;
		float: left !important
	}
	.navbar-nav .open .dropdown-menu>li>a {
		color: #777
	}
	/** menu background color setting at mobile **/	
	.navbar.navbar-inverse {
    	background: rgba(0, 0, 0, 0.9);
	}
	.navbar-header {
		padding-left:50px;
		height: 70px;  /* this ensures the mobile menu is completely visible */
		/*float: right;*/
}
}

/**  navbar-INVERSE is for the selected menu item to be focused **/
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus
	{
	color: #fff;
	background-color: transparent
}

/**  navbar-TOGGLE is for the mobile device menu **/
.navbar-toggle {
	position: relative;
	float: right;
	margin-right: 15px;
	padding: 9px 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	background-color: transparent;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px
}
.navbar-toggle:focus {
	outline: 0
}
.navbar-toggle .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px
}
.navbar-toggle .icon-bar+.icon-bar {
	margin-top: 4px
}
.navbar-inverse .navbar-toggle {
	border-color: #333
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus
	{
	background-color: #333
}
.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #fff
}
.navbar-inverse .navbar-collapse,.navbar-inverse  {
	border-color: #101010
}
.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus
{
	background-color: #080808;
	color: #fff
}

@media /*DESKTOP*/( min-width :992px) {
    .navbar-toggle {
		display: none
	}
}
@media /*MOBILE*/( max-width :991px) {
	.navbar.navbar-inverse {
    	background: #252528; 
    } 
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
		color: #fff;
		background-color: transparent
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
		color: #fff;
		background-color: #080808
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus
		{
		color: #444;
		background-color: transparent
	}
}

@media (max-width: 767px) {
   .navbar.navbar-inverse .nav-container .navbar-header .navbar-brand {
    margin-left: -5px; 
    }
   .navbar .navbar-nav .open .dropdown-menu > li > a {
    line-height: 25px;
    font-weight: bold;
    padding: 5px 15px 5px 35px; }
}
