.icon {
  cursor: pointer;
  width: 155px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 100; }

.icon p {
  position: absolute;
  left: 15px;
  top: 8px;
  font-size: 20px;
  color: #FFF;
  font-family: "roboto-medium"; }
  @media screen and (max-width: 560px) {
    .icon p {
      font-size: 12px;
      top: 12px;
      left: 30px; } }

.icon span {
  margin-top: 35px; }

.icon span, .icon span:before, .icon span:after {
  cursor: pointer;
  border-radius: 3px;
  height: 4px;
  width: 27px;
  background: #fff;
  position: absolute;
  display: block;
  left: 100px;
  top: -8px;
  content: '';
  -webkit-transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47);
  -moz-transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47);
  transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47); }
  @media screen and (max-width: 560px) {
    .icon span, .icon span:before, .icon span:after {
      left: 90px; } }

.icon span:before {
  top: -16px;
  left: 0; }

.icon span:after {
  bottom: 0;
  left: 0; }

.icon.active span {
  background-color: transparent;
  top: -15px; }

.icon.active span:before, .icon.active span:after {
  top: 0; }

.icon.active span:before {
  -webkit-transform: rotate(45deg) scale(1.2);
  -moz-transform: rotate(45deg) scale(1.2);
  -ms-transform: rotate(45deg) scale(1.2);
  -o-transform: rotate(45deg) scale(1.2);
  transform: rotate(45deg) scale(1.2); }

.icon.active span:after {
  -webkit-transform: rotate(-45deg) scale(1.2);
  -moz-transform: rotate(-45deg) scale(1.2);
  -ms-transform: rotate(-45deg) scale(1.2);
  -o-transform: rotate(-45deg) scale(1.2);
  transform: rotate(-45deg) scale(1.2); }

.abrir-menu {
  left: 0 !important;
  transition: all .5s; }

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