html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

body {
    -webkit-text-size-adjust: none;
    font-family: sans-serif
}

h1 {
    font-size: 33px;
    margin: 50px 0 15px;
    text-align: center;
    color: #212121
}

h2 {
    font-size: 14px;
    font-weight: bold;
    color: #3c3c3c;
    margin: 20px 10px 10px
}

small {
    margin: 0 10px 30px;
    display: block;
    font-size: 12px
}

a {
    margin: 0 0 0 10px;
    font-size: 12px;
    color: #3c3c3c
}

img {
    border: 0
}

ol, ul, li {
    list-style-type: none
}

html, body {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000
}

#content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: absolute
}

.content-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
}

.content-wrap > li {
    width: 100%;
    height: 100%;
    float: left;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative
}

.charector {
    position: absolute;
    left: -6%;
    top: 55%;
    position: absolute;
    width: 100%;
    height: 100%;
    width: 151px;
    height: 291px;
    -webkit-transform: 'translateX(0px)';
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    background: url(../images/boy.png) -0px -291px no-repeat
}

.slowWalk {
    -webkit-animation-name: person-slow;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start)
}

.slowFlolerWalk {
    -webkit-animation-name: person-floler-slow;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
    -moz-animation-name: person-floler-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: step-start
}

.pauseWalk {
    -webkit-animation-play-state: paused
}

.boyOriginal {
    background-position: -150px -0px
}

@-webkit-keyframes person-slow {
    0% {
        background-position: -0px -291px
    }
    25% {
        background-position: -602px -0px
    }
    50% {
        background-position: -302px -291px
    }
    75% {
        background-position: -151px -291px
    }
    100% {
        background-position: -0px -291px
    }
}

@-moz-keyframes person-slow {
    0% {
        background-position: -0px -291px
    }
    25% {
        background-position: -602px -0px
    }
    50% {
        background-position: -302px -291px
    }
    75% {
        background-position: -151px -291px
    }
    100% {
        background-position: -0px -291px
    }
}

@-webkit-keyframes person-floler-slow {
    0% {
        background-position: -453px -0px
    }
    25% {
        background-position: -904px -0px
    }
    50% {
        background-position: -451px -0px
    }
    75% {
        background-position: -753px -0px
    }
    100% {
        background-position: -300px -0px
    }
}

@-moz-keyframes person-floler-slow {
    0% {
        background-position: -453px -0px
    }
    25% {
        background-position: -904px -0px
    }
    50% {
        background-position: -451px -0px
    }
    75% {
        background-position: -753px -0px
    }
    100% {
        background-position: -300px -0px
    }
}

.boy-rotate {
    -webkit-animation-name: boy-rotate;
    -webkit-animation-duration: 850ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: step-start;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: boy-rotate;
    -moz-animation-duration: 850ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: step-start;
    -moz-animation-fill-mode: forwards
}

@-webkit-keyframes boy-rotate {
    0% {
        background-position: -603px -291px
    }
    16.7% {
        background-position: -150px -0px
    }
    33.4% {
        background-position: -453px -291px
    }
    50.1% {
        background-position: -0px -0px
    }
    66.8% {
        background-position: -903px -291px
    }
    83.5% {
        background-position: -753px -291px
    }
    100% {
        background-position: -603px -291px
    }
}

@-moz-keyframes boy-rotate {
    16.7% {
        background-position: -150px -0px
    }
    33.4% {
        background-position: -453px -291px
    }
    50.1% {
        background-position: -0px -0px
    }
    66.8% {
        background-position: -903px -291px
    }
    83.5% {
        background-position: -753px -291px
    }
    100% {
        background-position: -603px -291px
    }
}

.button {
    position: absolute;
    top: 82%
}

button {
    width: 80px;
    height: 50px
}