* {
    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: #567d98 #324582;
     scrollbar-width: 13px;
 }

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

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

.derec1{
    text-align: right;
    margin-right: 10px;
}
.preresp {
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
}

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

}
.text-tit {
    font-size: 24px;
    text-align: center;
    color: rgb(142, 231, 98);
    line-height: 30px;
}
.text6 {
    text-align: justify;
    font-size: 18px;
    line-height: 30px;
    padding: 10px 10px 10px 10px;

}

.text6 img{  
     margin: 10px;
    width: 30%;
    border-radius: 12px;

}


 .text8 {
     text-align: center;
 } 
 
 .text8 img{
    text-align: center;
    width: 30%;
    border-radius: 12px;
 }
 
 /*
.ceremo2 img{
max-width: 10%;
min-width: 10%;
}  */ 
.posicion1, 
.posicion4,
  .posicion6,
  .posicion7,
  .posicio10,
  .posicio11,
  .widget-2,
  .widget-3 {
      display: flex;
      /*comando principal para centrar*/
      flex-wrap: wrap;
      /* */
      justify-content: center;
      /*centra horizontalmente*/
      align-items: center;
      /*centra verticalmente*/
  }

  .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(14, auto);
        grid-template-areas:
            "header header header header"
            "titulo titulo1 titulo1 titulo1"
            "posicion1 posicion2 posicion2 posicion2"
            "posicion3 posicion3 posicion3 posicion3"
            "posicion4 posicion4 posicion4 posicion4"
            "ceremo1 ceremo1 ceremo1 ceremo1"
            "ceremo2 ceremo2 ceremo2 ceremo2"
            "posicion5 posicion5 posicion6 posicion6"
            "posicion7 posicion7 posicion8 posicion8"
            "posicion9 posicion9 posicio10 posicio10"
            "posicio11 posicio11 posicio12 posicio12"
            "widget-1 widget-1 widget-2 widget-2"
            "widget-3 widget-3 widget-4 widget-4"
            "widget-5 widget-5 widget-5 widget-5"
            "footer footer footer footer";
        
    }
    
    .contenedor>div,
    .contenedor .header,
    .contenedor .titulo,
    .contenedor .titulo1,
    .contenedor .posicion1,
    .contenedor .posicion2,
    .contenedor .posicion3,
    .contenedor .posicion4,
    .contenedor .ceremo1,
    .contenedor .ceremo2,
    .contenedor .posicion5,
    .contenedor .posicion6,
    .contenedor .posicion7,
    .contenedor .posicion8,
    .contenedor .posicion9,
    .contenedor .posicio10, 
    .contenedor .posicio11,
    .contenedor .posicio12,
    .contenedor .widget-1,
    .contenedor .widget-2,
    .contenedor .widget-3,
    .contenedor .widget-4,
    .contenedor .widget-5,
    .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;   
 }


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

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

.ceremo1 img{
    width: 80%;
    }
.contenedor .ceremo1 {
    grid-area: ceremo1;
    display: flex;
        Justify-content: center
    }

 .contenedor .ceremo2 { 
    grid-area: ceremo2; 
    display: flex;
        Justify-content: center;
        flex-direction: row;
        margin-top: 45px
 }
 
 .contenedor .posicion5 {
     grid-area: posicion5;
 }

 .contenedor .posicion6 {
    grid-area: posicion6; 
    text-align: center 
 }

 .posicion6 img{
    width: 60%;
 }


.prespace {
    white-space: pre-wrap;
}

.preresp {
    white-space: pre-wrap;
    word-wrap: break-word; 
}
 .contenedor .posicion7 {
     grid-area: posicion7;
 }
.posicion7 img {
    width: 60%;
}
 .contenedor .posicion8 {
     grid-area: posicion8; 

 }


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

 .contenedor .posicio10 {
     grid-area: posicio10;

 }
 .posicio10 img {
     width: 60%;
 }
.contenedor .posicio11 {
    grid-area: posicio11;
}

.contenedor .posicio12 {
    grid-area: posicio12;

}
 .contenedor .widget-1 {
     grid-area: widget-1; 
 }

 .contenedor .widget-2 {
     grid-area: widget-2;  
 }
.contenedor .widget-3 {
    grid-area: widget-3; 
}

.contenedor .widget-4 {
    grid-area: widget-4;  
    margin-left: 20px;
    margin-right: 10px;

}

.contenedor .widget-5 {
   grid-area: widget-5;
}
 .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 posicion2 posicion2 posicion2"
        "posicion3 posicion3 posicion3 posicion3"
        "posicion4 posicion4 posicion4 posicion4"
        "ceremo1 ceremo1 ceremo1 ceremo1"
        "ceremo2 ceremo2 ceremo2 ceremo2"
        "posicion5 posicion5 posicion6 posicion6"
        "posicion7 posicion7 posicion8 posicion8"
        "posicion9 posicion9 posicio10 posicio10"
        "posicio11 posicio11 posicio12 posicio12"
        "widget-1 widget-1 widget-2 widget-2"
        "widget-3 widget-3 widget-4 widget-4"
        "widget-5 widget-5 widget-5 widget-5"
        "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"
                    "ceremo1 ceremo1 ceremo1 ceremo1"
                    "ceremo2 ceremo2 ceremo2 ceremo2"
                    "posicion5 posicion5 posicion5 posicion5"
                    "posicion6 posicion6 posicion6 posicion6"
                    "posicion8 posicion8 posicion8 posicion8"
                    "posicion7 posicion7 posicion7 posicion7"
                    "posicion9 posicion9 posicion9 posicion9"
                    "posicio10 posicio10 posicio10 posicio10"
                    "posicio12 posicio12 posicio12 posicio12"
                    "posicio11 posicio11 posicio11 posicio11"
                    "widget-1 widget-1 widget-1 widget-1"
                    "widget-2 widget-2 widget-2 widget-2"
                    "widget-4 widget-4 widget-4 widget-4"
                    "widget-3 widget-3 widget-3 widget-3"
                    "widget-5 widget-5 widget-5 widget-5"
                    "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;
     } 
 
.text6 { 
    font-size: 16px; 

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

.titulo img{
    width: 40%;


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

.posicio11 img{
width: 50%;
}

.widget-2 img{
    width: 50%;
}

.widget-3 img {
    width: 50%;
}

}