/* First and Second level Navigation
-------------------------------------------------------------- */

#navcontainer {margin-bottom:30px;}

#nav {position:fixed; top:0px; font-size:1.8rem; line-height:4rem; z-index:6666;
	text-transform:uppercase; letter-spacing:1px;  font-family: district_prothin, "Helvetica Neue", Arial, sans-serif; width:100%;
	height:32px;}

#nav ul {background-color:#443f41;
	}


	#nav ul li {
		display: inline-block;
		list-style-type: none;
		padding:0px; margin:0px;
		background-color:#443f41;
	}

		#nav ul li a {
			color: #fff;
			display: block;
			line-height: 12px;
			padding:9px;
			text-decoration: none;
			font-size:1.7rem;
		}
	        #nav ul li a:visited {

		}
		
#nav ul li:hover {
			background-color: #008499;
		}


.active a{
			background-color:#008499;
		}


#nav li.active {
			background-color:#008499;
		}



#nav li ul {
	display:none;}



.mobile-menu-link {
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #128498;
    position: relative;
    z-index: 100;}

	

        .mobile-menu-link:hover, .mobile-menu-link:visited {color:#fff;}   
        ul.menu-large {display:none;}
		
		.open ul {      
        color:#fff;
        font-size:1.5rem;
        display: block;
        z-index: 9000; 
        position:relative;  
        }
        
        .mobile-home {margin-bottom:16px; margin-top:20px;}

        #nav.open ul li { display: block; list-style: none; text-align: center; width:100%; padding: 14px 2px;}
        #nav.open ul li a, .mobile-home { display: inline-block; padding: 4px; color:#fff!important; text-decoration: none;  }
    
        #nav.open ul li a:hover, #nav.open ul li a:active, .mobile-home:hover, .mobile-home:active  { color: #fff; }
        
        .selected a{border-bottom: 2px solid #fff!important;}

 /* lines menu icon */

	.nav-opener {
		top: 12px;
		left: 25px;
		z-index: 101;
		display: inherit;
		position: absolute;
		text-indent: -9999px;
		width: 21px;
		height: 12px;
	}

	.nav-opener:before,
	.nav-opener:after,
	.nav-opener span {
		top: 5px;
		left: 0;
		right: 0;
		height: 2px;
		position: absolute;
		background: #fff;
		-webkit-transition: all .2s linear;
		transition: all .2s linear;
	}

	.nav-opener:before,
	.nav-opener:after {
		content: "";
		top: 0;
	}

	.nav-opener:after {
		top: 10px;
	}

	.nav-opener.overlay {
		opacity: 0;
		padding: 0;
		z-index: 8899;
		position: fixed;
		visibility: hidden;
		top: 40px;
		left: 0;
		right: 0;
		bottom: 0;
		bottom: auto;
		width: auto !important;
		height: 9999px !important;
		-webkit-transition: all .25s linear;
		transition: all .25s linear;
		height:100%;
	}
	

	.nav-opener.overlay:hover {
		opacity: 1;
		background: rgba(68, 63, 65, .90);
	}

	.nav-opener.overlay:after,
	.nav-opener.overlay:before {
		display: none;
	}


	/* close button transition */

	.open .nav-opener {
		height: 16px;
	}

	.open .nav-opener span {
		opacity: 0;
	}

	.open .nav-opener:hover {
		opacity: .9;
	}

	.open .nav-opener:after,
	.open .nav-opener:before {
		top: 7px;
		background: #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.open .nav-opener:after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
    
    .open .overlay {
		opacity: 1;
		visibility: visible;
		background: rgba(68, 63, 65, .95);
	}		


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}


/* Larger than tablet */
@media (min-width: 750px) {


/*Second level rollover */
	
#nav li ul {
display: inline-block;
	position: absolute;
	left: -999em;
	width: 10em;
	z-index: 100;}

#nav li ul a {
	border-right: 0px solid #fff;
	text-align:left;
	letter-spacing:1px; 
	padding:10px 12px 10px 12px;
	text-transform:none;
	color:#333;
	width: 11em;
	border-bottom: 1px solid #fff;
	height:auto;
	font-size:.85em;
	font-weight: normal;
	background-color:#5a6569;/*Second level background colour*/
	}

#nav li ul a:hover {
background-color:#e9e7e6;  /*Second level hover colour*/
height:auto;
width: 11em; 
color:#333333;
padding:10px 12px 10px 12px;
}

