body{
  margin: 0;
  padding: 0;
  background-color: #E19B9D;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

#contenedor {
  width: 100vw;
  height: 100vh;
  background-image: URL("https://i.imgur.com/eAvUL7x.png");
  background-attachment: fixed;
  text-align: center;
}

a{
  color:white;
  text-decoration:none;
}
#titulo{
  font-family: 'Bungee Shade', cursive;
  font-size: 90px;
  text-align: center;
  transition: 1s;
  position: absolute;
  width: 100vw;
  height: 50vh;
}

#titulo:hover{
    font-size: 100px;

}
.botones {
  opacity: 0.9;
}
#zona1 {
  background-color: salmon;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 15%; 
  top: 70vh;  
  right: 75vw; 
 border-radius: 5px;

}


#zona1:hover{
  background-color: black;
  color: white;
  font-size: 30px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute;
  width: 15%; 
  top: 70vh; 
  right: 75vw; 
 
}
#zona2 {
  background-color: salmon;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 15%; 
  top: 70vh;  
  right: 58vw; 
 border-radius: 5px;
}

#zona2:hover{
  background-color: black;
  color: white;
  font-size: 30px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 15%; 
  top: 70vh; 
  right: 58vw;
 
}
#zona3 {
  background-color: salmon;
  color: white;
  font-size: 22px;
  font-family: Arial;
  font-family: 'Koulen', cursive; 
  position: absolute; 
  text-align: center;
  width: 15%; 
  top: 70vh;  
  right: 41vw; 
 border-radius: 5px;

}

#zona3:hover{
  background-color: black;
  color: white;
  font-size: 30px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 15%;
  top: 70vh; 
  right: 41vw;
  
}
#zona4 {
  background-color: salmon;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 15%; 
  top: 70vh;  
  right: 24vw; 
 border-radius: 5px;
}

#zona4:hover{
  background-color: black;
  color: white;
  font-size: 30px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute;
  width: 15%; 
  top: 70vh; 
  right: 24vw;
  
  
}

#zona5 {
  background-color: salmon;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 15%; 
  top: 70vh;  
  right: 7vw; 
 border-radius: 5px;

}

#zona5:hover{
  background-color: black;
  color: white;
  font-size: 30px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute;
  width: 15%; 
  top: 70vh; 
  right: 7vw; 
}
#zona6{
  background-color: black;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 5vh;  
  right: 5vw; 
 border-radius: 5px;
}

#zona6:hover{
  background-color: black;
  color: white;
  font-size: 30px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute;
  width: 25%; 
  top: 5vh; 
  right: 5vw; 
}
#Volver1{
  background-color: black;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 105vh;  
  right: 70vw; 
  border-radius: 5px;
  z-index: 100;
}
#Volver2{
  background-color: black;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
   width: 25%; 
  top: 203vh;  
  right: 70vw; 
  border-radius: 5px;  
  z-index:2;}
#Volver3{
  background-color: black;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 303vh;  
  right: 70vw; 
  border-radius: 5px;
  z-index:2;
}

#Volver4{
  background-color: black;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 403vh;  
  right: 70vw; 
 border-radius: 5px;
z-index:2;}
#Volver5{
  background-color: black;
  color: white;
  font-size: 22px;
  font-family: 'Koulen', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 503vh;  
  right: 70vw; 
  border-radius: 5px;
  z-index:2;
}

#bloque1{
  width:100%;
  min-height:100vh;
}

