body {
    background: rgba(4, 52, 28, 255); /*color de fondo de la web*/
       
            font-size: 18px;
            font-family: "Monotype Corsiva";
            color: #dfc46a; 
            margin-left: 20px;
            margin-right: 20px;
        }
.regresar img {
    width: 60%;
}
.logo1 img {
    width: 60%;
}
.fig img {
    width: 40%;
}  
.parraf-1 {
    text-align: justify;
}

hr{
    background: orange;
    color: orange;
}
hr {
    /*Color de la barra separadora*/
    width: 100%;
    height: 4px;
    background: orange;
    margin: 10px 1px; /*espacio a los lados de la barra separadora*/
}
 a {
     color: rgb(73, 117, 227); 
 }
 a:visited {
     color: rgb(246, 239, 51); 
 }

    /*INICIO DE LA GRID*/

.contenedor {
    width: 100%;         /* el ancho del contenedor*/
    max-width: 1100px;  /* y este es el ancho máximo puede variar*/
    margin: 0px auto;  /* margen arriba y abajo y "auto" para centrar la web*/
    display: grid;      /* esto formatea el grid*/
    grid-gap: 5px;         /* margen entre las columnas y filas*/
    grid-template-columns: repeat(4, 1fr); /* 3 columnas de un mismo tamaño*/
    grid-template-rows: repeat(4, auto);
    grid-template-areas: 
    "header header header header"
    "portad-1 portad-2 portad-3 portad-3" 
    "bio_graf bio_graf bio_graf bio_graf" 
    "obra-pub obra-pub obra-pub obra-pub"
    "dist-inc dist-inc dist-inc dist-inc"
    "viaj_ess viaj_ess viaj_ess viaj_ess"
    "vide-oss vide-oss vide-oss vide-oss"
    "poe-mass poe-mass poe-mass poe-mass"
    "narra-ti narra-ti narra-ti narra-ti"
    "ensa-yos ensa-yos ensa-yos ensa-yos"
    "enla-ces enla-ces enla-ces enla-ces"
    "himno-hu himno-hu himno-hu himno-hu"
    "aso-ciac aso-ciac aso-ciac aso-ciac"
    "footer footer footer footer";
}
.contenedor > div,
.contenedor .header,
.contenedor .portad-1,
.contenedor .portad-2,
.contenedor .portad-3, 
.contenedor .bio_graf,
.contenedor .obra-pub,
.contenedor .dist-inc,
.contenedor .viaj_ess,
.contenedor .vide-oss,
.contenedor .poe-mass,
.contenedor .narra-ti,
.contenedor .ensa-yos,
.contenedor .enla-ces,
.contenedor .himno-hu, 
.contenedor .aso-ciac,
.contenedor .footer {
    border-radius: 4px; 
}
 
/*SECCION ENCABEZADO OCULTO*/
.contenedor .header { 
    background: #12203E;
    grid-area: header;  
    display: none;
    margin-top: -100px;
}



/*SECCION MENU IZQUIERDA */

.contenedor .portad-1 { 
    grid-area:portad-1;
    color: rgb(50, 236, 100);   
    line-height: 14px;
        margin: 0px auto;
        text-align: center;
        display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
}
/*borde de la tabla
td {
border: 1px solid red;
}*/
.contenido img{
    width: 30%;
}
 

/*.links-1{
   display: flex;
   flex-direction: column;
   padding: 1px;
   margin: 1px; 
}
*/


.links-1 li img{
    width: 34%;
}
.arnulfo1 img{
    width: 85%;
}
.firma img{
    width: 65%;
}


.bio img {
    width: 100px;
    
}
 .bio1 img {
     width: 120px;

 }

.obras img {
    width: 210px;
}

.distin img {
    width: 160px;
}

.viajes img {
    width: 70px;
    margin-left: 52px;
}

.videos img {
    width: 90px;
    margin-right: 65px;
    }
.poemas img {
    width: 100px;
    margin-left: 52px;
}
.narrativa img {
    width: 120px;
    margin-right: 55px;
}

.ensayos img {
    width: 100px;
    margin-left: 52px;
}

.enlaces img {
    width: 90px;
    margin-right: 55px;
}

.himnos img {
    width: 210px;
}
.asociacion img {
    width: 210px;
}

