* {

  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  /*propiedades para navegadores */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*para que el padding no aumente su tamaño */

}



/*NAV*/
.navbar {
  display:flex;                               
  justify-content: space-between;                           
  align-items: center;
  color: rgb(255, 255, 255);
  padding-top: 1vh ;
  position: fixed;
  width: 100%;
  background: rgb(0, 0, 0);
  height: 10vh;
  
}
.brand-title img {
  
    padding-left: 2vw;
    width: 250px;
  
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;

}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bolder;
  font-size: 17px;
  font-family: 'Pontano Sans', sans-serif;
}

.nav-links a:hover {
  color: #FF4E02;
}


.burger {
  display: none;
  cursor: pointer;
  margin-bottom: 18px;
}

.burger div {
  width: 20px;
  height: 3px;
  background-color: rgb(226, 226, 226);
  margin: 5px;
  transition: all 0.3 ease;
}

.logo-title h1 {
  color: #fff;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 20px;
  margin-right: 51vw;
  font-weight: lighter;

}

#sweater {
  display: flex;
  margin-left: 20px;
  max-width: 50%;

}

/*end nav*/



 .image-top img{
     display: block;
     height: 600px;
     width: 100%;
    
     
}
/*texto en imagen*/
.center {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 65px;
  color: rgb(249, 249, 249);
  font-family: 'Pontano Sans', sans-serif;
  text-shadow: 3px 5px 19px black;

}

.center2 {
  width: 100%;
  position: absolute;
  display: flex;
  top: 130%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  margin-left: 242px;
  padding-left: 50px;
  color: #fff;
  font-family: 'Pontano Sans', sans-serif;
  text-shadow: 3px 5px 19px black;


}

.btn {
  display: flex;
  position: absolute;
  top: 250%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  background: #ff4e02bb;
  height: 40px;
  width: 100px;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  align-items: center;
  margin-left: 238px;
  padding-left: 10px;
  box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);
  cursor: pointer;

}

.btn:hover {
  color: #000000;


}

#ini:hover {
  color: #fff;
}




/*SLIDER*/
.carousel-section {
  overflow-x: hidden;
  padding-top: 5vh;
}

.carousel {
  width: 100%;
  height: 60vh;
  position: relative;
  overflow-x: hidden;
}

.carousel>ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 200ms opacity ease-in-out;
  transition-delay: 200ms;
}

.slide>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  overflow-x: hidden;
  /*image filter*/
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.slide[data-active] {
  opacity: 1;
  z-index: 1;
  transition-delay: 0ms;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  border-radius: .25rem;
  padding: 0 .5rem;
  background-color: rgba(199, 199, 199, 0.1);
}



.carousel-button:hover,
.carousel-button:focus {
  color: white;
  background-color: rgba(0, 0, 0, .2);
  margin-bottom: 15vh;
}

.carousel-button:focus {
  margin-bottom: 20vh;
}

.carousel-button.prev {
  left: 4rem;
}

.carousel-button.next {
  right: 4rem;
}

/* FIN SLIDER*/


/*categorias*/
.categorias {
  padding: 0;
  margin: auto;
  height: 539px;
  background-color: #D8D6D6;


}

.cat-title {
  color: rgb(0, 0, 0);
  text-align: center;
  padding-top: 1vw;
  font-size: 36px;
  font-family: 'Pontano Sans', sans-serif;
  font-style: normal;
  font-weight: 800;

}

/*categoria cards*/

.cards {
  padding-top: 10vh;
  display: flex;
  justify-content: space-evenly;

}

.cards .card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid rgb(131, 130, 130);
  border-radius: 50%;
  display: block;
  box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);
}

.cards .card>.contenido-texto-card {
  width: 60%;
  color: rgb(0, 0, 0);
  padding-top: 3vh;
  margin-left: 26px;
  font-size: 25px;
  font-family: 'Pontano Sans', sans-serif;
}