@media (max-width: 600px) {

  #texto1{
    position: absolute;
    text-align: justify;
    color: white;
    top: 105vh;
    right: 1vw; 
    padding-left: 40%;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1vw;
  }
}
@media (min-width: 601px) {

  #texto1{
    position: absolute;
    text-align: justify;
    color: white;
    top: 105vh;
    right: 1vw; 
    padding-left: 40%;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5vw;
  }
}
#fotoperfil{
  position:absolute;
  right: 61vw; 
  margin-top:95px;
  margin-left: 20px;
  height: 50px;
  z-index:1;
}
#bloque2{
  width:100vw;
  min-height:100vh;
}
@media (max-width: 600px) {
#contenedorfotos{
  position:absolute;
  margin-top: 200px;
  }
}
@media (min-width: 601px) {
  #contenedorfotos{
  position:absolute;
  margin-top: 230px;
  }
}
@media (max-width: 600px) {
.galeria {
	width: 200px;
	height: 200px;
	transition: transform 1s;
  padding: 20px;}
}

@media (min-width: 601px) {
  .galeria {
	width: 190px;
	height: 190px;
	transition: transform 1s;
  padding: 33px;
  margin-top: 55px;}
}
#galeria1:hover {
	transform: scale(1.1);
  }

#galeria2:hover {
	transform: scale(1.1);
}

#galeria3:hover {
	transform: scale(1.1);
}

#galeria4:hover {
	transform: scale(1.1);
}

#galeria5:hover {
	transform: scale(1.1);
}

#galeria6:hover {
	transform: scale(1.1);
}

#galeria7:hover {
	transform: scale(1.1);
}

#galeria8:hover {
	transform: scale(1.1);
}

#bloque3{
  width:100vw;
  min-height:100vh;
}

#colegiofotos{
  position:absolute;
  top: 315vh;
  padding: 10px;
}
.colegio:hover{
  transform: scale(1.5);
}
#bloque4{
  width:100%;
  min-height:100vh;
}
@media (min-width: 601px) {
#textofuturo{
  position: absolute;
  text-align: justify;
  color: white; 
  top: 415vh;
  padding: 20px;
  font-family: 'Barlow Condensed', sans-serif; 
  font-size: 20px;
}
#fotofuturo{
  width: 150px;
	height: 150px;
  position: absolute;
  margin-left: 40%;
  text-align: center;
  top: 450vh;
}
}
#bloque5{
  width:100%;
  min-height:100vh;}

#video1{
  z-index:1;
  transform: rotate(25deg);
  position: absolute;
  top: 550vh;
box-shadow: 10px 10px 5px #333333;}
#video2{
  z-index:1;
  transform: rotate(350deg);
  position: absolute;
  top: 550vh;
  left:70vw;
box-shadow: 8px 8px 5px #333333;}
#video3{
  z-index:2;
  transform: rotate(5deg);
  position: absolute;
  top: 500vh;
  left:50vw;
box-shadow: 8px 8px 5px #333333;}
#fotoplaya{
  z-index:1;
  transform: rotate(355deg);
  position: absolute;
  top: 550vh;
  left:40vw;
  box-shadow: 8px 8px 5px #333333;
}
#bronte{
  z-index:0;
  transform: rotate(345deg);
  position: absolute;
  top: 515vh;
  left:85vw;
  box-shadow: 8px 8px 5px #333333;
}
#levis{
  z-index:0;
  transform: rotate(350deg);
  position: absolute;
  top: 508vh;
  left:8vw;
  box-shadow: 8px 8px 5px #333333;
}
#amis{
  z-index:3;
  transform: rotate(10deg);
  position: absolute;
  top: 520vh;
  left:25vw;
  box-shadow: 8px 8px 5px #333333;
}

#chocolatefalcori{
  z-index:1;
  transform: rotate(355deg);
  position: absolute;
  top: 570vh;
  left:12vw;
box-shadow: 8px 8px 5px #333333;}

#cielo{
  z-index:1;
  transform: rotate(20deg);
  position: absolute;
  top: 0vh;
  left:45vw;
  box-shadow: 8px 8px 5px #333333;
}
#arte{
  z-index:0;
  transform: rotate(26deg);
  position: absolute;
  top: -50vh;
  left:55vw;
  box-shadow: 8px 8px 5px #333333;
}
.random:hover{
  z-index:5;
  transform: scale(1.1)
}