#nav .active a {color:#fff;}
#nav li ul .active a{background-color:#5a6569; } /*First or top level selected colour*/

#nav .last {border-right:0px;}

#nav li:hover, #nav li.sfhover {
	background: #7bccc4;
	color: #fff; 
}

#nav li:hover a, #nav li.sfhover a{
	color: #fff;
}

#nav li:hover ul {
	left: auto;}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;}

#nav ul ul {margin:0px;}

	#nav {line-height:2.2rem;}

    /* Navigation changes from line menu to on page */
    .mobile-menu-link {display:none;}
    .nav-opener {display:none;}
    .nav-search {display:none;}
    #nav {position: relative; font-size:1.5rem; line-height:1.5; }  
     ul.menu-large {display:inline-block;}
	 #navcontainer {width:80%;}

    .navslanted:before{
      content: '';
      position: absolute;
      left: 0;
      bottom: 16px;
      overflow: visible;
      width: 100%;
      height: 60px;
      z-index: -1;
      background-color: #00ada1;
      -webkit-transform: skewY(-0.5deg);
      -moz-transform: skewY(-0.5deg);
      -ms-transform: skewY(-0.5deg);
      -o-transform: skewY(-0.5deg);
      transform: skewY(-0.5deg);
      -webkit-backface-visibility: hidden;
      backface-visibility: initial;}
      

	
    	}

/* Larger than desktop */
@media (min-width: 1000px) {
	

	}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}




/*2nd level nav*/


#nav2, #nav2 ul {
	padding:0px;
	margin: 0px;
	list-style: none; line-height: 1;
	text-transform:uppercase; letter-spacing:1px;  font-family: district_prothin, "Helvetica Neue", Arial, sans-serif; position:relative; z-index:5555; }

#nav2 li {
	float: left; 
	width: auto;}

#nav2 a {
	display: block;
        background-color:#8b8487;
	width: auto;
	text-decoration:none;
	color:#fff;
	border-right: 0px solid #fff;
	border-bottom: 0px;
	text-align:center;
	padding:6px 12px 6px 12px;
	font-size:1.1em;	font-weight:normal;}

#nav2 a:hover {
background-color: #009cb5; /*First or top level hover colour - green-blue*/
color:#fff;
}



#nav2 .active a{background-color:#008499; } /*selected colour*/

/*Second level rollover */
	
#nav2 li ul {
	position: absolute;
	left: -999em;
	width: 13em;
	z-index: 100;}

#nav2 li ul a {
	border-right: 0px solid #fff;
	text-align:left;
	letter-spacing:1px; 
	padding:10px 12px 10px 12px;
	text-transform:none;
	color:#333;
	width: 13em;
	border-bottom: 1px solid #fff;
	height:auto;
	font-size:.8em;
	font-weight: normal;
	background-color:#8b8487;/*Second level background colour*/
	}

#nav2 li ul a:hover {
background-color:#e9e7e6;  /*Second level hover colour*/
height:auto;
width: 13em; 
color:#333333;
padding:10px 12px 10px 12px;
}


#nav2 li ul .active a{background-color:#8b8487; } /*selected colour*/
#nav2 li ul a{background-color:#8b8487; } 
#nav2 .active ul li a{background-color:#8b8487;}


#nav2 li:hover, #nav2 li.sfhover {
	background: #8b8487;
	color: #fff;
}

#nav2 li:hover a, #nav2 li.sfhover a{
	color: #fff;
}

#nav2 li:hover ul {
	left: auto;}

#nav2 li:hover ul, #nav2 li.sfhover ul {
	left: auto;}