.navbar {
  margin-bottom: 8px;
}

.navbar-wrapper {
  position: fixed;
}

.navbar.top-level {
  /*display: flex;*/
  /*justify-content: space-between;*/
    padding-right: 30px;
}

.navbar.top-level.container::before,
.navbar.top-level.container::after {
  display: none; /* This is required to reset a bootstrap style */
}

.navbar.top-level a {
  color: #3c3c3c;
  font-weight: 400;
  font-size: 17px;
  line-height: 50px;
  display: inline-block;
  white-space: nowrap;
  transition: color 0.2s;
    padding-left: 30px;
}

.navbar.top-level a:hover {
  text-decoration: none;
}

.navbar.top-level a.has-dropdown::after,
.navbar .desktop-hidden.has-dropdown .container::after{
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  font-weight: 900;
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.2s;
  display: inline-block;
}

.navbar .desktop-hidden.has-dropdown .container::after{
    float:right;
    font-size:20px;
}

.navbar.top-level a.active::after,
.navbar .desktop-hidden.has-dropdown.active .container::after {
  transform: rotate(180deg);
}

.navbar.second-level {
  margin-top: 0;
}

.navbar.second-level h3 {
  font-size: 22px;
  padding-bottom: 16px;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
}

.navbar.second-level h3 em {
  font-weight: 100;
}

.navbar.second-level a {
  display: block;
  color: #3c3c3c;
  font-size: 18px;
  padding-bottom: 12px;
}

.navbar.megamenu-panel.wrapper,
.megamenu-inner {
  background: #f5fafc;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0;
  display: none;
  min-height: auto;
}

.megamenu-inner {
  min-height: auto;
}

/* Veil */
.navbar-veil {
  background: rgba(100, 100, 100, 0.1);
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  display: none;
  z-index: 80;
}

.navbar.inner.container{
    margin-top:35px;
    margin-bottom:55px;
}

/* 
* COLOURS 
*/

/* Every 0th in cycle of 3 */
.navbar.top-level a.has-dropdown:nth-of-type(3n + 0).active,
.navbar.top-level a.has-dropdown:nth-of-type(3n + 0)::after,
.navbar .desktop-hidden.has-dropdown:nth-of-type(3n + 1) .container::after,
.navbar.top-level a:nth-of-type(3n + 0):hover {
  color: #00a2c9;
}
/* Every 1st in cycle of 3 */
.navbar.top-level a.has-dropdown:nth-of-type(3n + 1).active,
.navbar.top-level a.has-dropdown:nth-of-type(3n + 1)::after,
.navbar .desktop-hidden.has-dropdown:nth-of-type(3n + 2) .container::after,
.navbar.top-level a:nth-of-type(3n + 1):hover {
  color: #00a2c9;
}
/* Every 2nd in cycle of 3 */
.navbar.top-level a.has-dropdown:nth-of-type(3n + 2).active,
.navbar.top-level a.has-dropdown:nth-of-type(3n + 2)::after,
.navbar .desktop-hidden.has-dropdown:nth-of-type(3n + 0) .container::after,
.navbar.top-level a:nth-of-type(3n + 2):hover {
  color: #00a2c9;
}

/*
* MOBILE NAV
*/

.navbar-mobile-toggle {
  display: none;
  /* float: right; */
  margin-top: 25px;
  margin-right: 20px;
  position: absolute;
top: 0;
right: 0;
}

.navbar-toggle {
  background: #29abe1;
  display: block;
  height: 40px;
  width: 40px;
  padding: 8px;
  margin: 0;
  border-radius: 40%;
}

.icon-bar {
  background: white;
  display: inline-block;
  /* border:2px solid white; */
}

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

.navbar-toggle.active .icon-bar:nth-last-of-type(1) {
  transform: translateY(-6px) rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-last-of-type(2) {
  transform: rotate(-90deg);
  opacity:0;
}
.navbar-toggle.active .icon-bar:nth-last-of-type(3) {
  transform: translateY(6px) rotate(-45deg);
}

.desktop-hidden,
.navbar.second-level h3.desktop-hidden,
.navbar.second-level a.desktop-hidden{
    display:none;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.navbar.second-level > h3,
.navbar.second-level > a{
    font-size:18px;
    font-weight:300;
    color: #3c3c3c;
    line-height:22px;
    padding:14px 32px 14px 20px;
    margin:0;
    border-top:1px solid #d3e7ed;
}

.navbar.second-level > h3:first-of-type{
    border-top:none;
}
.navbar.second-level > a:last-of-type{
    border-bottom:1px solid #d3e7ed;
}

/*
* RESPONSIVE
*/

@media (max-width: 1550px) {
  .navbar.top-level.container::before {
    display: inline;
  }
}

@media (max-width: 1360px) {
  .desktop-hidden,
  .navbar.second-level h3.desktop-hidden,
  .navbar.second-level a.desktop-hidden{
      display: block;
      
  }
  .navbar.top-level {
    display: none;
  }
  .navbar-mobile-toggle {
    display: inline-block;
  }
  .megamenu-inner{
    display: block;
    height: calc(100vh - 70px);
    top: 90px;
    overflow: scroll;
    display:none;
  }
  .navbar.megamenu-panel.wrapper{
    /* display:block; */
  }
  .megamenu-panel .row > div{
      width:100%;
  }
  .megamenu-panel.wrapper{
      padding:14px 32px 14px 40px;
  }
  .navbar.megamenu-panel.wrapper, .megamenu-inner{
    position: relative;
  }
  .navbar .container{
      width:auto;
  }
  .navbar.inner.container{
      margin-top:-18px;
      margin-bottom:0;
  }

  .navbar.inner.container h3{
      font-size:20px;
  }

  .navbar.inner.container a{
      font-size:17px;
  }
}
