/****************************************************************
 *
 *  Name: Navigation Topbar Styles
 *  Author: Samantha Pasch
 *  Author URI: http://www.samanthapasch.com/
 *  Description: Topbar navigation CSS styles.
 *
****************************************************************/

/*===============================================================
 *
 *  1) TOPBAR
 *
===============================================================*/

/* A) Fix WP Admin Bar
=================================*/

/* Desktop */
@media (min-width: 783px) {

    body.admin-bar #main-navigation {
        top: 2rem; }
}


/* Tablet */
@media (min-width: 768px) and (max-width: 782px) {

    body.admin-bar #main-navigation {
        top: 2.875rem; }
}


/* Mobile */
@media (max-width: 767px) {

    body.admin-bar #main-navigation {
        top: 2.875rem; }
}


/* B) Menu Topbar 
=================================*/

#main-navigation {
  top: 0;
  width: 100%;
  height: var(--topbar-height);
  margin-top: 0!important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 500;
}

.navigation-placeholder {
  height: var(--topbar-height);
  width: 100%;
  display: none;
}

.menu-topbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  top: 0;
  width: 100%;
  height: var(--topbar-height);
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  z-index: 750;
}

.topbar-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
  padding: 0rem 1.25rem;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.menu-topbar .topbar-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  max-width: 100rem;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.menu-topbar .topbar-content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.menu-topbar .topbar-content > .topbar-content-inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  vertical-align: middle;
}

.menu-topbar .topbar-left-menu {
  display: -webkit-inline-box!important;
  display: -moz-inline-box!important;
  display: -ms-inline-flexbox!important;
  display: -webkit-inline-flex!important;
  display: inline-flex!important;
  position: relative;
  height: auto;
  text-align: left;
  float: none;
  clear: none;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.menu-topbar .topbar-center-menu {
  display: -webkit-inline-box!important;
  display: -moz-inline-box!important;
  display: -ms-inline-flexbox!important;
  display: -webkit-inline-flex!important;
  display: inline-flex!important;
  position: relative;
  height: auto;
  text-align: center;
  float: none;
  clear: none;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.menu-topbar .topbar-right-menu {
  display: -webkit-inline-box!important;
  display: -moz-inline-box!important;
  display: -ms-inline-flexbox!important;
  display: -webkit-inline-flex!important;
  display: inline-flex!important;
  position: relative;
  height: auto;
  text-align: right;
  float: none;
  clear: none;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

/* Desktop */
@media (min-width: 1021px) {

    .menu-topbar .topbar-left-menu {
      -webkit-flex: 33.33%!important;
      -ms-flex: 33.33%!important;
      flex: 33.33%!important;
    }

    .menu-topbar .topbar-center-menu {
      -webkit-flex: 1 1 auto!important;
      -ms-flex: 1 1 auto!important;
      flex: 1 1 auto!important;
    }

    .menu-topbar .topbar-right-menu {
      -webkit-flex: 33.33%!important;
      -ms-flex: 33.33%!important;
      flex: 33.33%!important;
    }

}


/* C) Transitions
=================================*/

/* TOPBAR SHADOW (INDEX/POST) */
html.on-post body.global-nav-css #main-navigation > .menu-topbar,
html.on-index body.global-nav-css #main-navigation > .menu-topbar {
    -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0);
    -webkit-transition: box-shadow 250ms ease 300ms;
    -moz-transition: box-shadow 250ms ease 300ms;
    -ms-transition: box-shadow 250ms ease 300ms;
    -o-transition: box-shadow 250ms ease 300ms;
    transition: box-shadow 250ms ease 300ms;
}

html.on-post body.global-nav-css #main-navigation.fade-in > .menu-topbar,
html.on-index body.global-nav-css #main-navigation.fade-in > .menu-topbar {
    -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.14);
    -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.14);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.14);
}


