html, body{
  margin: 0;
  background-color: #DDA15E ;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;

  
}

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


#zona1{
background-color: #606C38 ;
  color:#FEFAE0 ;
  font-size: 30px;
font-family: 'Damion', cursive;
  text-align: center; 
position: absolute;
  width: 25%; 
  top: 30%;  
  right: 25%; 
  left: 39%;
 border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
}

#zona1:hover {
  background-color: #283618 ;
  color: #606C38 ;
  font-size: 27px;
font-family: 'Chakra Petch', sans-serif;
  text-align: center; 
  position: absolute;
  width: 25%;
   top: 30%;  
  right: 25%; 
  left: 39%;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

#zona1:hover {
 background-color: #283618 ;
  color: #606C38 ;
  font-size: 27px;
font-family: 'Chakra Petch', sans-serif;
  text-align: center; 
position: absolute;
  width: 25%;
   top: 30%;  
  right: 25%; 
  left: 39%;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

#zona2{
background-color: #606C38 ;
  color:#FEFAE0 ;
  font-size: 30px;
font-family: 'Damion', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 40%;  
  right: 25%; 
  left: 39%;
 border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
}

#zona2:hover {
  background-color: #283618 ;
  color: #606C38 ;
  font-size: 27px;
  font-family: 'Chakra Petch', sans-serif;
  text-align: center; 
  position: absolute;
  width: 25%; 
 top: 40%;  
  right: 25%; 
  left: 39%;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#zona3{
background-color: #606C38 ;
  color:#FEFAE0 ;
  font-size: 30px;
font-family: 'Damion', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 50%;  
  right: 25%; 
  left: 39%;
 border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
}

#zona3:hover {
  background-color: #283618 ;
  color: #606C38 ;
  font-size: 27px;
 font-family: 'Chakra Petch', sans-serif;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 50%;  
  right: 25%; 
  left: 39%;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
a{
  text-decoration:none;
  color: white;
}

a:hover {
  text-decoration:none;
  color: #606C38;
}

#zona4{
background-color: #606C38 ;
  color:#FEFAE0 ;
  font-size: 30px;
font-family: 'Damion', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 60%;  
  right: 25%; 
  left: 39%;
 border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
}

#zona4:hover {
  background-color: #283618 ;
  color: #606C38 ;
  font-size: 27px;
 font-family: 'Chakra Petch', sans-serif;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 60%;  
  right: 25%; 
  left: 39%;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#cine{
   position: absolute;
   text-align: center;
   top: 420vh;
   left: 130vh;
   
}

#zona5{
background-color: #606C38 ;
  color:#FEFAE0 ;
  font-size: 30px;
font-family: 'Damion', cursive;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 70%;  
  right: 25%; 
  left: 39%;
 border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
}

#zona5:hover {
  background-color: #283618 ;
  color: #606C38 ;
  font-size: 27px;
 font-family: 'Chakra Petch', sans-serif;
  text-align: center; 
  position: absolute; 
  width: 25%; 
  top: 70%;  
  right: 25%; 
  left: 39%;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


a{
  text-decoration:none;
  color: white;
}

a:hover {
  text-decoration:none;
  color: #606C38;
}


#texto1{
position: absolute; 
  text-align: justify;
  color: #99582A;
  width: 30%; 
  left: 75vh;
  top: 100vh;
  right: 1vw; 
  font-family:'Lobster', cursive;
}

#texto2{  
  position:absolute;
  text-align: justify;
  color: #6f1d1b;
  width: 30%;
top:280vh;
  right: 1vh; 
  left: 1vh;
  font-family:'M PLUS 1 Code', sans-serif;
  font-size: 15px;

}

#texto3{
position: absolute; 
  text-align: center;
  color: #99582A;
  width: 55%; 
  left: 40vh;
  top: 305vh;
  right: 50vh; 
  font-family:'Bebas Neue', cursive;
}


#texto3a{
position: absolute; 
  text-align: justify;
  color: #99582A;
  width: 55%; 
  left: 40vh;
  top: 320vh;
  right: 50vh; 
  font-family:'Bebas Neue', cursive;
}
#texto4 {
  text-align:center;
  font-size:20px;
 color: #bc4749;
  font-family: 'Chakra Petch', sans-serif;
  background-color:#f2e8cf ;
  border-color: #bc4749; 
  border-style: solid;}

