---------------------------------
/* 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;
}
#h {
    top: 165px;
    left: 19px;
    animation-name: h;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: 4;
    animation-fill-mode: forwards;
    transform: translate(0,0);
    transform-origin: 444px 230px;
}

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

@keyframes h {
    0% , 50% {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(0,0) rotate(45deg);
        opacity: 1;
    }
    50.001% , 100% {
        opacity: 0;
    }
}