/* TOPBAR BACKGROUND (INDEX/POST) */
html.on-post body.global-nav-css #main-navigation .topbar-wrapper,
html.on-index body.global-nav-css #main-navigation .topbar-wrapper {
    background-color: transparent;
    -webkit-transition: background-color 250ms ease 300ms;
    -moz-transition: background-color 250ms ease 300ms;
    -ms-transition: background-color 250ms ease 300ms;
    -o-transition: background-color 250ms ease 300ms;
    transition: background-color 250ms ease 300ms;
}

html.on-post body.global-nav-css #main-navigation.fade-in .topbar-wrapper,
html.on-index body.global-nav-css #main-navigation.fade-in .topbar-wrapper {
    background-color: var(--primary-bg);
}

/* TOPBAR SHADOW (PAGES) */
html.on-page body.global-nav-css #main-navigation > .menu-topbar {
    -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0);
    -webkit-transition: box-shadow 250ms ease 300ms;
    -moz-transition: box-shadow 250ms ease 300ms;
    -ms-transition: box-shadow 250ms ease 300ms;
    -o-transition: box-shadow 250ms ease 300ms;
    transition: box-shadow 250ms ease 300ms;
}

html.on-page body.global-nav-css #main-navigation.fade-in > .menu-topbar {
    -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.14);
    -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.14);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.14);
}


/* TOPBAR BACKROUND (PAGES) */
html.on-page body.global-nav-css #main-navigation .topbar-wrapper {
    background-color: var(--primary-bg);
}


/* D) Topbar Open 
=================================*/

.menu-topbar .topbar-left-menu .open-button-set {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  align-items: center;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.menu-topbar .topbar-right-menu .open-button-set {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  align-items: center;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  text-align: right;
}

.burger {
  display: inline-block;
  margin: 0;
  padding: 0px;
  border: 0;
  background-color: transparent;
  overflow: hidden;
}



/*===============================================================
 *
 *  2) BURGER MENUS
 *
===============================================================*/

.burger-box {
  display: inline-block;
  position: relative;
  width: 2.25rem;
  height: 1rem;
}

.burger-open {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}


/* A) Burger Double Line (for 'Dropdown' menu)
===================================================

HTML Structure

<button type="button" class="open-button burger burger-type--double">
    <div class="burger-box">                              
      <div class="burger-open">
          <div class="burger-open-line shift-in"></div>
          <div class="burger-open-line shift-in"></div>
      </div>
      <div class="burger-close">
          <div class="burger-close-line shift-out"></div>
          <div class="burger-close-line shift-out"></div>
      </div>                              
    </div>
</button>

=================================================*/

/* Burger Open */

.burger-type--double .burger-open-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: var(--primary-colour);
}

