@charset "utf-8";


.house-wrapper {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
}
.house-card {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 40vh;
}
.house-card img {
    width: 100%;
    height: 100%;
    transition-duration: 1s;
    object-fit: cover;
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}
.house-card:hover img{
    transform: scale(1.2);
    opacity: 1;
    transition-duration: 1s;
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}
.caption {
    align-items: center; 
    background: rgba(0, 0, 0, 0.524); 
    bottom: 0;
    color: rgb(255, 255, 255);
    display: flex; 
    height: auto;
    justify-content: center; 
    left: 50;
    opacity: 0; 
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .6s ease; 
    width: 100%;
}
.caption:hover {
    opacity: 1; 
}
.caption p {
    padding-top: 70px;
    width: 80%; 
    height: 100px;
    text-align: center;
    font-size: 120%;
    border: solid 1px rgb(205, 255, 7);
    font-family: 'Barlow',"Helavetica",sans-serif;
}
  



.footer-menu{
    width: 100%;
    height: 25vh;
    padding-top: 20vh;
}



.to-others{
    float: left;
    margin-left: 10vw;
    font-size: 30px;
    font-weight: lighter; 
    font-style: italic;
}
.to-others a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 5px 25px;
    color: black;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.to-others a:before {
    position: absolute;
    bottom: 0px;
    left: 50%;
    content: '';
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
}
.to-others a:after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: '';
    width: 100%;
    height: 4px;
    background:  rgb(205, 255, 7);
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s;
}
.to-others a:hover {
    opacity: 1;
}
.to-others a:hover:after {
    transform: scale(1, 1);
}



.to-villa{
    float: right;
    margin-right: 10vw;
    font-size: 30px;
    font-weight: lighter;
    font-style: italic;
}
.to-villa a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 5px 45px;
    color: black;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.to-villa a:before {
    position: absolute;
    bottom: 0px;
    left: 50%;
    content: '';
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
}
.to-villa a:after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: '';
    width: 100%;
    height: 4px;
    background:  rgb(205, 255, 7);
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}
.to-villa a:hover {
    opacity: 1;
}
.to-villa a:hover:after {
    transform: scale(1, 1);
}