/* Elements Menu Navigation
-------------------------------------------------------------- */

.menubackground {width:100%; background-color:#fff;   z-index:6900; position: relative;}

#menubackgroundwater {height:356px; background: url(../../img/slider/water.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; position:absolute; top:3px; z-index:6900; visibility:hidden;width:100%;}

#menubackgroundearth {height:356px; background: url(../../img/slider/earth.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; position:absolute; top:3px; z-index:6900; visibility:hidden;width:100%;}

#menubackgroundair {height:356px; background: url(../../img/slider/air.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; position:absolute; top:3px; z-index:6900; visibility:hidden;width:100%;}

#menubackgroundmountain {height:356px; background: url(../../img/slider/mountain.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; position:absolute; top:3px; z-index:6900; visibility:hidden;width:100%;}

#menubackgroundcustom {height:356px; background: url(../../img/slider/custom.jpg) no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; position:absolute; top:3px; z-index:6900; visibility:hidden;width:100%;}



#colour2 {background-color:rgba(72, 181, 231, 1);} /* water */
#colour3 {background-color:rgba(153, 204, 0, 1);} /* earth */
#colour4 {background-color:rgba(147, 128, 127, 1);} /* mountain */
#colour5 {background-color:#fe7200;} /* air */
#colour6 {background-color:rgba(0, 0, 0, 1);} /* custom */


.menuwrapper {clear:both;height:50px; margin-bottom:5px;margin-right:auto; margin-left:auto; position:relative; }

#nav { font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;
			text-transform: uppercase;
			position: relative;
			z-index:8000; bottom: 2px;}

			#nav > a
			{display: none;}
			
			#nav li
			{position: relative;
			 margin-bottom:0px;
	
				
			}
				#nav li a
				{display: block;
				}
				

			#nav span:after
			{
			}

			/* first level */

			#nav > ul
			{
			margin-bottom: 0px;	padding-bottom:0px;
				list-style:none; padding-left:0px;
			}
				#nav > ul > li
				{
					height: 100%;
					float: left;
                    width:19%;
                    margin-right:0.5%;
                
				}
				
				#nav > ul > li.first
				{
	          
				}
					#nav > ul > li > a
					{
					height: 66%;
						text-decoration:none;
						color: #fff;
						margin:0px;
						text-align:center;
						padding:7px 5px 5px 5px;
				        font-size:16px;letter-spacing:3px;
						font-weight:normal;
						
					}

                #nav li#colour2  a:active
                {background-color: #48b5e7 !important;} /* water */
                
                #nav li#colour3  a:active
                {background-color: #99cc00 !important;} /* earth */
                
                #nav li#colour4  a:active
                {background-color: #93807f !important;} /* mountain */
                
                #nav li#colour5  a:active
                {background-color: #fe7200 !important;} /* air */
                
                #nav li#colour6  a:active
                {background-color: #000000 !important;}

						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{font-weight:bold;
						}

						#nav > ul > li#colour2:hover > a,
						#nav > ul:not( :hover ) > li#colour2.active > a
						{font-weight:bold; background-color:#b8e2f6} /* water */

						#nav > ul > li#colour3:hover > a,
						#nav > ul:not( :hover ) > li#colour3.active > a
						{font-weight:bold; background-color:#d7eb9c} /* earth */

						#nav > ul > li#colour4:hover > a,
						#nav > ul:not( :hover ) > li#colour4.active > a
						{font-weight:bold; background-color:#c2bdb7} /* mountain */

						#nav > ul > li#colour5:hover > a,
						#nav > ul:not( :hover ) > li#colour5.active > a
						{font-weight:bold; background-color:#fbbd7d} /* air */

						#nav > ul > li#colour6:hover > a,
						#nav > ul:not( :hover ) > li#colour6.active > a
						{font-weight:bold; background-color:#000000} /* custom */

        /* second level */

				#nav li ul
				{	display: none;
					position: absolute;
					top: 100%;
					margin-left:1px;
					margin-top:0px;
					width:100%; height:358px;list-style:none;padding-left:0px;
				}

				#nav li#colour2  ul
                {background-color:rgba(72, 181, 231, .39);} /* water */
				#nav li#colour3  ul
                {background-color:rgba(153, 204, 0, .39);} /* earth */
				#nav li#colour4  ul
                {background-color:rgba(147, 128, 127, .56);} /* mountain */
				#nav li#colour5  ul
                {background-color:rgba(248, 138, 24, .56);} /* air */

				#nav li#colour6  ul
                {background-color:rgba(0, 0, 0, .71);} /* custom */

				#nav li:not( :first-child ):hover ul
						{}

					#nav li:hover ul
					{display: block;
					left: -1px;
					right: 0;}

						#nav li ul a
						{color:#fff;
							font-size: .9em; 
							padding: 0.55em; 
							text-decoration:none;
						}


					#nav li ul li.first
						{border-top: 0px ;
						}
							#nav li#colour2 ul li a:hover,
							#nav li#colour2 ul:not( :hover ) li.active a
							{
								background-color: rgba(72, 181, 231, 1);
							}/* water */

				#nav li#colour3 ul li a:hover,
							#nav li#colour3 ul:not( :hover ) li.active a
							{
								background-color: rgba(153, 204, 0, 1);
							}/* earth */

                            #nav li#colour4 ul li a:hover,
							#nav li#colour4 ul:not( :hover ) li.active a
							{
								background-color: rgba(147, 128, 127, 1);
							}/* mountain */

                            #nav li#colour5 ul li a:hover,
							#nav li#colour5 ul:not( :hover ) li.active a
							{
								background-color: rgba(248, 138, 24, 1);
							}/* air */

                            #nav li#colour6 ul li a:hover,
							#nav li#colour6 ul:not( :hover ) li.active a
							{
								background-color: rgba(0, 0, 0, 1);
							}/* custom */

	/*  2nd level nav
================================================== */


#nav2 { font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;
			text-transform: uppercase;
			position: relative;
			z-index:5800;
            margin-bottom:30px;padding-bottom:20px;}
			
			#nav2 li
			{position: relative;
			margin-bottom:0px;
			}
				#nav2 li a
				{display: block;
				}
			
			/* first level */

			#nav2 > ul
			{list-style:none; padding-left:0px;
			}
				#nav2 > ul > li
				{height: 100%;
				float: left;
				}
				
					#nav2 > ul > li > a
					{   height: 66%;
						text-decoration:none;
						color: #cbbfb5;
						margin:0px;
						text-align:center;
						padding:5px 15px 5px 15px;
				        font-size:14px;
						font-weight:normal;
						border-right: 1px solid #c4c3c3;
					}

 #nav2 > ul > li.first > a
				{padding-left:0px;
				}
 #nav2 > ul > li.last > a
				{border-right:0px;
				}
						#nav2 > ul > li:hover > a,
						#nav2 > ul:not( :hover ) > li.active > a
						{color: #000;
						}


	/* small navigation 
-------------------------------------------------------------- */

#smallnav { font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;
			text-transform: uppercase;
		float:right; position: relative; top:30px;
			z-index:8000;}

#smallnav > ul
{
height: 1.5em;
margin-bottom: 0px;	
padding-left:0px;
list-style:none;
}
#smallnav > ul > li
{
			height: 100%;
			float: left;
border-right: 1px solid #938a7f;				}


					#smallnav > ul > li > a
					{
						text-decoration:none;
						color: #938a7f;
						margin:0px;
						text-align:center;
						padding:5px 15px 5px 15px;
				        font-size:12px;
						font-weight:normal;
					}

	            #smallnav > ul > li.last 
				{border-right: 0px ;
	             }	
					
				#smallnav > ul > li:hover > a,
				#smallnav > ul:not( :hover ) > li.active > a
						{color: #000000;
					}



	
/* footer navigation 
-------------------------------------------------------------- */
#footernav .navcustom{background-color: transparent;}

#footernav { font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;
			text-transform: uppercase;
			position: relative;
			z-index:6000; padding-bottom:40px; padding-top:50px;
 text-align:center;
		}
			#footernav > a
			{display: none;
			}
			
			#footernav li
			{position: relative;
				margin-bottom:0px;
				
			}
				#footernav li a
				{display: block;
				}
				#footernav li a:active
				{color: #000 !important;
				}

			/* first level */

			#footernav > ul
			{
padding-left:0px;
				margin-bottom: 0px;	
				list-style:none;display:inline-table;
			}
				#footernav > ul > li
				{
					height: 100%;
					float: left;display:inline; 
				}
				
				
					#footernav > ul > li > a
					{

						text-decoration:none;
						color: #938a7f;
						margin:0px;
						text-align:center;
						padding:5px 15px 5px 15px;
				        font-size:12px;letter-spacing:2px;
						font-weight:normal;
						border-right: 1px solid #938a7f;
			
					}

#footernav > ul > li.last > a
				{
	                border-right: 0px;
				}
					
						#footernav > ul > li:hover > a,
						#footernav > ul:not( :hover ) > li.active > a
						{
							color: #000000;
					
						}
	
/* second footer navigation 
-------------------------------------------------------------- */

        h4 a.water {color:#48b5e7}
        h4 a.water:hover {color:#b8e2f6}
        
        h4 a.earth{color:#99cc00}
        h4 a.earth:hover{color:#d7eb9c}
        
        h4 a.mountain{color:#938a7f}
        h4 a.mountain:hover{color:#c2bdb7}
        
        h4 a.air{color:#f88a18}
        h4 a.air:hover{color:#fbbd7d}
        
        h4 a.custom{color:#000}
        h4 a.custom:hover{color:#525452}
        
        h4 a:hover {color:#000}
#footersmallnav { }
		
#footersmallnav h4 {margin-bottom:0px;}
			
.footersmallnav > ul
			{padding-left:0px;
				text-align:center;	
				list-style:none;
			}
				.footersmallnav > ul > li
				{height: 100%;
width:100%;margin-bottom:4px;}
				
				
					.footersmallnav > ul > li > a
					{
						text-decoration:none;
						color: #756d64;
						margin:0px;
						text-align:left;
				        font-size:15px;
						font-weight:normal;
					}

						.footersmallnav > ul > li:hover > a,
						.footersmallnav > ul:not( :hover ) > li.active > a
						{	color: #000000;
					}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .menuwrapper {
    width: 90%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .menuwrapper {
    width: 95%; 
    height: 30px;
  }
}


/* Smaller than 960 - all mobile
-------------------------------------------------------------- */

@media only screen and  (max-width: 959px) {
#smallnav {display:none;}
#footersmallnav  {display:none;}
.overallheader {margin-bottom:10px;}
#footernav {padding-top:20px;}
#menubackgroundwater {height:auto;}
#nav > ul > li {width:18.5%;}
.toggle {width:30px;}				
#nav li ul{height:auto;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {

#smallnav > ul > li > a
				{padding:5px 10px;
				 font-size:12px;}
}	


/* Smaller than 960 - small tablet and mobile landscape
-------------------------------------------------------------- */

@media only screen and (min-width: 550px) and (max-width: 767px) {
#nav > ul > li > a{font-size:11px;letter-spacing:1px;}

}

		
/*  Mobile phone in portrait - Changes to an icon
================================================== */
@media only screen and (max-width: 550px) {
    .menuwrapper {top:20px; height:50px;}
			#nav
			{   position: absolute;
				top: -10px;
				left: auto;width:100%;
				z-index:9890;
				margin-bottom:0px;
				
			}
				#nav > a /* icon for search */
				{    font-size: 85%; /* 12 */
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #ccc;
					position: relative;
				
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
				margin-bottom:5px;
pad
				
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
					border-right: none;
					
				}
				
					#nav > ul > li > a
					{   font-size:110%;
						height: auto;
						text-align: left;
						padding: 0.375em 0.833em 0.375em 0.833em; /* 20 (24) */
						background:none;
						
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #fff;
						}

	/* second level */

				#nav li ul
				{
					position: static;
					
					padding-top: 0;
					background-color: #d3d2d1;
					width:100%;
					margin-bottom:0px;
				}
				
				
				    #nav li ul a
						{
							border-bottom: 0px;
							font-size: .9em; /* 20 */
							padding: 0.55em; /* 15 (20) */
							padding-left:20px;
						}
					#nav li ul li.first
						{
							border-top: 0px ;
								
						}
						
					#nav li ul li
						{
							border-bottom: 0px;
							border-top: 0px;
							margin-bottom:0px;
						}
							
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
								background-color: #fff;
								color: #5f7ec0;
			
}
#footernav  {text-align:left}
#footernav > ul > li
		{
                  float: none;
		}
				
	#footernav > ul > li > a
	{			
	text-align:left;
padding:5px 15px 5px 0px;
border-right: 0px;
}


#nav2  {text-align:left; padding-bottom:0px;}
#nav2 > ul > li
		{
                  float: none;
		}
				
#nav2 > ul > li > a
	{			
	text-align:left;
padding:5px 15px 5px 0px;
border-right: 0px;
}


}


			/*  larger breakpoints
================================================== */

				

@media only screen and (min-width: 960px) and (max-width: 1199px){

#nav > ul > li {width:18.8%;}
}


@media only screen and (min-width: 1200px) and (max-width: 1439px){




}

@media only screen and (min-width: 1440px) {

  .menuwrapper {
    width: 90%; }
}