*{
height: 100%;
width: 100%;
padding:0;
margin: 0;
overflow-x: hidden;
overflow-y: scroll;

}

body{

    overflow-y: hidden;

}

.trecursos{
margin-top: 10%;
  font-size: 6em;
position: absolute;
z-index: 3;
  color: #585af6;
  font-family: 'Oswald', sans-serif;
  font-weight: bolder;
line-height: 1.5em;
overflow-y: hidden;
}

.fondoblanco{
  position: absolute;
  z-index: 2;
  width: 45%;
  height: 100vh;
    background-color:rgba(255, 254, 254, 0.6);
    overflow-y: hidden;
}

.fondosr{
  height: 100%;
  overflow-y: hidden;
}


#slide5{
background-image: url(imagenes1/fondorec1.jpg);
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: hidden;
}

#slide6{
background-image: url(imagenes1/fondorec2.jpg);
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: hidden;
}

#slide7{
background-image: url(imagenes1/fondorec3.jpg);
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: hidden;
}

.parrafosr{
  width: 50%;
  height: 50vh;
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight:bolder;
  text-align: right;
  font-size: 1.2em;
  margin-top: 10%;
  margin-left: 45%;
  padding-right: 5%;
  padding-top: 5%;
  background-color: rgba(88, 90, 246, 0.5);
overflow-y: hidden;

}
.navi{
  overflow-y: hidden;
}

nav{
  overflow-y: hidden;
}

ul{
  overflow-y: hidden;
}

li{
  overflow-y: hidden;
}

h2{
    overflow-y: hidden;
}

p{
    overflow-y: hidden;
}

.fondoblanco2{
  position: absolute;
  z-index: 2;
  width: 45%;
  height: 100vh;
  margin-left: 55%;
    background-color:rgba(255, 254, 254, 0.6);
    overflow-y: hidden;
}

.torgani{
  margin-top: 10%;
  font-size: 6em;
position: absolute;
z-index: 3;
  color: #585af6;
  font-family: 'Oswald', sans-serif;
  font-weight: bolder;
line-height: 1.5em;
overflow-y: hidden;
text-align: right;
}

.fondoorgani{
  background-image: url(imagenes1/organizacion.jpg);
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-y: hidden;
    position: absolute;
    z-index: 1;
}

.parrafoargani{
  width: 50%;
  height: 28vh;
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight:bold;
  font-size: 1em;
  margin-top: 10%;
  padding-top: 5%;
  background-color: rgba(88, 90, 246, 0.5);
overflow-y: hidden;
padding-left: 5%;
}


#type {
      font-family: 'Oswald', sans-serif;
      font-size: 1em;
	display: inline-block;
  color: white;
  overflow-y: hidden;
  position: absolute;
  padding-left: 5%;
  z-index: 4;
width: 50%;
height: 10%;;
  background-color: rgba(88, 90, 246, 0.5);
  text-decoration: underline;
  text-decoration-color: red;
}

.typewriter-text {
    display: inline-block;
  	overflow: hidden;
  	letter-spacing: 2px;
 	animation: typing 5s steps(30, end) infinite;
    white-space: nowrap;
    box-sizing: border-box;
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    z-index: 4;
}

.typewriter-text span{
  color: red;
}

@keyframes typing {
    from {
        width: 0%
    }
    to {
        width: 100%
    }
}

@keyframes blink {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: orange;
    }
}

.grid{
  display:grid;
position: absolute;
  grid-template-columns: 50% 50% ;
  gap: 0;
z-index: 1;
  justify-content: center;
  overflow-y: hidden;
margin-top: 100vh;
}

.grid1{
  overflow-y: hidden;
  background-color:rgba(255, 254, 254, 0.6);
}

.grid2{
  overflow-y: hidden;
  background-color:rgba(255, 254, 254, 0.6);
}

.cuadrogrid1{
  background-color: rgba(88, 90, 246, 0.3);
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 5;
  overflow-y: hidden;
}

.cuadrogrid2{
  background-color: rgba(88, 90, 246, 0.3);
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 5;
  overflow-y: hidden;

}

.h2grid2{
  margin-top: 10%;
  font-size: 6em;
position: absolute;
z-index: 3;
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight: bolder;
line-height: 1em;
overflow-y: hidden;
text-align: right;
}

.h2grid1{
  margin-top: 10%;
  font-size: 6em;
position: absolute;
z-index: 3;
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight: bolder;
line-height: 1em;
overflow-y: hidden;
}

