body {
  margin: 0 auto 10px;
  text-align: center;
  font-family: 'Arial', sans-serif;
  background: #f5f5f5;
}

.wrap-jigsaw {
  position: relative;
  overflow: hidden;
  display: inline-block;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
  background: #fff;
}
.wrap-jigsaw canvas {
  display: block;
}

.wrap-content {
  position: absolute;
  top: 0;
  z-index: 100;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  display: table-cell;
  line-height: 740px !important;
  vertical-align: middle;
  -webkit-animation: bounce 1500ms ease-out;
  -moz-animation: bounce 1500ms ease-out;
  -o-animation: bounce 1500ms ease-out;
  animation: bounce 1500ms ease-out;
}

.list-img {
  margin-left: 10px;
  display: inline-block;
}

.list-img:after {
  content: ' ';
  clear: both;
  display: table;
}

.list-img li {
  position: relative;
  background: #000;
  line-height: 112px;
  text-align: center;
  color: #fff;
  float: left;
  list-style: none;
  margin-right: 10px;
  margin-bottom: 10px;
}

.list-img li img {
  opacity: .8;
  display: block;
  width: 150px;
}

.list-img li:hover img {
  opacity: 1;
}

.list-img .browseBtn {
  display: block;
  padding: 0 20px;
  height: 100px;
  cursor: pointer;
}

.list-img .browseBtn:hover {
  color: #ff0;
}

.list-img .files-input {
  opacity: 0;
  width: 102px;
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 100;
}

.notice-img-wrong {
  color: #fff;
  display: block;
  font-size: 22px;
  position: absolute;
  top: 100px;
  width: 100%;
  letter-spacing: 2px;
}

.canvas-temp {
  display: none;
}

#localStorageTemp {
  display: none;
}

.choose-level {
  padding: 20px 10px;
}

.level-item {
  display: inline-block;
  margin: 0 10px;
}

/*  --- ANIMATION --- Webkit, Chrome and Safari */
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
  5% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
  15% {
    -webkit-transform: translateY(0);
    padding-bottom: 5px;
  }
  30% {
    -webkit-transform: translateY(-50%);
  }
  40% {
    -webkit-transform: translateY(0%);
    padding-bottom: 6px;
  }
  50% {
    -webkit-transform: translateY(-30%);
  }
  70% {
    -webkit-transform: translateY(0%);
    padding-bottom: 7px;
  }
  /*  80% {
  -webkit-transform:translateY(-15%);
}
  90% {
  -webkit-transform:translateY(0%);
  padding-bottom: 8px;
}*/
  80% {
    -webkit-transform: translateY(-10%);
  }
  90% {
    -webkit-transform: translateY(0%);
    padding-bottom: 9px;
  }
  99% {
    -webkit-transform: translateY(-5%);
  }
  100% {
    -webkit-transform: translateY(0);
    padding-bottom: 9px;
    opacity: 1;
  }
}