@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  --fa-style: 400;
   
}

/*Pagina Index*/
#inicio{
  background: url('../anim/Hamaca.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

.inicio { 
  
  color: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*background: rgb(37, 105, 9) transparent;*/
  padding: 50px 25px;
  /*font-family: 'calibri', sans-serif;*/
  font-family: 'Indie Flower', cursive;
  font-weight: bold;
  font-size: 40px;
  /*text-transform: uppercase;*/
  border-radius: 90%;
  animation: animacion 3s linear infinite;
}
.bg-image {
  grid-area: bg-image;
  /* The image used */
  background-image: url("../Bienvenida.jpg");
  position: relative;
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(5px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
 
  /* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

/*Animaciones*/


@keyframes animacion {
  0% {
    box-shadow: 0 0 0 0 rgba(3, 3, 3, 0.514),  0 0 0 0 rgba(3, 3, 3, 0.6);
  }

  30% {
    box-shadow: 0 0 0 200px rgba(2, 11, 14, 0), 0 0 0 0 rgba(3, 3, 3, 0.6);
  }

  65% {
    box-shadow: 0 0 0 200px rgba(94, 245, 7, 0), 0 0 0 100px rgba(29, 171, 209, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(232, 252, 55, 0),  0 0 0 100px rgba(29, 171, 209, 0);
  }

}

/*Institucional*/

video{
  position: fixed;

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

  top: 50%;
  left: 50%;

  transform: translateX(-50%) translateY(-50%);

  z-index: -1;

  
  filter: transparent(75%);
  
}
.Historia{
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
.volver{
  text-decoration:wavy;
  color: rgb(5, 5, 5);
  position: absolute;
  top: 15%;
  left: 15%;
  transform: translate(-50%, -50%);
  /*background: rgb(37, 105, 9) transparent;*/
  padding: 30px 25px;
  /*font-family: 'calibri', sans-serif;*/
  font-family: 'Indie Flower', cursive;
  font-size: 40px;
  text-transform: uppercase;
  border-radius: 90%;
  animation: animacion 3s linear infinite;
  
 }

/*Pagina principal*/
#Principal{
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
}
/*----------Propiedades del Menu ------------------*/
.Menu{
 
  grid-area: Menu;
  background: url(../anim/Bienvenida.jpg) no-repeat center/100%;
  box-sizing: border-box;
  background-size: cover;
  opacity: 0.9;
    
}
.icon-size{
  font-size: 5rem;
}   

.nav-enlace{
  color: #ffffff;
  padding: 20px 30px;
  display: inline-block;
  text-decoration: none;
  font-size: x-large;
  font-weight:bolder;
  border-radius: 10px;
  border-style: double;
  border-spacing: 10px;  
}
nav{
  display: flex;
  justify-content:flex-end ;
  padding: 1%;

}
.nav-enlace:hover{
  background: rgba(255, 255, 255, 0.952); 
  opacity: 0.6;
  color: #000000;
}




/*----------Propiedades de las areas -------------*/
.Container{
  box-sizing: border-box;
  display: grid;
  width: 100vw; 
  height: 100vh;
  margin: 0;
  /* margin-left: 1rem; */
  padding: 0;
  grid-template-rows: 20% 35% 35% auto ;
  grid-template-columns: 30% auto auto 2%;
  grid-template-areas: 
  "Menu Menu Menu Menu"  
  "Aside Granja Visitas ..." 
  "Aside Hospedaje Viñedos ..." 
  "Footer Footer Footer Footer" ;
 
}
.Granja{
  grid-area: Granja;
}
.Visitas{
  grid-area: Visitas;
}
.Predio{
  grid-area: Predio;

}
.Hospedaje{
  grid-area: Hospedaje;
}
.Viñedos{
  grid-area: Viñedos;

}
.Aside{
  grid-area: Aside;
  background:url(../Img/Aside.jpg) no-repeat center center;
  background-size: cover;
  margin: 5px;
}
#Hospedaje-img, #Granja-img, #Visitas-img, #Viñedos-img{ 
  max-height: 100%;
  width: 100%;
  background-position: center;
}
.Granja, .Visitas, .Hospedaje, .Viñedos {
  border-top: 20px solid #000000;
  border-left: 20px solid #000000;
  
}
.Hospedaje, .Viñedos{
  border-bottom:  20px solid #000000
}
.Visitas a:hover, .Granja a:hover, .Hospedaje a:hover, .Viñedos a:hover{
  opacity: 0.7;
}  



/*-----Footer-----------*/
footer{
  margin: 1px;
  padding: 10px;
  grid-area: Footer;
  background-color: rgb(79, 121, 88);
  display: flex;
  justify-content:flex-end;
  justify-self:stretch;
  justify-content: space-evenly;
}
.p-footer{
  font-size: 2rem;
}
.icon-size-footer{
  font-size: 3rem;
  color: white;
}  


/* -----------Propiedades del Popups-----------------------------*/

.container-all{
  width: 100%;
  height: 100%;
  position:relative;
  padding: 40px;
  margin: 0;
  visibility: hidden;
  opacity: 1;
  transition: all 600ms;
}
.container-all:target{
  position: fixed;
  background: rgba(0,0,0,0.8);
  visibility:visible;
  opacity: 1;
  top: 0%;
  left:0%;
}   

.container-all:target .popup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: rotate(0deg) translate(-50%, -50%);
  visibility: visible;
}
.popup{
  width: 100%;
  max-width: 800px;
  height: 500px;
  position: fixed;
  display: flex; 
  background: white;
  visibility: hidden;
  top: -150%;
  left: -150%;
  transform: rotate(90deg) translate(-250%, 330%);
  transition: all 600ms;
}
.img-Visitas{
  background-image: url(../Img/visitas3.jpg);
  overflow:hidden;
}
.img-Granja{
  background-image: url(../Img/animales2.jpg);
  overflow:hidden;
  
}
.img-Hospedaje{
  background-image: url(../Img/cabañas.jpeg);
  overflow:hidden;
} 
.img-Viñedos{
  background-image: url(../Img/viñedos2.jpeg); 
  overflow:hidden;
}


.img-Visitas, .img-Hospedaje, .img-Viñedos, .img-Granja{
  width: 40%;
  background-size: cover;
  background-position: center;
  
}
.container-text{
  width: 60%;
  padding: 50px;
  overflow-y: auto;
}
.container-text h1{
  font-size: 30px;
}
.container-text p{
  margin-top: 20px;
  font-size: 16px;
}

.btn-close-popup{
  width: 50px;
  height: 50px;
  position: absolute;
  right: -20px;
  top: -20px;
  padding: 20px;
  background: black;
  color: white;
  border-radius: 50%;
  line-height: 10px;
}



/*------------Pagina Ubicacion------------------*/
.ubicacion{
  padding: 0;
  margin: 0;
  background-color: rgb(211, 233, 216);
}
.ubicacion h1{
  font-size: 60px;
  margin: 10px;
  margin-top: 30px;
}

.p-direccion{
  margin: 40px;
  font-family: 'Indie Flower', cursive;
  font-size: xx-large;
  display: inline-block;
}
.volver-ubicacion{
  text-decoration:wavy;
  color: rgb(5, 5, 5);
  position: relattive;
  font-size: 40px;
  border-radius: 90%;

}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/

/*---------------Responsive------------------*/
@media screen and (max-width: 1024px){
  body{
    margin-left: 10px;
    padding: 10px;
  }
  #Principal{
    max-width: 98vw;
    margin: 10px;
    padding: 0;
   }

   
  .Container{
    grid-template-rows: 25% 30% 30% auto ;
    grid-template-columns: repeat(2, 1fr);
    width: 100vw; 
    height: 100vh;
    margin: 0;
    grid-template-areas: 
    "Menu Menu"  
    "Granja Visitas" 
    "Hospedaje Viñedos " 
    "Footer Footer" ;       
  }
  
  .nav-enlace{
    
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    font-size: large;
  }
  nav{
    padding: 5%;
    border-left: 10px solid #000000;  
  }
  .icon-size{
    font-size: 3rem;
  }   
  .icon-size-footer{
    font-size: 2rem;
  }  
  #Hospedaje-img, #Granja-img, #Visitas-img, #Viñedos-img{ 
    height: 100%;
      
  }
  .Granja, .Visitas, .Hospedaje, .Viñedos {
    border-top: 10px solid #000000;
    border-left: 10px solid #000000;
    
  }
  .Hospedaje, .Viñedos{
    border-bottom:  10px solid #000000
  }
  .popup{
      flex-direction: column;
      height: 90%;
      max-width: 80%;
  }
  
  .img-Granja, .img-Visitas, .img-Hospedaje, .img-Viñedos{
      width: 100%;
      height: 40%;
  }
  
  .container-text{
      width: 100%;
      height: 60%;
      padding: 80px;
  }
  .btn-open-popup{
      font-size:medium;
  }
  Footer{
    
    padding: 20px;
    justify-self:normal;
    justify-content: space-around;
    border-left: 10px solid #000000;
  }
  .p-footer{
    font-size: 1rem;
  }

  .ubicacion h1{
    font-size: xx-large;
    margin: 40px;
  }
  .ubicacion p{
    margin-left: 20%;
    font-size: x-large;
  }
  .map-responsive iframe{

    left:15%;
    top:20%;
    max-width:70%;
    max-height: 35%;
    position:relative;
    box-sizing: border-box;
    border-radius: 10px;
  }
}

