@charset "UTF-8";
/*!
 * Sado CSS Hamburger Menu Collection
 * Version: 1.0
 * Author: Web_Trendy
 * Copyright 2019 © Web_Trendy (https://codecanyon.net/user/web_trendy)
 * Licensed under Envato (https://codecanyon.net/licenses/standard)
 *
 * "Stop acting so small. You are the universe in ecstatic motion" -Rumi
 *
 */
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
	1.0 Variables > Line 31
	2.0 General Styles > Line 73
	3.0 Input Effects > Line 148
	4.0 Input Sizes > Line 1196
	5.0 Typography > Line 1236
	6.0 Horizontal Alignment > Line 1251
	7.0 Vertical Movement > Line 1347
	8.0 Input Color > Line 1446
	9.0 Label Color > Line 1587
	10.0 Border Color 1 > Line 1783
	11.0 Border Color 2 > Line 2087
	12.0 Label Shrink > Line 2381
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
Variables used inside the library. Update per your needs.
--------------------------------------------------------------*/
/*Default bar color*/
/*--------------------------------------------------------------
2.0 General Styles
Styles applied to all effects.
--------------------------------------------------------------*/
.hamburger {
  width: 30px;
  height: 23.0769230769px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 10px;
  transition: all 200ms ease; }
  .hamburger span {
    display: inline-block;
    width: 100%;
    height: 3px;
    background-color: #323232;
    position: absolute;
    transition: all 200ms ease;
    left: 0;
    top: calc(50% - 1.5px); }
    .hamburger span:first-child {
      transform: translateY(-300%); }
    .hamburger span:last-child {
      transform: translateY(300%); }

/*--------------------------------------------------------------
3.0 Input Effects
Effects for inputs.
--------------------------------------------------------------*/
/*Effect 1*/
.hamburger-1 span:first-child {
  transform-origin: left top; }
.hamburger-1 span:last-child {
  transform-origin: left bottom; }
