/* =========================================================
   SWIPE HINT
========================================================= */

.swipe-hint{
    position:absolute;
    z-index:30;

    left:50%;
    bottom:155px;

    transform:translateX(-50%);

    text-align:center;

    color:#fff;

    font-size:10px;
    letter-spacing:.14em;

    pointer-events:none;

    text-shadow:0 1px 8px #000;

    animation:
        swipeHintFade 4s ease forwards;
}


.swipe-arrow{
    font-size:28px;
    line-height:1;

    margin-bottom:8px;

    animation:
        swipeArrow 1.2s ease-in-out infinite;
}


.swipe-hint span{
    display:block;

    margin-top:6px;

    color:#aaa;

    font-size:8px;
    letter-spacing:.12em;
}


/* =========================================================
   HINT ANIMATION
========================================================= */

@keyframes swipeArrow{

    0%,
    100%{
        transform:translateY(4px);
        opacity:.5;
    }

    50%{
        transform:translateY(-6px);
        opacity:1;
    }

}


@keyframes swipeHintFade{

    0%{
        opacity:0;
    }

    15%{
        opacity:1;
    }

    70%{
        opacity:1;
    }

    100%{
        opacity:0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

    .swipe-hint{
        bottom:155px;
    }

}