/*------------------------------------------------------
--------------------------------------------------------
Basic CSS Scroll Animation Library
Created by The West Harbour - thewestharbour.com

To use:
1. Add 'hide-me' class to any element
2. Then add a secondary specific class
3. The 'unhidden' class controls the element's final state
--------------------------------------------------------
------------------------------------------------------*/

.hide-me{
    transition: 1s all ease;
}

.hide-me.fade-me{
    opacity: 0;
    transition: 1s all ease;
}

.hide-me.fade-me.unhidden{
    opacity: 1;
}

.hide-me.clip-me-up,
.hide-me.clip-me-right,
.hide-me.clip-me-down,
.hide-me.clip-me-left,
.hide-me.clip-me-out{
    transition: 2s all ease;
}

.hide-me.clip-me-up{
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.hide-me.clip-me-right{
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.hide-me.clip-me-down{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.hide-me.clip-me-left{
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.hide-me.clip-me-out{
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.hide-me.clip-me-up.unhidden,
.hide-me.clip-me-right.unhidden,
.hide-me.clip-me-down.unhidden,
.hide-me.clip-me-left.unhidden,
.hide-me.clip-me-out.unhidden{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.hide-me.move-me-up,
.hide-me.move-me-right,
.hide-me.move-me-down,
.hide-me.move-me-left{
    transition: 1.5s all ease;
}

.hide-me.move-me-up{
    transform: translateY(2rem);
}

.hide-me.move-me-right{
    transform: translateX(-2rem);
}

.hide-me.move-me-down{
    transform: translateY(-2rem);
}

.hide-me.move-me-left{
    transform: translateX(2rem);
}

.hide-me.move-me-up.unhidden,
.hide-me.move-me-right.unhidden,
.hide-me.move-me-down.unhidden,
.hide-me.move-me-left.unhidden{
    transform: translate(0, 0);
}

.hide-me.shrink-me,
.hide-me.grow-me{
    transition: 1s all ease;
}

.hide-me.shrink-me{
    transform: scale(1.05, 1.05);
}

.hide-me.grow-me{
    transform: scale(0.95, 0.95)
}

.hide-me.shrink-me.unhidden,
.hide-me.grow-me.unhidden{
    transform: scale(1, 1);
}

.hide-me.delay-show-shortest,
.row .hide-me.stagger:nth-of-type(2){
    transition-delay: 0.33s;
}

.hide-me.delay-show-shorter,
.row .hide-me.stagger:nth-of-type(3){
    transition-delay: 0.67s;
}

.hide-me.delay-show-short,
.row .hide-me.stagger:nth-of-type(4){
    transition-delay: 1s;
}

.hide-me.delay-show,
.row .hide-me.stagger:nth-of-type(5){
    transition-delay: 1.33s;
}

.hide-me.delay-show-long,
.row .hide-me.stagger:nth-of-type(6){
    transition-delay: 1.67s;
}

.hide-me.delay-show-longer,
.row .hide-me.stagger:nth-of-type(7){
    transition-delay: 2s;
}

.hide-me.delay-show-longest,
.row .hide-me.stagger:nth-of-type(8){
    transition-delay: 2.33s;
}

.hide-me.no-delay{
    transition-delay: 0s !important;
}

.hide-me.quickest{
    transition-duration: 0.33s;
}

.hide-me.quicker{
    transition-duration: 0.67s;
}

.hide-me.quick{
    transition-duration: 1s;
}

.hide-me.long{
    transition-duration: 1.33s;
}

.hide-me.longer{
    transition-duration: 1.67s;
}

.hide-me.longest{
    transition-duration: 2s;
}