.hamburger-1.active span:first-child {
  transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
.hamburger-1.active span:last-child {
  transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 2*/
.hamburger-2 span:first-child {
  transform-origin: right top; }
.hamburger-2 span:last-child {
  transform-origin: right bottom; }
.hamburger-2.active span:first-child {
  transform: rotate(45deg) scaleX(0.5) translateX(4px); }
.hamburger-2.active span:last-child {
  transform: rotate(-45deg) scaleX(0.5) translateX(4px); }

/*Effect 3*/
.hamburger-3 span:first-child {
  transform-origin: left top; }
.hamburger-3 span:last-child {
  transform-origin: left bottom; }
.hamburger-3.active {
  transform: rotate(-90deg); }
  .hamburger-3.active span:first-child {
    transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
  .hamburger-3.active span:last-child {
    transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 4*/
.hamburger-4 span:first-child {
  transform-origin: left top; }
.hamburger-4 span:last-child {
  transform-origin: left bottom; }
.hamburger-4.active {
  transform: rotate(90deg); }
  .hamburger-4.active span:first-child {
    transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
  .hamburger-4.active span:last-child {
    transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 5*/
.hamburger-5 span:first-child {
  transform-origin: center; }
.hamburger-5 span:last-child {
  transform-origin: center; }
.hamburger-5.active span:nth-child(2) {
  opacity: 0; }
.hamburger-5.active span:first-child {
  transform: rotate(-45deg); }
.hamburger-5.active span:last-child {
  transform: rotate(45deg); }

/*Effect 6*/
.hamburger-6 span:first-child {
  transform-origin: center; }
.hamburger-6 span:last-child {
  transform-origin: center; }
.hamburger-6.active span:nth-child(2) {
  opacity: 0; }
.hamburger-6.active span:first-child {
  transform: rotate(-45deg) scaleX(0.5) translate(4px, -4px); }
.hamburger-6.active span:last-child {
  transform: rotate(45deg) scaleX(0.5) translate(4px, 4px); }

/*Effect 7*/
.hamburger-7 span:first-child {
  transform-origin: center; }
.hamburger-7 span:last-child {
  transform-origin: center; }
.hamburger-7.active span:nth-child(2) {
  opacity: 0; }
.hamburger-7.active span:first-child {
  transform: rotate(45deg) scaleX(0.5) translate(-4px, -4px); }
.hamburger-7.active span:last-child {
  transform: rotate(-45deg) scaleX(0.5) translate(-4px, 4px); }

/*Effect 8*/
.hamburger-8 span:first-child {
  transform-origin: center; }
.hamburger-8 span:last-child {
  transform-origin: center; }
.hamburger-8.active {
  transform: rotate(90deg); }
  .hamburger-8.active span:nth-child(2) {
    opacity: 0; }
  .hamburger-8.active span:first-child {
    transform: rotate(-45deg) scaleX(0.5) translate(4px, -4px); }
  .hamburger-8.active span:last-child {
    transform: rotate(45deg) scaleX(0.5) translate(4px, 4px); }

/*Effect 9*/
.hamburger-9 span:first-child {
  transform-origin: center; }
.hamburger-9 span:last-child {
  transform-origin: center; }
.hamburger-9.active {
  transform: rotate(-90deg); }
  .hamburger-9.active span:nth-child(2) {
    opacity: 0; }
  .hamburger-9.active span:first-child {
    transform: rotate(-45deg) scaleX(0.5) translate(4px, -4px); }
  .hamburger-9.active span:last-child {
    transform: rotate(45deg) scaleX(0.5) translate(4px, 4px); }

/*Effect 10*/
.hamburger-10 span:first-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-1; }
.hamburger-10 span:last-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-2; }
.hamburger-10.active span:nth-child(2) {
  opacity: 0; }
.hamburger-10.active span:first-child {
  transform: translateY(0);
  animation-name: rotate-active-1; }
.hamburger-10.active span:last-child {
  transform: translateY(0);
  animation-name: rotate-active-2; }

/*Effect 11*/
.hamburger-11 span {
  transition-delay: 300ms; }
  .hamburger-11 span:first-child {
    transform-origin: left top; }
  .hamburger-11 span:last-child {
    transform-origin: left bottom; }
.hamburger-11.active {
  transform: rotate(-90deg);
  transition-delay: 300ms; }
  .hamburger-11.active span {
    transition-delay: 0ms; }
    .hamburger-11.active span:first-child {
      transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
    .hamburger-11.active span:last-child {
      transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 12*/
.hamburger-12 span {
  transition-delay: 300ms; }
  .hamburger-12 span:first-child {
    transform-origin: left top; }
  .hamburger-12 span:last-child {
    transform-origin: left bottom; }
.hamburger-12.active {
  transform: rotate(90deg);
  transition-delay: 300ms; }
  .hamburger-12.active span {
    transition-delay: 0ms; }
    .hamburger-12.active span:first-child {
      transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
    .hamburger-12.active span:last-child {
      transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 13*/
.hamburger-13 span:first-child {
  transition-delay: 150ms;
  transform-origin: left top; }
.hamburger-13 span:last-child {
  transform-origin: left bottom; }
.hamburger-13.active {
  transform: translateX(-5px);
  transition-delay: 300ms; }
  .hamburger-13.active span:first-child {
    transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
  .hamburger-13.active span:last-child {
    transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 14*/
.hamburger-14 span:first-child {
  transition-delay: 150ms;
  transform-origin: right top; }
.hamburger-14 span:last-child {
  transform-origin: right bottom; }
.hamburger-14.active {
  transform: translateX(5px);
  transition-delay: 300ms; }
  .hamburger-14.active span:first-child {
    transform: rotate(45deg) scaleX(0.5) translateX(4px); }
  .hamburger-14.active span:last-child {
    transform: rotate(-45deg) scaleX(0.5) translateX(4px); }

/*Effect 15*/
.hamburger-15 {
  transition-delay: 300ms; }
  .hamburger-15 span:first-child {
    transform-origin: left top; }
  .hamburger-15 span:last-child {
    transform-origin: left bottom; }
  .hamburger-15.active {
    transition-delay: 0ms;
    transform: rotate(-90deg); }
    .hamburger-15.active span {
      transition-delay: 300ms; }
      .hamburger-15.active span:first-child {
        transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
      .hamburger-15.active span:last-child {
        transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 16*/
.hamburger-16 {
  transition-delay: 300ms; }
  .hamburger-16 span:first-child {
    transform-origin: left top; }
  .hamburger-16 span:last-child {
    transform-origin: left bottom; }
  .hamburger-16.active {
    transition-delay: 0ms;
    transform: rotate(90deg); }
    .hamburger-16.active span {
      transition-delay: 300ms; }
      .hamburger-16.active span:first-child {
        transform: rotate(-45deg) scaleX(0.5) translateX(-4px); }
      .hamburger-16.active span:last-child {
        transform: rotate(45deg) scaleX(0.5) translateX(-4px); }

/*Effect 17*/
.hamburger-17 span:first-child {
  transform-origin: center;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  animation-name: rotate2-base-1; }
.hamburger-17 span:last-child {
  transform-origin: center;
  animation-duration: 400ms;
  animation-fill-mode: forwards; }
.hamburger-17.active {
  transition-delay: 600ms;
  transform: rotate(45deg); }
  .hamburger-17.active span:nth-child(2) {
    opacity: 0; }
  .hamburger-17.active span:first-child {
    transform: translateY(0);
    animation-name: rotate2-active-1; }
  .hamburger-17.active span:last-child {
    transform: translateY(0); }

/*Effect 18*/
.hamburger-18:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 4px;
  width: 0;
  height: 3px;
  background-color: #323232;
  transform: rotate(45deg);
  transition: all 200ms ease;
  transform-origin: left;
  transition-delay: 150ms; }
.hamburger-18:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 4px;
  width: 0;
  height: 3px;
  background-color: #323232;
  transform: rotate(-45deg);
  transition: all 200ms ease;
  transform-origin: right; }
.hamburger-18 span:nth-child(2) {
  transition-delay: 600ms; }
.hamburger-18 span:first-child {
  transition-delay: 450ms; }
.hamburger-18 span:last-child {
  transition-delay: 750ms; }
.hamburger-18.active:before {
  width: 30px;
  transition-delay: 600ms; }
.hamburger-18.active:after {
  width: 30px;
  transition-delay: 750ms; }
.hamburger-18.active span {
  width: 0; }
  .hamburger-18.active span:nth-child(2) {
    transition-delay: 150ms; }
  .hamburger-18.active span:first-child {
    transition-delay: 0ms; }
  .hamburger-18.active span:last-child {
    transition-delay: 300ms; }

/*Effect 19*/
.hamburger-19 span:nth-child(2) {
  transition-delay: 0ms; }
  .hamburger-19 span:nth-child(2):before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 3px;
    background-color: #323232;
    transform: rotate(0deg);
    transition: all 200ms ease;
    transform-origin: center;
    transition-delay: 150ms; }
.hamburger-19 span:first-child {
  transition-delay: 450ms; }
.hamburger-19 span:last-child {
  transition-delay: 750ms;
  right: 0;
  left: auto; }
.hamburger-19.active span:nth-child(2) {
  transition-delay: 300ms;
  transform: rotate(-45deg); }
  .hamburger-19.active span:nth-child(2):before {
    transition-delay: 450ms;
    transform: rotate(90deg); }
.hamburger-19.active span:first-child {
  transition-delay: 0ms;
  width: 0; }
.hamburger-19.active span:last-child {
  transition-delay: 150ms;
  width: 0; }

/*Effect 20*/
.hamburger-20 span:nth-child(2) {
  transition-delay: 150ms; }
  .hamburger-20 span:nth-child(2):before {
    content: 'Close';
    position: absolute;
    top: -5px;
    left: 0px;
    width: 30px;
    font-size: 12px;
    transform: scale(0);
    transition: all 200ms ease;
    transform-origin: center;
    transition-delay: 0ms;
    background-color: transparent !important; }
.hamburger-20 span:first-child {
  transform-origin: top; }
.hamburger-20 span:last-child {
  transform-origin: bottom; }
.hamburger-20.active span:nth-child(2) {
  transition-delay: 0ms;
  background-color: transparent;
  height: 0; }
  .hamburger-20.active span:nth-child(2):before {
    transform: scale(1);
    transition-delay: 150ms; }
.hamburger-20.active span:first-child {
  transform: translateY(-13px) scaleX(1.3); }
.hamburger-20.active span:last-child {
  transform: translateY(13px) scaleX(1.3); }

/*Effect 21*/
.hamburger-21 span:nth-child(2) {
  width: 80%; }
.hamburger-21 span:first-child {
  width: 60%; }
.hamburger-21.active span:first-child {
  width: 100%; }
.hamburger-21.active span:last-child {
  width: 60%; }

/*Effect 22*/
.hamburger-22.active span:first-child {
  width: 60%; }
.hamburger-22.active span:last-child {
  width: 60%; }

/*Effect 23*/
.hamburger-23 span {
  right: 0;
  left: auto; }
  .hamburger-23 span:nth-child(2) {
    width: 80%; }
  .hamburger-23 span:first-child {
    width: 60%; }
.hamburger-23.active span:first-child {
  width: 100%; }
.hamburger-23.active span:last-child {
  width: 60%; }

/*Effect 24*/
.hamburger-24 span {
  right: 0;
  left: auto; }
.hamburger-24.active span:first-child {
  width: 60%; }
.hamburger-24.active span:last-child {
  width: 60%; }

/*Effect 25*/
.hamburger-25.active span:nth-child(2) {
  transform: scaleX(1.2); }
.hamburger-25.active span:first-child {
  transform: translateY(300%) scaleX(0.8); }
.hamburger-25.active span:last-child {
  transform: translateY(-300%) scaleX(0.8); }

/*Effect 26*/
.hamburger-26.active span:nth-child(2) {
  transform: scaleX(0.8); }
.hamburger-26.active span:first-child {
  transform: translateY(300%) scaleX(1.2); }
.hamburger-26.active span:last-child {
  transform: translateY(-300%) scaleX(1.2); }

/*Effect 27*/
.hamburger-27 span:nth-child(2) {
  transition-delay: 300ms; }
.hamburger-27 span:first-child {
  transform-origin: center;
  transition-delay: 0ms; }
.hamburger-27 span:last-child {
  transform-origin: center;
  transition-delay: 150ms; }
.hamburger-27.active span:nth-child(2) {
  width: 0;
  transition-delay: 0ms; }
.hamburger-27.active span:first-child {
  transform: rotate(-45deg);
  transition-delay: 150ms; }
.hamburger-27.active span:last-child {
  transform: translateY(0%) rotate(-315deg);
  transition-delay: 300ms; }

/*Effect 28*/
.hamburger-28 span:nth-child(2) {
  transition-delay: 300ms; }
.hamburger-28 span:first-child {
  transform-origin: center;
  transition-delay: 0ms; }
.hamburger-28 span:last-child {
  transform-origin: center;
  transition-delay: 150ms; }
.hamburger-28.active {
  transition-delay: 600ms;
  transform: rotate(180deg); }
  .hamburger-28.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-100%);
    transition-delay: 0ms; }
  .hamburger-28.active span:first-child {
    transform: rotate(-45deg);
    transition-delay: 150ms; }
  .hamburger-28.active span:last-child {
    transform: rotate(45deg);
    transition-delay: 300ms; }

/*Effect 29*/
.hamburger-29 span:nth-child(2) {
  transition-delay: 300ms; }
.hamburger-29 span:first-child {
  transform-origin: center;
  transition-delay: 0ms; }
.hamburger-29 span:last-child {
  transform-origin: center;
  transition-delay: 150ms; }
.hamburger-29.active {
  transition-delay: 600ms;
  transform: rotate(-180deg); }
  .hamburger-29.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(100%);
    transition-delay: 0ms; }
  .hamburger-29.active span:first-child {
    transform: rotate(-45deg);
    transition-delay: 150ms; }
  .hamburger-29.active span:last-child {
    transform: rotate(45deg);
    transition-delay: 300ms; }

/*Effect 30*/
.hamburger-30 span:first-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-1; }
.hamburger-30 span:last-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-2; }
.hamburger-30.active {
  transform: rotate(180deg);
  transition-delay: 700ms; }
  .hamburger-30.active span:nth-child(2) {
    opacity: 0; }
  .hamburger-30.active span:first-child {
    transform: translateY(0);
    animation-name: rotate-active-1; }
  .hamburger-30.active span:last-child {
    transform: translateY(0);
    animation-name: rotate-active-2; }

/*Effect 31*/
.hamburger-31 span:first-child {
  transition-delay: 300ms; }
.hamburger-31 span:nth-child(2) {
  transition-delay: 150ms; }
.hamburger-31 span:last-child {
  transform-origin: center; }
  .hamburger-31 span:last-child:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 3px;
    background-color: #323232;
    transform: rotate(0deg);
    transition: all 200ms ease;
    transform-origin: center;
    transition-delay: 0ms; }
.hamburger-31.active span:nth-child(2) {
  transform: translateY(300%);
  opacity: 0;
  transition-delay: 0ms; }
.hamburger-31.active span:first-child {
  transform: translateY(300%);
  opacity: 0;
  transition-delay: 0ms; }
.hamburger-31.active span:last-child {
  transition-delay: 150ms;
  transform: rotate(45deg); }
  .hamburger-31.active span:last-child:before {
    transform: rotate(90deg);
    transition-delay: 300ms; }

/*Effect 32*/
.hamburger-32 span:last-child {
  transition-delay: 300ms; }
.hamburger-32 span:nth-child(2) {
  transition-delay: 150ms; }
.hamburger-32 span:first-child {
  transform-origin: center; }
  .hamburger-32 span:first-child:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 3px;
    background-color: #323232;
    transform: rotate(0deg);
    transition: all 200ms ease;
    transform-origin: center;
    transition-delay: 0ms; }
.hamburger-32.active span:nth-child(2) {
  transform: translateY(-300%);
  opacity: 0;
  transition-delay: 0ms; }
.hamburger-32.active span:first-child {
  transition-delay: 150ms;
  transform: rotate(-45deg); }
  .hamburger-32.active span:first-child:before {
    transform: rotate(-90deg);
    transition-delay: 300ms; }
.hamburger-32.active span:last-child {
  transform: translateY(-300%);
  opacity: 0;
  transition-delay: 0ms; }

/*Effect 33*/
.hamburger-33 span:nth-child(2):before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30px;
  height: 3px;
  background-color: #323232;
  transition: all 200ms ease;
  transform-origin: center;
  transition-delay: 0ms; }
.hamburger-33 span:first-child {
  transform-origin: center; }
.hamburger-33 span:last-child {
  transform-origin: center; }
.hamburger-33.active span:nth-child(2) {
  transform: rotate(45deg); }
  .hamburger-33.active span:nth-child(2):before {
    transform: rotate(-90deg); }
.hamburger-33.active span:first-child {
  transform: translate(100%, -300%);
  opacity: 0; }
.hamburger-33.active span:last-child {
  transform: translate(-100%, 300%);
  opacity: 0; }

/*Effect 34*/
.hamburger-34 span:nth-child(2):before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30px;
  height: 3px;
  background-color: #323232;
  transition: all 200ms ease;
  transform-origin: center;
  transition-delay: 0ms; }
