@charset "UTF-8";

@font-face {
  font-family: "icon";
  src: url(../fonts/icon.eot);
  src: url("../fonts/icon.eot?#iefix") format("embedded-opentype"), url(../fonts/icon.woff) format("woff"), url(../fonts/icon.ttf) format("truetype"), url("../fonts/icon.svg#icon") format("svg");
  font-weight: 400;
  font-style: normal
}

[data-icon]:before {
  font-family: "icon" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "icon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-home:before {
  content: "\61"
}

.icon-phone:before {
  content: "\62"
}

.icon-torsos:before {
  content: "\65"
}

.icon-briefcase:before {
  content: "\67"
}

.icon-envelope:before {
  content: "\68"
}

.icon-circle:before {
  content: "\69"
}

.icon-angle-down:before {
  content: "\63"
}

.icon-angle-up:before {
  content: "\64"
}

.icon-bars:before {
  content: "\66"
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

/* * {
  outline: 1px solid red;
  } */

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1rem;
  background-color: rgb(255, 255, 255)
}

img {
  max-width: 100%;
  height: auto
}

a {
  text-decoration: none
}

p {
  margin: 1.5rem 0 1.5rem 0;
  line-height: 1.6;
  font-size: 1.18rem;
}

h1,
h2,
h3,
h4 {
  font-family: 'Open Sans', sans-serif
}

.redaccion {
  text-align: center
}

[class^="img-principal"] {
  margin: 7rem auto 4rem auto;
  max-width: 1800px;
  height: auto;
  line-height: 0
}

[class^="titulo-principal"] {
  text-align: center;
  font-size: 2.5rem;
  margin: 1rem 0;
  padding: 0 1rem;
  text-transform: uppercase;
}

[class^="alineado-2"] {
  padding: 0 2rem;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto 3rem auto
}

.alineado-2-puerta-inicio {
  margin: 0 auto
}

.alineado-parrafo-final {
  margin-bottom: 3rem
}

.alineado-3 {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto
}

.espaciorem {
  margin-top: 2.88rem;
}

.wrapenherreria {
  width: 100%;
  background-color: #01295c
}

.enherreria {
  width: 100%;
  max-width: 1300px;
  padding: 3rem 2rem;
  color: #fff;
  margin: 3rem auto
}

[class^="contenedor-fondo-inicio"] {
  background-image: url(../images/puertas-de-herreria-inicio.jpg);
  width: 100%;
  max-width: 1400px;
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 2rem auto
}



[class^="contenedor-fondo-inicio-3"] {
  background-image: url(../images/estructuras-metalicas-inicio.jpg);
  margin-bottom: 3rem
}

.contenedor-fondo-inicio-4 {
  background-image: url(../images/barandal-inicio.jpg)
}

.img-contenedor {
  background-image: url(../images/herrero2.png);
  background-color: #000;
  width: 100%;
  height: 100vh;
  background-position: center -50px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 4rem 2rem 0 2rem;
}

[class^="contenedor-texto"] {
  width: 100%;
  height: auto;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  text-align: center
}

.contenedor-texto-2 {
  padding-top: 1rem;
  text-shadow: 2px 2px 2px #000
}

.titulo-herreria {
  font-family: 'Playfair Display', serif;
  text-shadow: 5px 5px 5px #000;
  font-size: 1.5rem;
  margin: 0
}

.subtitulo-1 {
  font-size: 1rem;
  font-family: 'Playfair Display', serif;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  /* padding: 0 100px; */
  width: 100%;
  background-color: #000
}

.contenido-header {
  max-width: 1500px;
  margin: 0 auto
}

header nav {
  float: right
}

header .tel {
  float: left;
  line-height: 50px;
  color: #fff;
  padding-left: 1rem;
  margin: 0
}

header .whats {
  float: left;
  padding-left: 2.3rem
}

.img-whatsapp {
  width: 35px;
  height: auto;
  position: relative;
  top: 7px
}

header .tel:hover {
  color: cyan
}

.icon-phone-cabecera {
  position: relative;
  top: 3px
}

header nav ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.tam-li {
  width: 240px;
  text-align: center
}

.indicador {
  background-color: rgb(177, 9, 37)
}

.indicador-2 {
  background-color: rgb(0, 87, 68)
}

header nav ul li {
  list-style: none;
  position: relative
}

header nav ul li.sub-menu:before {
  content: "\63";
  font-family: icon;
  position: absolute;
  line-height: 50px;
  color: #fff;
  right: 10px
}

header nav ul li.active.sub-menu:before {
  content: '\64'
}

header nav ul li ul {
  position: absolute;
  left: 0;
  background-color: rgba(0, 0, 0, .9);
  display: none
}

header nav ul li.active ul {
  display: block
}

header nav ul li a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  border-bottom: .7px solid rgba(255, 255, 255, .2);
  font-size: 20px;
}

