<!-- Container-->
<div class="container">
  <!-- Loop each type-->
  <!-- Col-->
  <div class="col">
    <!-- Loop each style-->
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-1 et_divi_100_custom_hamburger_menu--style-1">
      <!-- Label-->
      <div class="label">T: 1 &middot; S: 1</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-1 et_divi_100_custom_hamburger_menu--style-2">
      <!-- Label-->
      <div class="label">T: 1 &middot; S: 2</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-1 et_divi_100_custom_hamburger_menu--style-3">
      <!-- Label-->
      <div class="label">T: 1 &middot; S: 3</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-1 et_divi_100_custom_hamburger_menu--style-4">
      <!-- Label-->
      <div class="label">T: 1 &middot; S: 4</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-1 et_divi_100_custom_hamburger_menu--style-5">
      <!-- Label-->
      <div class="label">T: 1 &middot; S: 5</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <!-- Col-->
  <div class="col">
    <!-- Loop each style-->
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-2 et_divi_100_custom_hamburger_menu--style-1">
      <!-- Label-->
      <div class="label">T: 2 &middot; S: 1</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-2 et_divi_100_custom_hamburger_menu--style-2">
      <!-- Label-->
      <div class="label">T: 2 &middot; S: 2</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-2 et_divi_100_custom_hamburger_menu--style-3">
      <!-- Label-->
      <div class="label">T: 2 &middot; S: 3</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-2 et_divi_100_custom_hamburger_menu--style-4">
      <!-- Label-->
      <div class="label">T: 2 &middot; S: 4</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-2 et_divi_100_custom_hamburger_menu--style-5">
      <!-- Label-->
      <div class="label">T: 2 &middot; S: 5</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <!-- Col-->
  <div class="col">
    <!-- Loop each style-->
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-3 et_divi_100_custom_hamburger_menu--style-1">
      <!-- Label-->
      <div class="label">T: 3 &middot; S: 1</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-3 et_divi_100_custom_hamburger_menu--style-2">
      <!-- Label-->
      <div class="label">T: 3 &middot; S: 2</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-3 et_divi_100_custom_hamburger_menu--style-3">
      <!-- Label-->
      <div class="label">T: 3 &middot; S: 3</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-3 et_divi_100_custom_hamburger_menu--style-4">
      <!-- Label-->
      <div class="label">T: 3 &middot; S: 4</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-3 et_divi_100_custom_hamburger_menu--style-5">
      <!-- Label-->
      <div class="label">T: 3 &middot; S: 5</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <!-- Col-->
  <div class="col">
    <!-- Loop each style-->
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-4 et_divi_100_custom_hamburger_menu--style-1">
      <!-- Label-->
      <div class="label">T: 4 &middot; S: 1</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-4 et_divi_100_custom_hamburger_menu--style-2">
      <!-- Label-->
      <div class="label">T: 4 &middot; S: 2</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-4 et_divi_100_custom_hamburger_menu--style-3">
      <!-- Label-->
      <div class="label">T: 4 &middot; S: 3</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-4 et_divi_100_custom_hamburger_menu--style-4">
      <!-- Label-->
      <div class="label">T: 4 &middot; S: 4</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- Row-->
    <div class="row et_divi_100_custom_hamburger_menu--type-4 et_divi_100_custom_hamburger_menu--style-5">
      <!-- Label-->
      <div class="label">T: 4 &middot; S: 5</div>
      <!-- Hamburger Menu-->
      <div class="et_divi_100_custom_hamburger_menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>
<!-- Toggle All-->
<button class="toggle_all">Toggle All</button>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='//codepen.io/team/elegantthemes/pen/4fe40cb14db85ff431be09fbf09a7061.js'></script>
/* Menu */

.et_divi_100_custom_hamburger_menu {
  position: relative;
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.25rem;
  clear: both;
}

.et_divi_100_custom_hamburger_menu div {
  background: #000;
  width: 100%;
  height: 0.125rem;
  margin: 0.25rem auto;
  border-radius: 10px;
  transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transform: 0;
  transform-origin: center;
}