.hamburger-34 span:first-child {
  transform-origin: center; }
.hamburger-34 span:last-child {
  transform-origin: center; }
.hamburger-34.active span:nth-child(2) {
  transform: rotate(45deg); }
  .hamburger-34.active span:nth-child(2):before {
    transform: rotate(-90deg); }
.hamburger-34.active span:first-child {
  transform: translate(-100%, -300%);
  opacity: 0; }
.hamburger-34.active span:last-child {
  transform: translate(100%, 300%);
  opacity: 0; }

/*Effect 35*/
.hamburger-35 span:first-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-1; }
.hamburger-35 span:last-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-2; }
.hamburger-35.active {
  transform: rotate(90deg); }
  .hamburger-35.active span:nth-child(2) {
    transition-delay: 300ms;
    opacity: 0; }
  .hamburger-35.active span:first-child {
    transform: translateY(0);
    animation-name: rotate-active-1; }
  .hamburger-35.active span:last-child {
    transform: translateY(0);
    animation-name: rotate-active-2; }

/*Effect 36*/
.hamburger-36 span:first-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-1; }
.hamburger-36 span:last-child {
  transform-origin: center;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-name: rotate-base-2; }
.hamburger-36.active {
  transform: rotate(-45deg); }
  .hamburger-36.active span:nth-child(2) {
    transition-delay: 300ms;
    opacity: 0; }
  .hamburger-36.active span:first-child {
    transform: translateY(0);
    animation-name: rotate-active-1; }
  .hamburger-36.active span:last-child {
    transform: translateY(0);
    animation-name: rotate-active-2; }

/*Effect 37*/
.hamburger-37 {
  transition-delay: 750ms; }
  .hamburger-37:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 4px;
    width: 0;
    height: 3px;
    background-color: #323232;
    transform: rotate(45deg);
    transition: all 200ms ease;
    transform-origin: left;
    transition-delay: 150ms; }
  .hamburger-37:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 4px;
    width: 0;
    height: 3px;
    background-color: #323232;
    transform: rotate(-45deg);
    transition: all 200ms ease;
    transform-origin: right; }
  .hamburger-37 span:nth-child(2) {
    transition-delay: 600ms; }
  .hamburger-37 span:first-child {
    transition-delay: 450ms; }
  .hamburger-37 span:last-child {
    transition-delay: 750ms; }
  .hamburger-37.active {
    transform: rotate(90deg);
    transition-delay: 0ms; }
    .hamburger-37.active:before {
      width: 30px;
      transition-delay: 600ms; }
    .hamburger-37.active:after {
      width: 30px;
      transition-delay: 750ms; }
    .hamburger-37.active span {
      width: 0; }
      .hamburger-37.active span:nth-child(2) {
        transition-delay: 300ms; }
      .hamburger-37.active span:first-child {
        transition-delay: 150ms; }
      .hamburger-37.active span:last-child {
        transition-delay: 450ms; }