.casa img {
    width: 210px;
}
.univ img {
    width: 190px;
} 
/*Links animados del menu emergente ubicados en la tabla*/
         .arnm img{ 
            width: 260px;
         }
         .fotom img {
             width: 80px;
         }
    
         .biog-m img {
             width: 110px;
         }
    
         .obrasm img {
             width: 200px;
         }
    
         .distm img {
             width: 150px;
         }
    
         .viajm img {
             width: 70px;
         }
    
         .videom img {
             width: 90px;
         }
    
         .poemam img {
             width: 80px;
         }
    
         .narram img {
             width: 100px;
         }
    
         .ensam img {
             width: 90px;
         }
    
         .enlam img {
             width: 80px;
         }
    
         .himnm img {
             width: 190px;
         }
    
         .asocm img {
             width: 200px;
         }
    
         .casm img {
             width: 210px;
         }
    
         .unapm img {
             width: 200px;
         }
               
/*Quita los puntos de las listas <li> mejor lo ponemos al principio con el * ...*/

.contenido ul li {
    list-style: none; 
     }       */
                  
     
   /* Estilos Tablas*/

   #main-container {
       margin: 0px auto;
       /*posicion arriba de la tabla */
       width: 300px;
       /*ancho de la tabla */
   }

   table {
       text-align: center;
       border-collapse: collapse; 
       width: 100%; 
       
       
       
   }

   th,
   td {
       padding: -1px; 
       /*alto de la tabla */
   }

   thead {
       border-bottom: solid 5px #0F362D;
       /*color: rgb(150, 28, 28); color texto del encabezado la tabla */
   }
 
   /* Estilos hover del texto de la tabla
        
        tr:nth-child(even){
        	background-color: #ddd;  
        } 
        
        tr:hover td{ 
        	color: white;
        }  */

/*SECCION BIENVENIDA */

.contenedor .portad-2 { 
    grid-area: portad-2;  
    /*con flex y los que siguen centraremos la imagen del div*/
        display: flex;
        justify-content: center;  
        align-items: center;
        height: 90%; /*aqui jugamos con la posicion*/

}
  
.portad-2 img{
    width: 200px;
}
/*SECCION IMAGEN LIBRO PAGINA WEB*/

        .contenedor .portad-3 { 
            grid-area: portad-3;  
            overflow: hidden; /*hace que la imagen se quede en la caja*/
            
            /*con flex y los que siguen centraremos la imagen del div*/
                display: flex;
                justify-content: center;  
                align-items: center;
                height: 430px; /*aqui jugamos con la posicion*/
        } 

        .portad-3 img{
            width: 320px;
        }

        
        /*SECCION BIOGRAFIA */
        .contenedor .bio_graf{ 
            grid-area: bio_graf;
            text-align: justify; 
            } 

        .fotoar img{
            width: 253px;
        }

        .titulo-1 img{
            width: 150px;
        }
        .titulo-2 img {
            width: 200px;
        }

        .arnu img {
            width: 300px;
        }

        .imagen-0{
            width: 20%;
        }

        .imagen-1a { /*propiedades de la imagen tamaño y posicion derecha*/
            width: 210px;
            margin: 20px;
            float: right;  } 

        .imagen-2 {
            /*propiedades de la imagen tamaño y posicion derecha*/
            width: 210px;
            margin: 20px;
            float: left;
        } 

        .imagen-3 {
            /*propiedades de la imagen tamaño y posicion derecha*/
            width: 210px;
            margin: 20px;
            float: right;
        }

        .biog img{   /*Poner bordes  a fotod*/
            border: 10px #b28955;
        border-style: groove;

        }
 
/*SECCION OBRAS PUBLICADAS*/
 .contenedor .obra-pub {  
        grid-area: narra-ti;
        text-align: center;
        margin-top: -43px
    }
  

 /*Poner bordes  a fotos*/
 .book__nombre img {
     /*Poner bordes  a fotos*/
     border: 10px #b28955;
     border-style: groove;
 }

 .exib-1 img {
     /*Poner bordes  a fotos*/
     border: 10px #b28955;
     border-style: groove;
 }


/*SECCION DISTINCIONES*/
.contenedor .dist-inc { 
    grid-area: dist-inc;
    text-align: justify; }

.foto-C img {
    /*Poner bordes  a fotod*/
    border: 10px #b28955;
    border-style: groove;
}