.enlace {
  border-bottom: none
}

header nav ul li a:hover {
  background-color: red
}

header nav ul .sub-menu.active {
  background-color: #4c4c4c
}

.menu-toggle {
  line-height: 50px;
  float: right;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  display: none
}

.telefono-c {
  font-style: normal;
}

.wrap-telefono-c {
  margin-top: 50px;
  background-color: #2B2B2B;
}

.telefono-c {
  width: 100%;
  max-width: 1700px;
  height: 320px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  color: white;
  align-items: center;
  justify-content: space-around;
}

.icon-location,
.icon-phone-svg,
.icon-whatsapp {
  vertical-align: middle;
}

.numero-phone {
  margin-left: 5px;
}

.numero-whats {
  margin-left: 5px;
}


.enlace-tel-c,
.whats-f,
.whats,
.whats-c,
.ubicacion {
  text-decoration: none;
  color: white;
  padding: 12px 16px;

  /*Estas lineas de código son para cumplir con lo que Google dice acerca de la separación mínima. Se dejan comentadas para ver si vale la pena implementarlas ya que crean desajustes en la alineación de los elementos.
  /* min-height: 48px; */
  /* margin-bottom: 16px; */
}

.enlace-tel-c:hover {
  color: rgb(0, 164, 255);
}

.whats:hover {
  color: rgb(0, 164, 255);
}

[class^="article-"] {
  padding: 1.5rem 0 2rem 0;
  margin: 0;
}

.bottom {
  margin-bottom: 4rem
}

.article-1 {
  padding-bottom: 49px
}

.article-2 {
  background-color: #131514;
  color: #fff
}

.article-3 {
  color: #000;
  padding-bottom: 56px
}

.article-4 {
  background-color: #131514;
  color: rgb(216, 217, 219)
}

.separador {
  width: 100%;
  height: 30px;
  -webkit-box-shadow: inset 0 3px 19px -5px rgba(0, 0, 0, .75);
  box-shadow: inset 0 3px 19px -5px rgba(0, 0, 0, .75)
}

.alinear {
  padding: 1rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto
}

[class^="titulo-"] {
  text-align: center;
  font-size: 2.3rem;
  margin: 1rem 0
}

.contenedor-imagenes {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto
}

.contenedor-imagenes-2 {
  width: 100%;
  height: 700px;
  background-image: url(../images/estructuras-de-acero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center
}

[class^="img-"] {
  display: block;
  margin: 0 auto
}

.img-puerta {
  width: 80%;
  height: auto
}

.img-porton {
  width: 100%;
  height: auto
}

.img-escalera {
  width: 100%;
  height: auto
}

.img-caracol {
  width: 65%;
  height: auto
}

.img-cortina {
  width: 100%;
  height: auto
}

.img-barandal {
  width: 100%;
  height: auto
}

[class^="boton-leer"] {
  text-align: center;
  display: block;
  margin: 0;
  padding: 1rem;
  color: #fff;
  background: #131514;
  -webkit-box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .2);
  font-size: 1rem
}

.figcaption-index {
  text-align: center;
  padding: 1rem .5rem;
  font-size: 1rem;
  background-color: #000;
  color: #fff
}

[class^="futuro-boton-leer"] {
  text-align: center;
  display: block;
  margin: .5rem 0;
  padding: 1rem;
  color: #fff
}

.futuro-boton-leer-2 {
  color: #fff
}

[class^="boton-leer"]:hover {
  color: #fff;
  background-color: rgb(177, 9, 37);
  -webkit-box-shadow: inset -1px -1px 6px 0 rgba(0, 0, 0, .75);
  box-shadow: inset -1px -1px 6px 0 rgba(0, 0, 0, .75)
}

.article-5 {
  padding: 0;
  margin: 0 0 8rem 0
}

.titulo-pergolas {
  font-size: 1.8rem;
  padding-bottom: 2rem;
  margin: 0
}

.titulo-techos {
  font-size: 2.3rem;
  margin: 3rem 0
}

[class^="contenedor-techo"] {
  max-width: 1500px
}

[class^="contenedor-text-techo-"] {
  background-color: #131514;
  color: #fff;
  padding: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.img-techo-policarbonato,
.img-pergola {
  width: 100%;
  height: auto
}

.bottom-techos {
  margin-bottom: 1rem
}

.margin-p {
  margin-top: 0;
  margin-bottom: 0
}

.trabajos {
  width: 100%;
  height: auto;
  background-image: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/trabajos.jpg);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, .6))), url(../images/trabajos.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/trabajos.jpg);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5rem 2rem
}

.titulo-trabajos {
  margin: 0;
  margin-bottom: 4rem;
  color: #fff
}

[class^="texto-trabajos"] {
  max-width: 800px;
  margin: 2rem auto;
  color: #fff
}

.texto-trabajos-2 {
  margin-bottom: 0
}

