/*
    ================================
        MODAL
    ================================
*/
*,
*::after,
*::before { margin:0; padding:0; box-sizing:border-box; }

a,
a:link  { font-family:inherit; text-decoration:none; }
a:focus { outline:none; }

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

/* Cabecera ***********************************************************************************/
header {background-color:#e5e5e5; width:100%; height:60px; text-align:center; padding:0px; position:fixed; top:0;}
header .linkCabecera { color:black;}

/* Menú ***************************************************************************************/
.topnav       { overflow:hidden; background-color:#333; padding-top: 60px; }
.topnav a     { float:left; display:block; color:#f2f2f2; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px; }
.active       { background-color:rgb(131, 153, 143); color:white; }
.topnav .icon { display:none; }

.dropdown           { float:left; overflow:hidden; }
.dropdown .dropbtn  { font-size:17px; border:none; outline:none; color:white; padding:14px 16px; background-color:inherit; font-family:inherit; margin:0; }
.dropdown-content   { display:none; position:absolute; background-color:#f9f9f9; min-width:160px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; }
.dropdown-content a { float:none; color:black; padding:12px 16px; text-decoration:none; display:block; text-align:left; }

.topnav a:hover, .dropdown:hover .dropbtn { background-color:rgb(95, 102, 96); color:white; }
.dropdown-content a:hover         { background-color:#ddd; color:black; }
.dropdown:hover .dropdown-content { display:block; }

/* Cuerpo *************************************************************************************/
.main     { width:100%; max-width:1000px; margin:auto; padding:0 20px; background-color:white; }
.main h2  { color:rgb(131,153,143); margin:0.6em 0em; }

/* Capa Asside ********************************************************************************/
.right { background-color:#e5e5e5; float:left; width:20%; padding:15px; margin-top:7px; text-align:center; }

/* Píe ****************************************************************************************/
footer      { background-color:#e5e5e5; width:100%; text-align:right; position:fixed; bottom:0; height:1.6em; }
footer div  { width:100%; margin-top:0.3em; padding-right:0.5em;  }
footer p    { font-size:0.8em; color:rgb(131,153,143); }


/****** Galeria ********************************************************************************/
.row                  { margin:8px -16px; }
.row, .row > .column  { padding:8px; }
.column               { float:left; width:25%; }
.row:after            { content:""; display:table; clear:both; } /* Limpiar capas flotantes de rows */
.content              { background-color:white; padding:10px; }


/****** Visor PDF *******************************************************************************/
.VisorPDF { height:80vh;}

/****** Ventanas MODALES *************************************************************************/
/* box - Caja MODAL */
.box { justify-content:center; align-items:center; height:auto; }
.box:not(:first-child)    { height:100%; }
.box_title                { font-size:300%; font-weight:normal; letter-spacing:20%; }
.box_title::first-letter  { color:rgb(131,153,143); }
.box_p                    { font-size:120%; }

/* modal */
.modal-container { position:fixed; top:0; left:0; z-index:10; display:none; justify-content:center; align-items:center; width:50%; height:auto; background:rgb(235,245,245,0.9);}

/* USANDO :target --> clic en el enlace, el navegador agregará un ID mostrando el modal que contiene ese ID. */
.modal-container:target { display:flex; }
.modal                  { width:100%; padding:10%; border-radius:5%; position:relative; overflow:hidden; }
.modal_title            { font-size:200%; }
.modal_text             { padding:0 5%; margin-top:5%; font-size:120%; line-height:2; }

/* ENLACES */
.link-1 { padding:2%; }
.link-1:hover, .link-1:focus { background:rgb(235,245,245,0.9); }

.link-2 { width:20%; height:20%; color:inherit; font-size:200%; position:absolute; top:5%; right:5%; display:flex; justify-content:center; align-items:center; }
.link-2::before { content:'×'; }
.link-2:hover,
.link-2:focus { background:rgb(235,245,245,0.9); }


@media screen and (max-width:600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn { display:none; }
  .topnav a.icon                                  { float:right; display:block; }
  .topnav.responsive                    { position:relative;}
  .topnav.responsive .icon              { position:absolute; right:0; top:0; }
  .topnav.responsive a                  { float:none; display:block; text-align:left; }
  .topnav.responsive .dropdown          { float:none; }
  .topnav.responsive .dropdown-content  { position:relative;}
  .topnav.responsive .dropdown .dropbtn { display:block; width:100%; text-align:left; }
  .column { width:100%; }
}

@media screen and (max-width:900px) {
  .column { width:50%; }
}