.cards .card>.contenido-texto-card p {
  font-weight: 300;
  padding-top: 5px;

}

.cat-title2 {
  color: rgb(0, 0, 0);
  text-align: center;
  padding-top: 1vw;
  font-size: 36px;
  font-family: 'Pontano Sans';
  font-style: normal;
  font-weight: 800;
}

/* fin categorias*/


/*inicio marcas*/
.marcas {
  background-color: #FF4E02;
  height: 539px;

}

#container-col {
  color: #D8D6D6;
  width: 100%;
}

.col2 {
  display: inline-block;

  height: 100px;
  width: 10%;
  margin: 2vw;
  flex-direction: row;
  margin-top: 11vh;


}

.col2>img {
  width: 10vw;
  min-height: 10vh;
}

/*Fin marcas*/

/*footer*/

.img-redes>img {

  margin: 50px 0 20px 20px;
}

.footer {

  padding: 40px;
  text-align: center;
  background-color: rgb(8, 8, 8);
  height: 30vh;
  color: rgb(238, 236, 236);

}

.footer-redes-contenedor {
  margin: 2.5rem 0;
  display: flex;
  margin-left: 43vw;
}

.footer-icono {
  color: #FF4E02;
  font-size: 1.75rem;
  margin-right: 1.5rem;
  transition: transform 0.3s ease;
}

.footer-icono:hover {
  transform: scale(1.3);
}


.footer>h3 {
  font-size: 25px;
  font-family: 'Pontano Sans';
  text-shadow: 3px 5px 19px black;
  margin-left: 0.5vw;
}

.footer>p {
  font-size: 22px;
  margin-top: 35px;
  font-family: 'Pontano Sans';
  color: #d3d1d1;
}

/*fin footer*/
#ini {
  color: #FF4E02;
}

/*media queries*/


/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */

@media screen and (min-width:1200px) and (max-width: 1400px) {

  /*NAV*/
  .nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    margin-right: 3vw;
  }

  .nav-links li {
    list-style: none;
  }

  .nav-links a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bolder;
    font-size: 15px;
    font-family: 'Pontano Sans', sans-serif;
    padding: 6px;
  }




  /*LOGO- TITTLE*/

  .logo-title h1 {
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    font-size: 17px;
    margin-right: 46vw;
    font-weight: lighter;
    word-wrap: none;
  }

  #sweater {
    display: flex;
    margin-left: 20px;
    width: 50%;

  }

  /*texto en imagen*/
  .center {
    position: absolute;
    top: 35%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    text-shadow: 3px 5px 19px rgb(0, 0, 0);
  }

  .center2 {
    width: 100%;
    position: absolute;
    display: flex;
    top: 130%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    margin-left: 255px;
    padding-left: 50px;
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    text-shadow: 3px 5px 19px rgb(0, 0, 0);

  }

  /*btn productos*/
  .btn {
    display: block;
    position: absolute;
    top: 250%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    background: #FF4E02;
    height: 40px;
    width: 100px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    align-items: center;
    margin-left: 17vw;
    padding-left: 1px;
    box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);

  }

  /*categorias*/

  .cat-title {

    font-family: 'Pontano Sans', sans-serif;
    margin-left: 1vw;
  }

  #container-col {
    color: #D8D6D6;
    width: 100%;
    margin-top: 13vh;
  }

  /*categoria cards*/
  .cards {
    padding-top: 15vh;
    display: flex;
    justify-content: space-evenly;

  }

  /*marcas*/

  /*footer*/
  .footer {

    overflow: hidden;
    padding: 20px;
    text-align: center;
    background-color: rgb(8, 8, 8);
    height: 40vh;
    color: rgb(255, 255, 255);
    /* margin: 100%; */
  }

  .footer>h3 {
    font-size: 22px;
    font-family: 'Pontano Sans';
  }

  .footer>p {
    font-size: 20px;
    margin-top: 22px;
    font-family: 'Pontano Sans';
  }

  /*fin footer*/

}

