@import "../../../../activity/css/description";
@import "../../../../activity/css/activityAction";
@import "../../../../activity/css/share";
@import "../../../../activity/css/music";
@import "../../../../activity/css/result";
@import "../../../../activity/css/payDraw";

html {
  background: #FFF no-repeat top;
  background-size: cover;
}

body, .mui-content {
  background: none;
}

@boxMainWidth: 220px;
@mainColor: #C82B38;

@keyframes hammer {
  0% {
    transform: rotate(-15deg);

  }
  /*50%
  {
      transform: rotate(0deg);

  }*/
  100% {
    transform: rotate(15deg);
  }
}

@-webkit-keyframes hammer {
  0% {
    transform: rotate(-15deg);

  }
  /*50%
  {
      transform: rotate(0deg);

  }*/
  100% {
    transform: rotate(15deg);
  }
}

@-webkit-keyframes shake {
  0% {
    transform: scale(1);
    -webkit-transform: scale3d(1, 1, 1);

  }

  6% {
    -webkit-transform: scale(.9) rotate(-8deg);
    -webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
  }

  18%, 30%, 42% {
    -webkit-transform: scale(1.1) rotate(8deg);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);

  }

  12%, 24%, 36%, 48% {
    -webkit-transform: scale(1.1) rotate(-8deg);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);

  }
  54% {
    -webkit-transform: scale(1);
    -webkit-transform: scale3d(1, 1, 1);
  }

  60% {
    -webkit-transform: scale(1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}

.pb-egg {
  margin: 30% 0 0 0;
  .egg-box {
    .egg-box-1 {

    }
    .egg-box-2 {
      overflow: hidden;
      .item {
        width: 50%;
        float: left;
      }
    }
    #egg {
      position: relative;
      .egg-click {
        width: 140px;
        margin: 0 auto;
        position: relative;
        &.shake {
          -webkit-animation: shake 1.2s linear;
        }
        &.open {
          img.close {
            display: none;
          }
          img.open {
            display: block;
          }
          img.hammer {
            display: block;
          }
        }
        img {
          width: 140px;
          &.open {
            display: none;
          }
          &.hammer {
            display: none;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 70px;
          }
        }
      }
    }
  }
}
