/* 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;
  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 */  
  background-color: #6cb5b7;
}

#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);
  font-size: 15px;
  line-height: 15px;
}

/* 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: 15px;
  right: 15px;
  font-size: 36px;
  margin-left: 50px;
  color: #fff;
}

#mobile button, #mobile .btn-link, #mobile .botao-red{
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #fff;
}

#mobile .logo{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mobile .logo img{
  width: 100%;
  max-width: 227px;
}

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

#mobile #atalhos, #mobile .sites{
  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{
  margin-top: 20px;
  margin-bottom: 40px;
  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: 15px;
  border-bottom: 0.5px solid var(--main-empresa);
}

#mobile button .icone, #mobile .botao-red .icone{
  transform: rotate(45deg);
}

#intra .box{
  display: flex;
  justify-content: center;
  align-items: center;
}

#intra .box a{
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
} 

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

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