/*  
*   ------- CSS DO MENU SANDWICH PARA SITE -------
*   SEPARADO AQUI PARA SER ATULIZADO E MELHORADO COM O TEMPO
*/

:root {
  --bars-color: #22a13d;
  --bars-height: 1px;
  --menu-font-family: "Raleway", sans-serif;
}

/* LEGADO */
/* Sidebar */
.sidebar {
  width: 300px;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  right: -300px;
  z-index: 3002 !important;
  background-color: #fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.6s ease;
}

.sidebar.aberto {
  right: 0;
}

.sidebar .inside {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow-y: auto;
}

.fundo-sidebar {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0.7;
  background: #000;
}
/* END LEGADO */

.engloba-sidebar {
  display: none;
}

.btn-mn-mbl {
  display: none;
  width: 32px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: calc(50% - 13px);
}

.btn-mn-mbl::before {
  content: "";
  width: 120px;
  height: 40px;
  position: absolute;
  top: -12px;
  left: -15px;
  background-color: transparent;
  border: #22a13d solid 1px;
  transform: skew(45deg);
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
}

.btn-mn-mbl span {
  width: 100%;
  height: var(--bars-height);
  background-color: var(--bars-color);
  position: absolute;
  top: 0;
  right: 0;
}

.btn-mn-mbl span:nth-of-type(2) {
  top: calc(50% - var(--bars-height));
  width: 75%;
}

.btn-mn-mbl span:nth-of-type(3) {
  top: unset;
  bottom: 0;
  width: 50%;
}

.sidebar-bg {
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: #0000008f;
  position: fixed;
  top: 0;
  z-index: 3001;
}

#a-mb-close {
  font-family: var(--menu-font-family);
  font-weight: 500;
  font-size: 22px;
  text-align: right;
  padding: 10px 15px 15px 0;
}

.logo-side {
  text-align: center;
  margin-bottom: 40px;
}

.logo-side img {
  width: 60%;
}

.closeSidebar {
  padding: 10px 0 0 15px;
}

.engloba-sidebar {
  display: block;
  padding: 10px;
}

.engloba-sidebar li {
  height: 50px;
  padding-left: 40px;
}
/* end menu responsivo */
@media screen and (max-width: 940px) {
  .btn-mn-mbl {
    display: block;
  }
}