/*==========================================
  LOOK LOUNGE ANIMATIONS
==========================================*/

/* Fade Up */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Fade Down */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Fade Left */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Fade Right */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Zoom */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* Floating */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Rotate */

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Pulse */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/*==============================
Animation Classes
==============================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom-in{

    animation:zoomIn .8s ease forwards;

}

.float{

    animation:floating 4s ease-in-out infinite;

}

.rotate{

    animation:rotate 20s linear infinite;

}

.pulse{

    animation:pulse 2s infinite;

}

/*==============================
Hover Effects
==============================*/

.hover-up{

    transition:.35s;

}

.hover-up:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-shadow{

    transition:.35s;

}

.hover-shadow:hover{

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:.5s;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/*==============================
Button Ripple
==============================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    background:rgba(255,255,255,.3);

    border-radius:50%;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn:hover::before{

    width:300px;

    height:300px;

}

/*==============================
Smooth Reveal
==============================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}