.navbar {
     display: flex;
     position: relative;
     justify-content: space-between;
     align-items: center;
     background-color: #1A1A1A;
     color: white;
     padding: 0 10vw;
     position: fixed;
     z-index: 99999;
     width: 100%;
     top: 0;
}

.brand-title {
     font-size: 1.5rem;
     margin: .5rem;
}

.navbar-links {
     height: 100%;
}

.navbar-links ul {
     display: flex;
     margin: 0;
     padding: 0;
}

.navbar-links li {
     list-style: none;
}

.navbar-links li a {
     display: block;
     text-decoration: none;
     color: white;
     padding: 1rem;
}



.toggle-button {
     position: absolute;
     top: 0;
     right: 1rem;
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 64px;
     height: 64px;
}


.toggle-button .bar {
     height: 3px;
     width: 100%;
     background-color: white;
     border-radius: 10px;
}

.ham {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     transition: transform 400ms;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

.hamRotate.active {
     transform: rotate(45deg);
}

.hamRotate180.active {
     transform: rotate(180deg);
}

.line {
     fill: none;
     transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
     stroke: #fff;
     stroke-width: 5.5;
     stroke-linecap: round;
}

.ham8 .top {
     stroke-dasharray: 40 160;
}

.ham8 .middle {
     stroke-dasharray: 40 142;
     transform-origin: 50%;
     transition: transform 400ms;
}

.ham8 .bottom {
     stroke-dasharray: 40 85;
     transform-origin: 50%;
     transition: transform 400ms, stroke-dashoffset 400ms;
}

.ham8.active .top {
     stroke-dashoffset: -64px;
}

.ham8.active .middle {

     transform: rotate(90deg);
}

.ham8.active .bottom {
     stroke-dashoffset: -64px;
}

.brand-title>img {
     height: 9vh
}

a.left {
     position: relative;
}

a.left.active:before {
     width: 50%;
     background-color: #dd2d40;
     visibility: visible;
}


a.left:before {
     content: "";
     position: absolute;
     width: 0;
     height: 4px;
     bottom: 0;
     left: 0;
     background-color: #dd2d40;
     visibility: hidden;
     transition: all 0.3s ease-in-out;
}


a.left:hover:before {
     visibility: visible;
     width: 100%;
}

.navbar-links li a {
     margin: 1rem 0 1rem 2rem;
     padding: 0.5rem 0;
}

@media (max-width: 768px) {

     .brand-title>img {
          height: 8vh
     }

     ul li {
          text-align: left !important;
     }

     .navbar {
          flex-direction: column;
          align-items: flex-start;
          transition: all .8s ease-in-out;
          padding: 0 10%;
     }

     .toggle-button {
          display: flex;
     }

     .navbar-links {
          height: 0;
          visibility: hidden;
          transition: all .8s ease-in-out;
     }

     .navbar-links  a.left.active:before {
          visibility: hidden;
      }

   

     .navbar-links.active ul li {
          height: 0;
          opacity: 0;
          width: 100%;
          transition: all .8s ease-in-out;
     }


     .navbar-links ul {
          width: 100%;
          flex-direction: column;
     }

    

     .navbar-links ul li a {
          padding: .5rem 1rem;
     }

     .navbar-links ul li a {
          visibility: hidden;
          transition: all .3s ease-in-out;
          opacity: 0;
     }

     .navbar-links.active ul li a {
          visibility: visible;
          transition: all .8s ease-in-out;
          opacity: 1;


     }

     .navbar-links.active {
          height: 100vh;
          transition: all .8s ease-in-out;
          visibility: visible;

     }


     .navbar-links.active  a.left.active:before {
          visibility: visible;
      }


     .navbar-links ul li a {
          padding: 0.7rem 0;
          margin: 0.9rem 0.5rem;
          font-size: 1.8rem;
     }

     .navbar-links.active ul li:nth-of-type(1) {
          height: auto;
          opacity: 1;
          transition: all 1s ease-in-out;
          -webkit-animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

     }

     .navbar-links.active ul li:nth-of-type(2) {
          height: auto;
          opacity: 1;
          transition: all 2s ease-in-out;
          -webkit-animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

     }

     .navbar-links.active ul li:nth-of-type(3) {
          height: auto;
          opacity: 1;
          transition: all 3s ease-in-out;
          -webkit-animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }

     .navbar-links.active ul li:nth-of-type(4) {
          height: auto;
          opacity: 1;
          transition: all 1s ease-in-out;
          -webkit-animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

     }

     .navbar-links.active ul li:nth-of-type(5) {
          height: auto;
          opacity: 1;
          transition: all 2s ease-in-out;
          -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

     }

     .navbar-links.active ul li:nth-of-type(6) {
          height: auto;
          opacity: 1;
          transition: all 3s ease-in-out;
          -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     }

}

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-center {
     0% {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
     }

     100% {
          -webkit-transform: scale(1);
          transform: scale(1);
     }
}

@keyframes scale-up-center {
     0% {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
     }

     100% {
          -webkit-transform: scale(1);
          transform: scale(1);
     }
}


/**
 * ----------------------------------------
 * animation scale-down-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-down-center {
     0% {
          -webkit-transform: scale(1);
          transform: scale(1);
     }

     100% {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
     }
}

@keyframes scale-down-center {
     0% {
          -webkit-transform: scale(1);
          transform: scale(1);
     }

     100% {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
     }
}