/*------------------------------------*\
    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;
}