/* ==========================================================
   FADE IN
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ==========================================================
   CARD ENTER
========================================================== */

@keyframes cardEnter{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   FLOAT ICON
========================================================== */

@keyframes floatIcon{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ==========================================================
   SKELETON LOADING
========================================================== */

@keyframes skeletonLoading{

    100%{

        transform:translateX(100%);

    }

}


/* ==========================================================
   MAP SPINNER
========================================================== */

@keyframes mapSpinner{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   GLOBAL ANIMATIONS
========================================================== */

#dreamerResult{

    animation:fadeIn .35s ease;

}

.dreamer-card{

    animation:cardEnter .45s ease;

}

.dreamer-placeholder{

    animation:fadeIn .35s ease;

}


/* ==========================================================
   SMOOTH TRANSITIONS
========================================================== */

*{

    transition:

        background-color .25s ease,

        border-color .25s ease,

        color .25s ease;

}


/* ==========================================================
   BUTTONS
========================================================== */

button{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}


/* ==========================================================
   LINKS
========================================================== */

a{

    transition:

        color .25s ease,

        opacity .25s ease;

}


/* ==========================================================
   IMAGES
========================================================== */

img{

    transition:

        transform .45s ease,

        opacity .35s ease;

}


/* ==========================================================
   INPUTS
========================================================== */

input,
select,
textarea{

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        background-color .25s ease;

}


/* ==========================================================
   LEAFLET
========================================================== */

.leaflet-interactive{

    transition:

        fill-opacity .25s ease,

        stroke-width .25s ease,

        stroke .25s ease,

        fill .25s ease;

}