/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */

@media screen and (max-width:1199px) {
  body {
    overflow-x: hidden;
  }

  .logo-title>h1 {
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    font-size: 20px;
    margin-right: 40vw;
    font-weight: lighter;

  }

  #sweater {
    display: flex;
    margin-left: 30px;
    max-width: 50%;

  }

  .nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    margin-right: 5vw;
  }

  .nav-links li {
    list-style: none;

  }

  .nav-links a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bolder;
    font-size: 14px;
    font-family: 'Pontano Sans', sans-serif;
    margin: 1em;

  }

  /*section image top*/

  .image-top img {
    display: block;
    height: 400px;
    width: 100%;


  }

  /*texto en imagen*/
  .center {
    overflow: hidden;
    position: absolute;
    margin-top: 10vh;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    text-shadow: 3px 5px 19px rgb(196, 196, 196);
    text-align: center;
  }

  /*categorias*/
  .categorias {
    height: 400px;
  }

  .cat-title {
    font-size: 30px;
    font-family: 'Pontano Sans', sans-serif;
  }

  .cards .card img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 3px solid rgb(131, 130, 130);
    border-radius: 50%;
    display: block;
    box-shadow: 0px 0px 5px 2px rgb(255 253 253);
  }

  /*marcas*/
  .marcas {
    height: 400px;
  }

  .cat-title2 {
    font-size: 30px;
  }

  #container-col {
    color: #D8D6D6;
    width: 100%;
    margin-top: 13vh;
  }

  /*categoria cards*/
  .cards {
    padding-top: 15vh;
    display: flex;
    justify-content: space-evenly;


  }

  /*img marcas*/
  .col2>img {

    width: 10vw;
    min-height: 5vh;
  }



  /*fin  categoria cards*/

  /*footer*/
  .footer {

    overflow: hidden;
    padding: 0px;
    text-align: center;
    background-color: rgb(8, 8, 8);
    height: 40vh;
    color: rgb(255, 255, 255);
    /* margin: 100%; */
  }


  .footer>h3 {
    font-size: 18px;
    font-family: 'Pontano Sans';
    margin-top: 5vh;
    margin-left: 2vw;
  }

  .footer>p {
    font-size: 15px;
    margin-top: 20px;
    font-family: 'Pontano Sans';
    margin-left: 3vw;
  }

  /*fin footer*/

}

