/*------------------------------------*\
	NAV
\*------------------------------------*/

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

#site-overlay{
    top:200px;
    height:calc( 100% - 214px );
}

.shrunk #site-overlay{
    top:50px;
    height: calc(100% - 50px);
}


#site-overlay * .social-icons{
	width: 180px;
	margin: 20px auto;

}

#overlay-menu {
    margin-top:50px;
    position: static;
    width: 100%;
    display:none;
}



}

@media only screen and (max-width : 1137px) {
    #site-overlay{
	    top:90px;
	    height: calc(100% - 90px);
    }

    .shrunk #site-overlay{
	    top:90px;
	    height: calc(100% - 90px);
    }
 
 #site-overlay #overlay-search{
	 margin-top: 30px;
 }
    
    #overlay-menu,
    #overlay-search{
	    margin-top: 20px;
    }

	#overlay-search .social-icons,
	#overlay-menu .social-icons{
	    margin: 20px 0;
    }

	#cssmenu ul li a{
		padding: 10px;
		font-size: 14px;
	}

	#cssmenu ul ul li a{
		padding-left: 20px;
		font-size: 14px;
	}


}


@media only screen and (max-width : 480px) {
    #site-overlay{
	    top:70px;
	    height: calc(100% - 70px);
    }

    .shrunk #site-overlay{
	    top:70px;
	    height: calc(100% - 70px);
    }

 #site-overlay #overlay-search{
	 margin-top: 30px;
 }

    
    #overlay-menu,
    #overlay-search{
	    margin-top: 20px;
    }

	#overlay-search .social-icons,
	#overlay-menu .social-icons{
	    margin: 20px 0;
    }

	#cssmenu ul li a{
		padding: 10px;
		font-size: 14px;
	}

	#cssmenu ul ul li a{
		padding-left: 20px;
		font-size: 14px;
	}


}



/*
Site Overlay
Used by the menu to provide an opacity background
*/

#site-overlay{
    position:fixed;
    overflow-y:scroll;
    left:0;
    width:100%;
    z-index:20;
    display:none;
}

.shrunk #site-overlay{
    top:50px;
    height: calc(100% - 50px);
}


#site-overlay * .social-icons{
	width: 180px;
	margin: 20px auto;
}

#site-overlay * .social-icons a{
	margin-bottom: 15px;
}



#overlay-menu {
    margin-top:50px;
    position: static;
    width: 100%;
    display:none;
}

#site-overlay * img.home-link-image{
	display: none;
}


/*
Bootstrap, add animated navigational button
*/

.navbar-toggle {
  border: none;
  background: transparent !important;
}

.navbar-toggle:hover {
  background: transparent !important;
}

section#mainnav .navbar-toggle .icon-bar {
    width:32px;
}

.navbar-toggle .icon-bar {
  transition: all 0.2s;
}

.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggle .middle-bar {
  opacity: 0;
}

.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}



#masthead #mainnav.expanded {
    margin-bottom:0;
    z-index:22; /* used to make sure it has a higher index than the site-overlay below */
    height:auto !important;
    /*min-height:intrinsic !important;*/
    overflow-x:visible;
    border:0;
    clear: right;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

section#mainnav.expanded.shrunk .navbar-brand, section#mainnav.expanded .navbar-brand img{
	display: block;
} 
section#mainnav.expanded.shrunk .navbar-brand, section#mainnav.expanded .navbar-brand{
	height: 55px;
	width:55px;
	padding: 3px;
} 

section#mainnav.expanded.shrunk {
	background-color: #ddeeee;
	opacity: 0.9;
}

section#mainnav.expanded .main-nav-inner div nav #navbar {
	background-color: inherit;
}


section#mainnav.expanded .main-nav-inner div nav #navbar ul li ul {
	width: auto;
}

section#mainnav.expanded .main-nav-inner div nav #navbar ul li{
	float: none;
/*	height: intrinsic;*/
}

#navbar ul li a:hover{
}

/*--- DROPDOWN ---*/
section#mainnav.expanded .main-nav-inner div nav #navbar ul ul{
	list-style:none;
	position:relative;
	left:0px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	border-top:none;
	margin:0;
	padding: 0;
}
section#mainnav.expanded .main-nav-inner div nav #navbar ul ul li{
	padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	background-color: #ddeeee;
	float:none;
}

section#mainnav.expanded .navbar-toggle .icon-bar{
	width:33px;

}

section#mainnav.expanded .navbar-toggle .icon-bar {
    width:32px;
}

section#mainnav.expanded .navbar-toggle .icon-bar + .icon-bar {
    margin-top:7px
}

section#mainnav.expanded .navbar-nav {
	padding-right: 150px;
}
	


#mainnav.expanded{
	
}


section#mainnav.expanded .main-nav-inner div nav #navbar ul li ul{
	position:relative;
	left:0px;
	width:270px;
	height:500px;
}

section#mainnav.expanded .main-nav-inner div nav #navbar ul li {
	width:270px;
}