* {
    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: 100%;
    height: 4px;
    background: orange;
    margin: 10px 1px;
    /*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);
}
.text-tit {
text-align: center; 
color: rgb(231, 162, 98);
font-size: 18px;

} 


 .text1 {
     text-align: justify;
     color: rgb(238, 220, 141);
     font-size: 16px;
    line-height: 1.6;
    margin: 10px 10px 10px 10px;
 }
 
 .text2 {
    text-align: center;
    color: rgb(231, 162, 98);
    font-size: 15px;
    line-height: 1.6;
}


  

 /*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(10, auto);
     grid-template-areas:
         "header header header header"
         "titulo titulo1 titulo1 titulo1"
         "posicion1 posicion2 posicion2 posicion2" 
         "posicion3 posicion4 posicion4 posicion4" 
         "posicion5 posicion6 posicion6 posicion6"
        "posicion7 posicion8 posicion8 posicion8"
        "posicion9 posicio10 posicio10 posicio10"
         "widget-1 widget-2 widget-2 widget-2"
         "widget-3 widget-4 widget-4 widget-4"
         "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 .posicion7,
 .contenedor .posicion8,
 .contenedor .posicion9,
 .contenedor .posicio10,
 .contenedor .widget-1,
 .contenedor .widget-2,
 .contenedor .widget-3,
 .contenedor .widget-4,
 .contenedor .footer {
   margin: 0; 
   margin-top: 10px;
   display: flex; /*Hace a los elementos flexibles*/
    align-items: center; /*centra los elementos horizontalmente*/
    justify-content: center; /*centra los elementos verticalmente*/
 }

 .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; 
      }

 .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 .posicio10 {
    grid-area: posicio10;

}
 .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;  
}
 .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 posicion4 posicion4 posicion4" 
            "posicion5 posicion6 posicion6 posicion6"
            "posicion7 posicion8 posicion8 posicion8"
            "posicion9 posicio10 posicio10 posicio10"
            "widget-1 widget-2 widget-2 widget-2"
            "widget-3 widget-4 widget-4 widget-4"
            "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;
     }
     .text1 {
         text-align: justify;
         color: rgb(78, 182, 176);
         font-size: 14px;
     }
    .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"
                "posicio10 posicio10 posicio10 posicio10"
                "widget-1 widget-1 widget-1 widget-1"
                "widget-2 widget-2 widget-2 widget-2"
                "widget-3 widget-3 widget-3 widget-3"
                "widget-4 widget-4 widget-4 widget-4" 
                "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;
     } 
 

     .text1 {
         text-align: justify;
         color: wheat;
         font-size: 14px;
     }
.contenedor .header { 
    padding: 35px;
    /*altura del menu*/
}/*
.logo1 img{
    width: 100%;
}*/
}