/***********************************************************************************************/
/*                                                                                             */
/*                                       ANIMATIONS                                            */
/*                                                                                             */
/***********************************************************************************************/

/* FADE IN/OUT */
@keyframes fade {
	from { opacity:0% }
	to { opacity:100% }
}

img.fadein {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: fade;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
}

/* FLOATING/HOVERING */
@keyframes floating {
	from { box-shadow: 6px 6px 16px grey; }
	to { box-shadow: 0px 0px 8px grey; }
}

img.floating {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}