[class^="caja-pagos"] {
  margin: 6rem auto;
  width: 100%;
  max-width: 800px
}

.parrafo-pagos {
  text-align: center;
  padding: 0 2rem;
  font-size: 1.2rem
}

.tarjetas-credito {
  display: block;
  margin: 2.5rem auto 0 auto;
  width: 70%;
  max-width: 250px
}

.img-principal-puertas {
  width: 100%;
  height: auto;
  max-width: 2300px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

[class^="contenedor-imagenes-puertas-"] {
  margin: 3rem auto
}

[class^="subtitulo-generico"] {
  margin-top: 4rem;
  margin-bottom: 4rem;
  text-align: center;
  font-size: 2rem
}

.subtitulo-generico-2 {
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 0 2rem
}

.wrap-trabajos-especiales {
  width: 100%;
  height: auto;
  background-color: rgb(13, 47, 129);
  background: -o-linear-gradient(top, rgba(13, 47, 129, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(13, 47, 129, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 47, 129, 1)), color-stop(55%, rgba(0, 0, 0, 1)), to(rgba(13, 47, 129, 1)));
  background: linear-gradient(180deg, rgba(13, 47, 129, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(13, 47, 129, 1) 100%);
  color: #fff;
  padding: 3rem 0 7rem 0;
  margin-top: 5rem
}

.p-trabajos-especiales {
  text-align: center;
  font-size: 1.5rem;
  padding: 0 3rem 5rem 3rem;
  margin: 0
}

.img-puerta-especial-1,
.img-puerta-especial-2 {
  width: 100%;
  height: auto
}

.img-puerta-especial-1 {
  padding-bottom: 3rem
}

.envie-boceto {
  font-size: 1.7rem;
  text-align: center;
  font-weight: 700;
  margin: 4rem 0
}

.envie-boceto:before {
  content: open-quote;
  font-size: 1.5rem
}

.envie-boceto:after {
  content: close-quote;
  font-size: 1.5rem
}

[class^="figure-imagen-puerta-"] {
  margin-bottom: 3rem
}

[class^="figcaption-"] {
  text-align: center;
  padding: .8rem 1.5rem;
  font-size: 1rem;
  background-color: rgb(26, 26, 26);
  color: rgb(255, 255, 255)
}

/* Portones */


.img-principal-porton {
  margin-top: 3rem
}

.frase-portones {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1.5rem 0 2.88rem 0;
  padding: 0 1.5rem;
  text-align: center;
}

.text-inicial-porton {
  margin-top: 3rem;
}

.whats-c {
  color: black;
  text-align: center;
  display: block;
  font-size: 1.2rem;
  padding: 12px 0 22px 0;
  margin-top: 3rem;
}

.icon-whatsapp-c {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  vertical-align: middle;
}

.numero-whats-2 {
  font-weight: bold;
  color: #003366;
}

.cta {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  margin-top: 3rem;
  color: #003366;
}

.numero-whats-2:hover {
  color: #25D366;
}

.lista-1-title,
.lista-2-title {
  font-size: 20px;
  margin-bottom: 1.1rem;
}

.lista-2-title {
  margin-top: 1.1rem;
}

.lista-portones,
.lista-servicios {
  list-style: none;
  font-size: 19px;
}

.lista-portones li,
.lista-servicios li {
  margin-bottom: 0.4rem;
}

.lista-portones li:last-child,
.lista-servicios li:last-child {
  margin-bottom: 0;
}


[class^="contenedor-imagenes-portones-"] {
  margin: 3rem auto;
  max-width: 1300px
}

[class^="figure-imagen-porton-"] {
  margin-bottom: 3rem
}

[class^="texto-puertas-abatibles"] {
  font-size: 1.2rem;
  padding: 5rem 4rem;
  margin: 3rem 0;
  text-align: center
}

.texto-puertas-abatibles {
  background-color: #01295c;
  color: #fff
}

.texto-puertas-abatibles-2 {
  background-color: #a71930;
  color: #fff
}

.img-principal-estructuras {
  margin-top: 1rem;
  background: #000
}

.subtitulo-generico-estructuras {
  margin-top: 5rem
}

[class^="figure-imagen"] {
  margin-bottom: 3rem
}

[class^="contenedor-estructuras-fondo"] {
  background-image: url(../images/estructuras-metal.jpg);
  width: 100%;
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 3rem
}

.contenedor-estructuras-fondo-2 {
  background-image: url(../images/estructuras-naves-industriales.jpg)
}

.contenedor-estructuras-fondo-3 {
  background-image: url(../images/estructura-edificio.jpg)
}

[class^="contenedor-imagenes-materiales"] {
  margin: 3rem auto 3rem auto
}

[class^="contenedor-imagenes-dobles-"] {
  margin: 3rem auto 3rem auto
}

.caja-lista-materiales {
  font-size: 1.1rem;
  padding: 5rem 4rem;
  margin: 3rem 0;
  list-style-position: inside;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7))), url(../images/perfiles-tipo-i.jpg);
  background-image: -o-linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../images/perfiles-tipo-i.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../images/perfiles-tipo-i.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff
}

