@charset "utf-8";
.logo-marca{
  position: absolute;
  line-height: 50px;
  float: left;
  display: none;
  text-transform: uppercase;
}
.menu-bar{
  z-index: 100;
  position: relative;
  top:0;
  width: 80%;
  margin: auto;
  height: 60px;
  background-color: #FEC229;
  padding: 0 20px;
  color: #0f0f0fc2;
  border-radius: 20px;
  
}
.sub-bar{
  z-index: 1;
  position: relative;
  top:-30px;
  margin-bottom: -30px;
  /* margin: auto; */
  height: 90px;
  background-color: #333333;
  color: #0f0f0fc2;
}
.sub-bar-content{
  font-size: 14px;
  z-index: 2;
  top: 40px;
  width: 83%;
  position: relative;
  margin: auto;
  color: #ffffff;
}
.right-content{
  float: left;-webkit-box-sizing: border-box;box-sizing: border-box;width:60%;text-align:right;
}
.right-content a{
  text-decoration: none;
  color: #ffffff;
  transition: all 0.3s ease;
}
.right-content a:hover{
  color:#FEC229;
}
.menu{
  text-align: center;
  line-height: 60px;
}
.menu a{
  color: #0f0f0fc2;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 20px;;
  transition: all 0.5s ease;
}
.mostrar-menu-btn,.ocultar-menu-btn{
  transition: 0.4s;
  font-size: 35px;
  cursor: pointer;
  display: none;
}
.mostrar-menu-btn{
  float: right;
  padding-left: 10px;
}
.mostrar-menu-btn i{
  line-height: 50px;
}
.menu a:hover,
.mostrar-menu-btn:hover,
.ocultar-menu-btn:hover{
  color: #ffffff;
  /* color: #e0e0e0; */
  /* border-radius: 5px; */
  background-color: #3f3f3f
}