.burger-type--double .burger-open-line:first-child {
  top: 4px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease-in-out, ease;
  -moz-transition-timing-function: ease-in-out, ease;
  -o-transition-timing-function: ease-in-out, ease;
  transition-timing-function: ease-in-out, ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.burger-type--double .burger-open-line:last-child {
  bottom: 4px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease-in-out, ease;
  -moz-transition-timing-function: ease-in-out, ease;
  -o-transition-timing-function: ease-in-out, ease;
  transition-timing-function: ease-in-out, ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.burger-type--double .burger-open-line:first-child.shift-out {
  -webkit-transition-delay: 40ms, 0ms;
  -moz-transition-delay: 40ms, 0ms;
  -o-transition-delay: 40ms, 0ms;
  transition-delay: 40ms, 0ms;
}

.burger-type--double .burger-open-line:first-child.shift-in {
  -webkit-transition-delay: 240ms, 0ms;
  -moz-transition-delay: 240ms, 0ms;
  -o-transition-delay: 240ms, 0ms;
  transition-delay: 240ms, 0ms;
}

.burger-type--double .burger-open-line:last-child.shift-out {
  -webkit-transition-delay: 150ms, 0ms;
  -moz-transition-delay: 150ms, 0ms;
  -o-transition-delay: 150ms, 0ms;
  transition-delay: 150ms, 0ms;
}

.burger-type--double .burger-open-line:last-child.shift-in {
  -webkit-transition-delay: 350ms, 0ms;
  -moz-transition-delay: 350ms, 0ms;
  -o-transition-delay: 350ms, 0ms;
  transition-delay: 350ms, 0ms;
}

.burger-type--double .burger-open-line:first-child.shift-out,
.burger-type--double .burger-open-line:last-child.shift-out {
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: -100% 50%;
  -moz-transform-origin: -100% 50%;
  -ms-transform-origin: -100% 50%;
  -o-transform-origin: -100% 50%;
  transform-origin: -100% 50%;
}

.burger-type--double .burger-open-line:first-child.shift-in,
.burger-type--double .burger-open-line:last-child.shift-in {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

/* Burger Close */

.burger-type--double .burger-close {
  position: absolute;
  top: -0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
}

.burger-type--double .burger-close-line {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 2rem;
  height: 2px;
  background-color: var(--primary-colour);
}

.burger-type--double .burger-close-line:first-child {  
  -webkit-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -moz-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -ms-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -o-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease-in-out, ease;
  -moz-transition-timing-function: ease-in-out, ease;
  -o-transition-timing-function: ease-in-out, ease;
  transition-timing-function: ease-in-out, ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.burger-type--double .burger-close-line:last-child {
  -webkit-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  -moz-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  -ms-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  -o-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  transform: rotate(25deg) skewX(.45rad) scale(0, 1);

  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;

  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;

  -webkit-transition-timing-function: ease-in-out, ease;
  -moz-transition-timing-function: ease-in-out, ease;
  -o-transition-timing-function: ease-in-out, ease;
  transition-timing-function: ease-in-out, ease;

  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.burger-type--double .burger-close-line:first-child.shift-out {
  -webkit-transition-delay: 40ms;
  -moz-transition-delay: 40ms;
  -o-transition-delay: 40ms;
  transition-delay: 40ms;
}

.burger-type--double .burger-close-line:first-child.shift-in {
  -webkit-transition-delay: 240ms;
  -moz-transition-delay: 240ms;
  -o-transition-delay: 240ms;
  transition-delay: 240ms;
}


.burger-type--double .burger-close-line:last-child.shift-out {
  -webkit-transition-delay: 90ms;
  -moz-transition-delay: 90ms;
  -o-transition-delay: 90ms;
  transition-delay: 90ms;
}

.burger-type--double .burger-close-line:last-child.shift-in {
  -webkit-transition-delay: 390ms;
  -moz-transition-delay: 390ms;
  -o-transition-delay: 390ms;
  transition-delay: 390ms;
}

.burger-type--double .burger-close-line:first-child.shift-out {
  -webkit-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -moz-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -ms-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  -o-transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
  transform: rotate(-25deg) skewX(-.45rad) scale(0, 1);
}

.burger-type--double .burger-close-line:first-child.shift-in {
  -webkit-transform: rotate(-25deg) skewX(-.45rad) scale(1, 1);
  -moz-transform: rotate(-25deg) skewX(-.45rad) scale(1, 1);
  -ms-transform: rotate(-25deg) skewX(-.45rad) scale(1, 1);
  -o-transform: rotate(-25deg) skewX(-.45rad) scale(1, 1);
  transform: rotate(-25deg) skewX(-.45rad) scale(1, 1);
}

.burger-type--double .burger-close-line:last-child.shift-out {
  -webkit-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  -moz-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  -ms-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  -o-transform: rotate(25deg) skewX(.45rad) scale(0, 1);
  transform: rotate(25deg) skewX(.45rad) scale(0, 1);
}

.burger-type--double .burger-close-line:last-child.shift-in {
  -webkit-transform: rotate(25deg) skewX(.45rad) scale(1, 1);
  -moz-transform: rotate(25deg) skewX(.45rad) scale(1, 1);
  -ms-transform: rotate(25deg) skewX(.45rad) scale(1, 1);
  -o-transform: rotate(25deg) skewX(.45rad) scale(1, 1);
  transform: rotate(25deg) skewX(.45rad) scale(1, 1);
}


/* A.2) Burger Double (for 'Slide' menu)
===================================================

HTML Structure

<div class="burger-open" class="open-button burger burger-type--double-slide">                                 
  <div class="burger-open-line shift-in"></div>
  <div class="burger-open-line shift-in"></div>    
</div>

=================================================*/

.burger-type--double-slide .burger-open-line,
.burger-type--double-slide .burger-open-line:first-child,
.burger-type--double-slide .burger-open-line:last-child {
  position: absolute;
  height: 0.125rem;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: 0s, .15s;
  -moz-transition-duration: 0s, .15s;
  -ms-transition-duration: 0s, .15s;
  -o-transition-duration: 0s, .15s;
  transition-duration: 0s, .15s;
}

.burger-type--double-slide .burger-open-line:first-child::before,
.burger-type--double-slide .burger-open-line:last-child::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

html.on-post body.global-nav-css #main-navigation .burger-type--double-slide .burger-open-line:first-child::before,
html.on-index body.global-nav-css #main-navigation .burger-type--double-slide .burger-open-line:first-child::before,
html.on-post body.global-nav-css #main-navigation .burger-type--double-slide .burger-open-line:last-child::before,
html.on-index body.global-nav-css #main-navigation .burger-type--double-slide .burger-open-line:last-child::before {
  background-color: var(--overlay-colour);
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -ms-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -ms-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
   -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}

html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--double-slide .burger-open-line:first-child::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--double-slide .burger-open-line:first-child::before,
html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--double-slide .burger-open-line:last-child::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--double-slide .burger-open-line:last-child::before {
  background-color: var(--primary-colour);
}

html.on-page body.global-nav-css #main-navigation .burger-type--double-slide .burger-open-line:first-child::before,
html.on-page body.global-nav-css #main-navigation .burger-type--double-slide .burger-open-line:last-child::before {
  background-color: var(--primary-colour);
}

.burger-type--double-slide .burger-open-line:first-child {
  content: "";
  display: block;
  top: 4px;
  width: 100%;
  -webkit-transition-property: top;
  -moz-transition-property: top;
  -ms-transition-property: top;
  -o-transition-property: top;
  transition-property: top;
  -webkit-transition-duration: 120ms;
  -moz-transition-duration: 120ms;
  -ms-transition-duration: 120ms;
  -o-transition-duration: 120ms;
  transition-duration: 120ms;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.burger-type--double-slide .burger-open-line:last-child {
  content: "";
  display: block;
  bottom: 4px;
  width: 100%;
  -webkit-transition-property: bottom, opacity;
  -moz-transition-property: bottom, opacity;
  -ms-transition-property: bottom, opacity;
  -o-transition-property: bottom, opacity;
  transition-property: bottom, opacity;
  -webkit-transition-duration: 120ms;
  -moz-transition-duration: 120ms;
  -ms-transition-duration: 120ms;
  -o-transition-duration: 120ms;
  transition-duration: 120ms;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

[data-status-sidebar="active"] .burger-type--double-slide .burger-open-line:first-child {
  top: 2px;
}

[data-status-sidebar="active"] .burger-type--double-slide .burger-open-line:last-child {
  bottom: 2px;
}


/* B) Burger Asymmetric (for 'Dropdown' menu)
===================================================

(1) HTML Structure: Original Burger NEVER DELETE.

<div class="burger-open" class="open-button burger burger-type--asymmetric">                                 
  <div class="burger-open-line shift-in"></div>    
</div>

(2) HTML Structure: Works with index heros.

<div class="burger-open">                                 
  <div class="burger-open-line shift-in"></div>
  <div class="burger-open-line shift-in"></div>
  <div class="burger-open-line shift-in"></div>    
</div>

=================================================*/

/* (1) Burger Open */

/*
.burger-type--asymmetric .burger-open-line,
.burger-type--asymmetric .burger-open-line:before,
.burger-type--asymmetric .burger-open-line:after {
  position: absolute;
  height: 0.125rem;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: 0s, .15s;
  -moz-transition-duration: 0s, .15s;
  -ms-transition-duration: 0s, .15s;
  -o-transition-duration: 0s, .15s;
  transition-duration: 0s, .15s;
  -webkit-transition-property: width, transform;
  -moz-transition-property: width, transform;
  -ms-transition-property: width, transform;
  -o-transition-property: width, transform;
  transition-property: width, transform;
}

.burger-type--asymmetric .burger-open-line {
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -1px;
}

.burger-type--asymmetric .burger-open-line:before {
  content: "";
  display: block;
  top: -7px;
  left: 0;
  width: 50%;
}

.burger-type--asymmetric .burger-open-line:after {
  content: "";
  display: block;
  bottom: -7px;
  right: 0;
  width: 50%;
}

.burger-type--asymmetric .burger-open-line {
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -ms-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-delay: 0ms, 300ms;
  -moz-transition-delay: 0ms, 300ms;
  -ms-transition-delay: 0ms, 300ms;
  -o-transition-delay: 0ms, 300ms;
  transition-delay: 0ms, 300ms;
  -webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -moz-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -ms-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -o-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -webkit-transition-duration: 120ms;
  -moz-transition-duration: 120ms;
  -ms-transition-duration: 120ms;
  -o-transition-duration: 120ms;
  transition-duration: 120ms;
}

[data-status-sidebar="active"] .burger-type--asymmetric .burger-open-line {
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -ms-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-delay: 120ms, 0ms;
  -moz-transition-delay: 120ms, 0ms;
  -ms-transition-delay: 120ms, 0ms;
  -o-transition-delay: 120ms, 0ms;
  transition-delay: 120ms, 0ms;
  -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -ms-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -o-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  transform: rotate(25deg);
}

.burger-type--asymmetric .burger-open-line:before {
  -webkit-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  -moz-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  -ms-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  -o-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
}

[data-status-sidebar="active"] .burger-type--asymmetric .burger-open-line:before {
  top: 0;
  opacity: 0;
  -webkit-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  -moz-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  -ms-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  -o-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
}

.burger-type--asymmetric .burger-open-line:after {
  -webkit-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  -moz-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  -ms-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  -o-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
}

[data-status-sidebar="active"] .burger-type--asymmetric .burger-open-line:after {
  bottom: 0;
  width: 100%;
  -webkit-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -moz-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -ms-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -o-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  -o-transform: rotate(-50deg);
  transform: rotate(-50deg);
}
*/

/* (2) Burger Open */

.burger-type--asymmetric .burger-open-line:nth-of-type(1),
.burger-type--asymmetric .burger-open-line:nth-of-type(2),
.burger-type--asymmetric .burger-open-line:nth-of-type(3) {
  position: absolute;
  height: 0.125rem;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: 0s, .15s;
  -moz-transition-duration: 0s, .15s;
  -ms-transition-duration: 0s, .15s;
  -o-transition-duration: 0s, .15s;
  transition-duration: 0s, .15s;
  -webkit-transition-property: width, transform;
  -moz-transition-property: width, transform;
  -ms-transition-property: width, transform;
  -o-transition-property: width, transform;
  transition-property: width, transform;
}

.burger-type--asymmetric .burger-open-line:nth-of-type(2) {
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -1px;
}

.burger-type--asymmetric .burger-open-line:nth-of-type(1) {
  display: block;
  top: 0px;
  left: 0;
  width: 50%;
}

.burger-type--asymmetric .burger-open-line:nth-of-type(3) {
  display: block;
  bottom: 0px;
  right: 0;
  width: 50%;
}

.burger-type--asymmetric .burger-open-line:nth-of-type(1)::before,
.burger-type--asymmetric .burger-open-line:nth-of-type(2)::before,
.burger-type--asymmetric .burger-open-line:nth-of-type(3)::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

html.on-post body.global-nav-css #main-navigation .burger-type--asymmetric .burger-open-line:nth-of-type(1)::before,
html.on-post body.global-nav-css #main-navigation .burger-type--asymmetric .burger-open-line:nth-of-type(2)::before,
html.on-post body.global-nav-css #main-navigation .burger-type--asymmetric .burger-open-line:nth-of-type(3)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--asymmetric .burger-open-line:nth-of-type(1)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--asymmetric .burger-open-line:nth-of-type(2)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--asymmetric .burger-open-line:nth-of-type(3)::before {
  background-color: var(--overlay-colour);
}

.burger-type--asymmetric .burger-open-line:nth-of-type(2) {
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -ms-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-delay: 0ms, 300ms;
  -moz-transition-delay: 0ms, 300ms;
  -ms-transition-delay: 0ms, 300ms;
  -o-transition-delay: 0ms, 300ms;
  transition-delay: 0ms, 300ms;
  -webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -moz-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -ms-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -o-transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  transition-timing-function: cubic-bezier(.55,.055,.675,.19), ease;
  -webkit-transition-duration: 120ms;
  -moz-transition-duration: 120ms;
  -ms-transition-duration: 120ms;
  -o-transition-duration: 120ms;
  transition-duration: 120ms;
}

[data-status-sidebar="active"] .burger-type--asymmetric .burger-open-line:nth-of-type(2) {
  -webkit-transition-property: transform, background-color;
  -moz-transition-property: transform, background-color;
  -ms-transition-property: transform, background-color;
  -o-transition-property: transform, background-color;
  transition-property: transform, background-color;
  -webkit-transition-delay: 120ms, 0ms;
  -moz-transition-delay: 120ms, 0ms;
  -ms-transition-delay: 120ms, 0ms;
  -o-transition-delay: 120ms, 0ms;
  transition-delay: 120ms, 0ms;
  -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -moz-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -ms-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -o-transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  transition-timing-function: cubic-bezier(.215,.61,.355,1), ease;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}

.burger-type--asymmetric .burger-open-line:nth-of-type(1) {
  -webkit-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  -moz-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  -ms-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  -o-transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
  transition: top 120ms ease 120ms, opacity 120ms ease 120ms, background-color 120ms ease 300ms;
}

[data-status-sidebar="active"] .burger-type--asymmetric .burger-open-line:nth-of-type(1) {
  top: 0;
  opacity: 0;
  -webkit-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  -moz-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  -ms-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  -o-transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
  transition: top 120ms ease 0ms, opacity 120ms ease 0ms, background-color 120ms ease 0ms;
}

.burger-type--asymmetric .burger-open-line:nth-of-type(3) {
  -webkit-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  -moz-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  -ms-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  -o-transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
  transition: width 120ms ease 0ms, bottom 120ms ease 120ms, transform 120ms cubic-bezier(.55,.055,.675,.19) 0ms, background-color 120ms ease 300ms;
}

[data-status-sidebar="active"] .burger-type--asymmetric .burger-open-line:nth-of-type(3) {
  bottom: 7px;
  width: 100%;
  -webkit-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -moz-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -ms-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -o-transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  transition: bottom 120ms ease 0ms, transform 120ms cubic-bezier(.215,.61,.355,1) 120ms, background-color 120ms ease 0ms;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

/* Burger Close */

.burger-type--asymmetric .burger-close {
  position: absolute;
  width: 100%;
  height: 100%;
}

.burger-type--asymmetric .burger-close-line {
  display: none;
  position: absolute;
  width: 100%;
  background-color: var(--primary-colour);
}


/* B.2) Burger Asymmetric (for 'Slide' menu)
===================================================

HTML Structure

<div class="burger-open" class="open-button burger burger-type--asymmetric-slide">                                 
    <div class="burger-open-line shift-in"></div>
    <div class="burger-open-line shift-in"></div>
    <div class="burger-open-line shift-in"></div>
</div>

=================================================*/

.burger-type--asymmetric-slide .burger-open-line:nth-of-type(1),
.burger-type--asymmetric-slide .burger-open-line:nth-of-type(2),
.burger-type--asymmetric-slide .burger-open-line:nth-of-type(3) {
  position: absolute;
  height: 0.125rem;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -ms-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}

.burger-type--asymmetric-slide .burger-open-line:nth-of-type(1) {
  content: "";
  display: block;
  top: 0rem;
  left: 0rem;
  width: 50%;
  -webkit-transition: top 120ms ease-out 0ms;
  -moz-transition: top 120ms ease-out 0ms;
  -ms-transition: top 120ms ease-out 0ms;
  -o-transition: top 120ms ease-out 0ms;
  transition: top 120ms ease-out 0ms;
}

.burger-type--asymmetric-slide .burger-open-line:nth-of-type(2) {
  display: block;
  top: 50%;
  left: 0rem;
  width: 100%;
  margin-top: -0.063rem;
}

.burger-type--asymmetric-slide .burger-open-line:nth-of-type(3) {
  content: "";
  display: block;
  bottom: 0rem;
  right: 0rem;
  width: 50%;
  -webkit-transition: bottom 120ms ease-out 0ms;
  -moz-transition: bottom 120ms ease-out 0ms;
  -ms-transition: bottom 120ms ease-out 0ms;
  -o-transition: bottom 120ms ease-out 0ms;
  transition: bottom 120ms ease-out 0ms;
}

.burger-type--asymmetric-slide .burger-open-line:nth-of-type(1)::before,
.burger-type--asymmetric-slide .burger-open-line:nth-of-type(2)::before,
.burger-type--asymmetric-slide .burger-open-line:nth-of-type(3)::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

html.on-post body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(1)::before,
html.on-post body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(2)::before,
html.on-post body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(3)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(1)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(2)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(3)::before {
  background-color: var(--overlay-colour);
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -ms-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -ms-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
   -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}

html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--asymmetric-slide .burger-open-line:nth-of-type(1)::before,
html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--asymmetric-slide .burger-open-line:nth-of-type(2)::before,
html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--asymmetric-slide .burger-open-line:nth-of-type(3)::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--asymmetric-slide .burger-open-line:nth-of-type(1)::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--asymmetric-slide .burger-open-line:nth-of-type(2)::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--asymmetric-slide .burger-open-line:nth-of-type(3)::before {
  background-color: var(--primary-colour);
}

html.on-page body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(1)::before,
html.on-page body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(2)::before,
html.on-page body.global-nav-css #main-navigation .burger-type--asymmetric-slide .burger-open-line:nth-of-type(3)::before {
  background-color: var(--primary-colour);
}

[data-status-sidebar="active"] .burger-type--asymmetric-slide .burger-open-line:nth-of-type(1) {
  top: 0.125rem;
}

[data-status-sidebar="active"] .burger-type--asymmetric-slide .burger-open-line:nth-of-type(3) {
  bottom: 0.125rem;
}


/* C) Burger Triple (for 'Dropdown' menu)
===================================================

HTML Structure

<div class="burger-open" class="open-button burger burger-type--triple">                                 
    <div class="burger-open-line shift-in"></div>
    <div class="burger-open-line shift-in"></div>
    <div class="burger-open-line shift-in"></div>
</div>

=================================================*/

/* Burger Open */

.burger-type--triple .burger-open-line,
.burger-type--triple .burger-open-line:before,
.burger-type--triple .burger-open-line:after {
  position: absolute;
  width: 100%;
  height: 0.125rem;
  background-color: var(--primary-colour);
  transition-timing-function: ease;
  transition-duration: 0s, .15s;
  transition-property: transform;
}

.burger-type--triple .burger-open-line {
  display: block;
  top: 50%;
  margin-top: -1px;
}

.burger-type--triple .burger-open-line:before {
  content: "";
  display: block;
  top: -7px;
  transition: bottom .08s ease-out 0s, top .08s ease-out 0s, opacity 0s linear 0s;
  opacity: 1;
}

.burger-type--triple .burger-open-line:after {
  content: "";
  display: block;
  bottom: -7px;
  transition: bottom .08s ease-out 0s, top .08s ease-out, opacity 0s linear 0s;
  opacity: 1;
}

[data-status-sidebar="active"] .burger-type--triple .burger-open-line:before {
  top: 0;
  opacity: 0;
  transition: bottom .08s ease-out 0s, top .08s ease-out 0s, opacity 0s linear .08s;
}

[data-status-sidebar="active"] .burger-type--triple .burger-open-line:after {
  bottom: 0;
  opacity: 0;
  transition: bottom .08s ease-out 0s, top .08s ease-out, opacity 0s linear .08s;
}


/* C) Burger Triple (for 'Slide' menu)
===================================================

HTML Structure

<div class="burger-open" class="open-button burger burger-type--triple-slide">                                 
    <div class="burger-open-line shift-in"></div>
    <div class="burger-open-line shift-in"></div>
    <div class="burger-open-line shift-in"></div>
</div>

=================================================*/

/* Burger Open */
.burger-type--triple-slide .burger-open-line:nth-of-type(1),
.burger-type--triple-slide .burger-open-line:nth-of-type(2),
.burger-type--triple-slide .burger-open-line:nth-of-type(3) {
  position: absolute;
  width: 80%;
  height: 0.125rem;
  transition-timing-function: ease;
  transition-duration: 0s, .15s;
  transition-property: transform;
}

.burger-type--triple-slide .burger-open-line:nth-of-type(2) {
  display: block;
  top: 50%;
  margin-top: -0.063rem;
}

.burger-type--triple-slide .burger-open-line:nth-of-type(1) {
  content: "";
  display: block;
  top: 0rem;
  transition: top .08s ease-out 0s;
}

.burger-type--triple-slide .burger-open-line:nth-of-type(3) {
  content: "";
  display: block;
  bottom: 0rem;
  transition: bottom .08s ease-out 0s;
}

[data-status-sidebar="active"] .burger-type--triple-slide .burger-open-line:nth-of-type(1) {
  top: 0.125rem;
}

[data-status-sidebar="active"] .burger-type--triple-slide .burger-open-line:nth-of-type(3) {
  bottom: 0.125rem;
}

.burger-type--triple-slide .burger-open-line:nth-of-type(1)::before,
.burger-type--triple-slide .burger-open-line:nth-of-type(2)::before,
.burger-type--triple-slide .burger-open-line:nth-of-type(3)::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

html.on-post body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(1)::before,
html.on-post body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(2)::before,
html.on-post body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(3)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(1)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(2)::before,
html.on-index body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(3)::before {
  background-color: var(--overlay-colour);
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -ms-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
  -webkit-transition-duration: 250ms;
  -moz-transition-duration: 250ms;
  -ms-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
   -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}

html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--triple-slide .burger-open-line:nth-of-type(1)::before,
html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--triple-slide .burger-open-line:nth-of-type(2)::before,
html.on-post body.global-nav-css #main-navigation.fade-in .burger-type--triple-slide .burger-open-line:nth-of-type(3)::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--triple-slide .burger-open-line:nth-of-type(1)::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--triple-slide .burger-open-line:nth-of-type(2)::before,
html.on-index body.global-nav-css #main-navigation.fade-in .burger-type--triple-slide .burger-open-line:nth-of-type(3)::before {
  background-color: var(--primary-colour);
}

html.on-page body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(1)::before,
html.on-page body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(2)::before,
html.on-page body.global-nav-css #main-navigation .burger-type--triple-slide .burger-open-line:nth-of-type(3)::before {
  background-color: var(--primary-colour);
}