body{
  background-color:#666699
}
#zona1 {
  background-color: Black;
  color: white;
  font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%;  right: 80%; 
 border-radius: 5px;
}
#zona1:hover{
  background-color:White;
  color: Black;
   font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%;  right: 80%; 
 border-radius: 5px;
}
#zona1 a{
  text-decoration:none;
  color:#666699;
}
#zona2 {
 background-color: Black;
  color: white;
  font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%;  right: 65%; left: 21%; border-radius: 5px;
}
#zona2:hover{
  background-color:White;
  color: Black;
   font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%; right: 65%; left: 21%;  border-radius: 5px;
  }
#zona2 a{
  text-decoration:none;
  color:#666699;
   }
#zona3 {
   background-color: Black;
  color: white;
  font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%;right: 45%; left: 42%; 
 border-radius: 5px;
}
#zona3:hover{
  background-color:White;
  color: Black;
   font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%; right: 45%; left: 42%; 
}
#zona3 a{
  text-decoration:none;
  color:#666699;
   }
#zona4 {
 background-color: Black;
  color: white;
  font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%; right: 20%; left: 63%; 
  border-radius: 5px;
}
#zona4:hover{
  background-color:White;
  color: Black;
   font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%; right: 20%; left: 63%; 
}
#zona4 a{
  text-decoration:none;
  color:#666699;
   }
#zona5 {
  background-color: Black;
  color: white;
  font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%; right: 0%; left: 84%;
  border-radius: 5px;
   }
#zona5:hover{
  background-color:White;
  color: Black;
   font-size: 2vw;
  font-family: 'Roboto Slab', serif;
  text-align: center; 
  position: absolute; width: 20%; top: 1%; right: 0%; left: 84%;
   }
#zona5 a{
  text-decoration:none;
  color:#666699;
   }
.texto{font-family: 'Roboto Slab', serif;
  font-size:65px;
  position:absolute;
    text-align:center;top:15%;
  left:30%;right: 25%;
  }
#perfil{ 
 font-family: 'Roboto Slab', serif;
text-align:center;
  color:#6666cc;
  font-size:5vw;
  text-shadow: 1px 1px 1px White;
  background-color:Black;
  box-shadow: 1px 1px 2px #47476b;
position: absolute; width: 100%; top: 100%; right: 0%; left: 0%;}
#perfilfoto {
  position:absolute; width: 30%; top: 120%; left: 4%;right:65%;
	border: 3px solid Black;}
#perfilfoto:hover{
text-align:center;
filter: grayscale(1);
position: absolute; width: 30%; top: 120%;  left: 4%; right: 65%
}
.texto1{font-family: 'Roboto Slab', serif;
  font-size:17px;
  position:absolute;top:115%;
  left:40%; 
  }
#redes {
  font-family: 'Roboto Slab', serif;
text-align:center;
  color:#6666cc;
  font-size:5vw;
  text-shadow: 1px 1px 1px White;
  background-color:Black;
  width:100%;
  box-shadow: 1px 1px 2px #47476b;
  text-align:center;
position:absolute;top:200%;
  margin-top:2%;
}
#usuario1 {
  font-family: 'Roboto Slab', serif;
text-align:center;
  color:Black;
  font-size:4vw;
  text-shadow: 1px 1px 1px White;
  position: absolute; width: 100%; top:228%; right: 35%;
}
#usuario1 a{
  color:Black;
  text-decoration:none;}
#usuario2 {
  font-family: 'Roboto Slab', serif;
  text-align:center;
  color:Black;
  font-size:4vw;
  text-shadow: 1px 1px 1px White;
  position: absolute; width: 33.3%; top:228%; margin-left:30%; 
  
}
#usuario2 a {
  color:Black;
  text-decoration:none;
}
#usuario3 {font-family: 'Roboto Slab', serif;
text-align:center;
  color:Black;
  font-size:4vw;
  text-shadow: 1px 1px 1px White;
  position: absolute;
  width: 33.33%;
  top:228%; right: 0%;
  margin-left:33%;
  
}
#usuario3 a {
  color:Black;
  text-decoration:none;
}
#Galeria {
  font-family: 'Roboto Slab', serif;
text-align:center;
  color:#6666cc;
  font-size:5vw;
  text-shadow: 1px 1px 1px White;
  background-color:Black;
  box-shadow: 1px 1px 2px #47476b;
  position: absolute; width: 100%; top: 250%; right: 0%; left: 0%;
}
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#galeria1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
position:absolute;top:275%;right:70%;
}
#galeria1:hover {
	transform: scale(1.1);
  }