.lista-materiales li {
  padding-bottom: 15px;
  list-style: none
}

.caja-imagenes-dobles {
  font-size: 1.1rem;
  padding: 5rem 4rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7))), url(../images/fondo-planos.jpg);
  background-image: -o-linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../images/fondo-planos.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../images/fondo-planos.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  color: #fff
}

[class^="cuadro-"] {
  width: 100%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 3rem;
  -webkit-box-shadow: 1px 1px 40px -24px rgba(0, 0, 0, .75);
  box-shadow: 1px 1px 40px -24px rgba(0, 0, 0, .75)
}

.texto-cuadro {
  padding: 2rem;
  margin-bottom: 1rem
}

.subtitulo-cuadro {
  text-align: center;
  font-size: 1.5rem
}

[class^="parrafo-cuadro"] {
  text-align: center
}

.fixed {
  position: fixed;
  position: relative;
  z-index: 10
}

.lista-ventajas {
  font-size: 19px;
  line-height: 1.4;
  padding: 10px 0;
  list-style-position: inside;
}

.lista-ventajas li {
  margin-bottom: 1rem;
}

.contenedor-imagen-barandal-1 {
  background-image: url(../images/barandal-1.jpg);
  background-color: #000;
  width: 100%;
  height: 600px;
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 3rem
}

.caja-color-lista-imagen {
  width: 100%;
  height: auto;
  background-color: rgb(13, 47, 129);
  background: -o-linear-gradient(top, rgba(13, 47, 129, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(13, 47, 129, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 47, 129, 1)), color-stop(55%, rgba(0, 0, 0, 1)), to(rgba(13, 47, 129, 1)));
  background: linear-gradient(180deg, rgba(13, 47, 129, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(13, 47, 129, 1) 100%)
}

.caja-lista-barandales {
  padding: 4rem 1.5rem
}

.lista-barandales {
  max-width: 320px;
  height: auto;
  margin: 0 auto
}

.lista-barandales li {
  list-style: none;
  color: #fff;
  padding-bottom: 15px;
  font-size: 20px;
}

.lista-barandales li:last-child {
  padding-bottom: 0
}

.caja-imagen-barandal-inoxidable,
.caja-imagen-barandal-de-herreria {
  max-width: 1600px;
  height: auto;
  margin: 0 auto 3rem auto
}

.wrap-imagenes-barandales {
  margin: 3rem 0
}

.caja-imagen-vertical {
  max-width: 600px;
  height: auto;
  margin: 0 auto
}

.texto-imagen-vertical {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  padding: 4rem 2rem;
  background-color: rgb(13, 47, 129);
  background: -o-linear-gradient(top, rgba(13, 47, 129, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(13, 47, 129, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 47, 129, 1)), color-stop(55%, rgba(0, 0, 0, 1)), to(rgba(13, 47, 129, 1)));
  background: linear-gradient(180deg, rgba(13, 47, 129, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(13, 47, 129, 1) 100%);
  color: #fff
}

.contenedor-caja-negra-herreria {
  width: 100%;
  height: auto;
  margin: 3rem auto
}

.caja-barandal-negra {
  width: 100%;
  height: 400px;
  background-color: #000
}

.caja-barandal-herreria-casa {
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  position: relative;
  top: -200px
}

.caja-pagos-barandal {
  margin-top: -200px
}

.header-color-1 {
  background-color: rgb(12, 89, 145)
}

.titulo-principal-contacto,
.titulo-principal-mensaje {
  margin-top: 30px;
  margin-bottom: 2rem;
  font-size: 2rem;
  padding: 0 3rem
}

.wrap-franja-contacto,
.franja-contacto-inferior {
  width: 100%;
  height: 70px;
  background-image: url(../images/fondo-metal-2.jpg);
  background-size: 400px;
  background-attachment: fixed;
  -webkit-box-shadow: inset 22px 22px 86px -29px rgba(0, 0, 0, .75);
  box-shadow: inset 22px 22px 86px -29px rgba(0, 0, 0, .75)
}

.section-contacto {
  width: 100%;
  height: auto
}

.formas-contacto {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7))), url(../images/soldador-contacto.jpg);
  background-image: -o-linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../images/soldador-contacto.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../images/soldador-contacto.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 780px;
  padding: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.titulo-contacto-h2 {
  color: #fff;
  font-family: 'Playfair Display', serif
}

.llamanos,
.envianos-email {
  color: #fff;
  font-size: 1rem;
  text-align: center
}

.margen-what {
  margin-top: 10px
}

.enlace-tel-contacto,
.correo-contactenos {
  padding-top: 10px;
  display: block
}