/*Effect 38*/
.hamburger-38 {
  transition-delay: 750ms; }
  .hamburger-38:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 4px;
    width: 0;
    height: 3px;
    background-color: #323232;
    transform: rotate(45deg);
    transition: all 200ms ease;
    transform-origin: left;
    transition-delay: 150ms; }
  .hamburger-38:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 4px;
    width: 0;
    height: 3px;
    background-color: #323232;
    transform: rotate(-45deg);
    transition: all 200ms ease;
    transform-origin: right; }
  .hamburger-38 span:nth-child(2) {
    transition-delay: 600ms; }
  .hamburger-38 span:first-child {
    transition-delay: 450ms; }
  .hamburger-38 span:last-child {
    transition-delay: 750ms; }
  .hamburger-38.active {
    transform: rotate(-45deg);
    transition-delay: 0ms; }
    .hamburger-38.active:before {
      width: 30px;
      transition-delay: 600ms; }
    .hamburger-38.active:after {
      width: 30px;
      transition-delay: 750ms; }
    .hamburger-38.active span {
      width: 0; }
      .hamburger-38.active span:nth-child(2) {
        transition-delay: 300ms; }
      .hamburger-38.active span:first-child {
        transition-delay: 150ms; }
      .hamburger-38.active span:last-child {
        transition-delay: 450ms; }

/*Effect 39*/
.hamburger-39 span:first-child {
  transform-origin: center -200%; }
.hamburger-39 span:last-child {
  transform-origin: center 300%; }
.hamburger-39.active span:first-child {
  transform: rotate(-225deg) scaleX(0.5) translate(19px, -2px); }
.hamburger-39.active span:last-child {
  transform: rotate(225deg) scaleX(0.5) translate(19px, 2px); }

/*Effect 40*/
.hamburger-40 span:first-child {
  transform-origin: center; }
.hamburger-40 span:last-child {
  transform-origin: center; }
.hamburger-40.active span:first-child {
  transform: translateY(0); }
.hamburger-40.active span:last-child {
  transform: translateY(0); }

/*Effect 41*/
.hamburger-41 span:first-child {
  transform-origin: center; }
.hamburger-41 span:last-child {
  transform-origin: center; }
.hamburger-41.active {
  transform: rotate(90deg);
  transition-delay: 300ms; }
  .hamburger-41.active span:first-child {
    transform: translateY(0); }
  .hamburger-41.active span:last-child {
    transform: translateY(0); }

/*Effect 42*/
.hamburger-42 span:first-child {
  transform-origin: center; }
.hamburger-42 span:last-child {
  transform-origin: center; }
.hamburger-42.active span:nth-child(2) {
  transform: scaleX(0); }
.hamburger-42.active span:first-child {
  transition-delay: 150ms;
  transform: translateY(0); }
.hamburger-42.active span:last-child {
  transition-delay: 300ms;
  transform: translateY(0) rotate(90deg); }

/*Effect 43*/
.hamburger-43 span:first-child {
  transform-origin: center;
  transition-delay: 300ms; }
.hamburger-43 span:last-child {
  transform-origin: center;
  transition-delay: 450ms; }
.hamburger-43.active {
  transform: rotate(-45deg);
  transition-delay: 450ms; }
  .hamburger-43.active span:nth-child(2) {
    transform: scaleX(0); }
  .hamburger-43.active span:first-child {
    transition-delay: 150ms;
    transform: translateY(0); }
  .hamburger-43.active span:last-child {
    transition-delay: 300ms;
    transform: translateY(0) rotate(90deg); }

/*Effect 44*/
.hamburger-44.active span:first-child {
  width: 60%; }
.hamburger-44.active span:nth-child(2) {
  width: 80%; }

/*Effect 45*/
.hamburger-45 span:first-child {
  transform-origin: right -200%; }
.hamburger-45 span:last-child {
  transform-origin: right 300%; }
.hamburger-45.active span:first-child {
  transform: rotate(-135deg) scaleX(0.5) translate(18px, -13px); }
.hamburger-45.active span:last-child {
  transform: rotate(135deg) scaleX(0.5) translate(18px, 13px); }

/*Effect 46*/
.hamburger-46 span {
  right: 0;
  left: auto; }
.hamburger-46.active span:first-child {
  width: 60%; }
.hamburger-46.active span:nth-child(2) {
  width: 80%; }

/*Effect 47*/
.hamburger-47 span {
  right: 0;
  left: auto; }
.hamburger-47.active span:last-child {
  width: 60%; }
.hamburger-47.active span:nth-child(2) {
  width: 80%; }

/*Effect 48*/
.hamburger-48.active span:last-child {
  width: 60%; }
.hamburger-48.active span:nth-child(2) {
  width: 80%; }

/*Effect 49*/
.hamburger-49.active {
  transform: rotate(45deg);
  transition-delay: 150ms; }
  .hamburger-49.active span:first-child {
    width: 60%; }
  .hamburger-49.active span:nth-child(2) {
    width: 80%; }

/*Effect 50*/
.hamburger-50 span {
  right: 0;
  left: auto; }
.hamburger-50.active {
  transform: rotate(-45deg);
  transition-delay: 150ms; }
  .hamburger-50.active span:first-child {
    width: 60%; }
  .hamburger-50.active span:nth-child(2) {
    width: 80%; }

/*Effect 51*/
.hamburger-51.active span:first-child {
  transform: scaleX(0.5) translateY(-300%); }
.hamburger-51.active span:nth-child(2) {
  transform: scaleX(0.8); }

/*Effect 52*/
.hamburger-52.active span:last-child {
  transform: scaleX(0.5) translateY(300%); }
.hamburger-52.active span:nth-child(2) {
  transform: scaleX(0.8); }

/*Effect 53*/
.hamburger-53.active {
  transform: rotate(90deg);
  transition-delay: 150ms; }
  .hamburger-53.active span:first-child {
    transform: scaleX(0.5) translateY(-300%); }
  .hamburger-53.active span:nth-child(2) {
    transform: scaleX(0.8); }

/*Effect 54*/
.hamburger-54.active {
  transform: rotate(90deg);
  transition-delay: 150ms; }
  .hamburger-54.active span:last-child {
    transform: scaleX(0.5) translateY(300%); }
  .hamburger-54.active span:nth-child(2) {
    transform: scaleX(0.8); }

/*Effect 55*/
.hamburger-55 span:first-child {
  transform-origin: center; }
.hamburger-55 span:last-child {
  transform-origin: center; }
.hamburger-55.active span:first-child {
  transform: translate(-100%, -300%);
  opacity: 0; }
.hamburger-55.active span:last-child {
  transform: translate(100%, 300%);
  opacity: 0; }

/*Effect 56*/
.hamburger-56 span:first-child {
  transform-origin: center; }
.hamburger-56 span:last-child {
  transform-origin: center; }
.hamburger-56.active span:first-child {
  transform: translate(100%, -300%);
  opacity: 0; }
.hamburger-56.active span:last-child {
  transform: translate(-100%, 300%);
  opacity: 0; }

/*Effect 57*/
.hamburger-57:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 3px;
  height: 0;
  background-color: #323232;
  transition: all 200ms ease;
  transform-origin: left;
  transition-delay: 150ms; }
.hamburger-57:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 3px;
  height: 0;
  background-color: #323232;
  transition: all 200ms ease;
  transform-origin: right; }
