/* The side navigation menu */

#mobile {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 9999999999; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--main-empresa); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 35px; /* Place content 35px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */  
}

#mobile .card{
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 4px;
}

#mobile .card-header {
  padding: 0px;
  border-bottom: none;
}

/* The navigation menu links */
#mobile a {
  text-decoration: none;
  color: var(--main-black);
}

/* When you mouse over the navigation links, change their color */
#mobile a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
#mobile .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #fff;
}

#mobile button{
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: var(--main-empresa);
  text-decoration: none;
}

#mobile .logo{
  padding: 10px;
}

#mobile .logo img{
  width: 100%;
}

#mobile .card .tit .faixa{
  width: 40px;
  height: 2px;
  background-color: var(--main-empresa);
}

#mobile #atalhos{
  margin-left: 10px;
  margin-right: 10px;
}

#mobile #atalhos .botao {
  text-transform: uppercase;
  margin-bottom: 10px;
}

#mobile #atalhos .botao a{
  font-weight: lighter;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

#mobile #atalhos .botao a .texto{
  color: #fff;
  font-size: 16px;
  width: 160px;
  margin-left: 10px;
  font-weight: lighter;
}

#mobile #rodape{
  position: absolute;
  bottom: 10px;
  width: 100%;
  z-index: -1;
}

#mobile #rodape .icones{
  display: flex;
  justify-content: space-evenly;
}

#mobile #rodape .icones a{
  text-decoration: none;
}

#mobile #rodape .icones a i{
  color: #fff;
  font-size: 24px;
}

#mobile ul{
  list-style: none;
}
#mobile ul li{
  margin-bottom: 5px;
}

#mobile button .icone {
  transform: rotate(45deg);
}

#mobile button .icone i{
  color: var(--main-empresa);
}

@media screen and (max-height: 450px) {
  #mobile {padding-top: 15px;}
  #mobile a {font-size: 18px;}
}