#chk,#chk-user{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.content{
  padding: 0 20px;
}
.content img{
  width: 100%;
  max-width: 700px;
  margin: 20px 0;
}
.content p{
  text-align: justify;
}
/*drop menu*/
.dropdown-content a:hover {background-color: #00000046;color:#FEC229;}
.dropdown-menu:hover .dropdown-content {display: block;min-width:100%}
.dropdown-menu:hover .dropbtn {color: #e0e0e0;background-color: #3f3f3f}

.dropdown-menu {
  position: relative;
  display: inline-block;
}
/* .dropbtn {
  outline: none;
  text-transform: uppercase;
  background: rgba(95, 95, 95, 0);
  color: #0f0f0fc2;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding: 21px;
  transition: all 0.5s ease;
  border: none;
  cursor: pointer;
} */
.dropbtn {
  transition: all 0.5s ease;
  cursor: pointer;
}
.dropbtn i{
  padding-right: 16px;
}
.dropdown-content {
  z-index: 1;
  margin-top: -12px;
  display: none;
  position: absolute;
  background-color: #3b3b3b;
  min-width: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
}
.dropdown-content a {
  padding: 0;
  color: #ffffff;
  text-decoration: none;
  display: block;
}

/*Nav vertical*/
.vertical-menu { 
  width: 100%;
  text-transform: uppercase;
  margin: 0;
  z-index: 100;
}

.vertical-menu a {
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  background-color: #FEC229;
  color: #0f0f0fc2;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  display: block;
  padding: 10px 0 10px 0;
  transition: all 0.5s ease;
}

.vertical-menu a:hover {
  background-color: #3b3b3b;
  color:rgb(255, 255, 255);
}

/*drop menu vertical*/
.drop-vertical-content {
  z-index: 8;
  top: 0;
  left: 100%;
  display: none;
  position: absolute;
  min-width: 0;
  transition: all 0.5s ease;
}
.drop-vertical-menu:hover .drop-vertical-content {
  display: block; 
  width: auto;
  min-width: 100%;
}
.drop-vertical-content a {
  margin-left: 6px;
  padding: 10px 0 10px 0;
  color: #ffffff;
  background-color: #3b3b3b;
  border: none;
  text-decoration: none;
  display: block;
  text-transform: uppercase;
}
.drop-vertical-content a:hover {
  background-color: #252525;
  color:#FEC229;
}

.drop-vertical-menu:hover .drop-vert-btn 
{  background-color: #3b3b3b;
  color:#ffffff;}

.drop-vertical-menu {
  width: 100%;
  display: inline-block;
  position: relative;
}
.drop-vert-btn {
  width: 100%;
  margin-top: 10px;
  background-color: #FEC229;
  color: #0f0f0fc2;
  text-transform: uppercase;
  font-weight: bold;
  outline: none;
  width: 99%;
  text-align: center;
  text-decoration: none;
  border: none;
  display: block;
  padding: 10px 0 10px 0;
  transition: all 0.5s ease;
}
/* Lista e imagem principal resposiva */
@media screen and (max-width:1100px) {
.n-principal #imagem1:checked ~ .list-right #item1 {
    margin-left: 4%;
    border-radius: 10px;
}
.n-principal #imagem2:checked ~ .list-right #item2 {
  margin-left: 4%;
  border-radius: 10px;
}
.n-principal #imagem3:checked ~ .list-right #item3 {
  margin-left: 4%;
  border-radius: 10px;
}
.n-principal #imagem4:checked ~ .list-right #item4 {
  margin-left: 4%;
  border-radius: 10px;
}
.n-principal .list-right {
    width: 90%;
}
.n-principal .img-principal img {
    max-height: none;
}
.n-principal .img-principal {
  width: 100%;
}
.n-principal .list-right .item:hover {
  border-left: 2px solid #ffab00;
  border-radius: 10px;
}
}
.barra-p{
  margin-left: auto;margin-right: auto;background: #333333;
  height: 30px;
  border-radius: 30px;
  padding: 10px; width: 50%
}
.bar-search{
  margin-left: 10px; border: none;
  background: none;
  width: 80%;
  outline: none;
  float: left;
  padding: 0 !important;
  color: #ffffff;
  font-size: 18px;
  transition: 0.4s;
  line-height: 30px;
}
.btn-busca{
  display: none;
  position: absolute;
  margin-top: 20px;
  font-size: 20px;
  color: #252525cf;
}
@media screen and (max-width:800px) {

  .barra-p{
    width: 80%;
  }
  .btn-busca{
    display: unset;
  }
.n-principal .list-right {
    width: 90%;
    max-width: none;
}
.n-principal .img-principal img {
    max-height: none;
}
.n-principal .img-principal {
  width: 100%;
  max-width: unset; 
}
.footer-desk .info , .footer-desk .uteis{
    width: 100%;
    height: auto;
    padding-bottom: 50px;
}
.container-pai {
    margin: 7% 2% 5px 1%;
    overflow: hidden;
}
.mostrar-menu-btn,.ocultar-menu-btn,.logo-marca{
    display: block;
}
.menu-bar{
    position: sticky;
    text-align: center;
}
.dropbtn{
    background-color: #00000000;
    margin-top: 10px;
    font-size: 20px;
    color: #b1b1b1;
    display: block;
    padding: 20px;
    width: 100%;
}
.drop-vertical-menu,.dropdown-menu {
    position: unset;
    width: 100%;
}
.drop-vertical-content,.dropdown-content{
  position: relative;
  left: 0;
}
.logo-marca{
  display: block;
}
.menu{
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #3f3f3f;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 60px 0;
    line-height: normal;
    transition: 0.7s;
    overflow-y: auto;
    overflow-x: hidden;
}
.menu a{
    margin-top: 10px;
    font-size: 20px;
    color: #b1b1b1;
    display: block;
    padding: 20px;
}
.ocultar-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
}
#chk:checked ~ .menu{
    right: 0;
}
}
@media screen and (max-width:500px) {
  .cont-foot {
    margin: 5% 5%;
  }
  .ic-ft {
    padding-left: 0%;
  }
  .sub-bar{
    height: 105px;
  }
}