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

.fade-in{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-in.visible{
    opacity:1;
    transform:translateY(0);
}

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

.delay-1{
    transition-delay:.15s;
}

.delay-2{
    transition-delay:.30s;
}

.delay-3{
    transition-delay:.45s;
}

.delay-4{
    transition-delay:.60s;
}

/*==================================================
    HERO SLIDESHOW
==================================================*/

.hero-slide-foreground{
    animation:heroZoom 10s linear forwards;
}

@keyframes heroZoom{
    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }
}

/*==================================================
    SCROLL INDICATOR
==================================================*/

.scroll-indicator{
    animation:
        scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse{

    0%{
        opacity:.25;
        transform:translate(-50%,0);
    }

    50%{
        opacity:1;
        transform:translate(-50%,10px);
    }

    100%{
        opacity:.25;
        transform:translate(-50%,0);
    }
}

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

.button{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.button:hover{
    box-shadow:
        0 12px 28px rgba(255,255,255,.18);
}

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

.nav-left a,
.nav-right a{
    transition:
        color .3s ease;
}

/*==================================================
    IMAGE HOVER
==================================================*/

.gallery-item img{
    will-change:
        transform,
        filter;
}

/*==================================================
    LIGHTBOX
==================================================*/

#lightbox{
    transition:
        opacity .35s ease;
}

#lightbox-image{
    animation:
        lightboxAppear .35s ease;
}

@keyframes lightboxAppear{

    from{
        opacity:0;
        transform:scale(.96);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

/*==================================================
    LOADER
==================================================*/

.loading{
    animation:
        loadingPulse 1.4s ease-in-out infinite;
}

@keyframes loadingPulse{

    0%{
        opacity:.35;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.35;
    }
}