.llamenos,
.envie-un-email {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff
}

.icon-phone-contacto,
.icon-mail-contactenos {
  position: relative;
  top: 3px;
  padding-right: 3px
}

.caja-formulario {
  width: 100%;
  height: auto;
  padding: 2rem 3rem
}

.envienos-mensaje {
  text-align: center;
  font-size: 2rem;
  padding-bottom: 1rem
}

[class^="input-"] {
  width: 100%;
  height: auto;
  border: 0;
  border-bottom: 1px solid #ccc;
  padding: 15px;
  margin-top: 25px
}

[class^="input-"]:hover {
  border-bottom: 1px solid #295481
}

.campo-text {
  width: 100%;
  height: 15.44rem;
  resize: none;
  border: 0;
  padding: 20px;
  margin-top: 1rem
}

#enviar {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0 auto;
  background-color: rgb(12, 89, 145);
  color: #fff;
  -webkit-box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .2);
  border: 0;
  margin-top: 20px
}

#enviar:hover {
  background-color: rgb(177, 9, 37);
  -webkit-box-shadow: inset -1px -1px 6px 0 rgba(0, 0, 0, .75);
  box-shadow: inset -1px -1px 6px 0 rgba(0, 0, 0, .75)
}

.enlace-tel-contacto,
.correo-contactenos {
  color: #fff
}

.enlace-tel-contacto:hover {
  color: cyan
}

.correo-contactenos:hover {
  color: cyan
}

.titulo-ubicacion {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 2rem
}

.google-maps {
  width: 100%;
  height: auto
}

iframe {
  width: 100%;
  height: 1000px
}

.mensaje-enviado {
  background-image: -o-linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../images/correos-enviados.jpg);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .9)), to(rgba(255, 255, 255, .9))), url(../images/correos-enviados.jpg);
  background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../images/correos-enviados.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 900px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5rem 3rem
}

[class^=men-enviado-] {
  font-size: 1.7rem;
  text-align: center
}

.men-enviado-1 {
  font-size: 2.4rem;
  color: #00ad45
}

.men-enviado-2 {
  color: #2529d8
}

.men-enviado-3 {
  font-size: 1.3rem
}

.regresar-mensaje,
.regresar-inicio {
  color: #2529d8
}

.regresar-mensaje:hover {
  color: red
}

.regresar-inicio:hover {
  color: red
}

.icon-home-mensaje {
  position: relative;
  top: 3px
}

.header-color-2 {
  background-color: #064729
}

.img-error {
  width: 100%;
  line-height: 0;
  margin: 46px auto 0 auto
}

.mensaje-error {
  margin: 6rem 5% 6rem 5%
}

[class^="m-"] {
  font-size: 1.2rem;
  text-align: center
}

.m-1 {
  color: green;
  font-size: 1.5rem
}

.m-3 {
  padding-top: 1rem;
  font-size: 1.1rem
}

.error {
  text-align: center;
  font-size: 3rem;
  color: rgb(177, 9, 37)
}

[class^="caja-ir-a"] {
  margin-bottom: 2rem
}

[class^="ir-a"] {
  width: 100%;
  height: auto
}

.franja {
  width: 100%;
  height: auto;
  background-color: rgb(177, 9, 37);
  color: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem
}

.invitacion {
  text-align: center;
  display: block
}

.linea-footer {
  width: 100%;
  height: 2rem;
  background-color: #050200;
  margin-bottom: 1px
}

footer {
  width: 100%;
  height: auto;
  background-color: #050200
}

.footer-wrap-datos {
  background-color: #050200
}

.footer-imagen {
  width: 100%;
  height: auto;
  max-width: 1900px;
  margin: 0 auto;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, .6))), url(../images/img-footer.jpg);
  background-image: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/img-footer.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/img-footer.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

.footer-datos {
  width: 100%;
  height: 24rem;
  font-size: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: .5rem
}

.tit-footer-h3 {
  color: #fff;
  font-size: 2.1rem;
  margin: 0;
  text-align: center
}

.tit-footer-h3 {
  font-family: 'Playfair Display', serif;
  margin: 0
}

.tel-1-footer {
  margin-top: 0
}

.icon-phone-footer {
  position: relative;
  top: 3px
}

.whats-f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.im-whatsapp-f {
  width: 40px;
  height: auto;
  margin-right: 7px
}

.whats-contacto {
  width: 40px;
  height: auto;
  margin-right: 7px;
  display: none
}

.icon-mail-footer {
  position: relative;
  top: 2px;
  padding-right: 2px
}

.enlace-tel-footer,
.correo-contacto {
  color: #fff
}

.enlace-tel-footer:hover {
  color: cyan
}

.correo-contacto:hover {
  color: cyan
}

.menu-footer {
  border-top: 1px solid #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, .6))), url(../images/soldador-footer.jpg);
  background-image: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/soldador-footer.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/soldador-footer.jpg);
  background-position: center
}

