.hamburger {display: none}
.collapse.navbar-collapse {background: rgba(255,255,255,0); 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all 0.5s ease;}
.dropdown-menu {background: none}

@media screen and (min-width:767px) {
li.dropdown:hover .dropdown-menu{ background: white}
}
@media screen and (min-width:320px) and (max-width:767px) {
.navigation-container .navbar-nav li{transition: opacity 2s ease; opacity: 0}
.navigation-container .collapse.in .navbar-nav li{opacity: 1}
.collapse.in .container ul.navbar-nav{height: 100vh;transition: all 1s ease}

/**************** for mobile menu ****************/
.social-icon-nav {float: left !important; width: 100%; margin:-22px 0px 15px 0%; padding: 0px 0 15px; border-bottom: 1px solid #9aa3b3}
.navbar-collapse.in {overflow: inherit}
.navigation-container .navbar-nav {text-align:left;float: left;width: 100%; margin:0px 0 0 0;padding-bottom: 20px; padding-left: 0px;height: 0;}
.menu-contain {background:#fff; margin-bottom: 10px}
.nav>li {width: 50%; float: left}
.dropdown-menu {position: inherit}
.navigation-container .navbar-nav>li>.dropdown-menu {display: block !important; min-width: auto; opacity: 1 !important; padding-top: 6px}
.navbar-collapse.in, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border:0px !important; max-height: none;height: 0px}
.ucsf-nav {display: none}
.navigation-container .navbar-nav li.line {display: block; height: 1px; width: 100%; background:#9aa3b3;margin:5px 0 15px 0%}
.navigation-container .navbar-nav .dropdown-menu > li > a {padding: 5px 0;margin:0; font-size: 12px; white-space: inherit; font-weight: normal}
.navigation-container .navbar-nav li a {font-size: 12px; font-weight: bold; padding: 0px;}
.nav.navbar-nav li.social-icon-nav { float: right; padding: 21px 0; width: 90%; float: left; border-bottom: 1px solid #9aa3b3; margin-bottom: 30px; margin-left: 5%}
.navigation-container .social-icon-nav li a {margin-left: 0px; margin-right: 20px; font-size: 18px}
.navbar {position: fixed; z-index: 100; right: 0; height: 110vh; top:0; overflow-x:auto;}
.navbar-inverse .navbar-toggle {display: none}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {background-color:#9aa3b3 !important}
.hamburger { display: inline-block;} 
.qbi-logo-new {display: none}
.cloned .qbi-logo-new,  .sticky-on .hamburger {display: none}
.logo-center-new{width: 210px;padding-bottom: 20px;margin: 15px 0 0 0}
.sticky-on {visibility: visible !important}
.ucsf-logo img { display: block;  width: 80px !important; margin:0px;}
.navigation-container {padding: 0px;}
.navbar-fixed-top.navigation-container {top:0px;}
.fixed-theme.navbar-fixed-top.navigation-container {top:0px; padding: 0px;}
.navbar.navbar-fixed-top.fixed-theme {background: none; box-shadow: none}
.navbar.navbar-fixed-top {background: none; box-shadow: none; position: fixed; /*height: 100vh*/}
.navbar-fixed-top.navigation-container.fixed-theme .ucsf-nav {display: none}
.navbar-fixed-top.navigation-container.fixed-theme .qbi-logo-new {display: none; }
.navbar.navbar-fixed-top.fixed-theme .collapse.in {background: #fff; height: 100vh}


.ucsf-logo {margin-bottom: 20px;}

.hamburger-inner::before {top:-8px;}
.hamburger-inner::after {bottom:-8px;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 18px; height: 2px;}

.navbar-collapse.collapse .container {opacity: 0; -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    transition: opacity .3s ease;}


.navbar-collapse.collapse.in .container {opacity: 1}
.navbar-collapse.collapsing {opacity: 0}
.dropdown-menu>li>a {margin:0px 10px 0 0;}
}

@media screen and (min-width:481px) and (max-width:767px) {
.navigation-container .navbar-nav .dropdown-menu > li > a {padding: 5px 0;margin:0; font-size: 14px; white-space: inherit; font-weight: normal}
}

@media screen and (min-width:320px) and (max-width:767px) {
.navbar {height: auto}
.navbar ~ .navbar-collapse.collapse.in {background: #fff}
.navbar ~ .navbar-collapse.collapse {background: #fff}
.navbar-collapse.in, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {height: 100vh; background: rgba(255,255,255,1); -webkit-transition:  all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition:  all 0.5s ease; -ms-transition:  all 0.5s ease; transition: all 0.5s ease; margin-top: -50px}
}


@media screen and (max-width:991px) and (min-width: 767px) {
.navbar-toggle-main { right:inherit !important; width: 680px; float: right}
.hamburger { display: inline-block}
.navigation-container .navbar-nav>li>.dropdown-menu {padding-top: 6px}
.navigation-container .navbar-nav li.line {margin:5px 0 15px 5%}
.social-icon-nav {float: left !important; width: 94%; margin: 0 20px 27px 36px;padding: 66px 0 23px;border-bottom: 1px solid #d9d9da}
.navbar.navbar-fixed-top {background: none; box-shadow: none; position: fixed; height: auto}


/********************** for new navigation ******************/
.ucsf-nav, .cloned .qbi-logo-new {display: none}
.navigation-container .navbar-nav li a {font-size: 13px; padding: 0 9px}
.navigation-container .social-icon-nav li a {margin-left: 10px; font-size: 16px; padding: 0px}
.logo-center-new { padding-bottom: 38px;display: block; width: 260px;margin: 25px 0 0 0;}
.navigation-container .navbar-nav {margin:0px;text-align: left}
.menu-contain {margin-bottom: 10px}
.top-bar {margin-bottom: 40px}
.navigation-container .navbar-nav .dropdown-menu > li > a  {font-size: 13px; padding: 9px 0}
.navbar-fixed-top.navigation-container.fixed-theme .ucsf-nav {display: none}
.navbar-fixed-top.navigation-container.fixed-theme .qbi-logo-new {display: none}
}

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

/**************** for mobile menu ****************/

.navbar-collapse.in {overflow: inherit}
.navigation-container .navbar-nav {float: none;margin:0px 0 0 0; padding-bottom: 20px;text-align: left}
.menu-contain {background:#fff; margin-bottom: 10px}
.nav>li {width: 45%; float: left; margin: 0 0 0 30px;}
.dropdown-menu {position: inherit}
.navigation-container .navbar-nav>li>.dropdown-menu {display: block !important; min-width: auto; opacity: 1 !important; padding-top: 15px}
.navbar-collapse.in, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border:0px !important; max-height: none}
.ucsf-nav {display: none}
.navigation-container .navbar-nav li.line {display: block; height: 1px; width: 90%; background:#d9d9da; margin: 15px 0 25px 5%}
.navigation-container .navbar-nav .dropdown-menu > li > a {padding: 5px 0; margin:0 10px; font-size: 14px; white-space: inherit; font-weight: normal}
.navigation-container .navbar-nav li a {font-size: 16px; font-weight: bold;}
.nav.navbar-nav li.social-icon-nav { float: right; padding: 21px 0; width: 90%; float: left; border-bottom: 1px solid #9aa3b3; margin-bottom: 30px; margin-left: 5%}

.navigation-container .social-icon-nav li a {margin-left: 0px; margin-right: 20px; font-size: 18px}
.navbar {position: fixed; z-index: 10; right: 0; height: 110vh; top:0; overflow-x:auto}
.navbar-inverse .navbar-toggle {display: none}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {background-color:#9aa3b3 !important}
.hamburger {display: block} 
.qbi-logo-new {display: none}
.cloned .qbi-logo-new,  .sticky-on .hamburger {display: none}

.sticky-on {visibility: visible !important}
.ucsf-logo img {display: block; width: 90px}
.navigation-container {padding: 0px}
.navbar-fixed-top.navigation-container {top:0px}
.navbar-container{padding: 0px 15px 10px 15px}
.fixed-theme.navbar-fixed-top.navigation-container {top:0px; padding: 0px}
.navbar.navbar-fixed-top.fixed-theme {background: none; box-shadow: none}
.navbar-fixed-top.navigation-container.fixed-theme .ucsf-nav {display: none}
.navbar-fixed-top.navigation-container.fixed-theme .qbi-logo-new {display: none}
.navbar.navbar-fixed-top.fixed-theme .collapse.in {background: #fff; height: 100vh}
.collapse {display: none}
.navbar-collapse.collapse {display: none !important}
.navbar-collapse.collapse.in {display: block !important}
.menu_fixed { position: fixed!important}
.navbar-toggle-main {right:inherit !important;}
.hamburger-box {float: right;}
.nav-top, .nav-midd {right: inherit !important}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse { margin-right: -15px; margin-left: -15px}
.navbar-toggle-main span {position: relative; float: right; right: -30px;}
.navbar-brand.fixed-theme, .navbar-container.fixed-theme, .navbar.navbar-fixed-top.fixed-theme, .navbar-brand, .navbar-container {width: 100%}
.nav-midd { top:60px !important}
.navbar.navbar-fixed-top.fixed-theme .collapse.in {background: #fff; height: 100vh}
.navbar-collapse.in, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { background: #fff; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -o-transition: all .1s ease; -ms-transition: all .1s ease; transition: all .1s ease}


/******************** 6-1-17 ********************/
.navigation-container .navbar-nav li{ transition: opacity 2s ease;opacity: 0}
.navigation-container .collapse.in .navbar-nav li{opacity: 1}
.collapse.in .container ul.navbar-nav{ height: 100vh; transition: all 1s ease}
.navbar {height: auto}
.navbar ~ .navbar-collapse.collapse.in {background: #fff}
.navbar ~ .navbar-collapse.collapse {background: #fff}
.navbar-collapse.in, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {height: 100vh; background: rgba(255,255,255,1); -webkit-transition:  all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition:  all 0.5s ease; -ms-transition:  all 0.5s ease; transition: all 0.5s ease}
.navbar-collapse.in { overflow: inherit !important}
.navbar-collapse.collapse .container {opacity: 0; -webkit-transition: opacity .3s ease;  -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; -ms-transition: opacity .3s ease; transition: opacity .3s ease}
.navbar-collapse.collapse.in .container {opacity: 1}
.navbar-collapse.collapsing {opacity: 0}
.dropdown-menu>li>a {margin:0px 10px 0 0}
}

@media screen and (min-width:992px) and (max-width:1199px) {
/********************** for new navigation ******************/
.ucsf-nav {width: 70px; margin-top: 5px}
.navigation-container .navbar-nav li a {font-size: 14px; padding: 0 12px}
.navigation-container .social-icon-nav li a {padding: 0px}
.navigation-container .navbar-nav {margin:10px 0 0 0}
.menu-contain {margin-bottom: 10px}
.logo-center-new {padding-bottom: 50px; margin:15px auto 0; width: 330px}
.top-bar {margin-bottom: 12px}
.navbar-container {padding: 0px 15px}
.navigation-container {padding: 7px 0}
.social-icon-nav {margin-left: 0px}
}


@media screen (max-height:450px) and (orientation:landscape) {
    /* Landscape styles */.navbar-collapse.in, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {height: 100vh; background: #fff}
}


.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.2s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media screen and (min-width:992px) and (max-width:1199px) {
#header-container .container {width: 955px}
}