#texto4:hover {
  text-align:center;
  font-size:30x;
  font-family: 'Press Start 2P', cursive;
  color:#e9edc9; 
  background-color:#ccd5ae;
  border-color:#e9edc9; 
  border-style:solid;
}
#texto5 {
position: absolute;
  text-align: justify;
  color: #99582A;
  width: 45%; 
  height:50vh;
  top: 430vh;
  right: 90vh; 
  left: 10vh;
  font-family:'Bebas Neue', cursive;
  font-size: 20px;
}
#texto6 {
position: absolute;
  text-align: center;
  color: #99582A;
  width: 35%; 
  height:50vh;
  top: 500vh;
  right: 50vh; 
  left: 70vh;
  font-family:'Bebas Neue', cursive;
  font-size: 35px;
}
#video {
 position: absolute;
 top: 530vh;
 right: 50vh;
 left: 70vh;
}

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

img, #foto {
	width: 300px;
	height: 400px;
	margin: 10px;
	transition: transform 1s;
	border: 5px solid #ffe8d6;

}



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

}

#bloque2{

  width:100%;
  min-height:100vh;

}

#bloque3{
  width:100%;
  min-height:100vh;

}

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

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

#foto:hover {
	transform: scale(1.05);
}


.titulo{
   margin-top: 40px;
  position: absolute;
  text-align:center;
  left: 35%;
  top: 10%;
  font-size:160vh; 
  display: flex;
	width: 300px;
	height: 40px;
	color: black;
	line-height: 40px;
	margin: auto;
	overflow: hidden;
}

ul {
	list-style: none;
	padding-left: 5px;
	animation: cambiar 7s infinite;
  left: 35%;
  top: 10%;
  font-size:30px; 
  
 
}

ul, p {
	margin: 0;
  left: 35%;
  top: 10%;
  font-size: 27px;
   font-family: 'Abril Fatface', cursive;
  color: #BC6C25;
}

@keyframes cambiar {
	
	0%{ margin-top: 3px;}
	20%{ margin-top: 3px;}
	
	25% {margin-top: -40px;}
	50% {margin-top: -40px;}
	
	55% {margin-top: -80px;}
	80% {margin-top: -80px;}
	
	85% {margin-top: -40px;}
	95% {margin-top: -40px;}
	
	100% {margin-top: 0;}
}

#volver{
  width:100px;
  height:17vh;
  position:absolute;
  background-color:#606C38;
  right:0;
  top:0;
  margin:20px 30px;
  font-size:5vh;
  font-family:'Abril Fatface', cursive;
  color:#FEFAE0;
  text-align:center;
  line-height:100px;
  border-radius:50%;
  position:fixed;
  border:2px #FEFAE0;
  box-shadow:2px 2px 16px rgba(32,32,32,.5);
  z-index:1;
}




#marquesina{
position: absolute;
top: 201vh;
 border-radius: 8px;
 border:9px #6f1d1b;
filter:none;
}



* {
  box-sizing:border-box;
}
body {
  margin:0;
  padding:0;
  background-color: #DDA15E ;
  overflow-y: scroll;
  overflow-x: hidden;
}
a {
  text-decoration:none;
}
.nav {
  position:absolute;
  width:200px;
  height:100vh;
  top:0;
  left:-220px; 
  padding-top:47px;
  background-color: #a3b18a;
  border-right:4px solid #3a5a40;
  transition:all .5s ease; 
}

   .nav__item {
     display:block;
     width:96%;
     margin:0 auto;
     line-height:2;
     position:relative; 
     border-bottom:.5px solid rgba(59, 62, 61, 1);
     border-top:.5px solid rgba(59, 62, 61, 1);
     background-color:transparent;
     font-family: 'Open Sans Condensed', sans-serif;
     font-size: 1.3rem;
     text-align:center;
     color:rgba(221, 231, 228, 1);
   }
      
       .current:before {
          content:"";
          width:0;
          height:0;
          position:absolute; 
          border-top:17px solid transparent;
          border-left:15px solid #3a5a40;
          border-bottom:17px solid transparent;
          top:0px;
          right:-15px; 
          z-index:4; 
       }
     
      .current:after {
          content:"";
          width:0;
          height:0;
          position:absolute;
          border-top:16.5px solid transparent;
          border-left:17px solid #1b4332;
          border-bottom:17px solid transparent;
          top:.5px;
          right:-21px;
          z-index:1;  
      }

  .menu-toogle {
    position:absolute; 
    width: 35px;
    line-height:1.1;
    text-align:center;
    top:6.5px; 
    left: 8px; 
    border-radius:3px;
    background-color: #1b4332;
    transition: all .5s ease; 
    z-index:10;
  }
    
    .menu-toogle::before {
      content:"☰";
      font-size:32px;
      color:white;
    }

    .checkbox {
      display:none; 
    }
    .checkbox:checked ~ .nav {
      left:0px; 
      position:fixed;
    }
    .checkbox:checked ~ .main-w {
      margin-left:200px;
    }
    .checkbox:checked ~ .menu-toogle { 
      left:208px;
      position:fixed; 
    }