.hamburger-57 span:nth-child(2) {
  transition-delay: 600ms; }
  .hamburger-57 span:nth-child(2):before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #323232;
    transition: all 200ms ease;
    transform-origin: top;
    transition-delay: 450ms;
    transform: translate(450%, -50%);
    opacity: 0; }
.hamburger-57 span:first-child {
  transition-delay: 450ms; }
.hamburger-57 span:last-child {
  transition-delay: 750ms; }
.hamburger-57.active:before {
  height: 100%;
  transition-delay: 600ms; }
.hamburger-57.active:after {
  height: 100%;
  transition-delay: 750ms; }
.hamburger-57.active span {
  width: 0; }
  .hamburger-57.active span:nth-child(2) {
    transition-delay: 150ms; }
    .hamburger-57.active span:nth-child(2):before {
      opacity: 1;
      height: 23.0769230769px;
      transition-delay: 600ms; }
  .hamburger-57.active span:first-child {
    transition-delay: 0ms; }
  .hamburger-57.active span:last-child {
    transition-delay: 300ms; }

/*Effect 58*/
.hamburger-58 span:nth-child(2) {
  transition-delay: 450ms; }
.hamburger-58 span:first-child:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 3px;
  height: 0;
  background-color: #323232;
  transition: all 200ms ease;
  transition-delay: 300ms; }
.hamburger-58 span:first-child:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 3px;
  height: 0;
  background-color: #323232;
  transition: all 200ms ease;
  transition-delay: 450ms; }
.hamburger-58.active span:nth-child(2) {
  transition-delay: 0ms;
  transform: scaleX(0.5); }
.hamburger-58.active span:first-child:before {
  height: 20px;
  transition-delay: 150ms; }
.hamburger-58.active span:first-child:after {
  height: 20px;
  transition-delay: 300ms; }

/*Effect 59*/
.hamburger-59 span:nth-child(2) {
  transition-delay: 150ms; }
.hamburger-59 span:last-child {
  transition-delay: 300ms; }
.hamburger-59.active span:first-child {
  width: 3px;
  left: calc(50% - 1.5px); }
.hamburger-59.active span:nth-child(2) {
  width: 3px;
  left: calc(50% - 1.5px); }
.hamburger-59.active span:last-child {
  width: 3px;
  left: calc(50% - 1.5px); }

/*Effect 60*/
.hamburger-60 span:first-child {
  transition-delay: 150ms; }
.hamburger-60 span:last-child {
  transition-delay: 300ms; }
.hamburger-60.active span:first-child {
  width: 9px;
  height: 9px;
  left: 50%;
  transform: translate(-50%, -3.6px); }
.hamburger-60.active span:nth-child(2) {
  width: 9px;
  height: 9px;
  left: 50%;
  transform: translate(-50%, -3.6px); }
.hamburger-60.active span:last-child {
  width: 9px;
  height: 9px;
  left: 50%;
  transform: translate(-50%, -3.6px); }

/*Effect 61*/
.hamburger-61 span:nth-child(2) {
  transition-delay: 150ms; }
.hamburger-61 span:last-child {
  transition-delay: 300ms; }
.hamburger-61.active {
  transform: rotate(90deg);
  transition-delay: 300ms; }
  .hamburger-61.active span:first-child {
    width: 3px;
    left: calc(50% - 1.5px); }
  .hamburger-61.active span:nth-child(2) {
    width: 3px;
    left: calc(50% - 1.5px); }
  .hamburger-61.active span:last-child {
    width: 3px;
    left: calc(50% - 1.5px); }

/*Effect 62*/
.hamburger-62:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 4px;
  width: 0;
  height: 3px;
  background-color: #323232;
  transform: rotate(45deg);
  transition: all 200ms ease;
  transform-origin: left;
  transition-delay: 150ms; }
.hamburger-62:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 4px;
  width: 0;
  height: 3px;
  background-color: #323232;
  transform: rotate(-45deg);
  transition: all 200ms ease;
  transform-origin: right; }
.hamburger-62 span:nth-child(2) {
  transition-delay: 600ms;
  width: 80%; }
.hamburger-62 span:first-child {
  transition-delay: 450ms;
  width: 60%; }
.hamburger-62 span:last-child {
  transition-delay: 750ms; }
.hamburger-62.active:before {
  width: 30px;
  transition-delay: 600ms; }
.hamburger-62.active:after {
  width: 30px;
  transition-delay: 750ms; }
.hamburger-62.active span {
  width: 0; }
  .hamburger-62.active span:nth-child(2) {
    transition-delay: 150ms; }
  .hamburger-62.active span:first-child {
    transition-delay: 0ms; }
  .hamburger-62.active span:last-child {
    transition-delay: 300ms; }

/*Effect 63*/
.hamburger-63:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 4px;
  width: 0;
  height: 3px;
  background-color: #323232;
  transform: rotate(45deg);
  transition: all 200ms ease;
  transform-origin: left;
  transition-delay: 150ms; }
.hamburger-63:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 4px;
  width: 0;
  height: 3px;
  background-color: #323232;
  transform: rotate(-45deg);
  transition: all 200ms ease;
  transform-origin: right; }
.hamburger-63 span:nth-child(2) {
  transition-delay: 600ms;
  width: 80%; }
.hamburger-63 span:first-child {
  transition-delay: 450ms; }
.hamburger-63 span:last-child {
  transition-delay: 750ms;
  width: 60%; }
.hamburger-63.active:before {
  width: 30px;
  transition-delay: 600ms; }
.hamburger-63.active:after {
  width: 30px;
  transition-delay: 750ms; }
.hamburger-63.active span {
  width: 0; }
  .hamburger-63.active span:nth-child(2) {
    transition-delay: 150ms; }
  .hamburger-63.active span:first-child {
    transition-delay: 0ms; }
  .hamburger-63.active span:last-child {
    transition-delay: 300ms; }

/*Effect 64*/
.hamburger-64 {
  overflow: hidden; }
  .hamburger-64 span {
    transition-duration: 500ms; }
    .hamburger-64 span:nth-child(2) {
      transition-delay: 150ms; }
      .hamburger-64 span:nth-child(2):before {
        content: '';
        position: absolute;
        top: 0px;
        left: 140%;
        width: 100%;
        height: 3px;
        background-color: #323232;
        transition: all 200ms ease; }
    .hamburger-64 span:first-child {
      transition-delay: 0ms; }
      .hamburger-64 span:first-child:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 140%;
        width: 100%;
        height: 3px;
        background-color: #323232;
        transition: all 200ms ease; }
    .hamburger-64 span:last-child {
      transition-delay: 300ms; }
      .hamburger-64 span:last-child:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 140%;
        width: 100%;
        height: 3px;
        background-color: #323232;
        transition: all 200ms ease; }
  .hamburger-64.active span {
    left: -140%; }

/*Effect 65*/
.hamburger-65 span:first-child {
  width: 50%; }
.hamburger-65 span:last-child {
  width: 50%;
  right: 0;
  left: auto; }
.hamburger-65.active span:first-child {
  left: 50%; }
.hamburger-65.active span:last-child {
  right: 50%; }

/*Effect 66*/
.hamburger-66 span:first-child {
  transform-origin: center; }
.hamburger-66 span:last-child {
  transform-origin: center; }
.hamburger-66.active {
  transform: scale(0.8); }
  .hamburger-66.active span:nth-child(2) {
    transform: translateY(600%); }
  .hamburger-66.active span:first-child {
    transform: rotate(-45deg); }
  .hamburger-66.active span:last-child {
    transform: rotate(45deg); }

