* 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);
}

.heroimage img {
  width: 100%;
}



.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(77, 4, 4);
}

.menu a:hover {
  background: rgb(77, 4, 4);
}

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








#title-header {
  color: yellow;
  font-size: 25px;
  
}

#motto {
  font-style: normal;
  font-weight: 700;
  color:  white;
  font-size: 15px;
 
}

.menu a {
  font-size: 20px;
  
}

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

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

 .container-section h2 {
  font-size: 10px;
  text-align: center;
 
}

 h3 {
  font-size: 20px;
  text-align: left;
}

.contact address pre {
  font-size: 20px;
  text-align: left;
}

#footend-copy {
  font-size: 20px;
}

#title-town h2{
  font-size: 18px;
}

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



.weatherSummary {
  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(247, 247, 247);
  margin: 2em 0 .7em 0;
  padding: .6em;
  
  border-radius: 5px 5px 5px 5px;
  color: rgb(221, 31, 24);
  align-content: center;
}

.forecast table {
  margin: .5em auto;
  padding-top: .5em;
  background-color: rgb(14, 12, 19);
 
  border-radius: 5px 5px 5px 5px;

}

.forecast table th {
  font-size: 18px;
  color: rgb(228, 243, 18);
}

.forecast table td {
  padding: .8em;
  font-size: 25px;
  background-color: rgb(59, 179, 235);
  border: 2px solid #0e0d0d;
}

.weatherbox {
  position: absolute;
  top: 35px;
  left: 35px;
  background-color:rgb(241, 56, 56);
  padding: .7rem;
  font-size: .9rem;
  box-shadow: 0 0 30px #111;
  opacity: .8;
}

.weatherSummaryGrid {
  display: grid;
  grid-template-columns: 1fr .5fr;
  grid-column-gap: 25px;
}

.weatherbox p {
  margin: 0;
  padding: 0;
  line-height: 1.3rem;
}




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: 100%;
  height:auto;
  line-height: 1.8;
}
.pics{
  width: 100%;

}
article, .article-1{
  font-size: 20px;
}
article, .article-2{
  font-size: 15px;
}
article, .article-3{
  font-size: 18px;
}



/*FOOTER*/

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

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



.map{
  display: none;
}





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



/* second code*/


main, #header{
  text-align: center;
  font-family: 'Squada One', Arial, Helvetica, sans-serif ;
  font-size: 0.95em;
  
}
h2, #header-gallery{
  font-size: 20px;
 

}

figure {
 
  font-size: 20px;
}

.container-gallery {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr ;
  text-align: center;

}

picture img[data-src] {
  filter: sepia(100%) blur(0.75em);
 
}

picture img {
  width: 100%;
  transition: filter 0.85s;
}