#nav {
  background-color: #FFFFFF;
  padding-top: 20px;
  padding-bottom: 15px;
  padding-left: 20px;
  /* -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); */
}

#nav.scrolled {
  background-color: #FFFFFF;
  padding-top: 8px;
  padding-bottom: 5px;
}

.nav-logo {
  max-width: 250px;
  height: auto;
  -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.scrolled .nav-logo {
  max-width: 180px;
  height: auto;
}

/*--------------------------------------------------------  TOP NAVIGATION */

#nav {
	z-index: 10 !important;
	top: 0;
}


/* HAMBURGER BACKGROUND ON WHITE PAGE */


.hamburger .hamburger-inner::before   {
	background-color: #22BBBB;
}
.hamburger .hamburger-inner {
	background-color: #22BBBB;
}

.hamburger .hamburger-inner::after {
	background-color: #22BBBB;
}

/* HAMBURGER BACKGROUND ON BANNER PAGE */
body.banner-header .hamburger .hamburger-inner,
body.banner-header .hamburger .hamburger-inner::before, 
body.banner-header .hamburger .hamburger-inner::after {
	background-color: #FFFFFF;
}

/* HAMBURGER BACKGROUND ON TEAL PAGE */
body.bg_teal .hamburger .hamburger-inner,
body.bg_teal .hamburger .hamburger-inner::before, 
body.bg_teal .hamburger .hamburger-inner::after {
	background-color: #193241 ;
}

/* HAMBURGER BACKGROUND ON YELLOW PAGE */
body.bg_yellow .hamburger .hamburger-inner {
	background-color: #193241 ;
}

/* NAV BACKGROUND ON SCROLL, ON ACTIVE */

/* TOP */
.fillme .hamburger .hamburger-inner::after,
.scrolled .hamburger .hamburger-inner::after,
body.bg_darkBlue .hamburger .hamburger-inner::after { 
	background-color: #22BBBB !important;
}

/* MIDDLE */
.fillme .hamburger .hamburger-inner::before,
.scrolled .hamburger .hamburger-inner::before,
body.bg_darkBlue .hamburger .hamburger-inner::before { 
	background-color: #22BBBB !important;
}

/* BOTTOM */
.fillme .hamburger .hamburger-inner,
.scrolled .hamburger .hamburger-inner,
body.bg_darkBlue .hamburger .hamburger-inner { 
	background-color: #22BBBB !important;
}
 
/* CROSS-1 */ 
.fillme .hamburger.is-active .hamburger-inner,
.scrolled .hamburger.is-active .hamburger-inner  { 
	background-color:  #FFFFFF !important;
}

/* CROSS-2 */ 
.fillme .hamburger.is-active .hamburger-inner::before,
.scrolled .hamburger.is-active .hamburger-inner::before { 
	background-color: #FFFFFF !important;
}


.nav-open #nav {
  background-color: transparent;
}

.overlay {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #193241;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

.nav-open .overlay {
  opacity: .9;
  visibility: visible;
}

.nav-container {
  position: fixed;
  z-index: 900;
  top: 0px;
  left: 0;
  height: 100%;
  width: 80%;
  max-width: 100%;
  padding: 1em 2.3em 2em;
  background-color: #22BBBB;
  overflow: auto;
  transform: translateZ(0);
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.07,.23,.34,1);
}

@media (min-width: 992px) {
  .nav-container { width: 40% }
}

.nav-open .nav-container {
  transform: translateX(0);
}

.nav-open .menu a {
  animation: slide-in .4s .2s backwards;
}
.nav-open .menu li:nth-of-type(2) a {  animation-delay: .3s;}
.nav-open .menu li:nth-of-type(3) a {  animation-delay: .4s;}
.nav-open .menu li:nth-of-type(4) a {  animation-delay: .5s;}
.nav-open .menu li:nth-of-type(5) a {  animation-delay: .6s;}
.nav-open .menu li:nth-of-type(6) a {  animation-delay: .7s;}
.nav-open .menu li:nth-of-type(7) a {  animation-delay: .8s;}
.nav-open .menu li:nth-of-type(8) a {  animation-delay: .9s;}
.nav-open .menu li:nth-of-type(9) a {  animation-delay: 1s;}
.nav-open .menu li:nth-of-type(10) a {  animation-delay: 1.1s;}
.nav-open .menu li:nth-of-type(11) a {  animation-delay: 1.2s;}
.nav-open .menu li:nth-of-type(12) a {  animation-delay: 1.3s;}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.menu-logo {
  width: 220px;
  height: auto;
}

#nav ul.menu {
	width: 100%;
	z-index: 999 !important;
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
}

#nav ul.menu li {
  font-size: 2rem;
  line-height: 3rem;
}

#nav ul.contact {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#nav ul.contact li {
  font-size: 1.2rem;
  line-height: 1.4rem;
}

#nav ul li a {
  color: #193241;
  text-decoration: none;
}

#nav li a:hover {
  color: #FFFFFF;
}