/* ==========================================
   PrintQly Animation CSS
   Version : 1.0
========================================== */

/* Transition */

a,
button,
.btn,
.card,
input,
select,
textarea{
    transition: .30s ease;
}

/* ==========================================
   Fade In
========================================== */

.fade-in{

animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

0%{

opacity:0;

}

100%{

opacity:1;

}

}

/* ==========================================
   Fade Up
========================================== */

.fade-up{

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================
   Fade Down
========================================== */

.fade-down{

animation:fadeDown .8s ease forwards;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================
   Fade Left
========================================== */

.fade-left{

animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================
   Fade Right
========================================== */

.fade-right{

animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================
   Zoom
========================================== */

.zoom-in{

animation:zoomIn .5s ease;

}

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

/* ==========================================
   Float
========================================== */

.float{

animation:float 4s ease infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/* ==========================================
   Pulse
========================================== */

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/* ==========================================
   Rotate
========================================== */

.rotate{

animation:rotate360 8s linear infinite;

}

@keyframes rotate360{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/* ==========================================
   Bounce
========================================== */

.bounce{

animation:bounce 1.2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* ==========================================
   Loader
========================================== */

.loader{

width:45px;

height:45px;

border:5px solid rgba(255,255,255,.2);

border-top:5px solid #FFD400;

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.hover-lift:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.hover-grow:hover{

transform:scale(1.04);

}

.hover-rotate:hover{

transform:rotate(2deg);

}

/* ==========================================
   Delay Classes
========================================== */

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.4s;

}

.delay-3{

animation-delay:.6s;

}

.delay-4{

animation-delay:.8s;

}

/* ==========================================
   Scroll Animation
========================================== */

.reveal{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}