* {
    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;
}  
.marg{
    margin-left: 55px; 
}

.posicion4 p{
    text-align: justify;
}
 
.forma{  /* Texto alrededor de imagen*/
    shape-outside: url(img/cp01.jpg);
    shape-image-threshold: 0.5;
    shape-margin: 20px;
    float: right;
    margin: 10px;
    border-style: groove; /*Borde de las imagenes*/
}
 .formal {
     shape-outside: url();
     shape-image-threshold: 0.5;
     shape-margin: 20px;
     float: left;
     margin: 10px;
     border-style: groove;  /*Borde de las imagenes*/
 }
.groove {
  
    border-style: groove;
}
.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;
 
}

.text4 {
    margin-top: 5px; /*espacio arriba del texto*/
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    padding: 0px 10px 0px 10px;

}

.text5 {
    margin-top: 13px;
    /*espacio arriba del texto*/
    text-align: justify;
    font-size: 18px;
    line-height: 30px;
    padding:  0px 10px 0px 10px;

}

.text6 {
      /*espacio arriba del texto*/
    text-align: justify;
    font-size: 18px;
    line-height: 30px;
    padding: 0px 10px 0px 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" 
            "posicion4 posicion4 posicion4 posicion4"
            "posicion5 posicion5 posicion5 posicion5"
            "posicion6 posicion6 posicion6 posicion6"
            "posicion7 posicion7 posicion7 posicion7"
            "posicion8 posicion8 posicion8 posicion8"
            "posicion9 posicion9 posicion9 posicion9"
            "footer footer footer footer";
        
    }
    
    .contenedor>div,
    .contenedor .header,
    .contenedor .titulo,
    .contenedor .titulo1,
    .contenedor .posicion1,
    .contenedor .posicion2, 
    .contenedor .posicion4, 
    .contenedor .posicion5,
    .contenedor .posicion6, 
    .contenedor .posicion7,
    .contenedor .posicion8,
    .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;
     margin-left: 50px;   
 }

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

 .contenedor .posicion6 {
    grid-area: posicion6;  

 }
 
 .contenedor .posicion7{
     grid-area: posicion7;
 }

 .contenedor .posicion8 {
     grid-area: posicion8;
 }
 .contenedor .posicion9 {
     grid-area: posicion9;
 }
 .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 posicion3 posicion3"
                        "posicion4 posicion4 posicion4 posicion4"
                        "posicion5 posicion5 posicion5 posicion5"
                        "posicion6 posicion6 posicion6 posicion6"
                        "posicion7 posicion7 posicion7 posicion7"
                        "posicion8 posicion8 posicion8 posicion8"
                        "posicion9 posicion9 posicion9 posicion9"
                        "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"
                    "posicion7 posicion7 posicion7 posicion7"
                    "posicion8 posicion8 posicion8 posicion8"
                    "posicion9 posicion9 posicion9 posicion9"
                    "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%;


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