.coposDeNieve{
  background-image: URL("https://images.vexels.com/media/users/3/215662/isolated/lists/4e6dc22a5e086dfeb3d5f42bbcfa9775-silueta-de-flor-de-gloria-de-la-manana.png");
  background-size: cover;
  background-repeat: no-repeat;
  filter: invert(100%);
  
  }
#copo01{
  width: 20vw;
  height: 10vw;
  left: -70vw;
  animation-name: nevar;
  animation-duration: 15s;
  animation-delay:4s;
  animation-iteration-count: infinite;
  visibility: hidden;
}

#copo02{
  width: 1.29vw;
  height: 1vw;
  left: 10vw;
  animation-name: nevar;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

#copo03{
  width: 1.29vw;
  height: 1vw;
  left: 15vw;
  animation-name: nevar;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

#copo04{
  width: 1.29vw;
  height: 1vw;
  left: 20vw;
  animation-name: nevar;
  animation-duration: 13s;
  animation-iteration-count: infinite;
}

#copo05{
  width: 1.29vw;
  height: 1vw;
  left: 25vw;
  animation-name: nevar;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

#copo06{
  width: 1.29vw;
  height: 1vw;
  left: 30vw;
  animation-name: nevar;
  animation-duration: 25s;
  animation-iteration-count: infinite;
}

#copo07{
  width: 1.29vw;
  height: 1vw;
  left: 35vw;
  animation-name: nevar;
  animation-duration: 18s;
  animation-iteration-count: infinite;
}

#copo08{
  width: 1.29vw;
  height: 1vw;
  left: 40vw;
  animation-name: nevar;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

#copo09{
  width: 1.29vw;
  height: 1vw;
  left: 45vw;
  animation-name: nevar;
  animation-duration: 14s;
  animation-iteration-count: infinite;
}

#copo10{
  width: 1.29vw;
  height: 1vw;
  left: 50vw;
  animation-name: nevar;
  animation-duration: 19s;
  animation-iteration-count: infinite;
}

#copo11{
  width: 1.29vw;
  height: 1vw;
  left: 55vw;
  animation-name: nevar;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

#copo12{
  width: 1.29vw;
  height: 1vw;
  left: 60vw;
  animation-name: nevar;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

#copo13{
  width: 1.29vw;
  height: 1vw;
  left: 65vw;
  animation-name: nevar;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

#copo14{
  width: 1.29vw;
  height: 1vw;
  left: 70vw;
  animation-name: nevar;
  animation-duration: 13s;
  animation-iteration-count: infinite;
}

#copo15{
  width: 1.29vw;
  height: 1vw;
  left: 75vw;
  animation-name: nevar;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

#copo16{
  width: 1.29vw;
  height: 1vw;
  left: 80vw;
  animation-name: nevar;
  animation-duration: 25s;
  animation-iteration-count: infinite;
}

#copo17{
  width: 1.29vw;
  height: 1vw;
  left: 85vw;
  animation-name: nevar;
  animation-duration: 18s;
  animation-iteration-count: infinite;
}

#copo18{
  width: 1.29vw;
  height: 1vw;
  left: 90vw;
  animation-name: nevar;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

#copo19{
  width: 1.29vw;
  height: 1vw;
  left: 95vw;
  animation-name: nevar;
  animation-duration: 14s;
  animation-iteration-count: infinite;
}

#copo20{
  width: 1.29vw;
  height: 1vw;
  left: 95vw;
  animation-name: nevar;
  animation-duration: 19s;
  animation-iteration-count: infinite;
}

  @keyframes nevar{
  from {
    position: absolute;
    top: -10vh;
    visibility: visible;
  }
  to {
    position: absolute;
    top: 110vh;
    visibility: visible;
  }
}