body{
  font-family: 'Roboto', sans-serif;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.img1{
  width:20%; 
  margin: 0px auto;
}


.img2{
  padding-top: 3%;
  width:70%; 
  margin: 0px auto;
}

.img5{
  width:25%; 
  margin: 0px auto;
}

.titulo{
  font-family: 'Lulo Clean One Bold';
  text-align: center;
  font-size: 24px;
  color: rgb(6, 55, 109);
  padding-top: 5%;
}

.titulo2{
  font-family: 'Lulo Clean One Bold';
  text-align: center;
  font-size: 24px;
  color: rgb(6, 55, 109);
}


.titulo4{
  font-family: 'Lulo Clean One Bold';
  text-align: center;
  font-size: 24px;
  color: rgb(6, 55, 109);
  padding-top: 5%;
}

.texto{
  text-align: justify;
 padding: 10%;
 color: rgb(6, 55, 109);

}

.texto1{
  text-align: justify;
 padding: 10%;
 color: rgb(6, 55, 109);

}

.texto3{
  text-align: justify;
 color: rgb(6, 55, 109);
 font-size: 15px;
 padding-left: 15%;
 padding-right: 15%;
}




.textof{
  text-align: center;
  color: rgb(6, 55, 109);
  font-family: 'Lulo Clean One Bold';
  font-size: 21px;
}




.organi{
  width:90%; 
  margin: 0px auto;
}

.grid-container>* {
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template:
      "header" auto
      "navbar" auto
      "section9" 200px
      "section10" auto
      "section11" auto
      "section12" auto
      "section13" auto
      "section14" auto
      "section15" auto
      "footer";

  .header {
      grid-area: header;
      background-color: rgba(255, 255, 255, 0.74);
  }

  .navbar {
      grid-area: navbar;
      background-color: rgba(255, 255, 255, 0.74);
  }


 .section9 {
  grid-area: section9;
  background:  url("../img/imagen1Nosotros.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 65%;
}

.section10 {
    grid-area: section10;
    background:  url("../img/fondoorganigrama1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

 }

.section11 {
      grid-area: section11;
      color: rgb(6, 55, 109);
}

.section12 {
  grid-area: section12;

}

.section13 {
  grid-area: section13;
  padding-bottom: 9%;
}

.section14 {
  grid-area: section14;

}

.section15 {
  grid-area: section15;

}

.footer {
  grid-area: footer;
  background-color: rgb(255, 255, 255);
}

@media (min-width:576px) {
  grid-template:
      "header header header" auto
      "navbar navbar navbar" auto
      "section9 section9 section9" auto
      "section10 section10 section10" auto
      "section11 section11 section11" auto
      "section12 section12 section12" auto
      "section13 section14 section15" auto
      "footer footer footer" 
}


@media (min-width:768px) {
  grid-template:
      "header header header" auto
      "navbar navbar navbar" auto
      "section9 section9 section9" 230px
      "section10 section10 section10" auto
      "section11 section11 section11" auto
      "section12 section12 section12" auto
      "section13 section14 section15" auto
      "footer footer footer" 
}


@media (min-width:1024px) {
  grid-template:
      "header header header" auto
      "navbar navbar navbar" auto
      "section9 section9 section9" 280px
      "section10 section10 section10" auto
      "section11 section11 section11" auto
      "section12 section12 section12" auto
      "section13 section14 section15" auto
      "footer footer footer" 
}


@media (min-width:1200px) {
  grid-template:
      "header header header" auto
      "navbar navbar navbar" auto
      "section9 section9 section9" 350px
      "section10 section10 section10" auto
      "section11 section11 section11" auto
      "section12 section12 section12" auto
      "section13 section14 section15" auto
      "footer footer footer" 
}

@media (min-width:1299px) {
  grid-template:
      "header header header" auto
      "navbar navbar navbar" auto
      "section9 section9 section9" 280px
      "section10 section10 section10" auto
      "section11 section11 section11" auto
      "section12 section12 section12" auto
      "section13 section14 section15" auto
      "footer footer footer" 
}


}


@media (min-width: 576px) {
  body{background: rgb(255, 255, 255);}
  
  .identifica{
    background: rgb(0, 255, 0);
  }
  
  .img1{
    width:37%; 
    margin: 0px auto;
  }


  .textof{
    text-align: center;
    color: rgb(6, 55, 109);
    font-family: 'Lulo Clean One Bold';
    font-size: 17px;
    padding: 4%;
  }


  .texto{
    text-align: justify;
   padding: 0%;
   padding-left: 15%;
   font-size: 11px;
  }

  .texto1{
    text-align: justify;
   font-size: 11px;
  }

  .titulo{
    padding-left: 15%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 28px;
  }


 

  }


@media (min-width: 768px) {
  body{background: rgb(255, 255, 255);}
  
  .identifica{
    background: rgb(38, 0, 255);
  }
  
  .textof{
    text-align: center;
    color: rgb(6, 55, 109);
    font-family: 'Lulo Clean One Bold';
    font-size: 15px;
  }


  .organi{
    width:65%; 
    margin: 0px auto;
  }
  
  .img2{
    padding-top: 3%;
    width:85%; 
    margin: 0px auto;
  }


  .texto{
    text-align: justify;
   padding: 0%;
   padding-left: 15%;
   font-size: 15px;
  }

  .texto1{
    text-align: justify;
   font-size: 15px;
  }

  .texto3{
    text-align: justify;
   font-size: 12px;
  }


  .titulo{
    padding-left: 15%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 32px;
  }


  .titulo2{
    font-size: 32px;
  }



  .img5{
    width:28%; 
    margin: 0px auto;
  }


  }


@media (min-width: 1024px) {
  body{background: rgb(255, 255, 255);}
  
  .identifica{
    background: rgb(255, 0, 0);
  }
  
  .textof{
    text-align: center;
    color: rgb(6, 55, 109);
    font-family: 'Lulo Clean One Bold';
    font-size: 20px;
  }

  .texto3{
    text-align: justify;
   font-size: 15px;
  }

  .organi{
    width:55%; 
    margin: 0px auto;
  }
  

  .texto{
    text-align: justify;
   padding: 0%;
   padding-left: 15%;
   font-size: 18px;
  }


  .texto1{
  text-align: justify;
   font-size: 20px;
   padding-left: 10%;
  }


  .titulo{
    padding-left: 15%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 35px;
  }

  .titulo2{
    font-size: 40px;
  }

  .img2{
    padding-top: 3%;
    width:78%; 
    margin: 0px auto;
  }


  .img1{
    width:28%; 
    margin: 0px auto;
  }


  .img5{
    width:25%; 
    margin: 0px auto;
  }

  }

  @media (min-width: 1200px) {
    body{background: rgb(255, 255, 255);}
    
    .identifica{
      background: rgb(255, 0, 0);
    }
    
    .organi{
      width:45%; 
      margin: 0px auto;
    }
    
  
    .texto{
      text-align: justify;
     padding: 0%;
     padding-left: 15%;
     font-size: 18px;
    }
  
  
    .texto1{
    text-align: justify;
     font-size: 24px;
     padding-left: 10%;
    }
  
  
    .titulo{
      padding-left: 15%;
      margin-top: 5%;
      margin-bottom: 5%;
      font-size: 35px;
    }
  
    .titulo2{
      font-size: 40px;
    }
  
    .img2{
      padding-top: 3%;
      width:40%; 
      margin: 0px auto;
    }
  
  
    .img1{
      width:18%; 
      margin: 0px auto;
    }
  
  
    .img5{
      width:20%; 
      margin: 0px auto;
    }
  
    }

    @media (min-width: 1299px) {
      body{background: rgb(255, 255, 255);}
      
      .identifica{
        background: rgb(255, 0, 0);
      }
      
      .organi{
        width:60%; 
        margin: 0px auto;
      }
      
    
      .texto{
        text-align: justify;
       padding: 0%;
       padding-left: 15%;
       font-size: 18px;
      }
    
    
      .texto1{
        text-align: center;
       padding: 5%;
       font-size: 18px;
      }
    
    
      .titulo{
        padding-left: 15%;
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 35px;
      }
    
      .titulo2{
        font-size: 40px;
      }
    
      .img2{
        padding-top: 3%;
        width:73%; 
        margin: 0px auto;
      }
    
    
      .img1{
        width:18%; 
        margin: 0px auto;
      }
    
    
      .img5{
        width:18%; 
        margin: 0px auto;
      }


      .img4{
        width:38%; 
        margin: 0px auto;
      }

      .textof{
        text-align: center;
        color: rgb(6, 55, 109);
        font-family: 'Lulo Clean One Bold';
        font-size: 18px;
      }

    
      }