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

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

#zona1 {color:#ffdf72;
  background-color:#ce5d3a;
  border-radius: 12px;
  font-size:25px;
  opacity:85%;
  text-decoration:none;
  position: absolute; width:15%; top:0.5%;  right: 83%; }

#zona1:hover{
  background-color:#ff9657;
  color: white;
  font-size: 25px;
  font-family:'Montserrat', cursive; 
  text-align: center; 
  position:absolute;width:15% ; top: 0.5%;  right: 83%; 
  border-radius: 12px;
 }

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

#zona2:hover{
  background-color:#ff9657;
  color:white;
  font-size: 25px;
  font-family:'Montserrat', cursive;
  text-align: center; 
  position: absolute; width: 15%; top: 0.5%;  right: 75%; left:18%;
  border-radius: 10px;
 }

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

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

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

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

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

#zona6:hover{
  background-color:#ff9657;
  color:white;
  font-size: 25px;
  font-family:'Montserrat', cursive; 
  text-align: center; 
  position:absolute;width:16% ; top:0.5%;  right: 75%; left:50%;
  border-radius: 10px;
 }
 #zona7 {color:white;
  background-color:#ce5d3a;
  font-size:25px;
  opacity:85%;
  border-radius:10px;
  position: absolute; width: 16%; top:2%;  right: 75%; left:50%;}


* {
  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 #ffdf72;
  margin: 0 auto;
  margin-top: 4%;
  color:#ce5d3a;
  font-family: Montserrat, sans-serif;
  border-radius: 30px;
  background: #660000
; 
}

.box img{border-radius: 0%;
    border: 0.3vw groove #ffcc00;
    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:#ff9657;
}
.box p {
  text-align: justify;
  color: white;
  text-shadow: 2px 1px #ff751a;
}

.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: #ffcc00; 
border: 0.3vw;
border-radius: 2px; 
line-height: 3.5vw;
margin-left: 0vw;
margin-top: 2vw;
}

.imagen{
  justify-content:center;
  display:inline-block;
  border: 3px double yellow;
  border-radius:0px;
  filter: opacity (50%)
}

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

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

.fotos{justify-content:center;
  display:inline-block;
  border: 4px solid #bfd8bd;
  border-radius:20px;
  filter: sepia(100%);
}

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

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

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

.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: 60px;
}

#flecha-div{
    width: 13%;
} 
* {
  margin:0;
  padding:0;
  box-size:border-box;
}

button:focus {
  outline:none;
}

:root {
  --mainHeight:200px;
}
#miDiv {
  position:relative;
  margin:0 auto;
  margin-top:50px;
  width:100vw;
  height:var(--mainheight);
  overflow:auto;
  background-color:rgba(255, 255, 255, 0.9);
  border-bottom:15px solid black;

}

#caja {
  width:1200px;
  margin-bottom:2px;
  height:var(--mainHeight);
  display:grid;
  grid-template-columns:repeat(6,280px);
  grid-column-gap:3px;
}

#caja div {
  background-color:rgba(0, 0, 0, 0.2);
  width:auto;
  height:auto;
}