/*max-width 768px*/
@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }

  @media screen and (min-width: 481px) and (max-width:768px) {

    html,
    body {
      overflow-x: hidden;

    }

    .nav-links {

      position: absolute;
      right: -100px;
      height: 92vh;
      top: 8vh;
      background-color: rgb(8, 8, 8);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70%;
      transform: translateX(100%);

    }

    .nav-links li {
      opacity: 0;
    }

    .burger {
      display: block;
      margin-left: 150px;
      margin-top: 2.5vw;

    }

    /*logo*/
    .logo-title h1 {
      color: #fff;
      font-family: 'Pontano Sans', sans-serif;
      font-size: 15px;
      margin-right: 20vw;
      font-weight: lighter;

    }

    #sweater {
      display: none;
      margin-left: 20px;
      max-width: 5vw;
    }

    /*fin logo*/


    /*section image top*/

    .image-top img {
      display: block;
      height: 400px;
      width: 100%;


    }

    /*texto en imagen*/
    .center {
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 45px;
      color: #fff;
      font-family: 'Pontano Sans', sans-serif;
      text-shadow: 3px 5px 19px black;
    }

    .center2 {
      width: 100%;
      position: absolute;
      display: flex;
      top: 160%;
      transform: translate(-50%, -50%);
      font-size: 13px;
      margin-left: 80px;
      color: #fff;
      font-family: 'Pontano Sans', sans-serif;
      text-shadow: 3px 5px 19px rgb(255, 255, 255);

    }

    .btn {
      display: flex;
      position: fixed;
      top: 290%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      background: #FF4E02;
      height: 40px;
      width: 100px;
      border: none;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
      align-items: center;
      margin-left: 22vw;
      padding-left: 10px;
      box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);

    }

    /* fin section image top*/

    /*categorias*/
    .categorias {
      padding: 0;
      margin: auto;
      height: 400px;
      background-color: #D8D6D6;

    }

    .cat-title {
      font-size: 30px;
      padding-top: 5vh;
      font-family: 'Pontano Sans', sans-serif;
    }

    /*categoria cards*/

    .cards {
      padding-top: 10vh;
      display: flex;


    }

    .cards .card img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border: 3px solid rgb(131, 130, 130);
      border-radius: 50%;
      display: block;
      box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);
    }

    .cards .card>.contenido-texto-card {
      width: 60%;
      color: rgb(0, 0, 0);
      padding-top: 3vh;
      margin-left: 2px;
      font-size: 18px;
      font-family: 'Pontano Sans', sans-serif;
    }

    .cards .card>.contenido-texto-card p {
      font-weight: 300;
      padding-top: 5px;

    }

    .cat-title2 {
      color: rgb(0, 0, 0);
      text-align: center;
      padding-top: 1vw;
      font-size: 36px;
      font-family: 'Pontano Sans';
      font-style: normal;
      font-weight: 800;
    }

    /* fin categorias*/


    /*inicio marcas*/
    .marcas {
      background-color: #FF4E02;
      height: 400px;

    }

    .cat-title2 {
      padding-top: 5vh;
      font-size: 30px;

    }

    #container-col {
      color: #D8D6D6;
      width: 100%;
    }

    .col2 {
      display: inline-block;

      height: 100px;
      width: 10%;
      margin: 2vw;
      flex-direction: row;

    }

    .col2>img {
      width: 10vw;
      min-height: 6vh;
    }

    /*Fin marcas*/

    /*footer*/
    .footer {
      overflow: hidden;
      padding: 20px;
      text-align: center;
      background-color: rgb(8, 8, 8);
      height: 30vh;
      color: rgb(255, 255, 255);
      /* margin: 100%; */
    }


    .footer>h3 {
      font-size: 18px;
      font-family: 'Pontano Sans';
      margin-left: 2vw;
    }

    .footer-redes-contenedor {
      margin: 2rem 0;
      display: flex;
      margin-left: 35vw;
    }

    .footer-icono {
      color: #FF4E02;
      font-size: 1.75rem;
      margin-right: 1.5rem;
      transition: transform 0.3s ease;
    }

    .footer-icono:hover {
      transform: scale(1.3);
    }

    .footer>p {
      font-size: 15px;
      margin-top: 35px;
      font-family: 'Pontano Sans';
      margin-left: 3vw;
    }

    /*fin footer*/

  }


}

/*fin  max-width 768px*/

/*standar smartphones*/


