@media (min-width: 768px) {
  .button-56 {
    padding: 20px;
  }
}
#volver1{
  position: fixed;
  left: 6vh;
  top: 90vh;
  
}
.button-50 {
  appearance: button;
  background-color: #4A89DC;
  background-image: none;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #CCD1D9;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 5px 10px 0;
  overflow: visible;
  padding: 12px 40px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-50:focus {
  text-decoration: none;
}

.button-50:hover {
  text-decoration: none;
}

.button-50:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50:not([disabled]):active {
  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .button-50 {
    padding: 12px 50px;
  }
}
/*
*/
html,body{
  margin:0;
  scroll-behavior:smooth;
}
#titulo{
  background-color:#434A54 ;
  height: 60px;
 font-size:5vw;
  color: #CCD1D9;
  text-align: center;
 font-family: vesper libre;
}
#Subtitulo {
  font-size: 3vw;
  margin-top:0.5vh;
  font-family: vesper libre;
  text-align: center;
  color:black;}

#titulo1{
  font-family: Bebas Neue;
text-align:center;
  color:black;
 background-color: rgb(0,0,0,0.5);
  font-size:5vw;
  text-shadow: 1px 1px 1px white;
  position: absolute; width: 100%; top:0%; right: 3%;
}
#titulo2{
  font-family: Bebas Neue;
text-align:center;
  color: black;
 background-color: rgb(0,0,0,0.5);
  font-size:5vw;
  text-shadow: 1px 1px 1px white;
  position: width: 100%; top:30%; right: 3%;
}
#titulo3{
font-family: Bebas Neue;
text-align:center;
  color:black;
 background-color: rgb(0,0,0,0.5);
  font-size:5vw;
  text-shadow: 1px 1px 1px white;
  position:  width: 100%; top:40%; right: 3%;}
#titulo4{
    font-family: Bebas Neue;
text-align:center;
  color:black;
 background-color: rgb(0,0,0,0.5);
  font-size:5vw;
  text-shadow: 1px 1px 1px white;
  position: absolute; width: 100%; top:75%; right: 3%;
}
#titulo5{
  font-family: Bebas Neue;
text-align:center;
  color:black;
 background-color: rgb(0,0,0,0.5);
  font-size:5vw;
  text-shadow: 1px 1px 1px white;
  top: 100%;
}

#Subtitulo2 {
  font-size: 3vw;
  margin-top:0.5vh;
  font-family: vesper libre;
  text-align: center;
  color:white;}

#portada{
  width: 100vw;
  height: 100vh;
  text-align: center;
background-color:	#4FC1E9 ;
 background-position: center;
  background-size: cover;
}

#fotodelaportada {
	width: 30vw;
	height: 60vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid black;
  position:absolute;top:29%;right:30%;
}

#perfil{
   font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:5vw;
position: absolute;
  width: 100vw; 
  heigth: 100vh;
 background-color:#AAB2BD;

}


#perfilfoto{
 position:absolute;top:12vh;left:10%;
  width: 30vw;  
	height: 50vh;
}
.texto1{
  font-family: Bebas Neue;
  color:black;
  font-size:20px;
  position:relative;
  width: 50vw;
  top:100%;
  left:50%;

}

#mipasoporelIllia{
 background-color:#AAB2BD;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
}
  #mipaso1 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:90%;right:0%;
}

#mipaso2 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
  top:90%;right:30;
}

#mipaso3 {
	width: 20vw;
	height: 20vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
 top:100%;left:70%;
}

#mipaso4 {
	width: 20vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;right:100%;
}

#mipaso5 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

#mipaso6 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

#mipaso7 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

#mipaso8 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

#mipaso9 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

#mipaso10 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
  top:100%;
}
#mipaso11 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}
#mipaso12 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}
#audiovisual{
  width: 100vw;
  height: 100vh;
  background-color:#AAB2BD;
background-position: center;
  background-size: cover;

}
.video2{
position: fixed; 
right: 0; bottom: 0;
width: 100vw; 
height: 100vh; 
background-position: absolute;
background-size: relative;
}
#futuro{
  background-color:#AAB2BD;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  
}
 .texto2 {
font-family: Bebas Neue;
text-align:center;
  color:black;
  font-size:3vw;
  position: absolute; width: 100%; 
   top: 80%; right: 0%; left: 0%;

}

#random{
   
  background-color: #AAB2BD;
  width: 100vw;
  height: 100vh;
  font-family: Bebas Neue;
text-align:center;
  font-size:5vw;
  text-shadow: 1px 1px 1px darkred;
  position: absolute;top: 100%;
}
#random1 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:90%;right:0%;
}

#random2 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
  top:90%;right:30;
}

#random3 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
 top:100%;left:70%;
}

#random4 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;right:100%;
}

#random5 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

#random6 {
	width: 17vw;
	height: 30vh;
	margin: 15px;
	transition: transform 1s;
	border: 5px solid #000;
top:100%;
}

  .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}