/*Effect 67*/
.hamburger-67 span {
  left: 3px; }
  .hamburger-67 span:nth-child(2) {
    width: 3px; }
    .hamburger-67 span:nth-child(2):before {
      content: '';
      position: absolute;
      top: 0px;
      left: 10px;
      width: 3px;
      height: 3px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-67 span:nth-child(2):after {
      content: '';
      position: absolute;
      top: 0px;
      left: 20px;
      width: 3px;
      height: 3px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-67 span:first-child {
    width: 3px; }
    .hamburger-67 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 10px;
      width: 3px;
      height: 3px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-67 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 20px;
      width: 3px;
      height: 3px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-67 span:last-child {
    width: 3px; }
    .hamburger-67 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 10px;
      width: 3px;
      height: 3px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-67 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 20px;
      width: 3px;
      height: 3px;
      background-color: #323232;
      transition: all 200ms ease; }
.hamburger-67.active {
  transition-delay: 400ms;
  transform: rotate(45deg); }
  .hamburger-67.active span:first-child {
    background-color: transparent; }
    .hamburger-67.active span:first-child:after {
      opacity: 0;
      transition-delay: 100ms; }
  .hamburger-67.active span:last-child {
    background-color: transparent;
    transition-delay: 200ms; }
    .hamburger-67.active span:last-child:after {
      opacity: 0;
      transition-delay: 300ms; }

/*Effect 68*/
.hamburger-68 span {
  width: 6px;
  height: 6px; }
  .hamburger-68 span:nth-child(2):before {
    content: '';
    position: absolute;
    top: 0px;
    left: 12px;
    width: 6px;
    height: 6px;
    background-color: #323232;
    transition: all 200ms ease; }
  .hamburger-68 span:nth-child(2):after {
    content: '';
    position: absolute;
    top: 0px;
    left: 24px;
    width: 6px;
    height: 6px;
    background-color: #323232;
    transition: all 200ms ease; }
  .hamburger-68 span:first-child {
    transform: translateY(-200%); }
    .hamburger-68 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-68 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-68 span:last-child {
    transform: translateY(200%); }
    .hamburger-68 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-68 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
.hamburger-68.active {
  transition-delay: 400ms;
  transform: rotate(45deg); }
  .hamburger-68.active span:first-child {
    background-color: transparent; }
    .hamburger-68.active span:first-child:after {
      opacity: 0;
      transition-delay: 100ms; }
  .hamburger-68.active span:last-child {
    background-color: transparent;
    transition-delay: 200ms; }
    .hamburger-68.active span:last-child:after {
      opacity: 0;
      transition-delay: 300ms; }

/*Effect 69*/
.hamburger-69 span {
  width: 6px;
  height: 6px; }
  .hamburger-69 span:nth-child(2) {
    transition-delay: 100ms; }
    .hamburger-69 span:nth-child(2):before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-69 span:nth-child(2):after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 200ms; }
  .hamburger-69 span:first-child {
    transform: translateY(-200%); }
    .hamburger-69 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-69 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-69 span:last-child {
    transform: translateY(200%); }
    .hamburger-69 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 300ms; }
    .hamburger-69 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
.hamburger-69.active span:first-child:before {
  opacity: 0; }
.hamburger-69.active span:nth-child(2) {
  background-color: transparent; }
  .hamburger-69.active span:nth-child(2):after {
    opacity: 0; }
.hamburger-69.active span:last-child:before {
  opacity: 0; }

/*Effect 70*/
.hamburger-70 span {
  width: 6px;
  height: 6px;
  top: 35%; }
  .hamburger-70 span:nth-child(2):before {
    content: '';
    position: absolute;
    top: 0px;
    left: 12px;
    width: 6px;
    height: 6px;
    background-color: #323232;
    transition: all 200ms ease; }
  .hamburger-70 span:nth-child(2):after {
    content: '';
    position: absolute;
    top: 0px;
    left: 24px;
    width: 6px;
    height: 6px;
    background-color: #323232;
    transition: all 200ms ease; }
  .hamburger-70 span:first-child {
    transform: translateY(-200%); }
    .hamburger-70 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-70 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-70 span:last-child {
    transform: translateY(200%); }
    .hamburger-70 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-70 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
.hamburger-70.active {
  transition-delay: 400ms;
  transform: rotate(135deg); }
  .hamburger-70.active span:first-child:after {
    opacity: 0; }
  .hamburger-70.active span:last-child {
    background-color: transparent;
    transition-delay: 100ms; }

/*Effect 71*/
.hamburger-71 span {
  width: 6px;
  height: 6px;
  top: 35%; }
  .hamburger-71 span:nth-child(2) {
    transition-delay: 100ms; }
    .hamburger-71 span:nth-child(2):before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 200ms; }
    .hamburger-71 span:nth-child(2):after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 300ms; }
  .hamburger-71 span:first-child {
    transform: translateY(-200%); }
    .hamburger-71 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-71 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-71 span:last-child {
    transform: translateY(200%); }
    .hamburger-71 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 400ms; }
    .hamburger-71 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
.hamburger-71.active {
  transition-delay: 500ms;
  transform: scale(0.6); }
  .hamburger-71.active span:first-child:before {
    opacity: 0; }
  .hamburger-71.active span:nth-child(2) {
    background-color: transparent; }
    .hamburger-71.active span:nth-child(2):before {
      opacity: 0; }
    .hamburger-71.active span:nth-child(2):after {
      opacity: 0; }
  .hamburger-71.active span:last-child:before {
    opacity: 0; }

/*Effect 72*/
.hamburger-72 span {
  width: 6px;
  height: 6px;
  top: 35%; }
  .hamburger-72 span:nth-child(2) {
    transition-delay: 100ms; }
    .hamburger-72 span:nth-child(2):before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 900ms; }
    .hamburger-72 span:nth-child(2):after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 300ms; }
  .hamburger-72 span:first-child {
    transform: translateY(-200%);
    transition-delay: 500ms; }
    .hamburger-72 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-72 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 200ms; }
  .hamburger-72 span:last-child {
    transform: translateY(200%);
    transition-delay: 700ms; }
    .hamburger-72 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 400ms; }
    .hamburger-72 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 800ms; }
.hamburger-72.active span:first-child {
  background-color: transparent; }
  .hamburger-72.active span:first-child:before {
    opacity: 0; }
  .hamburger-72.active span:first-child:after {
    opacity: 0; }
.hamburger-72.active span:nth-child(2) {
  background-color: transparent; }
  .hamburger-72.active span:nth-child(2):before {
    transform: scale(3); }
  .hamburger-72.active span:nth-child(2):after {
    opacity: 0; }
.hamburger-72.active span:last-child {
  background-color: transparent; }
  .hamburger-72.active span:last-child:before {
    opacity: 0; }
  .hamburger-72.active span:last-child:after {
    opacity: 0; }

/*Effect 73*/
.hamburger-73 span {
  width: 6px;
  height: 6px;
  top: 35%; }
  .hamburger-73 span:nth-child(2) {
    transition-delay: 100ms; }
    .hamburger-73 span:nth-child(2):before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 700ms; }
    .hamburger-73 span:nth-child(2):after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 300ms; }
  .hamburger-73 span:first-child {
    transform: translateY(-200%);
    transition-delay: 500ms; }
    .hamburger-73 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-73 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-73 span:last-child {
    transform: translateY(200%); }
    .hamburger-73 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 400ms; }
    .hamburger-73 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 200ms; }
