/* Custom Mobile Hamburger Icon - nav-icon3 */
.nav-icon3, .xnav-toggle, .navbar-toggle, .course-mobile-toggle {
  width: 24px !important;
  height: 18px !important;
  position: relative !important;
  margin: 0;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.nav-icon3 span, .xnav-toggle span, .navbar-toggle span, .course-mobile-toggle span {
  display: block !important;
  position: absolute !important;
  height: 2px !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  opacity: 1 !important;
  left: 0 !important;
  transform: rotate(0deg);
  transition: .25s ease-in-out !important;
  margin: 0 !important;
}

.nav-icon3 span:nth-child(1), .xnav-toggle span:nth-child(1), .navbar-toggle span:nth-child(1), .course-mobile-toggle span:nth-child(1) { top: 0px !important; }
.nav-icon3 span:nth-child(2), .nav-icon3 span:nth-child(3), .xnav-toggle span:nth-child(2), .xnav-toggle span:nth-child(3), .navbar-toggle span:nth-child(2), .navbar-toggle span:nth-child(3), .course-mobile-toggle span:nth-child(2), .course-mobile-toggle span:nth-child(3) { top: 8px !important; }
.nav-icon3 span:nth-child(4), .xnav-toggle span:nth-child(4), .navbar-toggle span:nth-child(4), .course-mobile-toggle span:nth-child(4) { top: 16px !important; }

/* Open State */
.nav-icon3.open span:nth-child(1), .xnav-toggle.open span:nth-child(1), .navbar-toggle.active span:nth-child(1), .course-mobile-toggle.active span:nth-child(1) { top: 8px !important; width: 0% !important; left: 50% !important; opacity: 0 !important; }
.nav-icon3.open span:nth-child(2), .xnav-toggle.open span:nth-child(2), .navbar-toggle.active span:nth-child(2), .course-mobile-toggle.active span:nth-child(2) { transform: rotate(45deg) !important; }
.nav-icon3.open span:nth-child(3), .xnav-toggle.open span:nth-child(3), .navbar-toggle.active span:nth-child(3), .course-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) !important; }
.nav-icon3.open span:nth-child(4), .xnav-toggle.open span:nth-child(4), .navbar-toggle.active span:nth-child(4), .course-mobile-toggle.active span:nth-child(4) { top: 8px !important; width: 0% !important; left: 50% !important; opacity: 0 !important; }

/* Hide course-mobile-toggle on desktop screens */
@media (min-width: 769px) {
  .course-mobile-toggle {
    display: none !important;
  }
}
