/* -----------KEYFRAMES---------------- */

@-webkit-keyframes ReflectionLoop {
    0%{background-position:0% 96%}
    30%{background-position:50% 96%}
    60%{background-position:100% 5%}
    100%{background-position:0% 96%}
}
@-moz-keyframes ReflectionLoop {
  0%{background-position:0% 96%}
  30%{background-position:0% 96%}
  60%{background-position:100% 5%}
  100%{background-position:0% 96%}
}
@keyframes ReflectionLoop {
  0%{background-position:0% 96%}
  30%{background-position:50% 96%}
  60%{background-position:100% 5%}
  100%{background-position:0% 96%}
}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes ZoomBack { from { transform: scale(15); } to { transform: scale(1); } }
@-moz-keyframes ZoomBack { from { transform: scale(15); } to { transform: scale(1); } }
@keyframes ZoomBack { from { transform: scale(15); } to { transform: scale(1); } }




@-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(15) translateY(1800px);
            transform: scale(15) translateY(1800px);
            opacity: 0;
  }
  100% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
            opacity: 1;
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(15) translateY(1800px);
            transform: scale(15) translateY(1800px);
            opacity: 0;
  }
  100% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
            opacity: 1;

}
}


@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1
    transform: translateY(0px);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}





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


html{
  height: 100%;
  width: 100%;
  overflow:hidden;
}

body{
  font-family: 'tiempossemibold';
  background-color: #51594D;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  height: 100%;
  font-size: 18px;
  padding-top: 20px;
  transition: all 0.5s ease;
  color: #272926

}

#main{
  /* background-color: rgba(10, 10, 255, 0.1); */
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


#villa{
  /* background-color: rgba(255, 10, 10, 0.1); */
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;

}

#villa img{
  height: 100%;
}

.epicReveal-Zoom{
  -webkit-animation: scale-down-center 3.5s cubic-bezier(0.000, 1, 0.000, 1.000) forwards;
        animation: scale-down-center 3.5s cubic-bezier(0.000, 1, 0.000, 1.000) forwards;
}

.epicReveal-Fade1{
  opacity: 0;
  -webkit-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 2.8s forwards;
        animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 2.8s forwards;
}

.epicReveal-Fade2{
  opacity: 0;
  -webkit-animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 2.9s forwards;
        animation: fadeIn 3s cubic-bezier(0.075, 0.820, 0.165, 1.000) 2.9s forwards;
}

#menu{
  /* width: 40%; */
  display: flex;
  align-items: center;
  justify-content:space-between;
  margin-top: 50px;

}



a{
  text-decoration: none;
  color: #D6AE92;
  transition: all 0.2s ease;
  padding: 20px;
}


.button{
  /* background-color: #D6AE92; */
  padding: 20px;
  border-radius: 5px;
  color: #51594D;
  background: linear-gradient(212deg, #74482E, #cd763d, #752923, #e6cdba, #bc7648);
background-size: 1000% 1000%;

-webkit-animation: ReflectionLoop 14s ease infinite;
-moz-animation: ReflectionLoop 14s ease infinite;
animation: ReflectionLoop 14s ease infinite;
}

a:hover{
  transform: scale(1.1);
  transform: translateY(-5px);
  color: #e6cdba;


}

.button:hover{
  background: linear-gradient(212deg, #D6AE92, #e6cdba, #bc7648);
  background-size: 1000% 1000%;
  -webkit-animation: ReflectionLoop 4s ease infinite;
  -moz-animation: ReflectionLoop 4s ease infinite;
  animation: ReflectionLoop 4s ease infinite;
  transform: scale(1.1);
  transform: translateY(-5px);
  color: #51594D;
}

.hashtag{
  color: #434A40;

}



@media only screen and (max-width: 600px) {
  #menu {
    flex-direction: column;
  }
  /* #menu :nth-child(1) { order: 2; }
  #menu :nth-child(2) { order: 3; }
  #menu :nth-child(3) { order: 1; }
  #menu :nth-child(4) { order: 4; }
  #menu :nth-child(5) { order: 5; } */

  #villa{
    height: 40%;
  }
}


@media only screen and (max-width: 340px) {
  body{
    font-size: 12px;
    padding-top: 0px;
  }
  #villa{
    height: 30%;
  }
}

@media only screen and (max-height: 560px) {
  body{
    font-size: 12px;
    padding-top: 0px;
  }
  #villa{
    height: 30%;
  }
}