#galeria2 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:275%;text-align:center;
}
#galeria2:hover {
	transform: scale(1.1);
}
#galeria3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:275%;left:70%;
}
#galeria3:hover {
	transform: scale(1.1);
}
#galeria4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:325%;right:70%;
}
#galeria4:hover {
	transform: scale(1.1);
}
#galeria5 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:325%;text-align:center;
}
#galeria5:hover {
	transform: scale(1.1);
}
#galeria6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:325%;left:70%;
}
#galeria6:hover {
	transform: scale(1.1);
}
#galeria7 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:375%;right:70%;
}
#galeria7:hover {
	transform: scale(1.1);
}
#galeria8 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:375%;text-align:center;
}
#galeria8:hover {
	transform: scale(1.1);
}
#galeria9 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
border: 2px solid Black;
  position:absolute;top:375%;left:70%;
}
#galeria9:hover {
	transform: scale(1.1);
}
#Colegio{
  font-family: 'Roboto Slab', serif;
text-align:center;
  color:#6666cc;
  font-size:5vw;
  text-shadow: 1px 1px 1px White;
  background-color:Black;
  box-shadow: 1px 1px 2px #47476b;
  position: absolute; width: 100%; top: 420%; right: 0%; left: 0%;
}
.TextoColegio{ position:absolute;top:440%;left:2%;
font-family: 'Roboto Slab', serif;
color:Black;
font-size:2vw; 
}
.container1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#colegio1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
position:absolute;top:475%;right:70%;
}
#colegio1:hover {
	transform: scale(1.1);
  }
#colegio2 {
  width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
  position:absolute;top:475%;text-align:center;
}
#colegio2:hover {
	transform: scale(1.1);
}
#colegio3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
  position:absolute;top:475%;left:70%;
}
#colegio3:hover {
	transform: scale(1.1);
}
#colegio4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
  position:absolute;top:525%;right:70%;
}
#colegio4:hover {
	transform: scale(1.1);
}
#colegio5 {
	width: 200px;
	height:200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
  position:absolute;top:525%;text-align:center;
}
#colegio5:hover {
	transform: scale(1.1);
}
#colegio6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
   border: 2px solid Black;
  position:absolute;top:525%;left:70%;
}
#colegio6:hover {
	transform: scale(1.1);
}
#colegio7 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
  position:absolute;top:575%;right:70%;
}
#colegio7:hover {
	transform: scale(1.1);
}
#colegio8 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
    border: 2px solid Black;
  position:absolute;top:575%;text-align:center;
}
#colegio8:hover {
	transform: scale(1.1);
}
#colegio9 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
  border: 2px solid Black;
  position:absolute;top:575%;left:70%;
}
#colegio9:hover {
	transform: scale(1.1);
}
#Futuro {font-family: 'Roboto Slab'; serif;
text-align:center;
  color:#6666cc;
  font-size:5vw;
  text-shadow: 1px 1px 1px White;
  background-color:Black;
  box-shadow: 1px 1px 2px White;
  position: absolute; width: 100%; top:630%; right: 10%; left: 0%;}
.texto2
{font-family: 'Roboto Slab';
  color:Black;
  font-size:2vw; position:absolute;top:650%;
  left:2%;
}
#futurofoto1
{position:absolute;top:660%;left:5%;}
#futurofoto2
{position:absolute;top:660%;left:55%;}

#Random
{font-family: 'Roboto Slab';
text-align:center;
  color:#6666cc;
  font-size:5vw;
  text-shadow: 1px 1px 1px White;
  background-color:Black;
  box-shadow: 1px 1px 2px White;
  position: absolute; width: 100%; top: 715%; right: 0%; left: 0%;
}
.texto3{font-family:  'Roboto Slab', serif;
  font-size:25px;
  position:absolute;top:730%;
  left:30%;
  }
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#random1 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
position:absolute;top:740%;right:70%;
}
#random1:hover {
	transform: scale(1.1);
  }
#random2 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:740%;text-align:center;
}
#random2:hover {
	transform: scale(1.1);
}
#random3 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:740%;left:70%;
}
#random3:hover {
	transform: scale(1.1);
}
#random4 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:795%;right:70%;
}
#random4:hover {
	transform: scale(1.1);
}
#random5 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:795%;text-align:center;
}
#random5:hover {
	transform: scale(1.1);
}
#random6 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:795%;left:70%;
}
#random6:hover {
	transform: scale(1.1);
}
#random7 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:850%;right:70%;
}
#random7:hover {
	transform: scale(1.1);
}
#random8 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
	border: 2px solid Black;
  position:absolute;top:850%;text-align:center;
}
#random8:hover {
	transform: scale(1.1);
}
#random9 {
	width: 200px;
	height: 200px;
	margin: 15px;
	transition: transform 1s;
border: 2px solid Black;
  position:absolute;top:850%;left:70%;
}
#random9:hover {
	transform: scale(1.1);
}
.sexto
{position:absolute;top:900%;left:1%;
font-family: 'Roboto Slab', serif;
text-align:center;
  color:black;
  font-size:4vw;
  text-shadow: 1px 1px 1px white;  
}
.subir
{  position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 15px;
    margin-bottom: 10px;
  z-index:2;
}