@media (max-width: 480px) {

  html,
  body {
    overflow-x: hidden;

  }

  .nav-links {

    position: absolute;
    right: -100px;
    height: 92vh;
    top: 8vh;
    background-color: rgb(8, 8, 8);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    transform: translateX(100%);

  }

  .nav-links li {
    opacity: 0;
    margin-right: 8vw;
  }

  .burger {
    display: block;
    margin-left: 150px;
    margin-top: 2.5vw;

  }

  /*logo*/
  .logo-title h1 {
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    font-size: 20px;
    margin-right: 20vw;
    font-weight: lighter;

  }

  #sweater {
    display: flex;
    margin-left: 20px;
    max-width: 5vw;
  }

  /*fin logo*/


  /*section image top*/

  .image-top img {
    display: block;
    height: 300px;
    width: 100%;


  }

  /*texto en imagen*/
  .center {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    text-shadow: 3px 5px 19px black;
  }

  .center2 {
    width: 100%;
    position: absolute;
    display: flex;
    top: 160%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    margin-left: 80px;
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    text-shadow: 3px 5px 19px rgb(255, 255, 255);

  }

  .btn {
    display: flex;
    position: fixed;
    top: 290%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    background: #FF4E02;
    height: 40px;
    width: 100px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    align-items: center;
    margin-left: 22vw;
    padding-left: 10px;
    box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);

  }

  /* fin section image top*/

  /*categorias*/
  .categorias {
    padding: 0;
    margin: auto;
    height: 400px;
    background-color: #D8D6D6;


  }

  .cat-title {
    font-size: 30px;
    padding-top: 5vh;
    font-family: 'Pontano Sans', sans-serif;
  }

  /*categoria cards*/

  .cards {
    padding-top: 10vh;
    display: flex;


  }

  .cards .card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid rgb(131, 130, 130);
    border-radius: 50%;
    display: block;
    box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);
  }

  .cards .card>.contenido-texto-card {
    width: 60%;
    color: rgb(0, 0, 0);
    padding-top: 3vh;
    margin-left: 2px;
    font-size: 18px;
    font-family: 'Pontano Sans', sans-serif;
  }

  .cards .card>.contenido-texto-card p {
    font-weight: 300;
    padding-top: 5px;

  }

  .cat-title2 {
    color: rgb(0, 0, 0);
    text-align: center;
    padding-top: 1vw;
    font-size: 36px;
    font-family: 'Pontano Sans';
    font-style: normal;
    font-weight: 800;
  }

  /* fin categorias*/


  /*inicio marcas*/
  .marcas {
    background-color: #FF4E02;
    height: 400px;

  }

  .cat-title2 {
    padding-top: 5vh;
    font-size: 30px;

  }

  #container-col {
    color: #D8D6D6;
    width: 100%;
  }

  .col2 {
    display: inline-block;

    height: 100px;
    width: 10%;
    margin: 2vw;
    flex-direction: row;

  }

  .col2>img {
    width: 10vw;
    min-height: 6vh;
  }

  /*Fin marcas*/

  /*footer*/
  .footer {
    overflow: hidden;
    padding: 20px;
    text-align: center;
    background-color: rgb(8, 8, 8);
    height: 40vh;
    color: rgb(255, 255, 255);
    /* margin: 100%; */
  }


  .footer>h3 {
    font-size: 18px;
    font-family: 'Pontano Sans';
    margin-left: 2vw;
  }

  .footer-redes-contenedor {
    margin: 2rem 0;
    display: flex;
    margin-left: 30vw;
  }

  .footer-icono {
    color: #FF4E02;
    font-size: 1.75rem;
    margin-right: 1.5rem;
    transition: transform 0.3s ease;
  }

  .footer-icono:hover {
    transform: scale(1.3);
  }

  .footer>p {
    font-size: 15px;
    margin-top: 35px;
    font-family: 'Pontano Sans';
    margin-left: 3vw;
  }

  /*fin footer*/

}

/* fin standar smartphones*/

/*smartphones S*/

