body {
    background:#2a8c3c;
}

main {
    width:640px;
    height:960px;
    display: block;
    margin:0px auto;
    position: relative;
}

.board {
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    z-index: 0;
}

.board img {
    width:100%;
    height:auto;
}

.play-level {
    width:640px;
    height:960px;
    position: absolute;
    top:0px;
    z-index: 10;
}

.play-level ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.play-level ul li {
    position: absolute;
    display: block;
    width:100%;
    height:106px;
}

.play-level ul li div {
    position:absolute;
    top:0px;
    width:92px;
    height:106px;
}

.play-level ul li div.selected, .play-level ul li div.started {
    background:url(images/fence.png) top center no-repeat;
}

#row1 {
    top:262px;
}

#row2 {
    top:339px;
}

#row3 {
    top:415px;
}

#row4 {
    top:492px;
}

#row5 {
    top:569px;
}

#row6 {
    top:646px;
}

#row7 {
    top:723px;
}

#row8 {
    top:800px;
}

.play-level ul li:nth-child(odd) div:nth-child(1){
    left:75px;
}

.play-level ul li:nth-child(odd) div:nth-child(2){
    left:164px;
}

.play-level ul li:nth-child(odd) div:nth-child(3){
    left:253px;
}

.play-level ul li:nth-child(odd) div:nth-child(4){
    left:342px;
}

.play-level ul li:nth-child(odd) div:nth-child(5){
    left:431px;
}

.play-level ul li:nth-child(odd) div:nth-child(6){
    left:520px;
}

.play-level ul li:nth-child(even) div:nth-child(1){
    left:30px;
}

.play-level ul li:nth-child(even) div:nth-child(2){
    left:119px;
}

.play-level ul li:nth-child(even) div:nth-child(3){
    left:208px;
}

.play-level ul li:nth-child(even) div:nth-child(4){
    left:297px;
}

.play-level ul li:nth-child(even) div:nth-child(5){
    left:386px;
}

.play-level ul li:nth-child(even) div:nth-child(6){
    left:475px;
}



.character-level {
    width:640px;
    height:960px;
    position: absolute;
    top:0px;
    z-index: 20;
    pointer-events:none;
}

.the-pig {
    width:276px;
    height:318px;
    position: absolute;
    background:url('images/pig-sprite.png') top left no-repeat;
    margin-left:-138px;
    margin-top:-157px;

}

.the-pig.left-down {
    animation:play .8s steps(5) forwards;
}

@keyframes play {
    100% {
        background-position: -1380px 0;
    }
}

.gameUI {
    position: absolute;
    bottom:0px;
    right:10px;
    z-index: 40;
}

.gameUI p {
    font-size:20px;
    font-weight:bold;
    color:#fff;
    font-family:Arial;
}

.overlay {
    width:640px;
    height:960px;
    position:fixed;
    top:0px;
    left:0px
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.start {
    width:640px;
    height:960px;
    padding-top:300px;
    background-size:cover;
    background:url(images/start-bg.jpg) no-repeat top center;
}

.win, .done, .lost {
    width:640px;
    height:960px;
    padding-top:300px;
    background:url(images/level-up.jpg) no-repeat top center;
    display:none;
}

.win h3, .done h3, .lost h3 {
    font-size:24px;
    font-weight:bold;
    color:#fff;
    text-align: center;
}

.win p, .done p, .lost p {
    font-size:18px;
    color:#fff;
    text-align: center;
}

.win button, .done button, .lost button {
    display: block;
    width:300px;
    background:#fff;
    color:#0056a4;
    height:40px;
    border:0px;
    font-size:24px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin:0px auto;
}



.start button {
    width:400px;
    height:70px;
    background:#0056a4;
    color:#fff;
    margin:0px auto 0px auto;
    display:block;
    border:0px;
    font-size:24px;
    font-weight:bold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}



@media (min-width:320px) {
    main {
        /*General*/
        transform: translate(-26%, -26%) scale(0.5, 0.5);
        /*Firefox*/
        -moz-transform: translate(-26%, -26%) scale(0.5, 0.5);
        /*Microsoft Internet Explorer*/
        -ms-transform: translate(-26%, -26%) scale(0.5, 0.5);
        /*Chrome, Safari*/
        -webkit-transform: translate(-26%, -26%) scale(0.5, 0.5);
        /*Opera*/
        -o-transform: translate(-26%, -26%) scale(0.5, 0.5);
    }
}

@media (min-width:375px) {
    main {
        /*General*/
        transform: translate(-22%, -21%) scale(0.6, 0.6);
        /*Firefox*/
        -moz-transform: translate(-22%, -21%) scale(0.6, 0.6);
        /*Microsoft Internet Explorer*/
        -ms-transform: translate(-22%, -21%) scale(0.6, 0.6);
        /*Chrome, Safari*/
        -webkit-transform: translate(-22%, -21%) scale(0.6, 0.6);
        /*Opera*/
        -o-transform: translate(-22%, -21%) scale(0.6, 0.6);
    }
}

@media (min-width:414px) {
    main {
        /*General*/
        transform: translate(-19%, -18%) scale(0.65, 0.65);
        /*Firefox*/
        -moz-transform: translate(-19%, -18%) scale(0.65, 0.65);
        /*Microsoft Internet Explorer*/
        -ms-transform: translate(-19%, -18%) scale(0.65, 0.65);
        /*Chrome, Safari*/
        -webkit-transform: translate(-19%, -18%) scale(0.65, 0.65);
        /*Opera*/
        -o-transform: translate(-19%, -18%) scale(0.65, 0.65);
    }
}