.foto-d img {
        /*Poner bordes  a fotod*/
        border: 10px #b28955;
        border-style: groove;
    }


/*SECCION VIAJES*/
.contenedor .viaj_ess { 
    grid-area: viaj_ess;
    text-align: justify;
    
}


/*SECCION VIDEOS*/
.contenedor .vide-oss { 
    grid-area: vide-oss;
    text-align: center;
    margin-top: -32px
}

.gif1{
    background-image: url(imagen/bio.gif);

}
 
.videoyoutube {
    width: 100%;
}

.videoyoutube {
    border: 5px solid rgb(88, 82, 13);
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    position: relative;
}

.videoyoutube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videos1 {
    /*Con esto achicamos el video y con margin lo centramos*/
    width: 50%;
    margin: auto;
}


/*SECCION POEMAS*/
.contenedor .poe-mass { 
    grid-area: poe-mass;
    text-align: center;
    margin-top: -42px
    
}
.poemas-1 img{
    width: 200px;
}
/*SECCION NARRATIVA*/
.contenedor .narra-ti { 
    grid-area: narra-ti;
    text-align: center;
    margin-top: -40px
}

/*SECCION ENSAYOS*/
.contenedor .ensa-yos { 
    grid-area: ensa-yos;
    text-align: center;
}

/*SECCION ENLACES*/
.contenedor .enla-ces { 
    grid-area: enla-ces;
    text-align: center;
    
}
.raya1 img{
    width: 30%;

}

/*SECCION HIMNOS HUAYNOS*/

.contenedor .himno-hu { 
    grid-area: himno-hu;
    text-align: center;
    margin-top: -60px;
}
 .videoyoutube {
    width: 100%;   }

.videoyoutube {
    border: 5px solid rgb(88, 82, 13);
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    position: relative;
}

.videoyoutube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}
.videos1{ /*Con esto achicamos el video y con margin lo centramos*/
    width: 50%;
    margin: auto;
}

.foto-C img {
    /*Poner bordes  a fotod*/
    border: 10px #b28955;
    border-style: groove;
    width: 420px;
}

.foto-d img {
    /*Poner bordes  a fotod*/
    border: 10px #b28955;
    border-style: groove;
    width: 420px;
}

/*SECCION ASOCIACION*/
.contenedor .aso-ciac {
    background: rgb(175, 230, 185);
    grid-area: aso-ciac;
    text-align: center;
}


/*SECCION FOOTER*/
.contenedor .footer { 
    grid-area: footer;
    text-align: center;
    font-size: 13px; 
    margin-left: -20px;
    margin-right: -20px;
}
.cajaf {
    background-color: rgb(2, 29, 5);
}

/*FIN DE LA GRID*/

/*RESPONSIVE*/

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

 .contenedor {
 grid-template-areas:
"header header header header" 
"portad-3 portad-3 portad-3 portad-3"
"bio_graf bio_graf bio_graf bio_graf" 
"dist-inc dist-inc dist-inc dist-inc"
"viaj_ess viaj_ess viaj_ess viaj_ess"
"vide-oss vide-oss vide-oss vide-oss"
"poe-mass poe-mass poe-mass poe-mass"
"narra-ti narra-ti narra-ti narra-ti"
"ensa-yos ensa-yos ensa-yos ensa-yos"
"enla-ces enla-ces enla-ces enla-ces"
"himno-hu himno-hu himno-hu himno-hu"
"aso-ciac aso-ciac aso-ciac aso-ciac"
"footer footer footer footer";

}
.arnu img {
    width: 250px;
}
.contenedor .header {
    display: block;
    /*display none oculta todo la caja header y display block la aparece*/
    background: #12203E;
    height: 70px;
    grid-area: header;
    color: rgb(75, 143, 41);
}

.contenedor .portad-1 {
    display: none; 
}
.contenedor .portad-2 {
    display: none;
}
.contenedor .portad-3 img {
    width: 325px;
     }

.biog img{
    float: none;
}
.portad-3 img {
    width: 80%;

} 

.perga img {
    width: 100%;
}

.fig img {
    width: 90%;
}

.videos1 {
    /*Con esto achicamos el video y con margin lo centramos*/
    width: 100%;}

 .foto-C img {

     width: 320px;
 }

 .foto-d img {


     width: 320px;
 }
}