body {
  background-color: rgb(255, 255, 255);
  font: 400 1.125em/1.38 'PT Sans';
  color: rgb(0, 0, 0);
}

.banner_catalogo {
  float: left;
  width: 100%;
  margin-top: 50px;
  background: url('../images/banner_dise%C3%B1o_hps_2.jpg') rgb(11, 59, 127);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}

.banner_catalogo .text {
  width: 80%;
  margin: 0 auto;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  font-family: Montserrat;
  font-weight: 700;
  color: rgb(255, 255, 255);
}

.barranegra {
  float: left;
  clear: both;
  width: 100%;
  height: 15px;
  background-color: rgb(10, 10, 10);
}

.contacto .contacto {
  display: block;
  width: 150px;
  margin: 21px auto 0;
  background-color: rgba(222, 222, 222, 0);
}

.contacto .contacto:hover {
  border-radius: 50px;
  background-color: rgba(222, 222, 222, 0.16);
}

.contacto .text {
  color: rgb(255, 255, 255);
}

.element {
  float: left;
  clear: both;
  width: 100%;
  height: 80px;
  background-color: rgba(222, 222, 222, 0);
}

.logotipohpsupply {
  display: block;
  width: 252px;
  height: auto;
  margin: 40px auto 0;
  overflow: hidden;
}

