---------------------------------
/* 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: 300px;
    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: -300px 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: 112px;
    left: 149px;
    opacity: 0;
    animation-name: i_th;
}
#i_bh {
    top: 254px;
    left: 111px;
    opacity: 0;
    animation-name: i_bh;
}

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

@keyframes i_th {
    0% , 49.99% {
        top: 112px;
        left: 149px;
        opacity: 0;
    }
    50% , 55% {
        top: 112px;
        left: 149px;
        opacity: 1;
    }
    70% , 100% {
        top: 90px;
        left: 300px;
        opacity: 1;
    }
}
@keyframes i_bh {
    0% , 49.99% {
        top: 254px;
        left: 111px;
        opacity: 0;
    }
    50% , 65% {
        top: 254px;
        left: 111px;
        opacity: 1;
    }
    80% , 100% {
        top: 215px;
        left: 300px;
        opacity: 1;
    }
}