*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/


/**body contenedor principal**/
body{
  background-image: url("../imagenes1/fondo.jpg");
  max-width: 100%;
  font-family:'Futura',;
  overflow-x: hidden;
}
/**titulo distribuidora mayorista**/
header h1,h2{
  width: 100%;
  padding: 10px;
  background:linear-gradient(rgb(10, 10, 10),rgb(0, 254, 81)) ;
  color: rgb(18, 2, 198);
  text-align: center;
  background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
animation: text 5s linear infinite;
text-decoration: none;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;


}
@keyframes text{
  0%{
      filter:hue-rotate(0deg);
  }
  100%{
      filter: hue-rotate(360deg);
  }
}
/**fin titulo distribuidora **/



/** navegacion **/
nav ul{
  list-style: none;
  text-align: center;
 font-weight: bolder;
 
}
nav ul li{
  display: inline-block;
  padding: 20px;
  transition: all ease-in-out 250ms;
}
ul li a{


  color:rgb(16, 16, 16);
  
  text-decoration: none;
}
nav ul li a:hover{
 
  color:rgb(241, 6, 6);
 
}

.hide{

  font-size: 22px;
  padding: 16px;
  cursor: pointer;
  color:rgb(6, 6, 237);
  display: none;
}

/**fin de navegacion**/
.img img{
  width: 100%;
  height: 300px;
}
/*menu dispositivos*/

/**pantalla 768**/
@media (max-width: 768px){
  
  body{
      font-family:'Futura',;
      background-image: url("../imagenes1/fondo.jpg"); 
      overflow-x: hidden;
  }
      ul li{
          width: 100%;
          padding: 16px;
          text-align: left;
      }
      .hide{
          display: block;
      }
      nav ul{
          display: none;
      }
      nav ul li a:hover{
     
          color:rgb(9, 9, 9);
         
      }
    }
      
@media (max-width: 545px){
 
 
body{
  font-family:'Futura',;
  background-image: url("../imagenes1/fondo.jpg"); 
  overflow-x: hidden;
}
  ul li{
      width: 100%;
      padding: 16px;
      text-align: left;
  }
  .hide{
      display: block;
  }
  nav ul{
      display: none;
  }
  nav ul li a:hover{
 
      color:rgb(9, 9, 9);
     
  }
  html{overflow-x: hidden;
  
  }
}
/*colores titulos*/
.section-heading {
  color: rgb(15, 15, 15);
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(-45deg, #e20707, #0c0c0c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Contact Form */
.form-control {
  height: 48px;
  border-radius: 0;
  border: 1px solid #dae0e5;
}

.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #fcf804;
}

/*boton whatzap*/
.btn.btn-primary {
  background: #50f006;
  background: linear-gradient(-45deg, #4ff004, #eef3ee);
  color: rgb(10, 10, 10);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}
/*--------------------------------------------------------------
# flecha hacia arriba
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 155px;
  z-index: 996;
  background: #efeaea;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  
  line-height: 0;
}

.back-to-top:hover {
  background: #28f703;
  color: rgb(16, 15, 15);
}

.back-to-top.active {
  visibility:inherit;
  opacity: 1;
}


/*hover botones*/
.page-item a:hover{
  color: rgb(242, 1, 1);
  background: rgb(0, 17, 255);
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 5rem 0 2.5rem 0;
 
}

.footer h3 {
  font-size: 58px;
  margin-bottom: 50px;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer a {
  color: #000;
}

.footer .copyright {
  margin-bottom: 0px;
}

.footer .copyright, .footer .credits {
  font-size: 14px;
}
/*botones redes sociales tamaño y fondo,etc*/
.social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0879ea;
  position: relative;
  text-align: center;
  transition: .3s background ease;
  color: #fafaff;
  line-height: 0;
}

.social a span {
  display: inline-block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
/*botones redes sociales*/
.social a:hover {
  color: #fff;
  background: #f00a02;
}

.social a i {
  line-height: 0;
}