.parrafogrid1{
color: white;
  font-family: 'Oswald', sans-serif;
  font-weight:400;
  font-size: 1em;
  margin-top: 45%;
overflow-y: hidden;
padding-left: 5%;
}

.parrafogrid2{
  width: 95%;
color: white;
  font-family: 'Oswald', sans-serif;
  font-weight:400;
  font-size: 1em;
  margin-top: 45%;
overflow-y: hidden;
margin-right: 5%;
text-align: right;

}



.textoorga {
  margin-top: 10%;
  font-size: 6em;
position: absolute;
z-index: 6;
  color: #585af6;
  font-family: 'Oswald', sans-serif;
  font-weight: bolder;
line-height: 1.5em;
overflow-y: hidden;
display: none;
}

.trecursos2{
margin-top: 10%;
  font-size: 6em;
position: absolute;
z-index: 3;
  color: #585af6;
  font-family: 'Oswald', sans-serif;
  font-weight: bolder;
line-height: 1.5em;
overflow-y: hidden;
display: none;
}

#marqre{
     width: 100%;
    margin: 0 auto;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      animation: marquee;
      animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
  }

  @keyframes marquee {
      0%   { text-indent: 1em }
      100% { text-indent: -10em }
  }


.lista-gente{
  background-color: rgba(88, 90, 246, 0.5);
display:none;
color: white;
width: 90%;
padding-left: 5%;
padding-right: 5%;

}

.lista-gente li{
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 1em;
display:none;
color: white;
height: 20%;
width: 90%;
padding-left: 5%;
padding-right: 5%;
}



.footer-recursos{
  height: 20vh;
  background-color: #DBDCDD;
  overflow-y: hidden;
  position: absolute;
  z-index: 7;
  bottom: 0;
}

.foot1-recursos{
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #585af6;
    position: absolute;
    z-index: 8;
    overflow-y: hidden;
    margin-top: 2%;
    margin-left: 2%;
}


.foot3-recursos {
  width: 10%;
  height: auto;
  text-align: right;
  position: absolute;
  z-index: 8;
  overflow-y: hidden;
  margin-left: 85%;
  margin-top: 6vh;
}

.foot3-recursos img {
  width: 50%;
  height: auto;
}

@media screen and (max-width: 900px){
  .foot3-recursos img{
    width: 100%;
  }

  .foot3-recursos {
    margin-top: 4vh;
  }
}

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

  .foot3-recursos {
    margin-left: 2%;
    text-align: left;
    margin-top: 25%;

  }
}

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

  .footer-recursos{
  height:  30vh;
  }

  .foot3-recursos {
width: 20%;
    margin-top: 60%;

  }

  .foot1-recursos{

      font-size: 1.2em;

      margin-top: 5%;

  }




}








@media screen and (max-width: 1173px){
.textoorga{
  display: block;
  padding-top: 40%;
}

.trecursos2{
  display: block;
padding-top: 40%;
}

.trecursos{
  display: none;
}

.torgani{
  display: none;
}

.fondoblanco2{
  display: none;
}
.parrafoargani{
  width: 100%;
  font-size: 1.4em;
  margin-top: 10%;

}
#type {
width: 100%;

}
.textoorga{
  padding-top: 50%;
}

.h2grid2{
    font-size: 4em;

}

}

@media screen and (max-width: 912px){
  .fondoblanco{
    display:none;
  }

  .parrafosr{
    width: 100vw;
    height: 50vh;

    text-align: left;
    font-size: 1.4em;
    margin-top: 15%;
    margin-left: 0%;
    padding-right: 0%;
 padding-left: 15%;

  }

  #logor{
    width: 20%;
    height: auto;
  }


  .trecursos2{
  padding-top: 70%;
  }

  .textoorga{
    padding-top: 70%;
  }
  .grid{
    grid-template-columns: 100% ;
  }
  .parrafogrid1 br{
    display: none;
  }
  .parrafogrid2 br{
    display: none;


  }

  .h2grid2{
      text-align: left;
  }

    .parrafogrid2{
      text-align: left;
    }

