/* 1.0 Header Styles
/* ---------------------------------------------------------- */

/* --------------------------------
1. Auto-Hiding Navigation - Simple
-------------------------------- */
.auto-hide-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.auto-hide-header::after {
  clear: both;
  content: "";
  display: block;
}
.auto-hide-header.is-hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

/*
  ========================================
        3.1   Navbar Style
  ========================================
*/

nav {
  padding:0;
  background: white;
  position: relative;
}
nav ul {
  list-style-type: none;
  margin:0;
}
nav a {
  color: black;
  text-decoration: none;
  font-family: Euclid Circular B,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}
nav a:hover {
  text-decoration: none;
}
.logo a:hover {
  text-decoration: none;
}
.menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding:0;
  margin-right: 15px;
}

.menu li {
  font-size: 16px;
  padding:0;
  white-space: nowrap;
}

.right .menu-main-menu-container{
  display: none;
}

.logo, .logo a, .right{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.logo{
    margin-left:15px;
}

.logo svg{
    padding: 5px 0;
    width: auto;
    height: 65px;
}

.logo a{
  font-size: 22px;
}

.toggle{
    display: block;
}

.page_item{
    display: none;
}

.navbar-toggler {
  z-index:1001;
  position: absolute;
  right: 30px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  background-color: transparent;
  margin-right:15px;
}
.navbar-toggler .icon-bar {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background:black;
}
.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 4px;
}

.menu-item{
    position: relative;
}

.menu-item ul {
  box-shadow:none;
  background:transparent;
  border-radius: 16px;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 100px;
  padding: 20px 8px;
}

.menu-item:hover > ul,
.menu-item ul:hover {
  visibility: hidden;
  opacity: 0;
}

.menu-item a {
  display: inline;
  position: relative;
  overflow: hidden;
}
.menu-item a:after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  left:0;
  width: 0;
  top: -50%;
  background-image: linear-gradient(120deg,#ffbc8d 0%,#ff953e 100%);
  box-shadow: 0px 12px 24px rgb(249 115 22 / 10%);

  transition-property: height;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  margin:0 auto;
}
.menu-item a:hover{
  color:var(--blog-links) !important;
  text-decoration: none;
}

/*
  ========================================
        3.2 Mobile Navbar Overlay
  ========================================
*/

.overlay {
    position: fixed;
    width:100vw;
    height:100vh;
    top: 0;
    left: 0;
    background: rgba(255,255,255,1);
}

/* Overlay closing cross */
.overlay .overlay-close {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 20px;
    top: 20px;
    overflow: hidden;
    border: none;
    background: url(../img/cross.png) no-repeat center center;
    text-indent: 200%;
    color: transparent;
    outline: none;
    z-index: 100;
}

/* Menu style */
.overlay .mobile-nav {
    overflow-y: scroll;
    text-align: center;
    position: relative;
    top: 50%;
    height: 70%;
    font-size: 28px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.overlay::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), #ffffff);
    bottom: 80px;
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
}

.overlay ul li {
    display: block;
    padding-top:35px;
}

.overlay ul li:last-child {
    padding-bottom: 100px;
}

.sub-menu{
    z-index: 1000;
}

.sub-menu .menu-item:last-child {
    padding-bottom: 0;
}

.sub-menu li{
    text-align: center;
}

.sub-menu li a{
    font-size: 12px;
}

.open-sub-menu{
    opacity: 1!important;
    visibility: visible!important;
    position: relative!important;
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

.close-sub-menu{
    opacity: 0!important;
    visibility: hidden!important;
    position: absolute!important;
    left:-999px!important;
}

.overlay ul li a {
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: .2em;
    display: block;
    color: #000;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

/* Effects */
.overlay-hugeinc {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.4s, visibility 0s 0.4s;
    transition: opacity 0.4s, visibility 0s 0.4s;
}

.overlay-hugeinc.open-menu {
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.overlay-hugeinc .mobile-nav {
    -webkit-perspective: 1200px;
    perspective: 1200px;
}

.overlay-hugeinc .mobile-nav ul {
    opacity: 0.4;
    -webkit-transform: translateY(-25%) rotateX(35deg);
    transform: translateY(-25%) rotateX(35deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}

.overlay-hugeinc.open-menu .mobile-nav ul {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.overlay-hugeinc.close-menu .mobile-nav ul {
    z-index: 999;
    -webkit-transform: translateY(25%) rotateX(-35deg);
    transform: translateY(25%) rotateX(-35deg);
}

.rotated {
  transform: rotate(180deg);
}

.not-rotated {
  transform: rotate(-180deg);
}

.menu-item ul{
  left:0;
}

.sub-menu{
  left:0;
  right:0;
}

#menu-navigation-bar li ul{
  left:0;
}

#menu-navigation-bar li ul li ul{
  top:0;
  left:0;
}


@media only screen and (min-width: 48.0625em) {  /* Above 768px Laptops and Desktops */

    .menu{
        justify-content: space-between;
    }

    .menu li{
        padding: 0px 15px;
        margin-right:0;
    }

    .right .menu-main-menu-container{
      display: block;
    }

    .logo{
        margin-left:35px;
    }
    .menu .right{
      text-align: left;
      margin-right:35px;
    }
    .toggle{
        display: none;
    }
    .page_item{
        display: block;
    }

    .sub-menu{
      left:unset;
      right:unset;
    }

    .sub-menu li{
        text-align: left;
        margin:12px 0;
    }

    .sub-menu li a{
        font-size: 16px;
    }

    .menu-item ul{
        background: white;
        box-shadow: 10px 10px 120px -10px #f1f1f1;
    }

    .menu-item:hover > ul,
    .menu-item ul:hover {
      visibility: visible;
      opacity: 1;
    }

    #menu-navigation-bar li ul{
      left:0;
    }

    #menu-navigation-bar li ul li ul{
      top:-20px;
      left:100px;
    }

}


/*
 Animated Navicon
 -------------------------
 */
#animated-navicon .icon-bar {
  position: relative;
  top: 0;
  -webkit-transition: top 0.14s linear 0.22s, -webkit-transform 0.22s ease-out, opacity 0.22s ease-out 0.22s;
          transition: top 0.14s linear 0.22s, transform 0.22s ease-out, opacity 0.22s ease-out 0.22s;
}
#animated-navicon.opened .icon-bar:nth-child(3) {
  opacity: 0;
  -webkit-transition: opacity 0.14s ease-in;
          transition: opacity 0.14s ease-in;
}
#animated-navicon.opened .icon-bar:nth-child(2) {
  top: 6px;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transition: top 0.14s ease-in, -webkit-transform 0.22s ease-in-out 0.14s;
          transition: top 0.14s ease-in, transform 0.22s ease-in-out 0.14s;
}
#animated-navicon.opened .icon-bar:nth-child(4) {
  top: -6px;
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  -webkit-transition: top 0.14s ease-in, -webkit-transform 0.22s ease-in-out 0.14s;
          transition: top 0.14s ease-in, transform 0.22s ease-in-out 0.14s;
}