@media screen and (min-width:320px) and (max-width:429px) {

  html,
  body {
    overflow-x: hidden;

  }

  .nav-links {

    position: absolute;
    right: -100px;
    height: 92vh;
    top: 8vh;
    background-color: rgb(8, 8, 8);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    transform: translateX(100%);

  }

  .nav-links li {
    margin-top: -5vh;
    opacity: 0;
    margin-right: 10vw;
    font-size: 8px;
  }

  .burger {
    display: block;
    margin-left: 150px;
    margin-top: 3vw;

  }


  /*logo*/
  .logo-title>h1 {
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    font-size: 12px;
    font-weight: lighter;


  }

  #sweater {
    display: none;
    margin-left: 3px;
    max-width: 3vw;
  }

  /*fin logo*/


  /*section image top*/

  .image-top img {
    display: block;
    height: 300px;
    width: 100%;


  }

  /*texto en imagen*/
  .center {
    position: absolute;
    top: 26%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: #fff;
    font-family: 'Pontano Sans', sans-serif;
    text-shadow: 3px 5px 19px black;
  }



  /* fin section image top*/


  /*SLIDER*/

  .carousel-section {
    overflow-x: hidden;
  }

  .carousel {
    width: 100%;
    height: 30vh;
    position: relative;
    overflow-x: hidden;
  }

  .carousel>ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
  }

  .slide>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    overflow-x: hidden;
    /*image filter*/

  }

  .slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
  }

  .carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 1rem;
    top: 60%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(199, 199, 199, 0.1);
  }

  .carousel-button:hover,
  .carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
    margin-bottom: 15vh;
  }

  .carousel-button:focus {
    margin-bottom: 20vh;
  }

  .carousel-button.prev {
    left: 1rem;
  }

  .carousel-button.next {
    right: 1rem;
  }

  /* FIN SLIDER*/


  /*categorias*/
  .categorias {
    padding: 0;
    margin: auto;
    height: 300px;
    background-color: #D8D6D6;

  }

  .cat-title {
    font-size: 15px;
    padding-top: 5vh;
  }

  /*categoria cards*/

  .cards {
    padding-top: 10vh;
    display: flex;

  }

  .cards .card {
    margin-top: -3vh;
  }


  .cards .card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 3px solid rgb(131, 130, 130);
    border-radius: 50%;
    display: block;
    box-shadow: 0px 0px 5px 2px rgb(255, 253, 253);
  }

  .cards .card>.contenido-texto-card {
    width: 60%;
    color: rgb(0, 0, 0);
    padding-top: 3vh;
    margin-left: 2px;
    font-size: 12px;
    font-family: 'Pontano Sans', sans-serif;
  }

  .cards .card>.contenido-texto-card p {
    font-weight: 300;
    padding-top: 5px;

  }

  .cat-title2 {
    color: rgb(0, 0, 0);
    text-align: center;
    padding-top: 1vw;
    font-size: 36px;
    font-family: 'Pontano Sans';
    font-style: normal;
    font-weight: 800;
  }

  /* fin categorias*/


  /*inicio marcas*/
  .marcas {
    background-color: #FF4E02;
    height: 300px;

  }

  .cat-title2 {
    padding-top: 5vh;
    font-size: 15px;

  }

  #container-col {

    width: 100%;
    margin-top: 8vh;
  }

  .col2 {


    height: 10px;
    width: 10%;
    margin: 2vw;


  }

  .col2>img {
    width: 12vw;
    min-height: 4vh;

  }


  /*Fin marcas*/

  /*footer*/
  .footer {
    overflow: hidden;
    padding: 15px;
    text-align: center;
    background-color: rgb(8, 8, 8);
    height: 30vh;
    color: rgb(255, 255, 255);
    /* margin: 100%; */
  }


  .footer>h3 {
    font-size: 15px;
    font-family: 'Pontano Sans';
    margin-left: 2vw;
    margin-top: 3vh;
  }

  .footer-redes-contenedor {
    margin: 2rem 0;
    display: flex;
    margin-left: 26vw;
  }

  .footer-icono {
    color: #FF4E02;
    font-size: 1.75rem;
    margin-right: 1.5rem;
    transition: transform 0.3s ease;
  }

  .footer-icono:hover {
    transform: scale(1.3);
  }

  .footer>p {
    font-size: 13px;
    margin-top: 20px;
    font-family: 'Pontano Sans';
    margin-left: 3vw;
  }

  /*fin footer*/

}

.nav-active {
  transform: translateX(0%);

}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}


.container-card {
  display: flex;
  flex-direction: column
}

.card1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.card1:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;

}