#menu-primary i {
  transition: 0.2s;

  &.rotate {
    transform: rotate(180deg);
  }
}

.offcanvas-open {
  overflow: hidden;
  height: 100vh !important;
  & footer {
    display: none !important;
  }
}

.btn-menu-offcanvas {
  background: transparent;
  border: none;
  font-size: 22px;
  color: white;
  transition: 0.4s;

  &:hover {
    color: var(--color-primary);
  }

  &:focus {
    box-shadow: none;
    outline: 0;
    border: none;
  }

  &:active {
    box-shadow: none;
    outline: 0;
    border: none;
  }

  &:target {
    box-shadow: none;
    outline: 0;
    border: none;
  }
}

#offcanvasMenu {
  & .btn-close:focus {
    box-shadow: none;
  }

  & .logo-header {
    width: 100%;
    max-width: 150px;
    /* filter: brightness(0%); */

    @media (width>768px) {
      max-width: 220px;
    }
  }

  & ul.sub-menu li:first-child {
    border-top: 1px solid rgba(55, 55, 55, 0.12);
  }

  & ul.sub-menu li {
    border-bottom: 1px solid rgba(55, 55, 55, 0.12);
    list-style: disc;
  }

  & li {
    width: 100%;
    list-style: none;
    padding: 8px 0;

    & a {
      color: var(--color-text);
      font-weight: 600;
      font-family: var(--ff-cinzel);
      font-size: 17px;
      transition: 0.4s;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-transform: capitalize;

      & i {
        color: var(--color-text);
        font-size: 15px;
        cursor: pointer;
        transition: 0.4s;

        &:hover {
          color: var(--color-primary);
        }
      }

      &:hover {
        color: var(--color-primary) !important;
      }
    }
  }

  .offcanvas-body {
    ul#menu-primary li {
      padding: 8px 0;
    }

    ul.sub-menu .li:first-child {
      border-top: 1px solid rgba(55, 55, 55, 0.12);
    }

    ul.sub-menu .li {
      border-bottom: 1px solid rgba(55, 55, 55, 0.12);
    }

    ul li:first-child {
      transition: transform 0.4s ease-in;
    }

    #menu-primary {
      & .sub-menu {
        @media (width<=768px) {
          display: none;
        }
      }

      & .arrow-down {
        transition: 0.3s all !important;
      }

      & .activo {
        display: block !important;
      }

      & .voltear {
        transform: rotate(180deg);
      }

      & ul.sub-menu {
        opacity: 1 !important;
      }
    }
  }

  .content-logos-mobile {
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--color-secondary);
    border-top: 1px solid #80808042;

    .content-brad-img {
      & img {
        width: auto;
        height: 15px;
      }
    }
  }
}