/* NAVIGATION
================================*/
.navigation { position: relative; font-family: inherit; line-height: initial; width: 100%; display: flex; box-sizing: border-box; padding: 0; background-color: #e8eaf6; transition: background .3s; align-items: initial; }
@media (min-width:992px) {
  .navigation { height: auto; }
}
.navigation *, .navigation *:before, .navigation *:after { box-sizing: border-box; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.navigation.fixed-top { position: fixed; z-index: 198; top: 0; right: 0; left: 0; }
.navigation.sticky-top { position: sticky; z-index: 198; top: 0; will-change: opacity; }
.navigation > .container { display: flex; }

/* MOBILE HEADER
================================*/
.navigation-header { width: 100%; display: flex; align-items: center; -ms-flex-pack: justify; justify-content: space-between; }
@media (min-width:992px) {
  .navigation-header { display: none; }
}

/* OVERLAY PANEL
================================*/
.overlay-panel { position: fixed; z-index: -999999; top: 0; left: 0; width: 0; height: 0; opacity: 0; transition: opacity .8s; }
.overlay-panel.is-visible { z-index: 199; width: 100%; height: 100%; opacity: 1; }
.overlay-panel.is-invisible { opacity: 0; }
@media (min-width:992px) {
  .overlay-panel.is-visible { display: none !important; }
}

/* NAVIGATION BRAND TEXT
================================*/
.navigation-brand-text a { font-size: 16px; font-weight: bold; color: #d1d1d1; text-decoration: none; }
@media (min-width:992px) {
  .navigation-brand-text a { font-size: 22px; }
}
.navigation-header .navigation-brand-text { padding: 0 1rem; }

/* NAVIGATION LOGO
================================*/
.navigation-logo { display: flex; align-items: center; }
.navigation-logo a { display: flex; align-items: center; }
.navigation-logo a img { height: 40px; display: block; }
@media (min-width:992px) {
  .navigation-logo a img { height: 48px; }
}
.navigation-logo-top .navigation-body .navigation-logo img { width: auto; height: auto; }
.navigation-header .navigation-logo { padding: 0 1rem; }
.navigation-logo.navigation-item a img { width: auto; height: auto; }

/* NAVIGATION BUTTON TOGGLER
================================*/
.navigation-button-toggler { width: 60px; height: 60px; display: flex; cursor: pointer; align-items: center; justify-content: center; }
.navigation-button-toggler .hamburger-icon { font-style: normal; width: 28px; height: 4px; display: inline-block; color: #888888; box-shadow: inset 0 0 0 32px, 0 -10px, 0 10px; }
.navigation-button-toggler:hover .hamburger-icon { color: #c1daf2; }

/* MY ADD */
@media (min-width:0) and (max-width:991px) {
  .navigation { height: 16px; min-height: 16px; }
  .navigation-button-toggler { position: relative; top: -36px; }
  .navigation-body { box-shadow: 3px 0px 6px 0px rgba(50, 50, 50, 0.3); }
}

/* NAVIGATION BODY
================================*/
.navigation-body { position: fixed; z-index: 200; top: 0; left: -100%; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; background-color: #ecf0fb; transition: left .8s cubic-bezier(.1, .1, .1, .1), right .8s cubic-bezier(.1, .1, .1, .1); }
@media (min-width:500px) {
  .navigation-body { width: 320px; }
}
@media (min-width:992px) {
  .navigation-body { position: relative; z-index: auto; left: auto; width: 100%; display: flex; overflow: visible; background-color: transparent; transition: all 0s ease 0s; align-items: center; }
}
.navigation-body.offcanvas-right { right: -100%; left: auto; }
@media (min-width:992px) {
  .navigation-body.offcanvas-right { right: auto; }
}
.navigation-body.is-visible { left: 0; transition: left .8s, right .8s; }
.navigation-body.offcanvas-right.is-visible { right: 0; left: auto; }
@media (min-width:992px) {
  .navigation-body.offcanvas-right.is-visible { right: auto; }
}
.navigation-body.is-invisible { left: -100%; }
.navigation-body.offcanvas-right.is-invisible { right: -100%; }
.navigation-body.scroll-momentum { -webkit-overflow-scrolling: touch; }
@media (min-width:992px) {
  .navigation-centered .navigation-body { justify-content: center; }
  .navigation-justified .navigation-body { -ms-flex-pack: justify; justify-content: space-between; }
  .navigation-logo-top .navigation-body { flex-direction: column; }
}
.navigation-body-header { display: flex; padding: 0px; border-bottom: solid 1px #CCC; align-items: center; -ms-flex-pack: justify; justify-content: space-between; }
@media (min-width:992px) {
  .navigation-body-header { border: none; }
  .navigation-centered .navigation-body-header { padding: 0; }
  .navigation-logo-top .navigation-body-header { padding-top: 20px; }
  .navigation-body-header img { display: none; }
}

/* MY ADD */
@media (min-width:0) and (max-width:991px) {
  .navigation-body-header { padding: 16px 16px 8px 16px }
  .navigation-body-header img { width: 170px; height: auto; }
  .navigation-body-header i { position: absolute; top: 16px; right: 16px; color: #888888 }
  .navigation-body-header i:hover { color: #c1daf2 }
}
.navigation-body-close-button { font-size: 25px; line-height: initial; width: 30px; height: 30px; display: flex; margin-left: auto; padding-bottom: 2px; color: #d1d1d1; cursor: pointer; text-align: center; justify-content: center; align-items: center; }
@media (min-width:992px) {
  .navigation-body-close-button { display: none; }
}
.navigation-body-section { width: 100%; display: inline-flex; flex-direction: column; padding: 16px; }
@media (min-width:992px) {
  .navigation-body-section { width: auto; display: inline-block; }
}
.navigation-body-section + .navigation-body-section { padding-top: 0; }
@media (min-width:992px) {
  .navigation-body-section + .navigation-body-section { padding-top: 16px; }
}

/* NAVIGATION MENU
================================*/
.navigation-menu { font-size: 0rem; width: 100%; display: inline-block; float: left; margin: 0; padding: 0; list-style: none; }
@media (min-width:992px) {
  .navigation-menu { width: auto; display: flex; align-items: center; }
  .navigation .navigation-menu { align-self: stretch; align-items: stretch; }
  .navigation-logo-top .navigation-menu { justify-content: center; }
}

/* Navbar item */
.navigation-item { width: 100%; display: inline-block; float: left; margin: 0; }
@media (min-width:992px) {
  .navigation-item { width: auto; }
}

/* Navbar link */
.navigation-link { position: relative; font-size: 16px; width: 100%; display: flex; padding: 8px 16px; color: #222; border-bottom: solid 1px #CCC; transition: border-color .3s, color .3s, background .3s; text-decoration: none !important; letter-spacing: .3px; align-items: center; }
.navigation-link:visited { color: #222; }
@media (min-width:992px) {
  .navigation-item:last-child .navigation-link { border-top: none; border-bottom: none; }
}
.navigation-item:not(.navigation-brand-text):hover .navigation-link, .navigation-item:not(.navigation-brand-text):focus .navigation-link, .navigation-item:not(.navigation-brand-text).is-active .navigation-link { color: #01579B; background-color: #c1daf2; border-color: #c1daf2; }
@media (min-width:992px) {
  .navigation-link { height: 100%; padding: 10px 16px; border: none; }
}
.navigation-menu.navigation-social-menu + .navigation-menu:not(.navigation-social-menu) .navigation-item:first-child .navigation-link { border-top: solid 1px #E5E6E8; }
@media (min-width:992px) {
  .navigation-menu.navigation-social-menu + .navigation-menu:not(.navigation-social-menu) .navigation-item:first-child .navigation-link { border-top: none; }
}
.navigation-link i { font-size: 24px; line-height: 0; width: 28px; float: left; text-align: center; }
.navigation-link i[class*=fa] { font-size: 21px; }
@media (min-width:992px) {
  .navigation-link i { width: auto; }
}
.navigation-link i + span { padding-left: 8px; }
.navigation-icon-item .navigation-link { padding: 13px 16px; }
@media (min-width:992px) {
  .navigation-icon-item .navigation-link { width: 100%; margin: 0; padding: 25px 25.6px; border-left: solid 1px #E5E6E8; }
}
@media (min-width:992px) {
  .navigation-icon-item .navigation-link span:not(.submenu-indicator) { display: none; }
}
@media (min-width:992px) {
  .navigation-icon-item .navigation-link .navigation-badge { right: 10px; }
}
@media (min-width:992px) {
  .navigation-icon-item .navigation-link i { font-size: 25.6px; line-height: 26px; width: 20px; height: 26px; float: left; margin: 0; text-align: center; }
  .navigation-icon-item .navigation-link i[class*=fa] { font-size: 21px; width: auto; }
}
.navigation-body-section + .navigation-menu:not(.navigation-social-menu) > .navigation-item:first-child > .navigation-link { border-bottom: solid 1px #CCC; }
@media (min-width:992px) {
  .navigation-body-section + .navigation-menu:not(.navigation-social-menu) > .navigation-item:first-child > .navigation-link { border-top: none; }
}

/* NAVIGATION SOCIAL MENU
================================*/
.navigation-social-menu { width: 100%; display: flex; padding: 0 16px; text-align: center; justify-content: center; }
@media (min-width:992px) {
  .navigation-social-menu { width: auto; }
}
@media (max-width:991px) {
  .navigation-social-menu { padding: 16px; }
}
.navigation-social-menu .navigation-item { width: auto; display: inline-block; }
.navigation-social-menu .navigation-item .navigation-link { margin: 0; padding: 0 5px; border: none; }
.navigation-social-menu .navigation-item .navigation-link i { font-size: 19px; line-height: initial; width: 38px; height: 38px; display: flex; margin: 0; background-color: #404040; border-radius: 50%; justify-content: center; align-items: center; }
.navigation-social-menu .navigation-item .navigation-link i:not([class*=fa]):before { margin-right: -1px; }
.navigation-social-menu .navigation-item .navigation-link:hover, .navigation-social-menu .navigation-item .navigation-link:focus, .navigation-social-menu .navigation-item .navigation-link.is-active { color: #c1daf2; background: transparent; }
.navigation-social-menu .navigation-item:last-child .navigation-link { padding-right: 0; }
.navigation-social-menu .navigation-item:first-child .navigation-link { padding-left: 0; }
@media (max-width:991px) {
  .navigation-social-menu .navigation-item { display: flex; }
}

/* SUBMENU INDICATOR
================================*/
.submenu-indicator { position: absolute; z-index: 200; top: 0; right: 0; width: 46px; height: 100%; }
@media (min-width:992px) {
  .submenu-indicator { position: relative; width: 6px; height: 6px; float: right; margin-left: 6px; }
  li:not(.navigation-icon-item) span:not(.navigation-badge) + .submenu-indicator, li:not(.navigation-icon-item) i + span + .navigation-badge + .submenu-indicator { margin-left: 0; }
}
.submenu-indicator:after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-width: 0 1px 1px 0; border-style: solid; border-color: transparent #404040 #404040 transparent; transition: border .3s, transform .3s; transform: rotate(45deg); }
.navigation-item:hover > .navigation-link > .submenu-indicator:after, .navigation-item:focus > .navigation-link > .submenu-indicator:after, .navigation-item.is-active > .navigation-link > .submenu-indicator:after { border-color: transparent #01579B #01579B transparent; }
.submenu-indicator.is-active:after { transform: rotate(-135deg); }
@media (min-width:992px) {
  .submenu-indicator.is-active:after { transform: rotate(45deg); }
}

/* NAVIGATION BUTTON
================================*/
.navigation-btn { font-size: 14px; line-height: 1.4; width: 100%; display: block; padding: 10px 12px; color: #01579B; background-color: #c1daf2; border: solid 1px #c1daf2; border-radius: 4px; cursor: pointer; transition: opacity .1s, background .3s; text-align: center; white-space: nowrap; }
.navigation-btn:hover, .navigation-btn:focus { color: #01579B; background-color: #02a9e6; text-decoration: none; }
@media (min-width:992px) {
  .navigation-btn { width: auto; }
}

/* NAVIGATION TEXT
================================*/
.navigation-text { font-size: 14px; display: inline-block; padding: 11px 0; color: #d1d1d1; }
@media (min-width:992px) {
  .navigation-text { padding: 11px 16px; }
}

/* NAVIGATION BADGE
================================*/
.navigation-badge { font-size: 11px; line-height: 18px; height: 18px; min-width: 18px !important; display: inline-block; margin: 0 5px; color: #01579B; background-color: #c1daf2; border-radius: 20px; text-align: center; }
@media (min-width:992px) {
  .navigation-link .navigation-badge { position: absolute; top: calc(50% + -20px); right: -2px; }
  .navigation-dropdown-link .navigation-badge { position: static; }
}

/* NAVIGATION INLINE FORM
================================*/
.navigation-inline-form { position: relative; }
@media (min-width:992px) {
  .navigation-inline-form { display: flex; }
}
.navigation-inline-form .navigation-btn { position: absolute; top: 0; right: 4px; width: auto; height: 100%; display: flex; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.navigation-input { font-size: 14px; line-height: 1.4; width: 100%; padding: 11px 32px 11px 12px; color: #d1d1d1; background-color: #3d3d3d; border-width: 1px; border-style: solid; border-color: #404040; border-radius: 4px; outline-width: 0; box-shadow: none; transition: border .3s; }
.navigation-input:hover, .navigation-input:focus { border-color: #c1daf2; }
.navigation-input::placeholder { color: lightgray; }
.navigation-search-icon { position: relative; width: 14px; height: 14px; display: inline-block; color: white; border: 2px solid; border-radius: 50%; transition: color .3s; transform: rotate(-45deg); text-align: left; vertical-align: middle; text-indent: -9999px; }
.navigation-search-icon:after, .navigation-search-icon:before { content: ''; pointer-events: none; }
.navigation-search-icon:before { position: absolute; top: 10px; left: 50%; width: 2px; height: 7px; border-radius: 0 0 1px 1px; box-shadow: inset 0 0 0 32px; transform: translateX(-50%); }
.navigation-btn:hover .navigation-search-icon { color: #c1daf2; }

/* NAVIGATION DROPDOWN
================================*/
.navigation-dropdown { position: static; z-index: 201; width: 100%; max-height: 0; display: block; overflow: hidden; margin: 0; padding: 0; list-style: none; background-color: #ecf0fb; transition: max-height 2s cubic-bezier(0, 1, 0, 1); }
.navigation-dropdown.is-visible { max-height: 2500px; transition: max-height 5s ease-out; }
@media (min-width:992px) {
  .navigation-dropdown { position: absolute; width: 180px; display: inline-block; margin-top: 4px; opacity: 0; box-shadow: 0 12px 20px -5px rgba(0, 0, 0, .05); transition: opacity .1s linear, max-height 0s linear .0s, margin .0s; transition-delay: 0s; border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; }
  .navigation-dropdown.is-visible { overflow: visible; margin-top: 0; opacity: 1; transition: opacity .1s linear, max-height 0s linear, margin .2s; transition-delay: 0.1s; }
}
.navigation-dropdown .navigation-dropdown { left: 100%; }
.navigation-dropdown .navigation-dropdown-left { right: 100%; left: auto; }
.navigation-dropdown-item { width: 100%; display: inline-block; float: left; margin: 0; border-bottom: 1px solid #CCC; }
@media (min-width:0px) and (max-width:991px) {
  .navigation-dropdown-item { border-bottom: 0; }
}
.navigation-dropdown-link { position: relative; font-size: 16px; width: 100%; display: inline-block; color: #222; border-bottom: solid 1px #CCC; transition: border .3s, color .3s, background .3s; }
.navigation-dropdown-link:visited { color: #222; }
.navigation-dropdown-item:hover > .navigation-dropdown-link, .navigation-dropdown-item:focus > .navigation-dropdown-link, .navigation-dropdown-item.is-active > .navigation-dropdown-link { color: #01579B; background-color: #c1daf2; border-color: #c1daf2; text-decoration: none !important; }
.navigation-dropdown-link { padding: 8px 16px; }
.navigation-dropdown-link + ul .navigation-dropdown-link { padding-left: 16px; }
.navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link { padding-left: 48px; }
.navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link { padding-left: 48px; }
.navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link { padding-left: 64px; }
.navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link + ul .navigation-dropdown-link { padding-left: 128px; }
@media (min-width:992px) {
  .navigation-dropdown-link { border-bottom: none; }
}

/* MY ADD */
@media (min-width:0px) and (max-width:991px) {
  .navigation-dropdown-link { background-color: rgba(191, 191, 191, 0.2); }
  .navigation-dropdown-link + ul { background-color: rgba(191, 191, 191, 0.3); }
  .navigation-dropdown-item:hover > .navigation-dropdown-link, .navigation-dropdown-item:focus > .navigation-dropdown-link, .navigation-dropdown-item.is-active > .navigation-dropdown-link { background-color: rgba(191, 191, 191, 0.6); border-bottom: 1px solid #ccc; color: #222; }
  .navigation-dropdown-item.is-active > .navigation-dropdown-link { color: #c1daf2; }
}
.navigation-dropdown-link > .submenu-indicator { position: absolute; top: 0; right: 0; }
.navigation-dropdown-item:hover > .navigation-dropdown-link > .submenu-indicator:after, .navigation-dropdown-item:focus > .navigation-dropdown-link > .submenu-indicator:after, .navigation-dropdown-item.is-active > .navigation-dropdown-link > .submenu-indicator:after { border-color: transparent #222 #222 transparent; }
@media (min-width:992px) {
  .navigation-dropdown-item.is-active > .navigation-dropdown-link > .submenu-indicator:after { border-color: transparent #01579B #01579B transparent; }
}
@media (min-width:0px) and (max-width:991px) {
  .navigation-dropdown-item.is-active > .navigation-dropdown-link > .submenu-indicator:after { border-color: transparent #c1daf2 #c1daf2 transparent; }
}
@media (min-width:992px) {
  .navigation-dropdown-link > .submenu-indicator { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
  .navigation-dropdown-link > .submenu-indicator:after { transform: rotate(-45deg); }
  .navigation-dropdown-link > .submenu-indicator.submenu-indicator-left:after { transform: rotate(135deg); }
}

/* MEGAMENU
================================*/
.navigation-megamenu { position: static; z-index: 201; font-size: 14px; width: 100%; max-height: 0; display: block; overflow: hidden; color: #d1d1d1; background-color: #3b3b3b; transition: max-height 2s cubic-bezier(0, 1, 0, 1); }
.navigation-megamenu.is-visible { max-height: 2500px; border-bottom: solid 1px #CCC; transition: max-height 5s ease-out; }
@media (min-width:992px) {
  .navigation-megamenu { position: absolute; margin-top: 10px; border-top: solid 0 transparent; opacity: 0; transition: opacity .1s linear, max-height 0s linear .6s, margin .2s; }
  .navigation-megamenu.is-visible { margin-top: 0; border-bottom: none; opacity: 1; box-shadow: 0 12px 20px -5px rgba(0, 0, 0, .05); transition: opacity .1s linear, max-height 0s linear, margin .2s; }
  .navigation-megamenu.navigation-megamenu-half { width: 50%; }
  .navigation-megamenu.navigation-megamenu-quarter { width: 25%; }
}
.scroll-momentum .navigation-megamenu { transform: translateZ(0); }
@media (min-width:992px) {
  .scroll-momentum .navigation-megamenu { transform: none; }
}
.navigation-megamenu [class*='container'] { width: 100%; }
.navigation-megamenu [class*='container'] [class*='col-'] { padding: 0; }
.navigation-megamenu-container { display: table; padding: 16px; }

/* MEGAMENU GRID
================================*/
.navigation-row { width: 100%; display: flex; flex-wrap: wrap; }
.navigation-row > [class^=navigation-col] { position: relative; width: 100%; min-height: 20px; margin-bottom: 1rem; }
@media (min-width:992px) {
  .navigation-row .navigation-col { max-width: 100%; flex-basis: 0; flex-grow: 1; }
}
@media (min-width:992px) {
  .navigation-row .navigation-col-1 { max-width: 8.333333%; flex: 0 0 8.333333%; }
  .navigation-row .navigation-col-2 { max-width: 16.666666%; flex: 0 0 16.666666%; }
  .navigation-row .navigation-col-3 { max-width: 25%; flex: 0 0 25%; }
  .navigation-row .navigation-col-4 { max-width: 33.333333%; flex: 0 0 33.333333%; }
  .navigation-row .navigation-col-5 { max-width: 41.666666%; flex: 0 0 41.666667%; }
  .navigation-row .navigation-col-6 { max-width: 50%; flex: 0 0 50%; }
  .navigation-row .navigation-col-7 { max-width: 58.333333%; flex: 0 0 58.333333%; }
  .navigation-row .navigation-col-8 { max-width: 66.666666%; flex: 0 0 66.666666%; }
  .navigation-row .navigation-col-9 { max-width: 75%; flex: 0 0 75%; }
  .navigation-row .navigation-col-10 { max-width: 83.333333%; flex: 0 0 83.333333%; }
  .navigation-row .navigation-col-11 { max-width: 91.666666%; flex: 0 0 91.666666%; }
  .navigation-row .navigation-col-12 { max-width: 100%; flex: 0 0 100%; }
}
.navigation-row:last-of-type [class^=navigation-col]:last-child { margin-bottom: 0; }
@media (min-width:992px) {
  .navigation-row:last-of-type [class^=navigation-col] { margin-bottom: 0; }
}

/* MEGAMENU LIST
================================*/
.navigation-list { width: 100%; margin: 0; padding: 0; list-style: none; }
@media (min-width:992px) {
  [class^=navigation-col]:last-of-type .navigation-list { padding: 0; }
}
.navigation-list > li { width: 100%; margin: 0; }
.navigation-list > li > a { position: relative; font-size: 13px; display: flex; padding: 10px 30px 10px 30px; color: #d1d1d1; transition: color .3s, background .3s; text-decoration: none; align-items: center; }
.navigation-list > li > a:hover { color: #eaeaea; background-color: #c1daf2; }
@media (min-width:992px) {
  .navigation-list > li > a { border-right: solid 1px #E5E6E8; }
}
[class^=navigation-col]:last-of-type .navigation-list > li > a { border-right: none; }
.navigation-list > li:not(.navigation-list-heading) > a:before { content: '\25E5'; position: absolute; left: 12px; font-size: 9px; transform: rotate(45deg); }
.navigation-list-heading { font-weight: bold; text-transform: uppercase; }
.navigation-list-heading > a { padding: 0 16px 13px !important; }
.navigation-list-heading > a:hover { color: #d1d1d1 !important; background-color: transparent !important; }

/* UTILITIES
================================*/
.align-to-right { margin-left: auto !important; }
.align-to-left { margin-right: auto !important; }
.margin-top { margin-top: 1rem !important; }
@media (min-width:992px) {
  .margin-top { margin-top: 0 !important; }
}
@media (max-width:991px) {
  .hide-on-portrait { display: none !important; }
}
@media (min-width:992px) {
  .hide-on-landscape { display: none !important; }
}
