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


h2 { font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal; 
  font-size: 1.5em;
  color: #f3edbb;
}

h3 {

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal; 
  font-size: 1em;
  color: #313131;
  padding: 32px 20px 10px 20px;

}

p { font-family: "Noto Sans", sans-serif;
    font-size: 14px;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal; }


/* paginas */

.body-inicio { background-color: #f59c14;}

.pagina-info { background-color: #e52a12;  }

.pagina-documental { background-color: #eddc1d; }
.pagina-quienes { background-color: #009239; }
.pagina-colaboradores {  background-color: #3169b3; }
.pagina-contacto {  background-color: #7c3d97; }


/* Navegacion y enlaces */

nav { display: flex; flex-direction: row; justify-content: space-around; max-width: 698px; margin: auto; padding: 10px 0px; background-color: #f59c14;}

.enlace-inicio { 
    padding: 10px 20px; background-color: #f59c14;
}
.enlace-inicio:hover { background-color: #f7b34d; }
.enlace-inicio:active { background-color: #ff9900; }


.enlace-info { padding: 10px 20px; background-color: #e52a12;  }
.enlace-info:hover { background-color: #e0513e;  }
.enlace-info:active { background-color: #d81f06; color: #f3edbb !important; }


.enlace-documental { padding: 10px 20px; background-color: #eddc1d !important; }
.enlace-documental:hover { background-color: #e4d63a !important; }
.enlace-documental:active { background-color: #ffea00 !important; }
.documental-active { color: #313131 !important;}


.enlace-quienes { padding: 10px 20px; background-color: #009239; }
.enlace-quienes:hover { background-color: #1bb857; }
.enlace-quienes:active { background-color: #008a35; }


.enlace-colaboradores { padding: 10px 20px; background-color: #3169b3; }
.enlace-colaboradores:hover { background-color: #4483d6; }
.enlace-colaboradores:active { background-color: #1156b1; }


.enlace-contacto { padding: 10px 20px; background-color: #7c3d97; }
.enlace-contacto:hover { background-color: #9655b3; }
.enlace-contacto:active { background-color: #75199c; }

.emh-title { max-width: 600px; margin: auto; padding: 80px 20px; display: flex; flex-direction: column; justify-content: center;}
.emh-title img { width: 100%;}

nav a:link {  color: #f3edbb; text-decoration: none; font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;}
nav a:visited {  color: #f3edbb;}
nav a:active {color: #e52a12;}




/* articles - main */

.article-info { max-width: 720px; margin: auto; padding: 40px;}

.article-info p { color: #f3edbb; padding: 12px; font-size: 1em; line-height: 1.8em;}


.article-documental { max-width: 720px; margin: auto; padding: 40px; }
.article-documental p { color: #313131; padding: 12px; font-size: 1em; line-height: 1.8em;}
.article-documental img { max-width: 100%; padding: 20px;} 
.article-quienes p {  color: #f3edbb; padding: 12px; font-size: 1em; line-height: 1.8em; }
.article-quienes img { max-width: 100%; padding: 20px;} 
.article-contacto { max-width: 720px; margin: auto; padding: 40px; }
.article-contacto p { color: #f3edbb; padding: 12px; font-size: 1em; line-height: 1.8em;}

.contacto { display: flex; flex-direction: row; justify-content: space-around;}

/* colaboradores */

.main-colaboradores { padding: 60px;}
.article-colaboradores { background-color: white; max-width: 720px; margin: auto; padding: 40px;  }
.apoyo { text-align: center;}
.logos { display: flex; flex-direction: row; justify-content: space-between; padding: 20px;}
.davivienda img { max-width: 200px;}
.sura img {max-width: 200px;}
.logo-acnur { display: flex; justify-content:center; padding: 20px 0; }
.logo-acnur img {max-width: 200px; padding: 20px 0;}
.acnur-movil { display: none; }
.logos-cero-uno-sr-loki {display: flex; flex-direction: row; justify-content: space-between; padding: 20px 40px; }
.logo-cero-uno img {max-width: 140px;}
.logo-sr-loki img {max-width: 100px; }
.logos-la-libertad-casabierta { display: flex; flex-direction: row; justify-content: space-between; padding: 20px 40px; }
.logo-la-libertad img {max-width: 120px;}
.logo-casabierta img { max-width: 160px; }

/* Obras */


 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #f3e871;;
  color: #1d1c1c;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #dccb12;;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: #eddc1d;;
  display: none;
  overflow: hidden;
}



/* footer */

footer { text-align: center; color: #f3edbb; padding: 20px;}
.footer-documental { color: #313131;}



/* media Q */
@media screen and (max-width: 820px)  {

nav { flex-direction: column; padding: 0;}
nav>div { width: 100%; display: flex; justify-content: center; }
nav a {width: 100%; text-align: center;}
  
.logos { flex-direction: column; align-items: center;}
.logos>div { padding: 20px;}  
.logos-cero-uno-sr-loki {flex-direction: column; align-items: center;}
.logos-cero-uno-sr-loki>div { padding: 20px; }
.logos-la-libertad-casabierta { flex-direction: column; align-items: center;}
.logos-la-libertad-casabierta>div { padding: 20px; }
.logo-acnur {flex-direction: column; align-items: center;} 
.acnur-dsk { display: none;}
.acnur-movil { display: flex;}
.accordion { max-width: 700px; }

}