body {
    background: rgb(3, 38, 56); /*color de fondo de la web*/
    color: rgb(236, 190, 65);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, 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: thin;
 }

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

a:visited {
    color: rgb(246, 239, 51);
}
.p2 {
text-align: center; 
color: wheat;
font-size: 18px;
}
.p1{
    text-align: center; 
    color: wheat;
}
.p2a{
    text-align: center;
        color: wheat;
        font-size: 13px;
}
.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(6, auto);
    grid-template-areas: "header header header header"
                         "contenido contenido contenido-1 contenido-1"
                        "contenido-2 contenido-2 contenido-3 contenido-3"
                        "contenido-4 contenido-4 contenido-5 contenido-5"
                        "contenido-6 contenido-6 contenido-7 contenido-7" 
                        "contenido-8 contenido-8 contenido-9 contenido-9"
                         "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 .contenido,
.contenedor .contenido-1,
.contenedor .contenido-2,
.contenedor .contenido-3,
.contenedor .contenido-4,
.contenedor .contenido-5,
.contenedor .contenido-6,
.contenedor .contenido-7,
.contenedor .contenido-8,
.contenedor .contenido-9,
.contenedor .widget-1,
.contenedor .widget-2, 
.contenedor .widget-3,
.contenedor .widget-4,
.contenedor .widget-5,
.contenedor .footer { 
    margin-top: 10px;
    border-radius: 4px;
    color: #fff;
    padding: 5px;   
}
 
.contenedor .header { 
    background: #2d1e05;
    grid-area: header;  
    padding: 35px; }
      
.contenedor .contenido {
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: -10px;  
    
    grid-area:contenido; 

}
 
.machu img {
     width: 100%; 
border-radius: 15px;


 }
.contenedor .contenido-1 { 
    grid-area: contenido-1;   
    display: flex      ;
      justify-content: center;
    align-items: center; 
}   
.contenedor .contenido-2 { 
    grid-area: contenido-2;
    color: black;
}

.contenedor .contenido-3 {
     
    grid-area: contenido-3;
    color: black;
}

.contenedor .contenido-4 { 
    grid-area: contenido-4;
    color: black;
}

.contenedor .contenido-5 { 
    grid-area: contenido-5;
    color: black;
} 

.contenedor .contenido-6 {
    grid-area: contenido-6;
    color: black;
}

.contenedor .contenido-7 {
    grid-area: contenido-7;
    color: black;
}

.contenedor .contenido-8 {
    grid-area: contenido-8;
    color: black;
}

.contenedor .contenido-9 {
    grid-area: contenido-9;
    color: black;
}


.contenedor .widget-1{ 
    grid-area: widget-1;
    text-align: left;
}
.contenedor .widget-2 { 
    grid-area: widget-2;
    text-align: center;
}

.contenedor .widget-3 {
    grid-area: widget-3;
    text-align: left;
}

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

.contenedor .widget-5 {
    grid-area: widget-5;
    text-align: center;
    font-size: x-large;
}
 



  .contenedor .footer {
      background: #040d1f;
      grid-area: footer;
      text-align: center;
      font-size: 13px;
      display: inline-block;
  }
  .text2a {
      font-size:  14px;
  }
/*FIN DE LA GRID*/

/*hace responsive los videos de Youtube*/

.videoyoutube {
    width: 100%;
    margin-top: 10px;
}

.videoyoutube {
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    position: relative;
}

.videoyoutube iframe {
    
    border-radius: 17px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 10px;
    width: 95%;
    height: 100%;
}

/* Fin de hacer que el video sea responsive*/
@media screen and (max-width: 620px) {
.contenedor {
    grid-template-areas:
"header header header header"
"contenido contenido contenido-1 contenido-1"
"contenido-2 contenido-2 contenido-2 contenido-2"
"contenido-3 contenido-3 contenido-3 contenido-3"
 "contenido-4 contenido-4 contenido-4 contenido-4"
"contenido-5 contenido-5 contenido-5 contenido-5"
"contenido-6 contenido-6 contenido-6 contenido-6"
"contenido-7 contenido-7 contenido-7 contenido-7"
"contenido-8 contenido-8 contenido-8 contenido-8"
"contenido-9 contenido-9 contenido-9 contenido-9"
"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"
"widget-5 widget-5 widget-5 widget-5"
"footer footer footer footer";

}
   /*
.logo img {
    margin-left: -115px;
}    */

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

      .univ1 img {
          display: none;
      }

      .odo1 img {
          display: none;
      }

      .yerk1 img {
          width: 80%;
          border-radius: 8px;

      }

      .text1 {
          text-align: justify;
          color: wheat;
          font-size: 14px;
      }  
.contenido-1 img{
    width: 80%;
    margin-left: 20px;
} 

}