/*Animated Menu Icon CSS*/
/*Designed by marcosclimaco.com*/

.menu-animated, .times-animated {
  position: relative;
  width: 30px;
  height: 28px;
  transition: all 0.5s cubic-bezier(.33,0,.01,1);
  cursor: pointer;
}

.times-animated > div {
  position: absolute;
  border-top: 2px solid #f2f2f2;
  width: 100%;
  height: 0;
  margin-top: -2px;
  transition: all 0.5s cubic-bezier(.33,0,.01,1);
  opacity: 1;
}

.times-animated div:first-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.times-animated div:last-child {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.times-animated:hover {
  transform: rotate(90deg) !important;
}


.menu-animated:hover .line-middle {
  width: 75%;
}

.menu-animated [class^="line-"] {
  position: absolute;
  border-top: 2px solid #f2f2f2;
  width: 100%;
  height: 0;
  margin-top: -2px;
  transition: all 0.5s cubic-bezier(.33,0,.01,1);
  opacity: 1;
}

.menu-animated .line-top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
}

.menu-animated .line-middle {
  transform: translateY(-50%);
  top: 50%;
}
.menu-animated .line-bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
}

.menu-animated.active .line-top {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-animated.active .line-middle {
  opacity: 0;
}

.menu-animated.active .line-bottom {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}