.hamburger-73.active span:first-child {
  background-color: transparent; }
  .hamburger-73.active span:first-child:before {
    opacity: 0; }
.hamburger-73.active span:nth-child(2) {
  background-color: transparent; }
  .hamburger-73.active span:nth-child(2):before {
    transform: scale(3); }
  .hamburger-73.active span:nth-child(2):after {
    opacity: 0; }
.hamburger-73.active span:last-child:before {
  opacity: 0; }
.hamburger-73.active span:last-child:after {
  opacity: 0; }

/*Effect 74*/
.hamburger-74 span {
  width: 6px;
  height: 6px;
  top: 35%; }
  .hamburger-74 span:nth-child(2) {
    transition-delay: 100ms; }
    .hamburger-74 span:nth-child(2):before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 400ms; }
    .hamburger-74 span:nth-child(2):after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 300ms; }
  .hamburger-74 span:first-child {
    transform: translateY(-200%); }
    .hamburger-74 span:first-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
    .hamburger-74 span:first-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
  .hamburger-74 span:last-child {
    transform: translateY(200%); }
    .hamburger-74 span:last-child:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 12px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease;
      transition-delay: 200ms; }
    .hamburger-74 span:last-child:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 24px;
      width: 6px;
      height: 6px;
      background-color: #323232;
      transition: all 200ms ease; }
.hamburger-74.active {
  transition-delay: 600ms;
  transform: rotate(45deg); }
  .hamburger-74.active span:first-child:before {
    opacity: 0; }
  .hamburger-74.active span:nth-child(2) {
    background-color: transparent; }
    .hamburger-74.active span:nth-child(2):before {
      transform: scale(3); }
    .hamburger-74.active span:nth-child(2):after {
      opacity: 0; }
  .hamburger-74.active span:last-child:before {
    opacity: 0; }

/*Effect 75*/
.hamburger-75 span:nth-child(2) {
  transform: scaleX(0); }
.hamburger-75 span:first-child {
  transform-origin: center;
  transform: translateY(-100%); }
.hamburger-75 span:last-child {
  transform-origin: center;
  transform: translateY(100%);
  transition-delay: 150ms; }
.hamburger-75.active span:nth-child(2) {
  transform: scaleX(1);
  transition-delay: 300ms; }
.hamburger-75.active span:first-child {
  transform: translateY(-300%); }
.hamburger-75.active span:last-child {
  transform: translateY(300%); }

