/*
Steam particles

Steam blur

Steam animation

*/

/* ======================================================
   WARM FOOD STEAM
====================================================== */

.steam{

    position:absolute;

    left:50%;

    bottom:44%;

    transform:translateX(-50%);


    width:360px;

    height:300px;


    z-index:45;


}



/* Individual vapor */

.steam-line{


    position:absolute;


    bottom:0;


    width:64px;

    height:220px;


    border-radius:50%;


    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.12) 60%, transparent 100%);

    mix-blend-mode: screen;

    filter:

    blur(20px);


    opacity:.78;


    animation:

    steam-rise 10s infinite ease-in-out;


}



/* Left vapor */

.steam-one{

    left:20px;

    width:72px;

    height:240px;

    animation-delay:0s;

}


/* Center vapor */

.steam-two{

    left:135px;

    width:78px;

    height:260px;

    animation-delay:1.2s;

}



/* Right vapor */

.steam-three{

    left:260px;

    width:64px;

    height:220px;

    animation-delay:2.6s;

}



/* ======================================================
   NATURAL MOVEMENT
====================================================== */


@keyframes steam-rise{


    0%{

        transform:

        translateY(30px)

        translateX(0)

        scale(.85);


        opacity:0;

    }



    20%{

        opacity:.6;

    }



    50%{


        transform:

        translateY(-80px)

        translateX(18px)

        scale(1.25);


    }



    100%{


        transform:

        translateY(-220px)

        translateX(-25px)

        scale(1.6);


        opacity:0;


    }



}