.cuadrogrid2{
  width: 100%;
  height: 100vh;

}
  .cuadrogrid1{
    width: 100%;
    height: 100vh;
    }

    .parrafogrid2{
      text-align: left;
      margin-top: 30%;
      width: 90%;
      padding-right: 5%;
      padding-left: 5%;
    }
    .parrafogrid1{
      text-align: left;
      margin-top: 30%;
      width: 90%;
      padding-right: 5%;
      padding-left: 5%;
    }
    .parrafosr{
      margin-top: 20%;
      height: 35vh;
      text-align: left;
      margin-left: 0%;
        padding-right: 0%;
        padding-left: 5%;
    }
    .grid1 .grid2{
      height: 150vh;
    }

    .grid{
      height: 200vh;
    }


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

      #logor{
        width: 25%;
        height: auto;
      }


}

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

  .typewriter-text{
    visibility: hidden;
  }

  #type{
    visibility: hidden;
  }

  .lista-gente {
    display: block;
    height: 30%;
  }

  .lista-gente li{
    display: block;
  }

  .textoorga{
    padding-top: 110%;
  }
  .trecursos2{
  padding-top: 110%;

  }


}

@media screen and (max-width: 620px){
  .parrafogrid2{
    text-align: left;
    margin-top: 40%;
  }
  .parrafogrid1{
    text-align: left;
    margin-top: 40%;
  }
}

@media screen and (max-width: 550px){
  .parrafosr{
    margin-top: 40%;
    height: 50%;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
  }


  .parrafoargani{
    width: 90%;
    height: 35vh;

    margin-top: 10%;
    padding-top: 5%;
padding-right: 5%;
  padding-left: 5%;

  }

  #logor{
    width: 40%;
    height: auto;
  }

  .textoorga{
    padding-top: 130%;
  }
  .trecursos2{
  padding-top: 130%;

  }

  .parrafogrid2{
    text-align: left;
    margin-top: 60%;
  }
  .parrafogrid1{
    text-align: left;
    margin-top: 60%;
  }



}

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

  .textoorga{
    padding-top: 150%;
  }
  .trecursos2{
  padding-top: 150%;

  }


}

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

  .textoorga{
    padding-top: 160%;
  }
  .trecursos2{
  padding-top: 160%;

  }

  .parrafosr{
    margin-top: 55%;
    height: 50%;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
  }


}



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

  .textoorga{
    padding-top: 190%;
  }
  .trecursos2{
  padding-top: 190%;

  }

  .h2grid1{
    font-size: 3.7em;
  }






.parrafoargani{

  height: 40vh;


}

.textoorga{
  padding-top: 200%;
}

.trecursos2{
padding-top: 200%;

}


.foot3-recursos {
width: 10%;
  margin-top: 30%;

}

.foot1-recursos{

    font-size: 0.8em;

    margin-top: 3%;

}

.footer-recursos{
height: 17vh;
}




}

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

  .textoorga{
    padding-top: 210%;
  }

  .parrafoargani{

    height: 45vh;


  }

  .trecursos2{
  padding-top: 210%;

  }


}


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

  .textoorga{
    padding-top: 260%;
  }
  .trecursos2{
  padding-top: 225%;

  }

  .lista-gente li{
height: 30%;
  }

.parrafogrid2{
  margin-top: 85%;
}

.parrafoargani{

  height: 50vh;


}




}

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

  .lista-gente{
    display:none;
  }



  .parrafoargani{

    height: 60vh;
  }


  .parrafoargani span{
  display:none;
  }

  .parrafosr{
    margin-top: 55%;
    height: 100vh;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
      font-size: 1em;
  }

  .foot3-recursos {
  width: 15%;
  margin-top:25%;
  }



}






@media screen and (max-height: 660px){
  .footer-recursos{
    display: none;
  }
}



@media screen and (max-height: 850px){

.lista-gente{
  display:none;
}



.parrafoargani{

  height: 60vh;


}


.parrafoargani span{

display:none;


}

.parrafosr{
  margin-top: 55%;
  height: 100vh;
  width: 90%;
  padding-right: 5%;
  padding-left: 5%;
    font-size: 1em;
}

.foot3-recursos {
width: 15%;
margin-top:25%;
}





}


@media screen and (max-height: 639px) and (max-width: 359px){

  .lista-gente{
    display:none;
  }



  .parrafoargani{

    height: 60vh;


  }


  .parrafoargani span{

  display:none;


  }

  .parrafosr{
    margin-top: 55%;
    height: 100vh;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
      font-size: 1em;
  }

  .foot3-recursos {
  width: 15%;
  margin-top:25%;
  }
}



@media screen and (max-height: 568px) and (max-width: 320px){

.parrafogrid2 span{
  display: none;
}
}