.menu-footer-ul {
  padding: 2.5rem;
  padding-bottom: 0
}

.menu-footer-li {
  padding-bottom: 2.5rem;
  text-align: left;
  list-style: none;
  color: #fff
}

.icon-circle {
  font-size: .4rem
}

.icon-home-footer {
  font-size: .8rem;
  position: relative;
  top: .9px
}

.icon-circle {
  position: relative;
  bottom: 2px
}

.icon-torsos-footer {
  font-size: .9rem;
  position: relative;
  top: 1px
}

.footer-a:hover {
  color: cyan
}

.footer-a {
  text-decoration: none;
  color: #fff
}

.domicilio-footer {
  width: 100%;
  height: auto;
  border-top: 1px solid #fff;
  background-color: #131514
}

.domicilio-footer-wrap {
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem
}

.domicilio-centrado {
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: 1.1rem;
}

.indicador-footer {
  color: red
}

@media (min-width: 320px) {

  .llamanos,
  .envianos-email {
    font-size: 1.1rem
  }
}

@media (min-width: 342px) {
  .contenedor-texto {
    padding-top: 2.4rem
  }
}

@media (min-width: 380px) {
  .whats-contacto {
    display: inline-block
  }
}

@media (min-width: 470px) {
  .cta {
    font-size: 1.3rem;
  }

  .whats-c {
    font-size: 1.3rem;
  }

  .icon-whatsapp-c {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (min-height: 501px) {
  .contenedor-texto {
    padding-top: 5rem
  }

  .titulo-herreria {
    font-size: 2.2rem
  }

  .subtitulo-1 {
    font-size: 1.5rem
  }
}

@media (min-width: 520px) {

  .llamanos,
  .envianos-email {
    font-size: 1.3rem
  }

  .titulo-contacto-h2 {
    font-size: 3rem
  }
}

@media (min-width: 600px) {
  .img-puerta {
    width: 50%;
    height: auto
  }

  .img-caracol {
    width: 40%;
    height: auto
  }

  .alinear {
    padding: 1rem 3rem
  }

  .trabajos {
    padding: 4rem 3rem
  }
}

@media (min-width: 560px) and (max-height: 600px) {
  .img-contenedor {
    padding: 0 2rem 0 2rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  .titulo-herreria {
    font-size: 2.4rem
  }

  .subtitulo-1 {
    font-size: 1.5rem
  }
}

@media (min-height: 700px) {
  .contenedor-texto {
    padding-top: 13rem
  }

  .titulo-herreria {
    font-size: 3rem
  }

  .subtitulo-1 {
    font-size: 2rem
  }
}

@media (min-width: 700px) {

  .titulo-principal-contacto,
  .titulo-principal-mensaje,
  .titulo-ubicacion {
    font-size: 2.5rem
  }

  .contenedor-fondo-inicio-1 {
    background-size: contain
  }
}

@media (min-width: 768px) {
  p {
    font-size: 1.31rem;
  }

  .titulo-principal-porton {
    font-size: 2.4rem;
    margin-bottom: 0;
  }

  .frase-portones {
    font-size: 1.68rem;
    padding: 0 4rem;
    margin-top: 1.3rem;
    margin-bottom: 2.9rem;
  }
  .cta {
    font-size: 1.4rem;
  }

  .whats-c {
    font-size: 1.4rem;
  }

  .icon-whatsapp-c {
    width: 4rem;
    height: 4rem;
  }
}

@media (min-width: 799px) {
  .img-contenedor {
    padding: 5rem 3rem 0 3rem
  }

  .titulo-herreria {
    font-size: 3.5rem
  }

  .subtitulo-1 {
    font-size: 2.5rem
  }

  .trabajos {
    padding: 7rem 3rem
  }

  .contenedor-imagen-barandal-1 {
    background-image: url(../images/barandal-1-1.jpg);
    background-position: center
  }
}



/*=====BARRA DE MENU=========*/

@media (max-width: 1024px) {
  header {
    padding: 0 20px;
    background-color: #000
  }

  .menu-toggle {
    display: block
  }

  header nav {
    background-color: #000;
    position: absolute;
    top: 50px;
    width: 100%;
    height: 100vh;
    left: -100%;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    z-index: 7
  }

  header nav.active {
    left: 0
  }

  header nav ul {
    display: block;
    text-align: center
  }

  header nav ul li.sub-menu:before {
    left: 200px
  }

  .sub-menu:hover {
    background-color: red
  }

  header nav ul li.active ul {
    position: relative;
    background-color: #000
  }

  .tam-li {
    width: 100%;
    text-align: center
  }

}

@media (min-width: 830px) {
  .contenedor-imagenes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around
  }

  .img-puerta {
    width: auto;
    height: 350px
  }

  .img-porton {
    width: auto;
    height: 350px
  }

  .img-escalera {
    width: auto;
    height: 350px
  }

  .img-caracol {
    width: auto;
    height: 350px
  }

  .bottom {
    margin-bottom: 0
  }

  [class^="contenedor-techo"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto
  }

  [class^="figure-image-flex-"] {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%
  }

  [class^="contenedor-text-techo"] {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 0 4rem
  }

  .figure-image-flex-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
  }

  .bottom-techos {
    margin-bottom: 0
  }

  .parrafo-pagos {
    font-size: 1.5rem
  }

  .alineado-2,
  .alineado-3 {
    padding: 0 3rem
  }

  [class^="titulo-principal"] {
    font-size: 3.1rem;
    margin: 0 auto 2.5rem auto;
  }

  .titulo-principal-porton {
    margin-bottom: 0;
  }

  .frase-portones {
    font-size: 2rem;
  }

  [class^="subtitulo-generico"] {
    font-size: 2.6rem
  }

  [class^="contenedor-imagenes-puertas-"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    margin: 4rem auto
  }

  .contenedor-imagenes-puertas-2 {
    max-width: 1250px;
    margin-bottom: 3rem
  }

  .contenedor-imagenes-puertas-3 {
    max-width: 1900px;
    margin-bottom: 0;
    margin-top: 0
  }

  .contenedor-imagenes-puertas-4 {
    max-width: 1900px;
    margin-top: 3rem
  }

  .contenedor-imagenes-puertas-5 {
    margin-bottom: 0
  }

  .contenedor-imagenes-puertas-6 {
    max-width: 1900px;
    margin-top: 1rem
  }

  .contenedor-trabajos-especiales {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    margin: 0 auto
  }

  .contenedor-imagenes-especiales {
    -ms-flex-preferred-size: 48%;
    flex-basis: 48%;
    margin: 0 auto
  }

  .img-puerta-especial-1,
  .img-puerta-especial-2 {
    width: 100%;
    height: auto;
    padding: 0
  }

  .contenedor-imagenes-puertas-9 {
    margin-bottom: 0
  }

  .subcontenedor-imagenes-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%
  }

  [class^="figure-imagen-puerta-"] {
    margin-bottom: 0
  }

  .figure-imagen-puerta-1 {
    -ms-flex-preferred-size: 55%;
    flex-basis: 55%;
    margin-right: 3rem
  }

  .figure-imagen-puerta-5,
  .figure-imagen-puerta-7 {
    margin-right: 3rem
  }

  .figure-imagen-puerta-9,
  .figure-imagen-puerta-10,
  .figure-imagen-puerta-12 {
    margin-right: 1rem
  }

  [class^="figcaption-"] {
    text-align: right
  }

  .figcaption-puerta-2 {
    width: auto;
    height: 60px
  }



  .contenedor-imagenes-portones-2,
  .contenedor-imagenes-portones-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1400px;
    height: auto
  }

  [class^="figure-imagen-porton-"] {
    margin-bottom: 0
  }

  .figure-imagen-porton-1 {
    margin-bottom: 3rem
  }

  .figure-imagen-porton-2,
  .figure-imagen-porton-6 {
    margin-right: 3rem
  }

  .figure-imagen-porton-4,
  .figure-imagen-porton-5 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 926px;
    height: auto
  }

  [class^="texto-puertas-abatibles"] {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 926px;
    max-height: 100%;
    margin: 0 3rem 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 4rem
  }

  .texto-puertas-abatibles-2,
  .texto-puertas-abatibles {
    margin-right: 0
  }

  [class^="contenedor-imagenes-estructuras"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    max-width: 1500px;
    height: auto;
    margin: 0 auto
  }

  .contenedor-imagenes-estructuras-1 {
    margin-top: 20px;
    margin-bottom: 3rem
  }

  .figure-imagen-obra-1 {
    margin-right: 20px;
    margin-bottom: 0
  }

  .figure-imagen-obra-2 {
    margin-bottom: 0
  }

  [class^="contenedor-imagenes-materiales-"],
  [class^="contenedor-imagenes-dobles-"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 1250px;
    height: auto;
    margin: 0 auto
  }

  .contenedor-imagenes-materiales-4 {
    margin-bottom: 3rem
  }

  .contenedor-imagenes-dobles-1 {
    max-width: 1500px;
    margin-bottom: 3rem
  }

  .figure-imagen-doble-1 {
    margin-bottom: 0
  }

  .caja-lista-materiales,
  .caja-imagenes-dobles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 900px;
    max-height: 100%;
    padding: 20px 0 0
  }

  .caja-imagenes-dobles {
    padding: 0 3rem
  }

  .caja-lista-materiales {
    margin: 1rem
  }

  [class^="figure-imagen-material"] {
    margin: 1rem
  }

  [class^="figure-imagen-material"],
  [class^="figure-imagen-doble"] {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 900px;
    height: auto
  }

  .cuadros-de-imagenes {
    max-width: 1700px;
    height: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }

  [class^="cuadro-"] {
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
    height: auto;
    margin: 0 1rem 3rem 1rem
  }

  .cuadro-1-1,
  .cuadro-1-2,
  .cuadro-2-1,
  .cuadro-2-2 {
    margin-top: 3rem
  }

  .caja-imagen-vertical {
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  .texto-imagen-vertical {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    padding: 4rem
  }

  .caja-figure-imagen-barandal-3 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: auto
  }

  .figure-imagen-barandal-6 {
    margin-bottom: 0
  }

  .margin-contacto {
    width: 100%;
    height: auto
  }

  .menu-footer-ul {
    max-width: 1800px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  .menu-footer-li {
    padding-right: 1rem;
    padding-left: 1rem
  }

  .domicilio-footer {
    margin-bottom: 3rem
  }

  .domicilio-footer-wrap {
    padding: 1.5rem
  }
}

