html, body {
    height: 100%;
    width: 100%;
  }

  body {
    background: url(http://www.hdwallpapers.in/walls/beautiful_christmas_tree-wide.jpg);
    background-size: 100%;
    padding-bottom: 50px;
    overflow: hidden;
  }


  .start {
    border-radius: 20px;
    background: #fff;
    margin: 0 auto;
    font-size: 60px;
    text-transform: uppercase;
    text-align: center;
    width: 900px;
    height: 650px;
    left: 50px;
    margin-top: 50px;
    padding-top: 50px;
    position: relative;
  }

  p {
    margin-top: 20px;
    color: black;
  }


  .ken {
    position: absolute;
    top: -30px;
    left: -340px;
    background: url(ken.png) no-repeat 0 0;

    height: 370px;
    width: 485px;
    z-index: 2;
  }





ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.jSlots-wrapper {
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

.slot {
    float: left;
}


input[type="button"] {
    display: block;
}

/* ---------------------------------------------------------------------
   FANCY EXAMPLE
--------------------------------------------------------------------- */

.slot-machine {
    margin-top: 40px;
    overflow: hidden;
}


.slot-machine .jSlots-wrapper {
    overflow: hidden;
    height: 145px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border-top: 5px solid black;
    border-bottom: 5px solid black;
}


.slot-machine .slot {
    overflow: hidden;
    background: #fff;
    border-left: 5px solid black;
    border-right: 5px solid black;
    margin-right: 5px;
}


.slot-machine .slot:nth-child(3)  {
    margin: 0;
}

.slot-machine .slot li {

    text-indent: 5000px;
    width: 140px;
    height: 145px;
    line-height: 100px;
    text-align: center;
    font-size: 70px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    font-family: 'Gravitas One', serif;
    background-image: url('icons.jpg');
    background-repeat: no-repeat;
}

.slot-machine .slot li:nth-child(1)  {
    background-position: 0 -10px;
}

.slot-machine .slot li:nth-child(2)  {
    background-position: 0 -128px;
}

.slot-machine .slot li:nth-child(3) {
    background-position:  -256px;
}

.slot-machine .slot li:nth-child(4) {
    background-position: 0 -250px;
}

.slot-machine .slot li:nth-child(5) {
    background-image: url(drink.png);
}

.slot-machine .slot li:nth-child(6) {
    background-position: -256px -256px;
}

.slot-machine .slot li:nth-child(7) {
    background-position: -386px -386px;
}


.slot-machine .slot li span {
    display: block;
}

#playFancy {
    display: none;
}

/* ---------------------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------------------- */

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}
.css3-blink {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s;
}

.css3-spin {
  -webkit-animation-name: spin;
  -webkit-animation-iteration-count: infinite;

  -webkit-animation-duration: 3s;
}


@-webkit-keyframes winnerBox {
    0%, 50%, 100% {
        box-shadow: inset 0 0  0px blue;
    }
    25%, 75% {
        box-shadow: inset 0 0 30px blue;
    }
}


@-webkit-keyframes spin {
    0%, 50%, 100% {
         -webkit-transform: rotate(0deg);
    }
    25%, 75% {
         -webkit-transform: rotate(10deg);
    }
}





.winner li {
    -webkit-animation: winnerBox 2s infinite linear;
       -moz-animation: winnerBox 2s infinite linear;
        -ms-animation: winnerBox 2s infinite linear;
}
.winner li span {
     -webkit-animation: winner 2s infinite linear;
        -moz-animation: winner 2s infinite linear;
         -ms-animation: winner 2s infinite linear;
}