/* Custom Navbar Scroll Behavior Styles */

/* Transparent navbar - at top of page */
.navbar-transparent {
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Solid navbar - when scrolled */
.navbar-not-transparent,
.navbar-color-on-scroll:not(.navbar-transparent) {
  background-color: #fff !important;
  color: #3c4858 !important;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,.12), 0 7px 10px -5px rgba(0,0,0,.15) !important;
}

/* Navbar link colors when transparent */
.navbar-transparent .navbar-nav > li > a,
.navbar-transparent .navbar-brand,
.navbar-transparent .navbar-brand p {
  color: #fff !important;
}

/* Navbar link colors when solid */
.navbar-not-transparent .navbar-nav > li > a,
.navbar-not-transparent .navbar-brand,
.navbar-not-transparent .navbar-brand p {
  color: #3c4858 !important;
}

/* Navbar toggle button when transparent */
.navbar-transparent .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.navbar-transparent .navbar-toggle .icon-bar {
  background-color: #fff !important;
}

/* Navbar toggle button when solid */
.navbar-not-transparent .navbar-toggle {
  border-color: rgba(60, 72, 88, 0.2) !important;
}

.navbar-not-transparent .navbar-toggle .icon-bar {
  background-color: #3c4858 !important;
}

/* Smooth transition */
.navbar-color-on-scroll {
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar-color-on-scroll .navbar-nav > li > a,
.navbar-color-on-scroll .navbar-brand,
.navbar-color-on-scroll .navbar-brand p {
  transition: color 0.3s ease !important;
}

/* Dropdown menu colors when navbar is transparent */
.navbar-transparent .dropdown-menu {
  background-color: #fff !important;
}

.navbar-transparent .dropdown-menu li > a {
  color: #3c4858 !important;
}

.navbar-transparent .dropdown-menu li > a:hover,
.navbar-transparent .dropdown-menu li > a:focus {
  background-color: rgba(233, 30, 99, 0.1) !important;
}

/* Caret/chevron colors */
.navbar-transparent .caret,
.navbar-transparent .caret-wrap svg {
  color: #fff !important;
  fill: #fff !important;
}

.navbar-not-transparent .caret,
.navbar-not-transparent .caret-wrap svg {
  color: #3c4858 !important;
  fill: #3c4858 !important;
}