@media (min-width: 880px) {
  .otros-productos {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4rem 0;
    background-color: rgb(235, 235, 235);
  }

  .franja {
    margin-bottom: 0
  }

  [class^="caja-ir-a"] {
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
    margin: 1rem
  }

  [class^="ir-a"] {
    max-width: 400px;
    height: auto
  }

  [class^="boton-leer-ir"] {
    padding: .5rem
  }

  [class^="caja-ir-a"]:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
  }
}

@media (min-width: 900px) {
  .caja-lista-imagen {
    max-width: 1500px;
    height: auto;
    margin: 0 auto;
    padding: 4rem 0 4rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }

  .caja-lista-barandales {
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
    padding: 0
  }

  .caja-figure-imagen-barandal-2 {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%
  }

  .figure-imagen-barandal-2 {
    margin: 0
  }

  [class^="wrap-imagenes-barandales"] {
    max-width: 1600px;
    height: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around
  }

  .wrap-imagenes-barandales-1 {
    margin-top: 3rem
  }

  .contenedor-imagenes-barandales-2 {
    margin: 0 1rem
  }
}

@media (min-width: 938px) {
  .figcaption-puerta-2 {
    width: auto;
    height: auto
  }
}

@media (min-width: 1000px) {
  .img-contenedor {
    background-image: url(../images/herrero3.png)
  }

  .frase-portones {
    font-size: 2.2rem;
  }

  .contenedor-fondo-inicio-1,
  .contenedor-fondo-inicio-3,
  .contenedor-fondo-inicio-4 {
    width: 100%;
    max-width: 1600px;
    height: 900px
  }

  .img-puerta {
    width: auto;
    height: 400px
  }

  .img-porton {
    width: auto;
    height: 400px
  }

  .img-escalera {
    width: auto;
    height: 500px
  }

  .img-caracol {
    width: auto;
    height: 500px
  }

  .img-cortina {
    width: 85%;
    height: auto
  }

  .img-barandal {
    width: 100%;
    height: auto
  }

  .tit-footer-h3 {
    font-size: 2.8rem
  }

  .footer-datos {
    font-size: 1.2rem
  }
}


