:root{
    --color1:rgb(239,165,0);
    --color2:rgb(5,5,4);
    --color3:rgba(183,118,0,0.888);
    --color4:rgb(43,88,12);
    --color5:rgb(255,214,73);
  
    --fondo:#efefef ;
    
  }
.main-img{
    width:100%;
    height:500px;
    background:url(../images/productos/productos.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
   
  }
  section{
    width: 100%;
   
   
  }
.textos{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden ;
    text-align: center;
    z-index: -100;
    background: rgba(0,0,0,.688);
  
  
  
  } 
  .textos>h1{
    font-size: 80px;
    color:#efefef;
  
  }
  .textos>h2{
    font-size: 40px;
    font-weight: 300;
    color: rgb(239,165,0);
    
  } 
h3{
    font-size:30px;
    color:var(--color1);
    margin-top: 45px; 
    text-align: center;
  }
  .btns-prodc{
      overflow: hidden;

  }
  .btns-prodc ul{
      margin-left:80px;
  }
  .btns-prodc li{
      display: inline-block;
      text-align: center;
      margin-left: 10px;
      margin-bottom: 45px;
      padding: 6px 12px;
      border: 1px solid var(--color3) ;
      list-style: none;
      color: var(--color1);

  }
  .btns-prodc li:hover{
      background:var(--color1);
      color: #efefef;
      cursor: pointer;
  }

  .btns-prodc .active{
    background:var(--color1);
    color: #efefef;
  }
  .galeria{
   width: 95%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 30px;
  }

.galeria .cont-prod{
    width:25%;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
    height: 300px;
    overflow: hidden;
    margin: 10px;
}
.img-galeria{
    height:90%;
    width: 100%;
    background: #ffffff;
  }

.img-galeria img{
    height:100%;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
}
.text-galeria{
    height: 10%;
}

.text-galeria h4{
    text-align: center;
    line-height: 30px;
    font-weight: 300;
}

@media screen and (max-width:760px){

  .textos>h1 {
    font-size: 3em;
}

.textos>h2 {
    font-size: 2em;
    


}
h3{
  font-size:1.4em;
}

.btns-prodc ul{
  margin-left: 50px;
  
}
.btns-prodc li{
  font-size: .9em;
  margin-bottom:25px;

}

.galeria{
  margin-bottom: 30px;
}
.galeria .cont-prod{ 
  width: 250px;
  max-height:200px;
  overflow: hidden;
  margin: 10px;
}
.img-galeria{
  height:80%;
  width:100%;
  background: #ffffff;
}

.img-galeria img{
  height:100%;
  object-fit: cover;
  cursor: pointer;
}
.text-galeria h4{
  padding-top: 10px;
  text-align: center;
  font-size: .9em;
  line-height:.9em;
 
}
}



@media screen and (max-width:580px) {
  .textos>h1 {
      font-size: 2em;
  }

  .textos>h2 {
      font-size: 1.2em;
      


  }
  h3{
    font-size:1.1em;
  }
  
  .btns-prodc ul{
    margin-left:25px;
    
  }
  .btns-prodc li{
    font-size: .8em;
    margin-bottom: 20px;
  
  }

  .galeria .cont-prod{ 
    width: 400px;
    max-height:600px;
    overflow: hidden;
    margin: 10px;
  }
  .img-galeria{
    height:90%;
    width:100%;
    background: #ffffff;
  }
 }