html{
  scroll-behavior:smooth;
}
body {   
  background-color: #f95738; 
  font-family: 'Fredoka One', cursive; 
  font-size: 5vw; 
  text-align: center;
  margin:0;
  }
#menu{
  background-color:#FFF;
  width:97.5vw;
  height:3vw;
  padding: 0.5vw;
  position:fixed;
}
#botonpaso { 
  font-size:2vw;
  background-color:#690f70;
  opacity: 90%;
  margin-left:0vw;
  color:#d8e2dc;
  width:20vw;
  position:fixed;
   transition:2s;
} 
#botonav {
  font-size:2vw;
  background-color:#690f70;
  opacity: 90%;
  margin-left:25vw;
  width:20vw;
  color:#d8e2dc;
  position:fixed;
   transition:2s;
}
#botonfut {
  font-size:2vw;
  background-color:#690f70;
  opacity: 90%;
  margin-left:50vw;
  color:#d8e2dc;
  width:20vw;
  position:fixed;
  transition:2s;
}
#botonrandom{
  font-size:2vw;
  background-color:#690f70;
  opacity: 90%;
  margin-left:75vw;
  color:#d8e2dc;
  width:20vw;
  position:fixed;
   transition:2s;
}
#botonpaso:hover{
  background-color: #415397;
  transition: 2s;
  border-radius:2vw;
  color:;
}
#botonav:hover {
  background-color: #415397;
  transition: 2s;
   border-radius:2vw;
}
#botonfut:hover {
  background-color: #415397;
  transition: 2s;
   border-radius:2vw;
  }
 #botonrandom:hover {
  background-color: #415397;
  transition: 2s; 
    border-radius:2vw;
 }
#contenido{
  padding:5vw;
}
img{
  border-radius: 10%;
  display:block;
}
.info{
  background-color: #FFF;
  border-radius:2vw;
  font-size:3vw;
  text-align: left;
  padding:5vw;
  margin-right:50px;
  margin-left: 50px;
  margin-bottom:10vw;
  text-shadow: 1.5px 3px 7px #310;
}
#contenedor{
  text-align: left;
  width: 80%;
  margin-top:10vw;
  }
.red {
 font-family: 'Stint Ultra Condensed', cursive;
  font-size: 4vw;
  background-color: #3067;
  padding: 2vw;
  width: 50%; 
  margin-left:2%;
  margin-bottom:7%;
  text-align: center; 
  border-radius:1vw;
  text-shadow: 2px 3px 5px #310;
  }
.red:hover{
  background-color:#415397;
  transition: 2s; 
  }
.invitacion{
  font-size:4vw;
  text-align: center;
}
 id{
  font-size:'Otomanopee One', sans-serif; 
  font-size:9vh;
  margin-bottom: 20%;
  margin-top: 10%;
  text-align: center;
  background-color:#3245;
  opacity: 80%;
  margin:5vw;
  border-radius:2vw; 
}
.mitad {
  float:left;
  widht:50%;
  max-width:50%;
}
.info:after {
  content: "";
  display: table;
  clear: both;
}
#illia{
  font-size:4vw; 
  background-color: #D62828;
  padding:1vw;
}
#seisanos{
  background-color:#F95738;
  font-family: 'Oswald', sans-serif;
  color:#FFF;
  font-size:3vw;
  margin-bottom:5vw;
  text-align: left;
  margin-top:2vw;
}
.textoder1{
  text-align: center;
  font-size: 2vw;
  margin-bottom: 10vw;
  font-family: "cambria";
 padding:8vw;
}
.textoizq{
  text-align: center;
  font-size: 2vw;
  margin-bottom: 7vw;
  font-family: "cambria";
  padding:8vw;
  color: white;
}
#AV{
  font-size:4vw;
  background-color: #07004d;
  color:#FFF;
  margin-top: 15vw;
}
#audiovisual{
   background-color:#F95738;
  font-family: 'Oswald', sans-serif;
  color:#000;
  font-size:3vw;
  margin-bottom:5vw;
  text-align: right;
  margin-top:2vw;
}
#futuro{
  font-size:4vw;
  background-color: #80a1d4;
  color:#000;
  margin-top: 8vw;
}
#mifut{
   background-color:#F95738;
  font-family: 'Oswald', sans-serif;
  color:#FFF;
  font-size:3vw;
  margin-bottom:5vw;
  text-align: left;
  margin-top:2vw;
  margin-right:6vw; 
}
#random{
   font-size:4vw;
  background-color: #a6002e;
  color:#FFF;
  margin-top: 10vw;
}
#ran{
  background-color:#F95738;
  font-family: 'Oswald', sans-serif;
  color:#000;
  font-size:3vw;
  margin-bottom:5vw;
  text-align: left;
  margin-top:2vw;
}
.flex-container {
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
   
    }

.flex-item:nth-child(1) {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(3) {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(4) {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }
.flex-container {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(4) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(5) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(6) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(7) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(8) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(9) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(10) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(11) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(12) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(13) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(14) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(15) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(16) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(17) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(18) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(19) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(20) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }