---------------------------------
/* Global Resets */
/* --------------------------------- */

html,body{
    margin: 0;
    padding: 0;
}
div{
    position: absolute;
}
img{
    border: none;
}
a{
    outline:none;
}
/* --------------------------------- */
/* Containers */
/* --------------------------------- */
#fallback{
    z-index:9999;
	left:0;
}
#banner{
    width: 160px;
    height: 600px;
    position: relative;
    background: #fff url(../assets/back.jpg) no-repeat 0 0;
    overflow: hidden;
    animation-name: bg;
    animation-duration: 3s;
    animation-timing-function: steps(1);
    animation-iteration-count: 3;
}
@keyframes bg {
    0%,100% {
        background-position: 0 0;
    }
    50% {
        background-position: -160px 0;
    }
}

/* --------------------------------- */
/* Element Positioning */
/* --------------------------------- */

#banner img {
    position: absolute;
}
#base {
    right: 0;
    bottom: 0;
    left: 0;
}
#i_th, #i_bh {
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: 4;
    animation-fill-mode: forwards;
}
#i_th {
    top: 159px;
    left: 79px;
    opacity: 0;
    animation-name: i_th;
}
#i_bh {
    top: 235px;
    left: 56px;
    opacity: 0;
    animation-name: i_bh;
}

/* ---------------------- */
/* All KEYFRAMES */
/* ---------------------- */

@keyframes i_th {
    0% , 49.99% {
        top: 159px;
        left: 79px;
        opacity: 0;
    }
    50% , 55% {
        top: 159px;
        left: 79px;
        opacity: 1;
    }
    75% , 100% {
        opacity: 1;
        left: 160px;
        top: 120px;
    }
}
@keyframes i_bh {
    0% , 49.99% {
        top: 235px;
        left: 56px;
        opacity: 0;
    }
    50% , 65% {
        top: 235px;
        left: 56px;
        opacity: 1;
    }
    85% , 100% {
        top: 215px;
        left: 160px;
        opacity: 1;
    }
}