/* Productos */
#productos {
  width: 100%;
  height: auto;
  padding: 0 0 0 0;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}
/*  */

/* contenedores, rejillas y cajas */
.contenedores_rejillas_cajas {
  width: 100%;
  height: auto;
  padding: 50px 10% 210px 10%;
  position: relative;
  transition: all .3s ease;
}
.contenedor_rejilla_cajas_main {
  position: relative;
  z-index: 2;
}
.contenedorHeader {
  width: 100%;
  height: auto;
  padding: 66px 5% 5px 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.contenedorHeader::after {
  content: "";
  width: 40%;
  height: 3px;
  background: #000000;
  background-color: #000000;
  position: absolute;
  bottom: 20px;
  right: -15%;
  transition: all .3s ease;
}
.contenedorHeader h1 {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  color: #000000;
  font-size: 70px;
  transition: all .3s ease;
}
.contenedorSubHeader {
  width: 100%;
  height: auto;
  padding: 0 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.contenedorSubHeader p {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  font-size: 20px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.contenedorPicture {
  width: 60%;
  height: auto;
  padding: 33px 33px 0 5px;
  float: left;
  text-align: left;
  transition: all .3s ease;
}
.contenedorInfo {
  width: 40%;
  height: auto;
  padding: 225px 0 0 33px;
  float: left;
  text-align: left;
  transition: all .3s ease;
}
.contenedorInfo ul li {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  line-height: 30px;
  font-size: 18px;
}
.contenedorFooter {
  width: 100%;
  height: auto;
  padding: 15px 0 0 0;
  text-align: left;
  transition: all .3s ease;
}
.btnCotenedorFooter {
  font-family: 'Roboto Condensed';
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  color: #b6ce42!important;
  background: #eeeeee!important;
  background-color: #eeeeee!important;
  transition: all .3s ease;
  box-shadow: none!important;
}
.img-cruz-contenedor {
  max-width: 70%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all .3s ease;
}
/*  */

/* cajas grapadas,  impresas: flexografía */
.cajas_grapadas_impresas_flexografia {
  width: 100%;
  height: auto;
  background: #eeeeee;
  background-color: #eeeeee;
  padding: 0 10% 75px 10%;
  position: relative;
  transition: all .3s ease;
}
.cajas_grapadas_impresas_flexografia::after {
  content: "";
  width: 100%;
  height: 45%;
  background: #ffffff;
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: all .3s ease;
}
.cajas_grapadas_main {
  position: relative;
  z-index: 2;
}
.cajas_grapadas_Header {
  width: 100%;
  height: auto;
  padding: 130px 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.cajas_grapadas_Header h1 {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  color: #000000;
  font-size: 60px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.cajas_grapadas_SubHeader {
  width: 100%;
  height: auto;
  padding: 0 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.cajas_grapadas_SubHeader p {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  font-size: 60px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.cajas_grapadas_Picture {
  width: 60%;
  height: auto;
  padding: 0 33px 0 5px;
  float: left;
  text-align: left;
  transition: all .3s ease;
}
.cajas_grapadas_Info {
  width: 40%;
  height: auto;
  padding: 289px 0 0 33px;
  float: left;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.cajas_grapadas_Info::before {
  content: "";
  width: 3px;
  height: 50%;
  background: #000000;
  background-color: #000000;
  position: absolute;
  left: 0;
  bottom: 133px;
  margin: auto;
}
.cajas_grapadas_Title {
  width: 100%;
  height: auto;
  padding: 0 0 61px 0;
  text-align: left;
  transition: all .3s ease;
}
.cajas_grapadas_Title h1 {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  font-size: 35px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.cajas_grapadas_Title h1 span {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
}
.cajas_grapadas_Footer {
  width: 100%;
  height: auto;
  padding: 60px 0 0 0;
  text-align: left;
  transition: all .3s ease;
}
.btnCajasGrapadasFooter {
  font-family: 'Roboto Condensed';
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  color: #b6ce42!important;
  background: #eeeeee!important;
  background-color: #eeeeee!important;
  transition: all .3s ease;
  box-shadow: none!important;
}
/*  */

/* Rejillas , Separadoes y especialidades */
.rejillas_separadores_specialidades {
  width: 100%;
  height: auto;
  background: #ffffff;
  background-color: #ffffff;
  padding: 0 10% 120px 10%;
  position: relative;
  z-index: 2;
  transition: all .3s ease;
}
.rejillas_separadores_specialidades::after {
  content: "";
  width: 58.5%;
  height: 50%;
  background: #eeeeee;
  background-color: #eeeeee;
  position:absolute;
  left: 0;
  bottom: 0;
  transition: all .3s ease;
}
.rejillas_separadores_main {
  position: relative;
  z-index: 2;
}
.rejillas_separadores_Header {
  width: 100%;
  height: auto;
  padding: 130px 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.rejillas_separadores_Header h1 {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 60px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.rejillas_separadores_Header h1 span {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
}

.rejillas_separadores_SubHeader {
  width: 100%;
  height: auto;
  padding: 0 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.rejillas_separadores_SubHeader p {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  font-size: 20px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.rejillas_separadores_Picture {
  width: 60%;
  height: auto;
  padding: 0 33px 0 5px;
  float: left;
  text-align: left;
  transition: all .3s ease;
}
.rejillas_separadores_Info {
  width: 40%;
  height: auto;
  padding: 175px 0 0 33px;
  float: left;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.rejillas_separadores_Title {
  width: 100%;
  height: auto;
  padding: 0 0 61px 0;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.rejillas_separadores_Title::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #000000;
  background-color: #000000;
  position: absolute;
  bottom: 55px;
  left: -60%;
}
.rejillas_separadores_Title h1 {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  color: #000000;
  font-size: 50px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.rejillas_separadores_Footer {
  width: 100%;
  height: auto;
  padding: 50px 0 0 0;
  text-align: left;
  transition: all .3s ease;
}
.btnRejillasSeparadorasFooter {
  font-family: 'Roboto Condensed';
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  color: #b6ce42!important;
  background: #eeeeee!important;
  background-color: #eeeeee!important;
  transition: all .3s ease;
  box-shadow: none!important;
}

.img-cruz-rejillas {
  max-width: 70%;
  height: auto;
  position: absolute;
  bottom: -145px;
  right: 0;
  transition: all .3s ease;
}
/*  */

/* materiales antiestáticos */
.materiales_antiestaticos {
  width: 100%;
  height: auto;
  background: #ffffff;
  background-color: #ffffff;
  padding: 33px 10% 120px 10%;
  position: relative;
  margin: -60px 0 0 0;
  transition: all .3s ease;
}
.materiales_antiestaticos::before {
  content: "";
  width: 58.5%;
  height: 100%;
  background: #eeeeee;
  background-color: #eeeeee;
  position:absolute;
  left: 0;
  bottom: 0;
  transition: all .3s ease;
}
.materiales_antiestaticos::after {
  content: "";
  width: 41.5%;
  height: 250px;
  background: #b6cf42;
  background-color: #b6cf42;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  transition: all .3s ease;
}
.materiales_antiestaticos_main {
  position: relative;
  z-index: 1;
}
.materiales_antiestaticos_Header {
  width: 100%;
  height: auto;
  padding: 250px 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.materiales_antiestaticos_Header::after {
  content: "";
  width: 85%;
  height: 4px;
  background: #000000;
  background-color: #000000;
  position: absolute;
  bottom: -15px;
  right: -15%;
}
.materiales_antiestaticos_Header h1 {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  color: #000000;
  font-size: 45px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.materiales_antiestaticos_Header h1 span {
  text-transform: uppercase;
}
.materiales_antiestaticos_Footer {
  width: 100%;
  height: auto;
  padding: 50px 5% 0 0;
  text-align: right;
  transition: all .3s ease;
}
.btnMaterialesAntiestaticosFooter {
  font-family: 'Roboto Condensed';
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  color: #b6ce42!important;
  background: #ffffff!important;
  background-color: #ffffff!important;
  transition: all .3s ease;
  box-shadow: none!important;
}
.materiales_antiestaticos_Picture {
  width: 60%;
  height: auto;
  padding: 0 33px 0 5px;
  float: left;
  text-align: left;
  transition: all .3s ease;
}
.materiales_antiestaticos_Info {
  width: 40%;
  height: auto;
  padding: 250px 0 0 0;
  float: left;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.materiales_antiestaticos_Title {
  width: 100%;
  height: auto;
  padding: 25px 0 25px 33px;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.materiales_antiestaticos_Title h1 {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 50px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.materiales_antiestaticos_Title h1 span {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
}
.materiales_antiestaticos_Title p {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  font-size: 16px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
/*  */

/* productos sobre diseño */
.productos_sobre_diseno {
  width: 100%;
  height: auto;
  background: #ffffff;
  background-color: #ffffff;
  padding: 0 10% 120px 10%;
  position: relative;
  transition: all .3s ease;
}
.productos_sobre_diseno::before {
  content: "";
  width: 58.5%;
  height: 50%;
  background: #eeeeee;
  background-color: #eeeeee;
  position:absolute;
  left: 0;
  top: 0;
  transition: all .3s ease;
}
.productos_sobre_diseno::after {
  content: "";
  width: 100%;
  height: 30%;
  background: #b6cf42;
  background-color: #b6cf42;
  position:absolute;
  left: 0;
  bottom: 0;
  transition: all .3s ease;
}
.productos_sobre_diseno_main {
  position: relative;
  z-index: 3;
}
.productos_sobre_diseno_Header {
  width: 100%;
  height: auto;
  padding: 250px 5% 0 0;
  position: relative;
  text-align: right;
  transition: all .3s ease;
}
.productos_sobre_diseno_Header h1 {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 45px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.productos_sobre_diseno_Header h1 span {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
}
.productos_sobre_diseno_Footer {
  width: 100%;
  height: auto;
  padding: 50px 5% 0 0;
  text-align: right;
  transition: all .3s ease;
}
.btnProductosDisenioFooter {
  font-family: 'Roboto Condensed';
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  color: #b6ce42!important;
  background: #eeeeee!important;
  background-color: #eeeeee!important;
  transition: all .3s ease;
  box-shadow: none!important;
}

.productos_sobre_diseno_Picture {
  width: 60%;
  height: auto;
  padding: 0 33px 0 5px;
  float: left;
  text-align: left;
  transition: all .3s ease;
}

.productos_sobre_diseno_Info {
  width: 40%;
  height: auto;
  padding: 250px 0 145px 0;
  float: left;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.productos_sobre_diseno_Info::before {
  content: "";
  width: 3px;
  height: 80%;
  background: #000000;
  background-color: #000000;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
}
.productos_sobre_diseno_Title {
  width: 100%;
  height: auto;
  padding: 0 0 0 33px;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.productos_sobre_diseno_Title p {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  color: #000000;
  font-size: 16px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.img-cruz-producto-disenio {
  max-width: 70%;
  height: auto;
  position: absolute;
  bottom: -43%;
  left: 30%;
  z-index: 2;
  transition: all .3s ease;
}
/*  */

/* expertos en cartón */
.expertos_en_carton {
  width: 100%;
  height: auto;
  background: #b6cf42;
  background-color: #b6cf42;
  padding: 0 10% 120px 10%;
  position: relative;
  z-index: 2;
  transition: all .3s ease;
}
.expertos_en_carton::after {
  content: "";
  width: 100%;
  height: 30%;
  background: #ffffff;
  background-color: #ffffff;
  position:absolute;
  left: 0;
  bottom: 0;
  transition: all .3s ease;
}
.expertos_en_carton_main {
  position: relative;
  z-index: 1;
}
.expertos_en_carton_Picture {
  width: 75%;
  height: auto;
  padding: 0 55px 0 5px;
  float: left;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.expertos_en_carton_Inner {
  width: 100%;
  height: 135px;
  padding: 0 10% 0 0;
  text-align: right;
  position: absolute;
  top: 60px;
  right: 0;
  transition: all .3s ease;
}
.expertos_en_carton_Inner::after {
  content: "";
  width: 85%;
  height: 2px;
  background: #ffffff;
  background-color: #ffffff;
  position: absolute;
  right: -8%;
  bottom: -24px;
  transition: all .3s ease;
}
.expertos_en_carton_Inner h1 {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  font-size: 45px;
  color: #ffffff;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.expertos_en_carton_Inner h2 {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  font-size: 90px;
  color: #ffffff;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.expertos_en_carton_Info {
  width: 25%;
  height: auto;
  padding: 50px 0 145px 0;
  float: left;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.expertos_en_carton_Title {
  width: 100%;
  height: auto;
  padding: 0 0 25px 33px;
  text-align: left;
  position: relative;
  transition: all .3s ease;
}
.expertos_en_carton_Title h1 {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  color: #ffffff;
  font-size: 50px;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
.expertos_en_carton_Title h1 span {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
}
/*  */

/* Galeria */
#galeria_productos {
  width: 100%;
  height: auto;
  padding: 50px 10% 75px 10%;
  background: #ffffff;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}
.itemHeader {
  width: 100%;
  height: auto;
  text-align: center;
  overflow: hidden;
  position: relative;
  transition: all .3s ease;
}
.itemTitle {
  width: 100%;
  height: auto;
  padding: 5px 0 5px 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
.itemTitle p {
  font-family: 'Roboto Condensed';
  font-weight: bold;
  font-style: normal;
  font-size: 22px;
  color: #e1e0e0;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all .3s ease;
}
.leftSlide {
  position: absolute;
  height: 150px;
  top: 0;
  left: 50px;
  bottom: 0;
  margin: auto;
  transition: all .3s ease;
}
.leftSlide img {
  max-height: 150px;
  width: auto;
  transition: all .3s ease;
}
.rightSlide {
  position: absolute;
  height: 150px;
  top: 0;
  right: 50px;
  bottom: 0;
  margin: auto;
  transition: all .3s ease;
}
.rightSlide img {
  max-height: 150px;
  width: auto;
  transition: all .3s ease;
}

.leftSlide:hover {
  height: 170px;
}

.rightSlide:hover {
  height: 170px;
}

.leftSlide:hover img {
  max-height: 170px;
}

.rightSlide:hover img {
  max-height: 170px;
}
/*  */