EDITO Añado nuevos estilos, porque quizá el problema venga de la barra de navegación, ya que descubrí que en otra página, que no tiene los primeros estilos, la barra se extiende hacia la derecha. Y aunque el contenido de esta no se mueve expande igual, si queda el espacio vacío, pudiendo hacer scroll Hola tengo este formulario dentro de una web con un listado de precios. Bueno pues al verlo en el dispositivo móvil, se extiende hacia la derecha todo el contenido, obligando a hacer scroll, ampliando la pantalla, en vez de ir viéndose párrafo por párrafo hacia abajo. Tengo dos paginas iguales, la otra funciona perfectamente, porque no tengo los "estilos de precios" que muestro en el código, por lo que creo que el problema vendrá de aquí y más concretamente de la barra de navegación, pues en el dispositivo es la que se ve que se extiende a lo ancho.No se porque en esta página se extiende la barra de navegación, en concreto se extiende a lo ancho es el botón de los enlaces, siendo incluso de otro color que en la otra página. ¿ A que se puede deber este error ? No se si debía de mostrar el otro codigo, pero lo subi asi al servidor y se ve el error sin los otros estilos. Edito: Añado enlace a codepen para mas codigo
Gracias, dejo el ejemplo .
/* Nuevos estilos de barra de navegacion*/
/* new styles*/
.navbar {
margin-bottom: 0;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.nav.navbar-nav {
background-color: rgba(255,255,255,.6);
}
.navbar-custom.top-nav-collapse .nav.navbar-nav {
background-color: rgba(0,0,0,0);
}
.navbar-custom ul.nav li a {
font-size: 16px;
letter-spacing: 1px;
color: #444;
text-transform: uppercase;
font-weight: 700;
}
.navbar-custom.top-nav-collapse ul.nav li a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #fff;
}
.navbar-custom ul.nav ul.dropdown-menu {
border-radius: 0;
margin-top: 21px;
border-top: none;
}
.navbar-custom ul.nav li a:hover ul.dropdown-menu {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #f5f5f5;
}
.navbar-custom ul.nav ul.dropdown-menu li:last-child{
border-bottom: none;
}
.navbar-custom ul.nav ul.dropdown-menu li a {
padding: 10px 20px;
}
.navbar-custom ul.nav ul.dropdown-menu li a:hover {
background: #fefefe;
}
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
color: #666;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 14px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {outline: 0;}
#container-2{
background-color: #EBB250;
}
.home-section {
padding-top: 20px;
padding-bottom: 20px;
display:block;
position:relative;
z-index:120;
}
.home-section2 {
padding-top: 0px;
padding-bottom: 20px;
display:block;
position:relative;
z-index:120;
}
.inner-section {
padding-top: 110px;
padding-bottom: 110px;
}
.home-section.nopadd-bot {
padding-bottom: 0;
}
.section-heading h2 {
font-size: 24px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}
.section-heading p {
font-weight: 300;
font-size: 20px;
line-height: 1.6em;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
.intro {
height: 100%;
padding: 0;
}
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 25px;
}
}
@media (max-width:768px) {
#navigation {
padding: 20px 0;
}
.site-logo{
margin: 0 0 0 30px;
float:none;
}
.navbar-custom ul.nav li a {
color: #eee;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #aaa;
}
.navbar-header {
margin-top:-40px;
padding:0;
}
.navbar-header button {
background: #111;
}
.navbar-header button.navbar-toggle {
padding: 4px 15px;
font-size: 14px;
color: #fff;
}
.navbar-custom .nav {
background: #444;
}
.service-box {
margin-bottom: 50px;
}
.team-wrap {
margin-bottom: 30px;
}
form#contact-form {
margin-bottom: 50px;
}
.xs-marginbot-20 {
margin-bottom: 20px;
}
}
@media (max-width:480px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
}
.navbar .navbar-custom {
padding: 0;
}
/* estilos del formulario*/
@media only screen and (min-device-width: 768px)
{
.form-container {
padding: 5%;
background: #ffffff;
border: 9px solid #f2f2f2;
max-width: 520px;
margin: auto;
}
}
h1, p
{
text-align: center;
}
input, textarea , button
{
width: 100%;
}
textarea
{
height: 200px;
}
button{
background-color: #3bbec0 !important;
}
/* estilos de la pagina */
@import "grid.css";
@import "reset.css";
@import "font-awesome.css";
@import "superfish.css";
@import url(//fonts.googleapis.com/css?family=Dosis:400);
@import url(//fonts.googleapis.com/css?family=Dosis:700);
@import url(//fonts.googleapis.com/css?family=Denk+One);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:600);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic);
html {
width: auto;
}
a[href^="tel:"] {
color: inherit;
text-decoration: none;
}
* {
-webkit-text-size-adjust: none;
}
body {
position: relative;
background-color: #fff;
color: #908e8e;
font: 14px/20px 'Open Sans', sans-serif;
}
#container .column {
/*position: relative !important;*/
padding-top: 0px !important ;
}
#works{
background-color: #A4EB8F;
padding-top: 10px ;
padding-bottom: 30px ;
}
#works p{
font-size: 20px ;
}
#informacion h2{
padding-top: 10px ;
}
.ic {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
strong {
font-weight: 700;
}
address {
font-style: normal;
}
p {
margin-bottom: 20px;
}
.p1 {
margin-bottom: 24px;
}
input {
border-radius: 0 !important;
outline: none !important;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: #474343;
font-weight: normal;
font-family: 'Denk One', sans-serif;
}
h2 {
font-size: 60px;
line-height: 60px;
padding-top: 83px;
margin-bottom: 40px;
text-align: center;
}
h2.head1 {
font-size: 48px;
padding-top: 99px;
}
h3 {
padding-top: 69px;
margin-bottom: 30px;
font: 30px/43px 'Dosis', sans-serif;
}
.page1 h3 {
padding-top: 98px;
margin-bottom: 15px;
}
h4 {
font-size: 24px;
line-height: 40px;
padding-top: 70px;
margin-bottom: 34px;
}
h4.head1 {
padding-bottom: 0px;
margin-bottom: 30px;
}
h4.head2 {
padding-bottom: 0px;
margin-bottom: 14px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
.list .count {
margin-top: 4px;
color: #fff;
font: 30px/48px 'Dosis', sans-serif;
width: 49px;
float: left;
margin-right: 11px;
text-align: center;
height: 49px;
border-radius: 500px;
background-color: #25952a;
}
.list li {
overflow: hidden;
}
.list li+li {
margin-top: 35px;
}
.list1 {
margin-top: -3px;
}
.list1 li {
position: relative;
}
.list1 li+li {
margin-top: 10px;
}
.list1 li a:after {
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
background-color: #c7c6c6;
height: 1px;
}
.list1 li a:hover:after {
background-color: #25952a;
width: 0;
}
.list2 {
margin-top: -4px;
}
.list2 li {
background: url(../img/dots.png) 0 72% repeat-x;
overflow: hidden;
}
.list2 li+li {
margin-top: 16px;
}
.list2 .prod {
float: left;
padding-right: 3px;
background-color: #fff;
}
.list2 .price {
padding-left: 3px;
float: right;
background-color: #fff;
}
.list2 {
overflow: hidden;
}
a{
text-decoration: none;
color: inherit;
outline: none;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.btn {
margin-top: 73px;
color: #fff;
display: inline-block;
padding: 22px 62px 24px;
background-color: #25952a /*#3da9b6*/;
font: bold 30px/40px 'Dosis', sans-serif;
}
.btn:hover {
background-color: #1d1d1d;
}
.link1 {
display: inline-block;
margin-top: 16px;
font: 24px/26px 'Dosis', sans-serif;
color: #3b3a3a;
}
.paeg1 .link1 {
margin-top: 14px;
}
.mb__0 {
margin-bottom: 0px !important;
}
.m0 {
margin: 0 !important;
}
.pad0 {
padding: 0 !important;
}
.img_inner {
max-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 25px;
}
.fleft {
float: left;
width: auto !important;
margin-right: 30px;
margin-bottom: 0px;
margin-top: 4px;
}
.page1 .fleft {
margin-top: 8px;
}
.rel {
position: relative;
}
.oh {
overflow: hidden;
}
.fright {
float: right !important;
}
.upp {
text-transform: uppercase;
}
.alright {
text-align: right;
}
.center {
text-align: center;
}
.wrapper, .extra_wrapper {
overflow: hidden;
}
.clear {
float: none !important;
clear: both;
}
.oh {
overflow: hidden;
}
.nowrap {
white-space: nowrap;
}
.page1 header h1{
padding-bottom: 45px;
}
.content {
padding-bottom: 10px;
padding-top: 0%;
margin-top: 0%;
}
.page1 .content {
padding-bottom: 36px;
}
.text1 {
color: #6a6a6a;
margin-top: -21px;
font: 20px/22px 'Dosis', sans-serif;
margin-bottom: 26px;
}
.ban_img {
margin-bottom: 39px;
}
.link22{
color: #844007;
}
.links a {
text-decoration: underline;
}
.links li+li {
margin-top: 10px;
}
.box {
color: #fff;
text-align: center;
display: block;
background-color: #79c4ca;
font: 36px/43px 'Dosis', sans-serif;
margin-bottom: 25px;
}
.box:hover {
background-color: #1d1d1d;
}
.box_bot {
padding-top: 63px;
padding-bottom: 69px;
}
.box_bot span {
margin-top: 3px;
display: block;
font-size: 30px;
}
.block1 {
overflow: hidden;
}
.block1+.block1 {
padding-top: 40px;
}
.sep__1 {
border-top: 1px solid #d9d9d9;
}
.sep__2 {
padding-top: 77px;
border-bottom: 1px solid #d9d9d9;
}
.sep__3 {
height: 92px;
}
.color1 {
color: #25952a/*#3da9b6*/;
font-size: 15px;
}
.color1 a:hover, a.color1:hover {
color: #474343;
}
.color2 {
color: #474343;
}
.td_und {
text-decoration: underline;
}
.top {
margin-bottom: 61px;
display: inline-block;
background: url(../images/totop.png) 0 0 no-repeat;
width: 82px;
height: 82px;
transition: 0s ease;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
}
.top:hover {
background-position: right 0;
}
.copy {
font-size: 12px;
line-height: 18px;
}
.sub_copy {
margin-top: -4px;
}
body {
min-width: 1200px;
}
.container_12 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 15px;
margin-right: 15px;
}
.grid_4 li{
font-size: 16px;
}
.grid_4 p{
font-size: 16px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12 {
position:relative;
}
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
.container_12 .grid_4 {
width:370px;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
footer {
text-align: center;
padding: 30px 0 30px ;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Agrochema</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:700'>
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<div id="navigation">
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="site-logo">
<img id="logo" src="../img/logo.png" />
</div>
</div>
<div class="col-md-10">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="../index.html">Casa</a>
</li>
<li>
<a href="../galerias.html#about">Sobre mi</a>
</li>
<li>
<a href="../galerias.html">Servicios</a>
</li>
<li>
<a href="../galerias.html">Trabajos</a>
</li>
<li>
<a target="_blank" href="https://www.google.es/maps/place/Agrochema/@40.2104603,-5.083004,15z/data=!4m5!3m4!1s0x0:0x36f5afcb946590e5!8m2!3d40.2104603!4d-5.083004">Ubicaciòn</a>
</li>
<li>
<a href="#works">Contacto</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<section id="about" class="home-section color-dark bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="animatedParent">
<div class="section-heading text-center animated bounceInDown">
<h2 class="h-bold">Nuestros precios...</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<section class="content">
<div class="ic"></div>
<div class="container_12">
<div class="grid_8">
<h4 class="head1">Revise nuestros precios</h4>
<div class="grid_4 alpha">
<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas....</p>
<ul class="list2">
<li>
<div class="prod">
<a>Mantenimiento mensual</a>
</div>
<div class="price">Desde 50€</div>
</li>
<li>
<div class="prod">
<a>Mantenimiento de comunidades</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Plantacion de cesped *</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Cesped artificial</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Cuidado de setos</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Cuidado de rosales</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Plantas ornamentales </a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Diseño de jardines</a>
</div>
<div class="price">Variable...</div>
</li>
<li>
<div class="prod">
<a>(*)En la plantación de césped natural, le ofrecemos un mes de mantenimiento gratuito, y asegurar su agarre y proliferación.</a>
</div>
</li>
</ul>
</div>
<div class="grid_4 omega">
<p class="color1">Limpieza y desbroce de fincas. Trabajos de campo, especialistas en huerta ecologica.</p>
<ul class="list2">
<br>
<li>
<div class="prod">
<a>Sembramos su huerta</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Cuidamos su huerta</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Arado de fincas</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Rotulamos las fincas</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Plantacion de viñedos</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Siembras ecologicas</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Plantacion de frutales</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="grid_4">
<p class="color1">
<a href="#">Venta de leña, amplia variedad...</a>
</p>
<br>
<p class="p1">En Agrochema ponemos a su disposición venta de leña a todo el Valle del Tietar: cerezo desde 70€ / 750 kg aprox.; fresno
desde 100€ 850kg aprox. Contamos con màs variedad, tales como encina, roble y pino. Se la ofrecemos en distintos tamaños
con el secado óptimo para su perfecta
<a href="#" class="link22">Aquì tiene una muestra.</a>
</p>
<p class="color1">
<a href="#">Servicio de portes </a>
</p>
<p class="p1">En Agrochema</p>
</div>
<div class="clear"></div>
</div>
<div class="sep__2"></div>
<div class="container_12">
<div class="grid_4">
<h3>Trabajos en madera</h3>
<ul class="list2">
<li>
<div class="prod">
<a>Vallados en madera</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Porches de madera</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Pèrgolas de madera</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Cabañas para herramienta</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>Casetas de animales</a>
</div>
<div class="price">10 a 15€ h.</div>
</li>
<li>
<div class="prod">
<a>(*)Toda la madera que utilizamos es de primera calidad, tratada para aguantar el paso de los años y las inclemencias
meteorológicas.
</a>
</div>
<!--<div class="price">$80,22</div>-->
</li>
</ul>
</div>
<div class="grid_4">
<h3>Nuestro compromiso</h3>
<ul>
<li>
<a>Fiabilidad, innovación y determinación son los valores sobre los que se fundamenta nuestra empresa, el trabajo diario,
las relaciones con los clientes y en la forma de hacer nuestro trabajo. Los equipos de trabajo nos unen, garantizando
así que conocimientos y experiencias se compartan y se apliquen en toda las labores; todo ello redunda en nuestros
clientes. Estos valores son los que nos orientan a implementar constantes mejoras en nuestros productos y a ofrecer
un buen servicio a nuestros clientes. Viviendo como nuestros estos valores, logramos nuestros objetivos, facilitando
la tarea de nuestros clientes, trabajadores y al conjunto del sector.
</a>
</li>
<!--<li>
<a>Expecialistas en jardineria, podas, etc... </a>
</li>
<li>
<a>Expecialistas en jardineria, podas, etc.... </a>
</li>
<li>
<a>Expecialistas en jardineria, podas, etc...</a>
</li>
<li>
<a>Expecialistas en jardineria, podas, etc... </a>
</li>
<li>
<a>Expecialistas en jardineria, podas, etc...</a>
</li>
<li>
<a>Expecialistas en jardineria, podas, etc...</a>
</li>-->
</ul>
</div>
<div class="grid_4">
<h3>Nuestros objetivos</h3>
<p>Nuestro objetivo.</p>
</div>
<div class="clear"></div>
</div>
</section>
</section>
<section id="works">
<div class="container">
<div class="row">
<div class="text-center col-md-5 col-sm-12 col-xs-12" id="informacion">
<p>05400 Arenas de San Pedro</p>
<p>(Avila)</p>
</div>
<div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
<script src='https://www.google.com/recaptcha/api.js'></script>
<h5>
Contacte conmigo
</h5>
<form method="post" id="reused_form">
<label for="name">Nombre:</label>
<input id="name" type="text" name="Name" required maxlength="50" placeholder="Nombre...">
<label for="email">Email :</label>
<input id="email" type="email" name="Email" required maxlength="50" placeholder="Correo electronico...">
<label for="message">Mensage:</label>
<textarea id="message" name="Message" rows="10" maxlength="6000" required></textarea>
<div class="g-recaptcha" data-sitekey="6LfMA0sUAAAAALFN5W-V06LOOeWEUf7T2hVlt5Yu"></div>
<button class="button-primary" type="submit">Enviar</button>
</form>
<div id="success_message" style="display:none">
<h3>¡¡ El mensaje se envió con éxito...!!</h3>
<p>Nos pondremos en contacto con usted pronto. </p>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h3>Error</h3>Lo sentimos, hubo un error al enviar su formulario.</div>
</div>
</div>
</div>
</section>
<section id="contact" class="home-section nopadd-bot color-dark bg-gray text-center">
</section>
<footer>
<div id="container">
<div class="column col-md-4">
</div>
<div class="column col-md-4">
</div>
</div>
</footer>
</body>
</html>