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: 13px;
 }

 /*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(7, auto);
    grid-template-areas: "header header header header"
                         "contenido contenido contenido-1 contenido-1"
                        "contefila2 contefila2 contefila3 contefila3"
                        "contenido-4 contenido-4 contenido-5 contenido-5"
                        "contenido-2 contenido-2 contenido-3 contenido-3"
                         "widget-1 widget-1 widget-2 widget-2"
                         "footer footer footer footer";
}
.contenedor > div,
.contenedor .header,
.contenedor .contenido,
.contenedor .contenido-1,
.contenedor .contefila2
.contenedor .contefila3
.contenedor .contenido-4,
.contenedor .contenido-2,
.contenedor .contenido-3,
.contenedor .contenido-5, 
.contenedor .widget-1,
.contenedor .widget-2, 
.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; 
    margin-top: 11px;
    padding-top: 110px;
    height: 300px;      
    display: flex      ;
      justify-content: center; 
    background-image: url(imagen/gersonb.jpg);  
}   
 
.contenedor .contefila2 {
    grid-area: contefila2;
    color: black;
}

.contenedor .contefila3 {
    grid-area: contefila3;
    color: black;
}

.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 .widget-1{ 
    grid-area: widget-1;
    text-align: left;
}
.contenedor .widget-2 { 
    grid-area: widget-2;
    text-align: center;
}
  .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: 110%;
    height: 100%;
}

/* Fin de hacer que el video sea responsive*/

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

 .contenedor {
 grid-template-areas:
"header header header header"
"contenido contenido contenido contenido"
"contenido-1 contenido-1 contenido-1 contenido-1"
"contefila2 contefila2 contefila2 contefila2"
"contefila3 contefila3 contefila3 contefila3"
"contenido-4 contenido-4 contenido-4 contenido-4"
"contenido-5 contenido-5 contenido-5 contenido-5"
"contenido-2 contenido-2 contenido-2 contenido-2"
"contenido-3 contenido-3 contenido-3 contenido-3"
"sidebar sidebar sidebar sidebar"
"widget-1 widget-1 widget-1 widget-1"
"widget-2 widget-2 widget-2 widget-2"
 "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;
      } 
          
}