@media (min-width: 1025px) {

  .telefono-c {
    flex-direction: row;
    justify-content: space-around;
    padding: 12px;
    height: auto;
  }

  .enlace-tel-c,
  .whats-f,
  .whats,
  .ubicacion {
    padding: 0;
    min-height: 0;
    margin-bottom: 0;
  }

  /* Frase de apertura portones */

  .frase-portones {
    font-size: 2rem;
    padding: 0 5rem;
  }
}

@media (min-width: 1200px) {

  tenedor-texto {
    padding-top: 15rem
  }

  .titulo-herreria {
    font-size: 4.2rem
  }

  .img-puerta {
    width: auto;
    height: 500px
  }

  .img-porton {
    width: auto;
    height: 500px
  }

  [class^="contenedor-imagenes-puertas-"] {
    margin: 5rem auto
  }

  .contenedor-imagenes-puertas-2 {
    max-width: 1250px;
    margin-bottom: 3rem
  }

  .contenedor-imagenes-puertas-3 {
    margin-bottom: 0;
    margin-top: 0
  }

  .contenedor-imagenes-puertas-4 {
    margin-top: 3rem
  }

  .contenedor-imagenes-puertas-5 {
    margin-bottom: 0
  }

  .contenedor-imagenes-puertas-6 {
    margin-top: 1rem
  }

  .contenedor-imagenes-puertas-9 {
    margin-bottom: 0
  }

  .section-contacto {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }

  .caja-formulario {
    width: 100%;
    height: 780px
  }
}

@media (min-width: 1300px) {
  .trabajos {
    padding: 10rem 3rem
  }

  .img-principal-porton {
    margin-top: 0
  }
}

@media (min-width: 1600px) {
  [class^="texto-puertas-abatibles"] {
    font-size: 1.2rem
  }
}