body {
  font-family: Dosis, sans-serif;
}

h1 { font-size: 2em;   font-weight: 700; margin: 10px; }
h2 { font-size: 1.5em; font-weight: 700; }
h3 { font-size: 1.4em; font-weight: 700; margin-bottom: 10px; }
p  { font-size: 1em;                     margin: 10px auto; line-height: 1.1em; }

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul#menu a:hover {
  color: white;
  background-color: #333;
  text-decoration: none; 
	}

main,
header,
footer #texto_pie {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

main div {
  margin: 1%;
  padding: 1%;
  flex: 1 1 96%;
}

main div img,
main div h3,
main div p,
main div ul {
  width: 96%;
  margin: 2%;
}

main div.consejos {
  flex: 1 1 96%;
  margin: 2%;
}

header a.logo {
  flex: 1 1 96%;
  text-align: center;
  z-index: 9999;
}

header a.logo img {
  max-width: 400px;
  margin: 0 10px;
}

ul#menu {
  flex: 1 1 96%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: black;
  margin-top: 15px;
  line-height: 40px;
  z-index: 9999;
}

ul#menu li {
  flex: 1 0 96%;
  text-align: center;
}

ul#menu li a {
  font-weight: 600;
  color: black;
  display: block;
  text-decoration: none;
}

main div.consejos {
  background-color: #eee;
}

footer {
  position: relative;
  bottom: 0;
  margin-top: 100px;
  height: 120px;
  background-color: #333;
  color: white;
}

footer #texto_pie {
  flex: 1 1 96%;
  display: flex;
  flex-wrap: wrap;
}

footer p {
  flex: 1 1 96%;
  padding: 1%;
  margin: 1%;
  text-align: center;
}

footer p.copyright {
  visibility: hidden;
}

footer p.contacto {
  font-weight: 500;
  font-size: 1.2em;
}

footer a {
  color: white;
  text-decoration: none;
}

main a img:hover {
  box-shadow: 0 0 10px #666;
}

ul.bjqs {
  position: relative;
  padding: 0;
  margin: 0;
  margin-top: 20px;
  overflow: show;
  display: none;
}

/*--------------------------------------------------------------*/

main h1.seccion {
  margin: 1%;
  padding: 3% 1%;
  flex: 1 1 96%;
  line-height: 25px;
  color: white;
  text-indent: 10px;
}

main h1.seccion a {
  color: white;
}

#s_alquiler   { background-color: #a79055; }
#c_alquiler   { background-color: #f6e9cb; }
#s_montaje    { background-color: #6ebcdb; }
#c_montaje    { background-color: #e9f5f9; }
#s_produccion { background-color: #afd841; }
#c_produccion { background-color: #e4f2c0; }
#s_varios     { background-color: #00476b; }
#c_varios     { background-color: #05abff; }
#s_contacto   { background-color: #333333; }
#c_contacto   { background-color: #ffffff; }

/*------------------------------------------------------*/

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {...} */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  main div {
    flex: 0 1 46%;
  }

  ul#menu li {
    flex: 1 0 20%;
  }

  footer p {
    line-height: 1.4em;
  }

  footer p.contacto {
    font-size: 1.4em;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  ul#menu li {
    flex: 1 0 20%;
  }

  ul#menu {
    flex: 1 1 60%;
  }

  #hd .logo {
    flex: 1 1 40%;
  }

  footer p {
    flex: 1 1 46%;
  }

  footer p.copyright {
    visibility: visible;
    text-align: left;
  }

  footer p.contacto {
    font-size: 1.4em;
    text-align: right;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  ul#menu li {
    flex: 1 0 16%;
  }

  main div {
    flex: 0 1 29.33%;
  }
  #hd .logo {
    text-align: left;
  }

  ul.bjqs {
    margin-top: -72px;
  }

  main h1.seccion {
    padding: 1% 1%;        <p>Por favor, rellene el siguiente formulario y en breve nos pondremos en contacto con usted.</p>
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

/*  Estilos de formulario
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
form {
  text-align: left;
  display: table;
  margin: 0 auto;
  width: 90%;
  max-width: 700px;
}

form p {
  display: table-row;
}

label {
  font-weight: 600;
}

label, input, textarea {
  width: 100%;
  font-size: 1.2em;
  font-family: Dosis, sans-serif;
}

label,
input {
  height: 25px;
  float: left;
  margin: 2px auto;
  line-height: 25px;
  vertical-align: middle;
  display: table-cell;
}

textarea {
  min-height: 150px;
  padding: 5px;
  font-family: Dosis, sans-serif;
}

input, label {
  padding: 5px;
}

input#enviar {
  float: none;
  display: table-cell;
  font-family: Dosis, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  width: 100%;
  max-width: 200px;
  vertical-align: middle;
  height: 50px;
  margin: 0 auto;
  cursor: pointer;
  padding: .375rem .75rem;
  border: 0px solid #007bff;
  border-radius: .25rem;
  color: #007bff;
  transition: color .15s ease-in-out,
    background-color .15s ease-in-out;
}

input#enviar:hover, input#enviar:active, input#enviar:focus {
  color: #fff;
  background-color: #007bff;
}

input:focus,
textarea:focus {
  box-shadow: 0 0 3px #6ebcdb;
}