* body, header, footer, main, h1, h2, nav {
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'Domine', serif;
   text-align: center;
   font-size: 1.5vw;
}

main {
  max-width: 85%;
}

header, footer{
  background-color: rgb(236, 97, 97);
}





.logo, .header-title-text {
  display: inline-block;
  vertical-align: middle;
}

.logo {
  width: 14%;
}

.header-title-text {
  margin-left: 20px;
}



nav, .menu {
  background:rgb(241, 56, 56);
  list-style: none;
  text-align: center;
  padding: 0;
}

.menu a, #footend-copy {
  display: block;
  color: white;
  border: 1px solid rgb(236, 97, 97);
  background: rgb(241, 56, 56);
  border-radius: 5px 5px 5px 5px;
  text-decoration: none;
  line-height: 2em;
  padding: .5rem;
}



.menu li:first-child {
  display: block;
}

.menu li {
  display: none;
}

.responsive li {
  display: block;
}


.menu a.active {
  background-color: rgb(236, 97, 97);
}

.menu a:hover {
  background: rgb(231, 48, 48);
}

#footend-copy a:link, #footend-copy a:visited {
  color: white;
}








#title-header {
  color: yellow;
  font-size: 200%;
  
}

#motto {
  font-style: normal;
  font-weight: 700;
  color:  white;
  font-size: 140%;
 
}

.menu a {
  font-size: 130%;
  
}

#title-town, .article-1 {
  font-size: 175%;
  margin: 1.2em 0 .7em 0;
  font-weight: bold;
  
}

.img-overlay {
  color: rgb(236, 235, 231);
  font-size: 110%;
}

 .container-section h2 {
  font-size: 150%;
  text-align: center;
 
}

 h3 {
  font-size: 115%;
  text-align: left;
}

.contact address pre {
  font-size: 100%;
  text-align: left;
}

#footend-copy {
  font-size: 80%;
}



.banner-GRANDE img {
  width: 100%;
  height: auto;
 
  border-radius: 5px 5px 5px 5px;
}



.container-banner {
  position: relative;
 }

.img-overlay form {
  position: absolute;
  top: 8vw;
  left: 1.5vw;
  margin: 0 auto;
  padding: .75em;
  background-color: rgba(235, 43, 10, 0.6);

}

.img-overlay h3 {
  margin: 0 0 .8em auto;
  border-bottom: 1px solid #fff;
}

.img-overlay form label {
  float: left;
  width: 8em;
  margin-right: .8em;
  padding-bottom: .5em;
  text-align: right;
}

.img-overlay form input {
  width: 4.5em;
  background-color: transparent;
  padding-bottom: .5em;
  padding-right: .25em;
  border: none;
  color: inherit;
}



.container-numero {
  display: none;
  background-color: rgb(215, 215, 233);
  margin: 2em 0 .7em 0;
  padding: .6em;
  
  border-radius: 5px 5px 5px 5px;
  color: rgb(218, 98, 61);
  align-content: center;
}

.forecast table {
  margin: .5em auto;
  padding-top: .5em;
  background-color: #fff;
 
  border-radius: 5px 5px 5px 5px;

}

.forecast table th {
  font-size: 115%;
  color: rgb(247, 93, 4);
}

.forecast table td {
  padding: .8em;
  font-size: 115%;
  background-color: rgb(11, 71, 150);
  border: 2px solid #0a0909;
}



article {
  position: relative;
  background-color:rgb(235, 235, 235);
  margin: 2em 0 8vw 0;
  padding: .6em;

  border-radius: 5px 5px 5px 5px;
}

.article-1 {
  text-align: left;
  margin: 0;
}

.article-2 {
  text-align: left;
  margin-left: .8em;
  margin-top: .25em;
}

article p.article-3 {
  float: left;
  text-align: left;
  margin: 0 auto;
  padding-left: 1vw;
  width: 45%;
  height:auto;
  
}
.pics{
  width: 50%;

}




/*FOOTER*/


.container-abajo {
  margin: 5em 0 1.7em 0;
  padding: 1em;
}

.contact address pre {
  width: 42.5vw;
  float:left;
}



#map {
  width: 42.5%;
  height: auto;
  border-radius: 15px 15px 15px 15px;
 
}




/*----- Clearfix:  -----*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}