/* music */
#musicIcon {
  width: 28px;
  height: 28px;
  position: fixed;
  right: 3%;
  top: 3%;
  padding: 0;
  margin: 0;
  transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
}
#musicIcon img, #musicIcon2 img {
  padding: 0;
  margin: 0;
  vertical-align: baseline!important;
}
#musicIcon2 {
  display: none;
  width: 28px;
  height: 28px;
  position: fixed;
  right: 3%;
  top: 3%;
  padding: 0;
  margin: 0;
}
#musicIcon.play {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 250ms;
}
#musicImg.play{
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 250ms;
  -webkit-transform: rotate(0deg) translateZ(0);
  -webkit-transition-duration: 0ms;
  -webkit-animation-name: music;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
#musicIcon.play{
  -webkit-transform: rotate(0deg) translateZ(0);
  -webkit-transition-duration: 0ms;
  -webkit-animation-name: music;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes music {
  from { 
  -webkit-transform: rotate(0deg) translateZ(0);
  }
  to {
  -webkit-transform: rotate(360deg) translateZ(0);
  }
}
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}
.max-640-wrapper {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    max-width: 640px;
}
/* reset & help class */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  background-color:#F3F3F3;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  moz-user-select: none;
  webkit-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* help class */
.pm-none { margin: 0; padding: 0; }
.div-center { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.img-circle { border-radius: 50%; }
.absolute { position: absolute; }
.relative { position: relative; }
.text-white { color:white; }
.fixed { position: fixed; }
.pos.left { left: 0; }
.pos.right { right: 0; }
.pos.top { top: 0; }
.pos.bottom { bottom: 0; }
.pos.bottom-half { bottom: 50%; }
.pos.top-half { top: 50%; }
.width-full { width: 100%; }
.max-width-640 { max-width: 640px; }
.height-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.pull-right { float: right; }
.pull-left { float: left; }
.clearfix:before,.clearfix:after{display:table;content:" "}
.clearfix:after{clear:both}
.inline-block { display:inline-block }
.full-bg-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.full-bg-contain {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}