* {
    margin: 0;
    padding: 0; }
body {
    background: rgb(3, 38, 56); /*color de fondo de la web*/
    color: rgb(236, 190, 65); 
font-family: 'Montserrat', sans-serif;
}
 

hr {
    /*Color de la barra separadora*/
    width: 95%;
    height: 4px;
    background: orange;
    margin-left: 10px;
    margin-top: 40px;
    /* margin: 30px 30px 0px 20px;
   espacio a los lados de la barra separadora*/
}
/*barra de scroll para firefox para html-->*/

html {
     overflow-y: scroll;
     scrollbar-color: #dfc567 #324582;
     scrollbar-width: 13px;
 }

 /*fin de barra de scroll para firefox*/
a {
    color: rgb(125, 180, 88);
}

a:visited {
    color: rgb(246, 239, 51);
}
 
.titulo img {
        width: 60%;
    }
    
    .card {
    width: 200px;
    height: 300px; 
    margin: 20px; 
} 

.derec1{
    text-align: right;
    margin-right: 22px;
    line-height: 25px;
    font-size: 14px;
}
.posicion3 img{
width: 80%;

}
.marg{
    margin-left: 55px;
}

.piedra img{
    width: 80%;
}
 
.prespace{
    white-space: pre-wrap;
}
.preresp {
    white-space: pre-wrap;
    word-wrap: break-word; 
    text-align: justify;
}
.text-tit {
    font-size: 24px;
    text-align: center;
    color: rgb(142, 231, 98);
    line-height: 30px;
}
.text6 {
    margin-top: 63px; /*espacio arriba del texto*/
    text-align: justify;
    font-size: 18px;
    line-height: 30px;
    padding: 10px 10px 10px 10px;

}
.text7{
    text-align: center;
}
 .text8 {
     text-align: center;
 }
.text9{
   
    text-align: justify;

 } 
 

.titu1 {
    text-align: center;
    font-size: 21px;

} 

/*
.ceremo2 img{
max-width: 10%;
min-width: 10%;
}  

  .card {
      width: 200px;
      height: 300px;
      margin: 20px;
  }
 
 /*INICIO DE LA GRID*/
 .contenedor {
     width: 100%;
     /* el ancho del contenedor*/
     max-width: 1080px;
     /* 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 gri*/
     grid-gap: 0px 0px;
     /* margen entre las columnas y filas*/
     grid-template-columns: repeat(4, 1fr);
     /* 3 columnas de un mismo tamaño*/
     grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(4, 1fr);
        /* 3 columnas de un mismo tamaño*/
    grid-template-rows: repeat(12, auto);
        grid-template-areas:
            "header header header header"
            "titulo titulo1 titulo1 titulo1"
            "posicion1 posicion1 posicion1 posicion1"
            "posicion2 posicion2 posicion2 posicion2"
            "posicion3 posicion3 posicion4 posicion4" 
            "posicion5 posicion5 posicion6 posicion6" 
            "footer footer footer footer";
        
    }
    
    .contenedor>div,
    .contenedor .header,
    .contenedor .titulo,
    .contenedor .titulo1,
    .contenedor .posicion1,
    .contenedor .posicion2,
    .contenedor .posicion3,
    .contenedor .posicion4, 
    .contenedor .posicion5,
    .contenedor .posicion6, 
    .contenedor .footer {
   margin: 0; 
   margin-top: 10px;
   
    
 }

 .contenedor .header {
     background: #2d1e05;
     grid-area: header;
     padding: 45px; /*altura del menu*/
 }
.contenedor .titulo {
    grid-area: titulo;
    text-align: center;
    color: coral; }
    
.contenedor .titulo1 {
        grid-area: titulo1;
        text-align: center;
        color: coral;
}

 .contenedor .posicion1 {
     grid-area: posicion1;  
    display: flex;  /* centrar imagen*/
    justify-content: center; /* centrar imagen*/
      
 }

 
 .contenedor .posicion2 {
     grid-area: posicion2; 
     }
 
 .contenedor .posicion3 {
     grid-area: posicion3; 
 }

 .contenedor .posicion4 {
     grid-area: posicion4;  
     
      }
 
 
 .contenedor .posicion5 {
     grid-area: posicion5;
 }

 .contenedor .posicion6 {
    grid-area: posicion6;  

 }
 
 
 .contenedor .footer {
     background: #040d1f;
     grid-area: footer;
     text-align: center;
     font-size: 13px;
     display: inline-block;
 }

 /*FIN DE LA GRID*/

@media screen and (max-width: 1000px) {
  
      .univ1, .odo1 img {
          display: none;
      } 
    
        .text1 {
            text-align: justify;
            color: rgb(193, 170, 78);
            font-size: 15px;
        }
    
    }
         
 @media screen and (max-width: 920px) {
 .contenedor {
         grid-template-areas:
        "header header header header"
            "titulo titulo1 titulo1 titulo1"
            "posicion1 posicion1 posicion1 posicion1"
            "posicion2 posicion2 posicion2 posicion2"
            "posicion3 posicion3 posicion4 posicion4"
            "posicion5 posicion5 posicion6 posicion6" 
            "footer footer footer footer";
     }

     .navbar .logo a {
         color: rgb(210, 210, 35);
         margin-left: -270px;
         /*espacio del logo a la izquierda*/
     }

     .univ1, .odo1 img {
         display: none;
     } 
    .contenedor .header {
             padding: 35px;
             /*altura del menu*/
         }
 }    

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

     

         .text1 {
             text-align: justify;
             color: rgb(235, 160, 99);
             font-size: 13px;
         }

.contenedor .header {
    padding: 35px;
    /*altura del menu*/
}

 }

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

    .contenedor {
            grid-template-areas:
                "header header header header"
                    "titulo titulo titulo titulo"
                    "titulo1 titulo1 titulo1 titulo1"
                    "posicion1 posicion1 posicion1 posicion1"
                    "posicion2 posicion2 posicion2 posicion2"
                    "posicion3 posicion3 posicion3 posicion3"
                    "posicion4 posicion4 posicion4 posicion4"
                    "posicion5 posicion5 posicion5 posicion5"
                    "posicion6 posicion6 posicion6 posicion6"
                    "footer footer footer footer";
        }
     .navbar .logo a {
         color: rgb(210, 210, 35);
         margin-left: -270px;
         /*espacio del logo a la izquierda*/
     }
 
     .univ1,  .odo1 img {
         display: none;
     } 
 .marg {
     margin-left: -10px;
 }

.text6 { 
    font-size: 16px; 

}
     .text1 {
         text-align: justify;
         color: wheat;
         font-size: 14px;
     }

.titulo img{
    width: 40%;


}
   .posicion4 img {
       width: 100%;
   }
.contenedor .header { 
    padding: 35px;
    /*altura del menu*/
}
}