---------------------------------
/* 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;
    }
    45% , 55% {
        background-position: -160px 0;
    }
}

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

#base {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}
#h_l,#h_r {
    position: absolute;
    top: 300px;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: 7;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
#h_l {
    right: 160px;
    animation-name: h_l;
}
@keyframes h_l {
    0% {
        top: 300px;
        right: 180px;
    }
    90% ,
    100% {
        top: 200px;
        right: 80px;
    }
}
#h_r {
    left: 160px;
    animation-name: h_r;
}
@keyframes h_r {
    0% {
        top: 300px;
        left: 180px;
    }
    90% ,
    100% {
        top: 200px;
        left: 80px;
    }
}

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