.image,
.mail {
  display: block;
  float: left;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.productos {
  float: left;
  clear: both;
  width: 100%;
  background-color: rgb(255, 255, 255);
}

.productos .text {
  float: left;
  clear: both;
  width: 100%;
}

.text {
  text-align: center;
}

.titulo_catalogo {
  float: left;
  clear: both;
  width: 100%;
  min-height: 60px;
  padding: 30px 50px 20px;
  font-family: Montserrat;
  font-size: 2.222em;
  font-weight: 700;
  text-align: center;
  color: rgb(0, 0, 0);
}

._1 {
  display: block;
  position: relative;
  float: left;
  width: 18.8333333333%;
  background-color: rgba(222, 222, 222, 0);
}

._2 {
  display: block;
  position: relative;
  float: left;
  width: 18.75%;
  background-color: rgba(222, 222, 222, 0);
}

._1:hover,
._2:hover {
  border-bottom: 4px solid rgb(6, 61, 161);
}

.contacto-1 {
  float: left;
  clear: both;
  width: 100%;
  margin-top: 30px;
  background-color: rgb(26, 26, 26);
}

.text-1 {
  font-size: 2.778em;
}

.text-2 {
  padding-bottom: 40px;
  font-size: 1.667em;
}

.text-11,
.text-13,
.text-15,
.text-17,
.text-19,
.text-21,
.text-23,
.text-25,
.text-27,
.text-29,
.text-3,
.text-31,
.text-33,
.text-35,
.text-37,
.text-39,
.text-41,
.text-43,
.text-45,
.text-47,
.text-49,
.text-5,
.text-51,
.text-53,
.text-55,
.text-57,
.text-59,
.text-61,
.text-63,
.text-65,
.text-67,
.text-69,
.text-7,
.text-9 {
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: Bitter;
  font-size: 1.111em;
  font-weight: 700;
  color: rgb(210, 96, 19);
}

.text-10,
.text-12,
.text-14,
.text-16,
.text-18,
.text-20,
.text-22,
.text-24,
.text-26,
.text-28,
.text-30,
.text-32,
.text-34,
.text-36,
.text-38,
.text-4,
.text-40,
.text-42,
.text-44,
.text-46,
.text-48,
.text-50,
.text-52,
.text-54,
.text-56,
.text-58,
.text-6,
.text-60,
.text-62,
.text-64,
.text-66,
.text-68,
.text-70,
.text-8 {
  padding-bottom: 20px;
  font-size: 1em;
  color: rgb(0, 0, 0);
}

.text-71 {
  width: 39.1666666666%;
  margin: 40px auto 0;
  font-size: 2.222em;
  font-weight: 700;
}

.text-72 {
  float: left;
  clear: both;
  width: 80%;
  min-height: 40px;
  margin: 50px 0 0 10%;
  padding-top: 30px;
  padding-bottom: 10px;
  font-family: Montserrat;
  font-size: 1.111em;
  font-weight: 700;
}

.text-73 {
  float: left;
  clear: both;
  width: 52.8333333333%;
  min-height: 90px;
  margin-left: 23.58073%;
  font-size: 1.111em;
}

.productos ._1-1 {
  z-index: 9;
  margin: 40px 0 0 10%;
}

.productos ._1-2 {
  clear: both;
  z-index: 25;
  margin: 20px 0 0 10%;
}

.productos ._1-3 {
  clear: both;
  z-index: 41;
  margin: 20px 0 0 10%;
}

.productos ._1-4 {
  z-index: 73;
  margin: 20px 0 0 1.64974%;
}

.productos ._1-5 {
  clear: both;
  z-index: 57;
  margin: 20px 0 0 10%;
}

.productos ._1-6 {
  clear: both;
  z-index: 89;
  margin: 20px 0 0 10%;
}

.productos ._1-7 {
  clear: both;
  z-index: 105;
  margin: 20px 0 0 10%;
}

.productos ._1-8 {
  clear: both;
  z-index: 121;
  margin: 20px 0 0 10%;
}

.productos ._2-1 {
  z-index: 13;
  margin: 40px 0 0 1.56641%;
}

.productos ._2-10 {
  clear: both;
  z-index: 69;
  margin: 20px 0 0 10%;
}

.productos ._2-11 {
  z-index: 77;
  margin: 20px 0 0 1.5625%;
}

.productos ._2-12 {
  z-index: 61;
  margin: 20px 0 0 1.69922%;
}

.productos ._2-13 {
  z-index: 65;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-14 {
  z-index: 81;
  margin: 20px 0 0 1.61849%;
}

.productos ._2-15 {
  z-index: 85;
  margin: 20px 0 0 1.61849%;
}

.productos ._2-16 {
  z-index: 93;
  margin: 20px 0 0 1.5794299999%;
}

.productos ._2-17 {
  z-index: 97;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-18 {
  z-index: 101;
  margin: 20px 0 0 1.64974%;
}

.productos ._2-19 {
  z-index: 109;
  margin: 20px 0 0 1.5794299999%;
}

.productos ._2-2 {
  z-index: 17;
  margin: 40px 0 0 1.69792%;
}

.productos ._2-20 {
  z-index: 113;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-21 {
  z-index: 117;
  margin: 20px 0 0 1.64974%;
}

.productos ._2-22 {
  z-index: 125;
  margin: 20px 0 0 1.5794299999%;
}

.productos ._2-23 {
  z-index: 129;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-24 {
  z-index: 133;
  margin: 20px 0 0 1.64974%;
}

.productos ._2-25 {
  clear: both;
  z-index: 137;
  margin: 20px 0 0 30.46224%;
}

.productos ._2-26 {
  z-index: 141;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-3 {
  z-index: 21;
  margin: 40px 0 0 1.64974%;
}

.productos ._2-4 {
  z-index: 29;
  margin: 20px 0 0 1.58073%;
}

.productos ._2-5 {
  z-index: 33;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-6 {
  z-index: 37;
  margin: 20px 0 0 1.64974%;
}

.productos ._2-7 {
  z-index: 45;
  margin: 20px 0 0 1.58073%;
}

.productos ._2-8 {
  z-index: 49;
  margin: 20px 0 0 1.63542%;
}

.productos ._2-9 {
  z-index: 53;
  margin: 20px 0 0 1.64974%;
}

@media(max-width: 850px) {
  .contacto .contacto {
    float: left;
    clear: both;
    margin-right: 0;
    margin-left: 41.17647%;
  }

  .banner_catalogo .logotipohpsupply,
  .contacto .mail,
  .productos .image {
    height: auto;
  }

  .productos ._1 {
    position: relative;
    width: 25.294117647%;
  }

  .productos ._2 {
    position: relative;
  }

  .banner_catalogo .text-1 {
    font-size: 2.222em;
  }

  .banner_catalogo .text-2 {
    font-size: 1.389em;
  }

  .contacto .text-71 {
    width: 52.7058823529%;
  }

  .contacto .text-73 {
    margin-left: 23.5827199999%;
  }

  .productos .text-7 {
    margin-top: 4px;
  }

  .productos ._1-1 {
    z-index: 9;
  }

  .productos ._1-2 {
    clear: none;
    z-index: 25;
    margin-top: 30px;
    margin-left: 2.23346%;
  }

  .productos ._1-3 {
    clear: none;
    z-index: 41;
    margin-top: 30px;
    margin-left: 2.11765%;
  }

  .productos ._1-4 {
    z-index: 73;
    margin-top: 30px;
    margin-left: 2.34743%;
  }

  .productos ._1-5 {
    clear: none;
    z-index: 57;
    margin-top: 30px;
    margin-left: 2.02206%;
  }

  .productos ._1-6 {
    clear: none;
    z-index: 89;
    margin-top: 30px;
    margin-left: 2.01471%;
  }

  .productos ._1-7 {
    z-index: 105;
    margin-top: 30px;
  }

  .productos ._1-8 {
    clear: none;
    z-index: 121;
    margin-top: 30px;
    margin-left: 2.23346%;
  }

  .productos ._2-1 {
    z-index: 13;
    width: 25.1764705882%;
    margin-left: 2.11765%;
  }

  .productos ._2-10 {
    z-index: 69;
    width: 25.1764705882%;
    margin-top: 30px;
  }

  .productos ._2-11 {
    z-index: 77;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2%;
  }

  .productos ._2-12 {
    clear: both;
    z-index: 61;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-13 {
    z-index: 65;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.21324%;
  }

  .productos ._2-14 {
    clear: both;
    z-index: 81;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-15 {
    z-index: 85;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.02206%;
  }

  .productos ._2-16 {
    clear: both;
    z-index: 93;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-17 {
    z-index: 97;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.23346%;
  }

  .productos ._2-18 {
    z-index: 101;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.23346%;
  }

  .productos ._2-19 {
    z-index: 109;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.11765%;
  }

  .productos ._2-2 {
    z-index: 17;
    width: 25.1764705882%;
    margin-left: 2.23346%;
  }

  .productos ._2-20 {
    z-index: 113;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.11765%;
  }

  .productos ._2-21 {
    clear: both;
    z-index: 117;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-22 {
    z-index: 125;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.11765%;
  }

  .productos ._2-23 {
    clear: both;
    z-index: 129;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-24 {
    z-index: 133;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.23346%;
  }

  .productos ._2-25 {
    clear: none;
    z-index: 137;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.11765%;
  }

  .productos ._2-26 {
    clear: both;
    z-index: 141;
    width: 25.4117647058%;
    margin-top: 30px;
    margin-left: 37.40993%;
  }

  .productos ._2-3 {
    clear: both;
    z-index: 21;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-4 {
    z-index: 29;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.11765%;
  }

  .productos ._2-5 {
    clear: both;
    z-index: 33;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-6 {
    z-index: 37;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.23346%;
  }

  .productos ._2-7 {
    clear: both;
    z-index: 45;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 10%;
  }

  .productos ._2-8 {
    z-index: 49;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.34743%;
  }

  .productos ._2-9 {
    z-index: 53;
    width: 25.1764705882%;
    margin-top: 30px;
    margin-left: 2.11765%;
  }
}

@media(max-width: 550px) {
  body {
    font-size: 1.125em;
  }

  .banner_catalogo .logotipohpsupply {
    width: 45.8181818181%;
    height: auto;
  }

  .contacto .contacto {
    margin-top: 15px;
    width: 40%;
      margin-left: 30%;
  }

  .contacto .mail,
  .productos .image {
    height: auto;
  }

    
  .titulo_catalogo {
    font-size: 1.667em;
  }

  .productos ._1,
  .productos ._2 {
    position: relative;
  }

  .banner_catalogo .text-1 {
    font-size: 1.944em;
  }

  .banner_catalogo .text-2 {
    padding-top: 15px;
    font-size: 1.222em;
  }

  .contacto .text-71 {
    float: left;
    margin-right: 0;
    margin-left: 23.64773%;
  }

  .contacto .text-73 {
    width: 80.1818181818%;
    margin-left: 10%;
  }

  .productos .text-7 {
    margin-top: 3px;
  }

  .productos ._1-1 {
    z-index: 9;
    width: 38.3636363636%;
  }

  .productos ._1-2 {
    clear: both;
    z-index: 25;
    width: 38.1818181818%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._1-3 {
    clear: both;
    z-index: 41;
    width: 38.3636363636%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._1-4 {
    z-index: 73;
    width: 38.3636363636%;
    margin-top: 20px;
    margin-left: 3.45455%;
  }

  .productos ._1-5 {
    clear: both;
    z-index: 57;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._1-6 {
    clear: both;
    z-index: 89;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._1-7 {
    z-index: 105;
    width: 38.36%;
    margin-top: 20px;
  }

  .productos ._1-8 {
    clear: both;
    z-index: 121;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-1 {
    z-index: 13;
    width: 38.3636363636%;
    margin-left: 3.27273%;
  }

  .productos ._2-10 {
    z-index: 69;
    width: 38.1818181818%;
    margin-top: 20px;
  }

  .productos ._2-11 {
    clear: both;
    z-index: 77;
    width: 38.3636363636%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-12 {
    clear: none;
    z-index: 61;
    width: 38.3636363636%;
    margin-top: 20px;
    margin-left: 3.45455%;
  }

  .productos ._2-13 {
    z-index: 65;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.45455%;
  }

  .productos ._2-14 {
    z-index: 81;
    width: 38.36%;
    margin-top: 20px;
  }

  .productos ._2-15 {
    z-index: 85;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-16 {
    clear: none;
    z-index: 93;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-17 {
    clear: both;
    z-index: 97;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-18 {
    z-index: 101;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.45455%;
  }

  .productos ._2-19 {
    z-index: 109;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-2 {
    clear: both;
    z-index: 17;
    width: 38%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-20 {
    clear: both;
    z-index: 113;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-21 {
    clear: none;
    z-index: 117;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-22 {
    z-index: 125;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-23 {
    z-index: 129;
    width: 38.36%;
    margin-top: 20px;
  }

  .productos ._2-24 {
    z-index: 133;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-25 {
    clear: both;
    z-index: 137;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-26 {
    clear: none;
    z-index: 141;
    width: 38.36%;
    margin-top: 20px;
    margin-left: 3.4375%;
  }

  .productos ._2-3 {
    clear: none;
    z-index: 21;
    width: 38%;
    margin-top: 20px;
    margin-left: 3.625%;
  }

  .productos ._2-4 {
    z-index: 29;
    width: 38%;
    margin-top: 20px;
    margin-left: 3.27273%;
  }

  .productos ._2-5 {
    z-index: 33;
    width: 38.1818181818%;
    margin-top: 20px;
  }

  .productos ._2-6 {
    z-index: 37;
    width: 38.1818181818%;
    margin-top: 20px;
    margin-left: 3.45455%;
  }

  .productos ._2-7 {
    clear: none;
    z-index: 45;
    width: 38.1818181818%;
    margin-top: 20px;
    margin-left: 3.27273%;
  }

  .productos ._2-8 {
    clear: both;
    z-index: 49;
    width: 38%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .productos ._2-9 {
    z-index: 53;
    width: 38%;
    margin-top: 20px;
    margin-left: 3.625%;
  }
}