body{background-color:#77bfa3;
width:100vw;
height:100vh;}

.botones{
  color:white;
  font-size: 35px;
  font-family:'Poiret One', cursive;
position:absolute;top:4;left:0.8;
  text-align: center;
}

.botonv{ 
  position: fixed;
  z-index: 1;
	text-align:center;
	text-decoration: none;
  font-size:15px;
  padding: 15px 10px;
  margin: 8px 50px;
  border-radius:5px;
  font-family: 'Teko', sans-serif;
  font-size:20px;
  font-weight: bolder;
  background-color:white;
  color:black;

  }
  
.botonv:hover{ 
color: #77bfa3;
}

#zona1 {color:#77bfa3;
  background-color:#2c6e49;
  border-radius:10px;
  font-size:25px;
  opacity:85%;
  text-decoration:none;
  position: absolute; width:15%; top:0.5%;  right: 83%; }

#zona1:hover{
  background-color:#77bfa3;
  color:#2c6e49;
  font-size: 25px;
  font-family:'Poiret One', cursive; 
  text-align: center; 
  position:absolute;width:15% ; top: 0.5%;  right: 83%; 
  border-radius: 10px;
 }

#zona2 {color:#77bfa3;
  background-color:#2c6e49;
  font-size:25px;
  opacity:80%;
  border-radius:10px;
  position:absolute;width: 15%; top: 0.5%; left:18%; right:75%;
}

#zona2:hover{
  background-color:#77bfa3;
  color:#2c6e49;
  font-size: 25px;
  font-family:'Poiret One', cursive;
  text-align: center; 
  position: absolute; width: 15%; top: 0.5%;  right: 75%; left:18%;
  border-radius: 10px;
 }

#zona3 {color:#77bfa3;
  background-color:#2c6e49;
  font-size:25px;
  opacity:80%;
  border-radius:10px;
  position:absolute; width: 25%; top: 0.5%;  right: 75%; left:67%;
}

#zona3:hover{color:#2c6e49;
  background-color:#77bfa3;
  opacity:80%;
  font-size: 25px;
  font-family:'Poiret One', cursive;
  text-align: center; 
  position:absolute;width: 25%; top: 0.5%;  right: 75%; left:67%;
  border-radius: 10px;
 }

 #zona4 {color:#77bfa3;
  background-color:#2c6e49;
  font-size:25px; 
  opacity:80%; 
  border-radius:10px;
  position: absolute; width: 15%; top: 0.5%;  right: 75%; left:34%;
}

#zona4:hover{
  background-color:#77bfa3;
  color:#2c6e49;
  font-size: 25px;
  font-family: 'Poiret One', cursive;
  text-align: center; 
  position: width: 20%; top: 0.5%;  right: 65%; left:34%;
  border-radius: 10px;
 }
#zona5:{
  z-index:1;
}

#zona6 {color:#77bfa3;
  background-color:#2c6e49;
  font-size:25px;
  opacity:85%;
  border-radius:10px;
  position: absolute; width: 16%; top:0.5%;  right: 75%; left:50%;}

#zona6:hover{
  background-color:#77bfa3;
  color:#2c6e49;
  font-size: 25px;
  font-family:'Poiret One', cursive; 
  text-align: center; 
  position:absolute;width:16% ; top:0.5%;  right: 75%; left:50%;
  border-radius: 10px;
 }

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-size: cover;
  }

.box {
  width: 700px;
  padding: 50px;
  text-align: center;
  text-shadow: 3px 3px 1px #364958;
  margin: 0 auto;
  margin-top: 4%;
  color: white;
  font-family: 'Century Gothic', sans-serif;
  border-radius: 30px;
  background:#bfd8bd; 
}

.box img{border-radius: 50%;
    border: 0.2vw solid #d1e1b6;
    margin-left: auto;
    margin-right: 5vw;
    margin-top: 1vw;
    width: 35%;
    max-width: 100%;}

.box h2 {
  font-size: 20px;
  text-shadow: 1px 1px 1px #77bfa3;
  letter-spacing: 3px;
  font-weight: 100;
  margin-bottom: 30px;
  color:#2c6e49;
}
.box p {
  text-align: justify;
  color:#2c6e49;
  text-shadow: 0px 0px 1px #2b1720;
}

.box ul {
  margin-top: 20px;
  list-style: none;
}

.box ul li {
  display: inline-block;
}
.box ul li a {
  color: black;
  font-size: 45px;
  padding: 10px 5px;
  transition: all .5s ease-in-out;
  display: block;
}

.box ul li a:hover {
  color:#b9b9b9;
  transform: scale(1.3);
}

.titulos{
  font-family:'Montserrat', sans-serif; ;
font-size: 2.5vw;
color: #edeec9; 
text-align: center;
background-color: #4c956c; 
border: 0.3vw;
border-radius: 5px; 
line-height: 3.3vw;
margin-left: 2vw;
margin-top: 1vw;
}

.imagen{
  justify-content:center;
  display:inline-block;
  border: 3px solid #bfd8bd;
  border-radius:20px;
}

.imagen:hover {
	transform: scale(1.1);
  filter: saturate(200%);
}

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

.fotos{justify-content:center;
  display:inline-block;
  border: 3px solid #bfd8bd;
  border-radius:20px;
  filter: grayscale(1);
}

.fotos:hover{
  transform:scale(1.1);
  filter: saturate(100%);}

.fotoss{justify-content:center;
  display:inline-block;
  border: 3px solid #bfd8bd;
  border-radius:20px;
  filter: grayscale(1);
}

.fotoss:hover{
  transform:scale(1.1);
  filter: saturate(100%);}

.subir{
 position: fixed;
  text-align: right;
    bottom: 0;
    right: 0;
    margin-right: 15px;
    margin-bottom: 10px;
  z-index:2;
}
.subir:hover{
  position: fixed;
  text-align: right;
    bottom: 0;
    right: 0;
    margin-right: 15px;
    margin-bottom: 10px;
  z-index:2;
  opacity: 0.3;
}

#flecha{
  height: auto;
  width: 70px;
}

#flecha-div{
    width: 13%;
}