@media screen and (max-width: 500px){
  #Principal{
    width: 100vw;
    height: 100vh;
    margin: 0;
    /* margin: 10px; */
    padding: 0;
   }
  .Container {
    grid-template-rows: 10% 20% 20% 20% 20% 5%;
    grid-template-columns: 1fr;
    grid-gap:1px;
    grid-template-areas: 
    "Menu"  
    "Granja" 
    "Visitas" 
    "Hospedaje"
    "Viñedos" 
    "Footer" ;
    }

    nav{
      display: flex;
      justify-content:flex-end ;
      padding: 1%;
      margin: 0;
    } 
  .nav-enlace{
      padding: 10px 5px;
      display: inline-block;
      font-size: small;
      border-radius: 5px;
      
  }
  
  
  
  .icon-size{
    font-size: 1.2rem;
  }   
  .icon-size-footer{
    font-size:  1rem;
    
  }   

  #Hospedaje-img, #Granja-img, #Visitas-img, #Viñedos-img{ 
    width: 60%;
    margin-left: 20%;
    
  }
  .container-text{
    width: 100%;
    height: 80%;
    padding: 10px;

  }
  footer{
    justify-self:normal;
    margin: 0px;
    padding: 10px;
   }
  .p-footer{
    font-size: 0.3rem;
  }
  
  .ubicacion h1{
    font-size: large;
    margin: 20px;
  }
  .ubicacion p{
    font-size: medium;
  }

  .map-responsive iframe{

    left:5%;
    top:50%;
    height:50%;
    width:90%;
    position:fixed;
    box-sizing: border-box;
    border-radius: 50px;
  }

}