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

body {font-family: 'Open Sans', serif; font-size: 12pt; line-height: 11pt; background: #FDFDFD; color: #555;}
img {display: block; width: 100%;}
img {opacity: 1;}
p {margin-bottom: 1em; line-height: 1.4em; text-align: justify;}
a {text-decoration: none; color: #FFF;}
h1 {margin: 0 0 1em 0; font-size: 2.4em; line-height: 1.4em;}
h2 {margin: 0 0 1em 0; font-size: 1.8em; line-height: 1.2em;}
h3 {margin: 0 0 1em 0; font-size: 1.4em; line-height: 1.2em;}
h1,h2,h3 {color: #3295BC;}
h1,h2,h3 {color: #C34200;}

button {border: none;}
ul {list-style-type: none;}

#header-container {height: 85px;}

#navigation {width: 100%; padding: 0 2%; background: #3295BC; z-index: 10; position: fixed} 

#navigation > div {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1400px; width: 100%; margin: 0 auto; padding: 16px 0;}
#logo {display: inline-block;}
#logo img {max-width: 120px; max-height: 150px; width: 100%; height: auto;}
#logo img {max-width: 60px;}

#menu {display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 1000px; width: calc(100% - 160px);}
#menu li {max-height: 20px; padding: 20px 0;}
#menu a {display: block; text-transform: uppercase;}
#menu a:hover {color: #000;}




/* footer */


footer {padding: 0 3%; background: #315B8F; color: #FFF;}
#footer-container {display: flex; flex-direction: row; justify-content: space-between; gap: 3%; max-width: 1200px; margin: 0 auto; padding: 80px 0;}
#footer-container > div {width: 33%;}
span.f-t {display: inline-block; min-width: 60%; padding: 5px 0 8px 0; text-align: center; border-bottom: solid 2px #C34200; font-size: 1.6em;}


/* CLASES */
.full-width {max-width: none;}
.limited-width {max-width: 1400px; margin: 0 auto; padding: 80px 0;}

@media all and (max-width: 1440px) {
    .limited-width {padding: 80px 3%;}
} 
@media all and (max-width: 992px) {}
@media all and (max-width: 768px) {
    #menu {display: block;}

    #menu {clear: both; width: 100%; padding-top: 50px; line-height: 16px;}
    #navigation #menu.up {display: none;}
    
    #navigation #menu.down {display: block; position: static; } 
	#navigation #menu.down li {display: block; margin: 0 0 20px 0; text-align: center;}
    #navigation #menu.down li a {display: block; padding: 10px 0; }
    
    #navigation span.toggle-nav {float: right; display: block; margin-right: 20px;}
    #navigation span.toggle-nav-btn {display: block; width: 2.2em; height: auto; border: solid 1px #FFF; border-radius: 3px; cursor: pointer;}
    span .s-line {display: block;width: 1.5em;height: 1px; margin: 6px auto;background: #FFF;}
}
@media all and (max-width: 576px) {
   
    ul.down {height: 100vh;}

    .limited-width {padding: 80px 2%;}
    #lista-eventos h2 {max-height: 46px;}
}h1 {text-align: center; color: #C34200;}
h2 {color: #C34200;}


#background-container {height: 100vh; background: url("/images/home/bg/portada-2.jpg"); background-size: cover;}
#background-container {height: 100vh; margin-bottom: 50px; background: url("/images/home/bg/portada-2.jpg") top center fixed; background-size: cover;}
#bgs {background-color: rgba(255,255,255,0.5); height: 100vh;}

#header-container {height: auto;}
#navigation {background: #3295bc; z-index: 10;}

#navigation a {color: #fff;}


#destacados {padding: 0 3%;}
#destacados a {color: #555;}
#destacados a:hover {opacity: 0.8;}
#destacados div.section-wrapper {max-width: 1200px; margin: 0 auto; padding: 80px 0;}
#lista-destacados {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 50px 0; margin: 50px 0;}
div.item.destacado {display: flex; max-width: 32%; width: 100%;}


div.resumen {padding: 20px; background: #F2F2F2;}
div.resumen h2 {height: 96px;}
div.resumen span {display: block; padding: 5px 0 10px 0;}
span.municipio {font-size: 1.2em;}


@media all and (max-width: 1200px) {}
    h2 {font-size: 1.6em;}

@media all and (max-width: 992px) {
    div.item.destacado {max-width: 48%;}
}
@media all and (max-width: 768px) {
    div.item.destacado {max-width: 80%; margin: 0 auto;}
    div.resumen h2 {height: 78px; overflow: hidden;}
}
@media all and (max-width: 576px) {
    #lista-destacados {display: block;}
    div.item.destacado {max-width: none; margin: 0 0 50px 0;}
}