.et_divi_100_custom_hamburger_menu div:before,
.et_divi_100_custom_hamburger_menu div:after {
  transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
}


/* Type 1 */

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-2 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  width: 0;
  margin-left: 0;
  opacity: 1;
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T1S3DF;
}

@keyframes T1S3DF {
  0% {
    transform: none;
  }
  40% {
    transform: translateY(0.375rem);
  }
  80% {
    transform: translateY(0.375rem) rotate(45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  animation-name: T1S3L;
}

@keyframes T1S3L {
  0% {
    transform: none;
  }
  40% {
    transform: translateY(-0.375rem);
  }
  80% {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  animation-timing-function: linear;
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T1S4DF;
}

@keyframes T1S4DF {
  0% {
    margin-right: 0;
    transform: none;
  }
  20% {
    width: 100%;
    transform: translateY(0.375rem);
  }
  40% {
    width: 0;
    margin-right: 0;
    transform: translateY(0.375rem);
  }
  80% {
    width: 0;
    margin-right: auto;
    transform: translateY(0.375rem) rotate(45deg);
  }
  90% {
    transform: translateY(0.375rem) rotate(45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  animation-name: T1S4L;
}

@keyframes T1S4L {
  0% {
    margin-left: 0;
    transform: none;
  }
  20% {
    width: 100%;
    transform: translateY(-0.375rem);
  }
  40% {
    width: 0;
    margin-left: 0;
    transform: translateY(-0.375rem);
  }
  80% {
    width: 0;
    margin-left: auto;
    transform: translateY(-0.375rem) rotate(-45deg);
  }
  90% {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  animation-timing-function: linear;
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T1S5DF;
}

@keyframes T1S5DF {
  0% {
    margin-right: 0;
    transform: none;
    transform-origin: top right;
  }
  25% {
    width: 100%;
    transform: translateY(0.375rem) rotate(10deg);
  }
  30% {
    width: 100%;
    transform: translateY(0.375rem) rotate(10deg);
  }
  40% {
    width: 0%;
    transform: translateY(0.375rem) rotate(10deg);
  }
  50% {
    width: 0%;
    transform-origin: center;
    transform: translateY(0.375rem) rotate(45deg);
  }
  90% {
    transform: translateY(0.375rem) rotate(45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  animation-name: T1S5DM;
  width: 0%;
}

@keyframes T1S5DM {
  0% {
    width: 100%;
    opacity: 1;
  }
  40% {
    width: 100%;
  }
  50% {
    width: 0%;
    opacity: 1;
  }
}

.et_divi_100_custom_hamburger_menu--type-1.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  animation-name: T1S5L;
}

@keyframes T1S5L {
  0% {
    margin-left: 0;
    transform: none;
    transform-origin: bottom left;
  }
  25% {
    width: 100%;
    transform: translateY(-0.375rem) rotate(10deg);
  }
  30% {
    width: 100%;
    transform: translateY(-0.375rem) rotate(10deg);
  }
  40% {
    width: 0%;
    transform: translateY(-0.375rem) rotate(10deg);
  }
  50% {
    width: 0%;
    transform-origin: center;
    transform: translateY(-0.375rem) rotate(-45deg);
  }
  90% {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}


/* Type 2 */

.et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div,
.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div {
  display: flex;
  flex-direction: row;
  background: 0;
}

.et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div:before,
.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:before,
.et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div:after,
.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:after {
  content: '';
  display: block;
  background: #000;
  width: 2px;
  min-width: 2px;
  height: 2px;
  border-radius: 10px;
  margin: 0 2px 0 0;
}

.et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div:after,
.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:after {
  width: 100%;
  margin: 0;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-2 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child),
.et_divi_100_custom_hamburger_menu--style-2.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  opacity: 1;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-2 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--style-2.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-2 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after,
.et_divi_100_custom_hamburger_menu--style-2.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after {
  width: 0;
  min-width: 0;
  margin-left: 0;
  opacity: 1;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child,
.et_divi_100_custom_hamburger_menu--style-3.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T2S3DF;
}

@keyframes T2S3DF {
  0% {
    transform: none;
  }
  20% {
    transform: none;
  }
  40% {
    transform: translateY(0.375rem);
  }
  80% {
    transform: translateY(0.375rem) rotate(45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before,
.et_divi_100_custom_hamburger_menu--style-3.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before {
  animation-name: T2S3DFB;
}

@keyframes T2S3DFB {
  0% {
    width: 100%;
    transform: none;
  }
  20% {
    transform: none;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after,
.et_divi_100_custom_hamburger_menu--style-3.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after {
  animation-name: T2S3DMA;
}

@keyframes T2S3DMA {
  0% {
    width: 100%;
    transform: none;
  }
  20% {
    transform: none;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child,
.et_divi_100_custom_hamburger_menu--style-3.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  animation-name: T2S3DL;
}

@keyframes T2S3DL {
  0% {
    transform: none;
  }
  20% {
    transform: none;
  }
  40% {
    transform: translateY(-0.25rem);
  }
  80% {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before,
.et_divi_100_custom_hamburger_menu--style-3.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before {
  animation-name: T2S3DFB;
}

@keyframes T2S3DFB {
  0% {
    width: 100%;
    transform: none;
  }
  20% {
    transform: none;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after,
.et_divi_100_custom_hamburger_menu--style-3.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after {
  animation-name: T2S3DMA;
}

@keyframes T2S3DMA {
  0% {
    width: 100%;
    transform: none;
  }
  20% {
    transform: none;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  transform: none;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after {
  width: 0%;
  min-width: 0;
  margin: 0 auto;
  opacity: 0;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child),
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  position: relative;
  opacity: 1;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after {
  position: absolute;
  width: 100%;
  transition: all 0.3s linear transform 0.3s 0.3s linear;
  transform-origin: center;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before {
  transform: rotate(45deg);
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after {
  transform: rotate(-45deg);
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after,
.et_divi_100_custom_hamburger_menu--style-4.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after {
  width: 100%;
  min-width: 0;
  opacity: 0;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  transform: none;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  position: relative;
  animation-name: T2S5DF;
  transform: translateY(0.375rem) rotate(45deg);
}

@keyframes T2S5DF {
  20% {
    transform: none;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after {
  position: absolute;
  width: 0;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:before {
  left: 0;
  animation-name: T2S5DFB;
}

@keyframes T2S5DFB {
  20% {
    width: 0%;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child:after {
  right: 0;
  animation-name: T2S5DFA;
}

@keyframes T2S5DFA {
  20% {
    width: 0%;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child),
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  position: relative;
  opacity: 1;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after {
  margin: 0 auto;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):before {
  display: none;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child):after {
  animation-name: T2S5DL;
  width: 2px;
}

@keyframes T2S5DL {
  20% {
    transform: 100%;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  position: relative;
  animation-name: T2S5DL;
  transform: translateY(-0.375rem) rotate(-45deg);
}

@keyframes T2S5DL {
  20% {
    transform: none;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before,
.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after {
  position: absolute;
  width: 0;
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:before {
  left: 0;
  animation-name: T2S5DFB;
}

@keyframes T2S5DFB {
  20% {
    width: 0%;
  }
}

.et_divi_100_custom_hamburger_menu--type-2.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after,
.et_divi_100_custom_hamburger_menu--style-5.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child:after {
  right: 0;
  animation-name: T2S5DMA;
}

@keyframes T2S5DMA {
  20% {
    width: 0%;
  }
}


/* Type 3 */

.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:before {
  width: 100%;
  margin: 0 2px 0 0;
}

.et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:after {
  width: 2px;
  margin: 0;
}


/* Type 4 */

.et_divi_100_custom_hamburger_menu--type-4 .et_divi_100_custom_hamburger_menu div {
  width: 2px;
  margin-right: auto;
  margin-left: auto;
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-2 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T4S2DF;
}

@keyframes T4S2DF {
  0% {
    transform: none;
  }
  20% {
    width: 2px;
    transform: translateY(0.375rem);
  }
  40% {
    transform: translateY(0.375rem);
  }
  80% {
    transform: translateY(0.375rem) rotate(45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-2 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  animation-name: T4S2L;
}

@keyframes T4S2L {
  0% {
    transform: none;
  }
  20% {
    width: 2px;
    transform: translateY(-0.375rem);
  }
  40% {
    transform: translateY(-0.375rem);
  }
  80% {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled {
  animation: T4S3 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}

@keyframes T4S3 {
  100% {
    transform: rotate(360deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  animation-timing-function: linear;
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T4S3DF;
}

@keyframes T4S3DF {
  0% {
    transform: none;
  }
  40% {
    width: 2px;
    transform: translateY(0.375rem);
  }
  80% {
    transform: translateY(0.375rem) rotate(45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-3 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  animation-name: T4S3L;
}

@keyframes T4S3L {
  0% {
    transform: none;
  }
  40% {
    width: 2px;
    transform: translateY(-0.375rem);
  }
  80% {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled {
  animation: T4S4 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}

@keyframes T4S4 {
  100% {
    transform: rotate(360deg);
  }
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-4 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  animation-name: T4S4DF;
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled {
  transform: rotate(45deg);
  transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  width: 2px;
  transform: none;
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  transform: translateY(-4px);
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  width: 100%;
  opacity: 1;
}

.et_divi_100_custom_hamburger_menu--type-4.et_divi_100_custom_hamburger_menu--style-5 .et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  transform: translateY(4px);
}


/* Toggled */

.et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div {
  width: 100%;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
}

.et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:after,
.et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:before {
  width: 100%;
}

.et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:first-child {
  transform: translateY(0.375rem) rotate(45deg);
}

.et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:not(:first-child):not(:last-child) {
  opacity: 0;
}

.et_divi_100_custom_hamburger_menu.et_divi_100_custom_hamburger_menu--toggled div:last-child {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.mobile_menu_bar {
  padding-bottom: 0;
  margin-bottom: 26px;
}

.mobile_menu_bar:before {
  display: none;
}

body {
  background: #FFF;
  font-family: 'Open Sans';
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: top;
  margin: 40px 0 0;
}

.row {
  position: relative;
  margin: 0 0 40px;
}

.col {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-basis: 14.2857142857%;
  width: 14.2857142857%;
  max-width: 14.2857142857%;
  min-width: 14.2857142857%;
}

.label {
  margin: 0 0 10px;
  font-size: 10px;
}

.et_custom_hamburger_menu {
  background: rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.toggle_all {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  max-width: 120px;
  margin: 0 auto 40px;
  border: 0;
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 10px;
  cursor: pointer;
}
jQuery(document).ready(function ($) {

  // Finds .mobile_menu_bar_toggle class
  // Adds .et_divi_100_custom_hamburger_menu class
  // Add 3 divs to html

  $(".mobile_menu_bar_toggle")
    .addClass("et_divi_100_custom_hamburger_menu")
    .html('<div></div><div></div><div></div>');

  // Gets theme Accent Color
  var accentColor = $("a").css("color");

  // Append accent color style block
  $('<style> .et_divi_100_custom_hamburger_menu div {background: ' + accentColor + '} .et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div, .et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div {background: 0; } .et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div:before, .et_divi_100_custom_hamburger_menu--type-2 .et_divi_100_custom_hamburger_menu div:after, .et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:before, .et_divi_100_custom_hamburger_menu--type-3 .et_divi_100_custom_hamburger_menu div:after {background: ' + accentColor + '} </style>').appendTo('body');

  // Menu click event
  $('.et_divi_100_custom_hamburger_menu').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('et_divi_100_custom_hamburger_menu--toggled');
  });

  $('.toggle_all').on('click', function (e) {
    e.preventDefault();
    $('.et_divi_100_custom_hamburger_menu').toggleClass('et_divi_100_custom_hamburger_menu--toggled');
  });
});
Rerun