body { background-color: #E2C3FF;
  background-image: url("https://worldofprintables.com/wp-content/uploads/2021/04/Liquid-Pink-Phone-Wallpaper.jpg");
  overflow-x: hidden;
  
 
}
 .imgheader{ 
  position:absolute;
  left:15.5vw;
  top:0vh;
  width: 65vw;
  height: 45vw;
  opacity:1;
  z-index:-1;
  
  }
h1 { text-align: center;
font-size: 350%; 
background-color: #C3F1FF;
font-family: 'Tiro Telugu', serif;
text-shadow: 2px 2px 6px #23C8F8;
opacity:0.9;
border: inset 4px;
}




.boton{
  font-size:2vw;
  width: 8.5vw;
  margin-left: 5vw;
  margin-bottom: 2vw;
  padding: 2vw;
  border-style: double;
  transition: all 0.5s;
  display:inline-block;
  text-align: center;
  background-color:#9E59FB;
  opacity: 0.9;
}
.boton:hover{
 background-color:#a31aff;
 transform: scale(0.9);
 opacity: 1.0;
}
a{text-decoration:none;
color:white;
}

#volver{position:fixed;
  left:2vw;
  top:80vh;
  width: 8vw;
  height: 3vw;
 margin-left: 5vw;
  margin-bottom: 2vw;
  padding: 2vw;
  border-style: double;
  transition: all 0.5s;
  display:inline-block;
  text-align: center;
  background-color:#9E59FB;
  font-size: 200%;
  opacity: 0.5;
}

#volver:hover {
  opacity: 1.0;
  background-color:#a31aff;
}

#paso { position:absolute;
  top:105vh;
  text-align: center;
font-size: 8vw; 
background-color: #C3F1FF;
font-family: 'Tiro Telugu', serif;
text-shadow: 2px 2px 6px #23C8F8;
opacity:0.9;
 }


#sec1{position:absolute;
  top:100vh;
  height: 100vh ;
} 
#sec2{position:absolute;
  top:200vh;
  height: 100vh ;
}

#sec3{position:absolute;
  top:300vh;
  height: 100vh ;
}

#sec4{position:absolute;
  top:400vh;
  height: 100vh ;
}




#pedo1 {
  height: 30%;
 width: 15%;
position: absolute;
  top: 60vh;

}



#pedo2 {
  height: 30%;
 width: 30%;
position: absolute;
  top: 60vh;
  margin-left: 90vh
}

#pedo3 {
  height: 32%;
 width: 20%;
position: absolute;
  top: 25vh;
  margin-left: 3vh;
}

#pedo4 {
  height: 30%;
 width: 20%;
position: absolute;
  top: 25vh;
  margin-left: 90vh
}

#sec5{position:absolute;
  top:500vh;
  height: 100vh ;
}

h2 {text-align: center;
  width: 100vw;
font-size: 250%; 
background-color: #9E59FB;
font-family: 'Tiro Telugu', serif;
opacity:0.9;
border: ridge 5px #ffccff;
  
}

p {font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size:22px;
text-align: justify;
margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 30px;
  margin-left: 15px;
background-color: #f3ccff;
border: 1px solid white;
}

#pic2{ height: 40%;
 width: 30%;
position: absolute; 
top: 65vh;
  left: 55vw ;}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 50%;
  max-width: 50%;
  padding: 2.5vh 11.5vw;
  padding-botom: 2.5vh;
  
}

.column div {
  vertical-align: middle;
  text-align: center;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/*@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

div#petra {
  width: 24.5vw;
  height: 58vh;
  background-size: cover;
  background-image: url("https://imgur.com/74Fyhi9.jpeg");
  margin-top: 0.5vh;
/*  margin-left: 24vw;
  margin-bottom: 5vh;*/
}

div#infopetra {
  position:absolute;
  overflow:hidden;
  width: 24.5vw;
  height: 60vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#petra:hover div#infopetra {
  opacity:1;
}

p#headlinepetra {
  font-size: 130%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.3s;
}

div#petra:hover p#headlinepetra {
  text-align:center;
  margin-left: 4vw
}

p#descripcionpetra {
  font-size: 110%;
  text-align: justify;
 margin-top: 60vh;
  transition: margin-top 0.4s;
}

div#petra:hover p#descripcionpetra {
  margin-top: 5vh;
}




div#amigos {
  width: 40vw;
  height: 40vh;
  background-size: cover;
  background-image: url("https://imgur.com/NxeSSaI.jpeg");
  margin-top: -50vh;
  margin-left: 60vh;
/*  margin-left: 24vw;
  margin-bottom: 5vh;*/
}

div#infoamigos {
  position:absolute;
  overflow:hidden;
  width: 40vw;
  height: 40vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#amigos:hover div#infoamigos {
  opacity:1;
}

p#headlineamigos {
  font-size: 120%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.3s;
}

div#amigos:hover p#headlineamigos {
  text-align:center;
  margin-left: 4vw
}

p#descripcionamigos {
  font-size: 100%;
  text-align: justify;
 margin-top: 60vh;
  transition: margin-top 0.4s;
}

div#amigos:hover p#descripcionamigos {
  margin-top: 5vh;
}




.collage{
  display: inline-block;
  margin-top:3vh;
  padding-top: 0.1vh;
  text-align: center;
  padding-bottom: 0.1vh;
  
}
.pic{
}

#3{
  margin-top:10vh;
  
  
}