* {
    transition: all ease-in-out 0.2s;
}

body {
    transition: all 2s ease-in-out;
}

.select-wrapper select {
    width: 100%;
    background: none;
}
.select-wrapper input {
    width: 100%;
    background: none;
}

select,
input,
textarea:focus {
    outline: none;
}

@keyframes arriba {
    0% {
        top: 0px;

    }

    100% {
        top: -100%;
    }
}

@keyframes destacado {
    0% {
        background-color: rgb(0, 119, 255);
    }

    25% {
        scale: 1.5;
    }

    50% {
        scale: 1.3;
        background-color: rgb(0, 153, 255);
    }

    75% {
        background-color: rgb(0, 119, 255);
        scale: 1.5;
    }

    100% {
        scale: 1;
        background-color: rgb(0, 183, 255);
    }
}

@keyframes aviso {
    0% {
        right: -100%;
    }

    5% {
        right: 75px;

    }

    10% {
        right: 40px;
    }

    20% {
        right: 50px;
        bottom: 100px;

    }

    30% {
        bottom: 110px;
    }

    40% {
        bottom: 100px;
    }

    50% {
        bottom: 110px;
    }

    60% {
        bottom: 110px;
    }

    70% {
        bottom: 100px;

    }

    80% {
        bottom: 110px;
    }

    97% {
        right: 50px;

    }

    100% {
        right: -100%;
    }
}

#menu-btn {
    animation-name: destacado;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    background-color: rgb(0, 119, 255);
}

#aviso {
    animation-name: aviso;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.aparecerArriba {
    animation-name: arriba;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: reverse;
    animation-timing-function: ease-in-out;
}

.desaparecerArriba {
    animation-name: arriba;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.propiedad .img img {
    width: 250px;
    height: 250px;
    object-fit: cover;
}

.propiedad .img {
    border-radius: 20px;
    padding: 10px;
}

.propiedad .body {
    width: calc(100% - 310px);
}

#menu-btn {
    display: none;
}

#aside {
    height: 100%;
}

@media only screen and (max-width: 600px) {
    #aside {
        position: fixed !important;
    }

    .propiedades {
        flex-direction: column;
    }


    #menu-btn {
        display: block;
        z-index: 56;
    }

    .propiedad .img img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .propiedad .body {
        width: calc(100%);
    }
}

.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(160, 160, 160, .9) rgba(255, 255, 255, .45);
}

.custom-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .45);
    border-radius: 999px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(170, 170, 170, .9);
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, .45);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 140, 140, .95);
}

#gallery .img-gallery {
    height: 100%;
    width: 100%;
    object-fit: cover;
}



#gallery {
    height: 600px;
    width: 100%;
    scrollbar-width: 0px;
    scroll-behavior: smooth;
}

@media only screen and (max-width: 600px) {
    #gallery {
        height: 350px;
    }
}