/*--------------------------------------------------------------
9.0 Colors
Menu colors
--------------------------------------------------------------*/
.color-1:before, .color-1:after {
  background-color: #595F6E; }
.color-1 span {
  background-color: #595F6E; }
  .color-1 span:nth-child(2):before, .color-1 span:nth-child(2):after, .color-1 span:last-child:before, .color-1 span:last-child:after, .color-1 span:first-child:before, .color-1 span:first-child:after {
    background-color: #595F6E; }

.color-2:before, .color-2:after {
  background-color: #845EC2; }
.color-2 span {
  background-color: #845EC2; }
  .color-2 span:nth-child(2):before, .color-2 span:nth-child(2):after, .color-2 span:last-child:before, .color-2 span:last-child:after, .color-2 span:first-child:before, .color-2 span:first-child:after {
    background-color: #845EC2; }

.color-3:before, .color-3:after {
  background-color: #1C1259; }
.color-3 span {
  background-color: #1C1259; }
  .color-3 span:nth-child(2):before, .color-3 span:nth-child(2):after, .color-3 span:last-child:before, .color-3 span:last-child:after, .color-3 span:first-child:before, .color-3 span:first-child:after {
    background-color: #1C1259; }

.color-4:before, .color-4:after {
  background-color: #D65DB1; }
.color-4 span {
  background-color: #D65DB1; }
  .color-4 span:nth-child(2):before, .color-4 span:nth-child(2):after, .color-4 span:last-child:before, .color-4 span:last-child:after, .color-4 span:first-child:before, .color-4 span:first-child:after {
    background-color: #D65DB1; }

.color-5:before, .color-5:after {
  background-color: #7F4782; }
.color-5 span {
  background-color: #7F4782; }
  .color-5 span:nth-child(2):before, .color-5 span:nth-child(2):after, .color-5 span:last-child:before, .color-5 span:last-child:after, .color-5 span:first-child:before, .color-5 span:first-child:after {
    background-color: #7F4782; }

.color-6:before, .color-6:after {
  background-color: #FF6F91; }
.color-6 span {
  background-color: #FF6F91; }
  .color-6 span:nth-child(2):before, .color-6 span:nth-child(2):after, .color-6 span:last-child:before, .color-6 span:last-child:after, .color-6 span:first-child:before, .color-6 span:first-child:after {
    background-color: #FF6F91; }

.color-7:before, .color-7:after {
  background-color: #e2598b; }
.color-7 span {
  background-color: #e2598b; }
  .color-7 span:nth-child(2):before, .color-7 span:nth-child(2):after, .color-7 span:last-child:before, .color-7 span:last-child:after, .color-7 span:first-child:before, .color-7 span:first-child:after {
    background-color: #e2598b; }

.color-8:before, .color-8:after {
  background-color: #ee7777; }
.color-8 span {
  background-color: #ee7777; }
  .color-8 span:nth-child(2):before, .color-8 span:nth-child(2):after, .color-8 span:last-child:before, .color-8 span:last-child:after, .color-8 span:first-child:before, .color-8 span:first-child:after {
    background-color: #ee7777; }

.color-9:before, .color-9:after {
  background-color: #FF9671; }
.color-9 span {
  background-color: #FF9671; }
  .color-9 span:nth-child(2):before, .color-9 span:nth-child(2):after, .color-9 span:last-child:before, .color-9 span:last-child:after, .color-9 span:first-child:before, .color-9 span:first-child:after {
    background-color: #FF9671; }

.color-10:before, .color-10:after {
  background-color: #ff8246; }
.color-10 span {
  background-color: #ff8246; }
  .color-10 span:nth-child(2):before, .color-10 span:nth-child(2):after, .color-10 span:last-child:before, .color-10 span:last-child:after, .color-10 span:first-child:before, .color-10 span:first-child:after {
    background-color: #ff8246; }

.color-11:before, .color-11:after {
  background-color: #ffdc27; }
.color-11 span {
  background-color: #ffdc27; }
  .color-11 span:nth-child(2):before, .color-11 span:nth-child(2):after, .color-11 span:last-child:before, .color-11 span:last-child:after, .color-11 span:first-child:before, .color-11 span:first-child:after {
    background-color: #ffdc27; }

.color-12:before, .color-12:after {
  background-color: #FFC75F; }
.color-12 span {
  background-color: #FFC75F; }
  .color-12 span:nth-child(2):before, .color-12 span:nth-child(2):after, .color-12 span:last-child:before, .color-12 span:last-child:after, .color-12 span:first-child:before, .color-12 span:first-child:after {
    background-color: #FFC75F; }

.color-13:before, .color-13:after {
  background-color: #F9F871; }
.color-13 span {
  background-color: #F9F871; }
  .color-13 span:nth-child(2):before, .color-13 span:nth-child(2):after, .color-13 span:last-child:before, .color-13 span:last-child:after, .color-13 span:first-child:before, .color-13 span:first-child:after {
    background-color: #F9F871; }

.color-14:before, .color-14:after {
  background-color: #49beb7; }
.color-14 span {
  background-color: #49beb7; }
  .color-14 span:nth-child(2):before, .color-14 span:nth-child(2):after, .color-14 span:last-child:before, .color-14 span:last-child:after, .color-14 span:first-child:before, .color-14 span:first-child:after {
    background-color: #49beb7; }

.color-15:before, .color-15:after {
  background-color: #bfcd7e; }
.color-15 span {
  background-color: #bfcd7e; }
  .color-15 span:nth-child(2):before, .color-15 span:nth-child(2):after, .color-15 span:last-child:before, .color-15 span:last-child:after, .color-15 span:first-child:before, .color-15 span:first-child:after {
    background-color: #bfcd7e; }

.color-16:before, .color-16:after {
  background-color: #15cda8; }
.color-16 span {
  background-color: #15cda8; }
  .color-16 span:nth-child(2):before, .color-16 span:nth-child(2):after, .color-16 span:last-child:before, .color-16 span:last-child:after, .color-16 span:first-child:before, .color-16 span:first-child:after {
    background-color: #15cda8; }

.color-17:before, .color-17:after {
  background-color: #ff5959; }
.color-17 span {
  background-color: #ff5959; }
  .color-17 span:nth-child(2):before, .color-17 span:nth-child(2):after, .color-17 span:last-child:before, .color-17 span:last-child:after, .color-17 span:first-child:before, .color-17 span:first-child:after {
    background-color: #ff5959; }

.color-18:before, .color-18:after {
  background-color: #f34573; }
.color-18 span {
  background-color: #f34573; }
  .color-18 span:nth-child(2):before, .color-18 span:nth-child(2):after, .color-18 span:last-child:before, .color-18 span:last-child:after, .color-18 span:first-child:before, .color-18 span:first-child:after {
    background-color: #f34573; }

.color-19:before, .color-19:after {
  background-color: #fd5f00; }
.color-19 span {
  background-color: #fd5f00; }
  .color-19 span:nth-child(2):before, .color-19 span:nth-child(2):after, .color-19 span:last-child:before, .color-19 span:last-child:after, .color-19 span:first-child:before, .color-19 span:first-child:after {
    background-color: #fd5f00; }

.color-20:before, .color-20:after {
  background-color: #4592af; }
.color-20 span {
  background-color: #4592af; }
  .color-20 span:nth-child(2):before, .color-20 span:nth-child(2):after, .color-20 span:last-child:before, .color-20 span:last-child:after, .color-20 span:first-child:before, .color-20 span:first-child:after {
    background-color: #4592af; }

.color-21:before, .color-21:after {
  background-color: #6c5ce7; }
.color-21 span {
  background-color: #6c5ce7; }
  .color-21 span:nth-child(2):before, .color-21 span:nth-child(2):after, .color-21 span:last-child:before, .color-21 span:last-child:after, .color-21 span:first-child:before, .color-21 span:first-child:after {
    background-color: #6c5ce7; }

.color-22:before, .color-22:after {
  background-color: #00D2FC; }
.color-22 span {
  background-color: #00D2FC; }
  .color-22 span:nth-child(2):before, .color-22 span:nth-child(2):after, .color-22 span:last-child:before, .color-22 span:last-child:after, .color-22 span:first-child:before, .color-22 span:first-child:after {
    background-color: #00D2FC; }

.color-23:before, .color-23:after {
  background-color: #eeeeee; }
.color-23 span {
  background-color: #eeeeee; }
  .color-23 span:nth-child(2):before, .color-23 span:nth-child(2):after, .color-23 span:last-child:before, .color-23 span:last-child:after, .color-23 span:first-child:before, .color-23 span:first-child:after {
    background-color: #eeeeee; }

.color-24:before, .color-24:after {
  background-color: #f2eee0; }
.color-24 span {
  background-color: #f2eee0; }
  .color-24 span:nth-child(2):before, .color-24 span:nth-child(2):after, .color-24 span:last-child:before, .color-24 span:last-child:after, .color-24 span:first-child:before, .color-24 span:first-child:after {
    background-color: #f2eee0; }

.color-25:before, .color-25:after {
  background-color: #323232; }
.color-25 span {
  background-color: #323232; }
  .color-25 span:nth-child(2):before, .color-25 span:nth-child(2):after, .color-25 span:last-child:before, .color-25 span:last-child:after, .color-25 span:first-child:before, .color-25 span:first-child:after {
    background-color: #323232; }

.color-26:before, .color-26:after {
  background-color: #4e4e4e; }
.color-26 span {
  background-color: #4e4e4e; }
  .color-26 span:nth-child(2):before, .color-26 span:nth-child(2):after, .color-26 span:last-child:before, .color-26 span:last-child:after, .color-26 span:first-child:before, .color-26 span:first-child:after {
    background-color: #4e4e4e; }

.color-27:before, .color-27:after {
  background-color: #fff; }
.color-27 span {
  background-color: #fff; }
  .color-27 span:nth-child(2):before, .color-27 span:nth-child(2):after, .color-27 span:last-child:before, .color-27 span:last-child:after, .color-27 span:first-child:before, .color-27 span:first-child:after {
    background-color: #fff; }

/*--------------------------------------------------------------
10.0 Border Color 1
Input border1 color (some effects have 2 borders, some have a border that appears when the input is focused, this border is border 2.)
--------------------------------------------------------------*/
/*.putin-border1-color-1 {
	.input-label {
		&:before {
			background-color: $color_1;
			border-color: $color_1;
		}
		&:after {
			border-color: $color_1;
		}
	}
}*/
/*--------------------------------------------------------------
11.0 Border  Color2
Input border2 color (The secondary border that appears on top or when the input is focused)
--------------------------------------------------------------*/
/*.putin-border2-color-1 {
	.input-label {
		&:after {
			background-color: $color_1;
			border-color: $color_1;
		}
		&:before {
			border-color: $color_1;
		}
	}
}*/
/*--------------------------------------------------------------
12.0 Label Shrink
When input is focused the label will shrink (beside moving).
--------------------------------------------------------------*/
/*.putin-label-shrink:not(.effect-19) {
	.input-label {
		.label-text {
			transform-origin: top left;
		}
	}
	&.active {
		.input-label {
			.label-text {
				transform:scale(.8);
			}
		}
	}	
}*/
/*--------------------------------------------------------------
12.0 Animations
Animation used for some of effects.
--------------------------------------------------------------*/
@keyframes rotate-active-1 {
  0% {
    transform: translateY(-300%); }
  50% {
    transform: translateY(0); }
  100% {
    transform: rotate(-45deg); } }
@keyframes rotate-active-2 {
  0% {
    transform: translateY(300%); }
  50% {
    transform: translateY(0); }
  100% {
    transform: rotate(45deg); } }
@keyframes rotate-base-1 {
  0% {
    transform: translateY(0) rotate(45deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: translateY(-300%); } }
@keyframes rotate-base-2 {
  0% {
    transform: translateY(0) rotate(-45deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: translateY(300%); } }
@keyframes rotate2-active-1 {
  0% {
    transform: translateY(-300%); }
  50% {
    transform: translateY(0); }
  100% {
    transform: rotate(-90deg); } }
@keyframes rotate2-base-1 {
  0% {
    transform: translateY(0) rotate(90deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: translateY(-300%); } }
/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/
/*18 Jun 2019*/

/*# sourceMappingURL=hamburger.css.map */