body {
    background:#eee;

}
.circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: circle;
          flex-direction: circle;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.circle .day {
  margin: 5px;
  cursor: pointer;
}
.circle .day .front, .circle .day .back {
  height: 5.5vh;
  width: 5.5vh;
  -webkit-transform: perspective(600px) rotateY(0deg);
          transform: perspective(600px) rotateY(0deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s linear 0s;
  transition: -webkit-transform 0.3s linear 0s;
  transition: transform 0.3s linear 0s;
  transition: transform 0.3s linear 0s, -webkit-transform 0.3s linear 0s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  font-size: 1em;
  color: white;
  background: tomato;
  border-radius: 50%;
}
.circle .day .back {
  -webkit-transform: perspective(600px) rotateY(180deg);
          transform: perspective(600px) rotateY(180deg);
  margin-top: -5.5vh;
  position: absolute;
  background: #FFF;
  border: 4px solid white;
  box-sizing: border-box;
}
.circle .flip:hover .front, .circle .flip:active .front, .circle .flip:focus .front {
  -webkit-transform: perspective(600px) rotateY(-180deg);
          transform: perspective(600px) rotateY(-180deg);
}
.circle .flip:hover .back, .circle .flip:active .back, .circle .flip:focus .back {
  -webkit-transform: perspective(600px) rotateY(0deg);
          transform: perspective(600px) rotateY(0deg);
}
.circle .flip:hover .back .sprite, .circle .flip:active .back .sprite, .circle .flip:focus .back .sprite {
  background-image: url("../img/gifts.gif");
  background-repeat: no-repeat;
  background-position:top center;
  background-size:contain;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
/*.circle .flip:hover .back .sprite-1, .circle .flip:active .back .sprite-1, .circle .flip:focus .back .sprite-1 {
  background-position: -6px -6px;
}
.circle .flip:hover .back .sprite-2, .circle .flip:active .back .sprite-2, .circle .flip:focus .back .sprite-2 {
  background-position: -310px -4px;
  height: 28px;
  width: 32px;
}
.circle .flip:hover .back .sprite-3, .circle .flip:active .back .sprite-3, .circle .flip:focus .back .sprite-3 {
  background-position: -2px -38px;
  height: 30px;
  width: 32px;
}
.circle .flip:hover .back .sprite-4, .circle .flip:active .back .sprite-4, .circle .flip:focus .back .sprite-4 {
  background-position: -244px -211px;
  height: 30px;
  width: 28px;
}
.circle .flip:hover .back .sprite-5, .circle .flip:active .back .sprite-5, .circle .flip:focus .back .sprite-5 {
  background-position: -6px -184px;
  height: 28px;
  width: 31px;
}
.circle .flip:hover .back .sprite-6, .circle .flip:active .back .sprite-6, .circle .flip:focus .back .sprite-6 {
  background-position: -244px -176px;
  height: 28px;
  width: 28px;
}
.circle .flip:hover .back .sprite-7, .circle .flip:active .back .sprite-7, .circle .flip:focus .back .sprite-7 {
  background-position: -162px -108px;
  height: 28px;
  width: 28px;
}
.circle .flip:hover .back .sprite-8, .circle .flip:active .back .sprite-8, .circle .flip:focus .back .sprite-8 {
  background-position: -244px -144px;
  height: 24px;
  width: 28px;
}
.circle .flip:hover .back .sprite-9, .circle .flip:active .back .sprite-9, .circle .flip:focus .back .sprite-9 {
  background-position: -244px -76px;
  height: 26px;
  width: 32px;
}
.circle .flip:hover .back .sprite-10, .circle .flip:active .back .sprite-10, .circle .flip:focus .back .sprite-10 {
  background-position: -248px -4px;
  height: 24px;
  width: 24px;
}
.circle .flip:hover .back .sprite-11, .circle .flip:active .back .sprite-11, .circle .flip:focus .back .sprite-11 {
  background-position: -164px -74px;
  height: 26px;
  width: 30px;
}
.circle .flip:hover .back .sprite-12, .circle .flip:active .back .sprite-12, .circle .flip:focus .back .sprite-12 {
  background-position: -86px -220px;
  height: 22px;
  width: 32px;
}
.circle .flip:hover .back .sprite-13, .circle .flip:active .back .sprite-13, .circle .flip:focus .back .sprite-13 {
  background-position: -162px -180px;
  height: 26px;
  width: 32px;
}
.circle .flip:hover .back .sprite-14, .circle .flip:active .back .sprite-14, .circle .flip:focus .back .sprite-14 {
  background-position: -164px -4px;
  height: 24px;
  width: 28px;
}
.circle .flip:hover .back .sprite-15, .circle .flip:active .back .sprite-15, .circle .flip:focus .back .sprite-15 {
  background-position: -2px -254px;
  height: 28px;
  width: 36px;
}
.circle .flip:hover .back .sprite-16, .circle .flip:active .back .sprite-16, .circle .flip:focus .back .sprite-16 {
  background-position: -82px -250px;
  height: 30px;
  width: 30px;
}
.circle .flip:hover .back .sprite-17, .circle .flip:active .back .sprite-17, .circle .flip:focus .back .sprite-17 {
  background-position: -164px -252px;
  height: 32px;
  width: 28px;
}
.circle .flip:hover .back .sprite-18, .circle .flip:active .back .sprite-18, .circle .flip:focus .back .sprite-18 {
  background-position: -162px -36px;
  height: 30px;
  width: 32px;
}
.circle .flip:hover .back .sprite-19, .circle .flip:active .back .sprite-19, .circle .flip:focus .back .sprite-19 {
  background-position: -4px -148px;
  height: 30px;
  width: 30px;
}
.circle .flip:hover .back .sprite-20, .circle .flip:active .back .sprite-20, .circle .flip:focus .back .sprite-20 {
  background-position: -318px -80px;
  height: 24px;
  width: 16px;
}
.circle .flip:hover .back .sprite-21, .circle .flip:active .back .sprite-21, .circle .flip:focus .back .sprite-21 {
  background-position: -86px -146px;
  height: 30px;
  width: 32px;
}
.circle .flip:hover .back .sprite-22, .circle .flip:active .back .sprite-22, .circle .flip:focus .back .sprite-22 {
  background-position: -314px -146px;
  height: 36px;
  width: 32px;
}
.circle .flip:hover .back .sprite-23, .circle .flip:active .back .sprite-23, .circle .flip:focus .back .sprite-23 {
  background-position: -312px -110px;
  height: 34px;
  width: 32px;
}
.circle .flip:hover .back .sprite-24, .circle .flip:active .back .sprite-24, .circle .flip:focus .back .sprite-24 {
  background-position: -318px -188px;
  height: 24px;
  width: 28px;
}
.circle .flip:hover .back .sprite-25, .circle .flip:active .back .sprite-25, .circle .flip:focus .back .sprite-25 {
  background-position: -84px -72px;
  height: 28px;
  width: 34px;
}*/
.circle .day-1 {
  margin-top: 10px;
}


div#RewardMsg {
    text-align: center;
}

/*span#rewardtitle {
    font-size: 1.3em;
    font-weight: 600;
}*/

.completed .front {
    background: #00642c!important;
}

section#rewardballs {
    background: rgba(0,0,0,0.6);
    padding-top: 0px;
    /*padding-bottom: 100px;*/
    min-height: 508px;
    border-radius: 5px;
}

section#rewardballs h3 {
    text-align: center;
    margin: 0px;
    padding: 15px;
    color: #FFF;
}

/****LOADING SPINNER******/

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #fafafa;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/****LOADING SPINNER END******/


#page1 {
    z-index:100;
    position: absolute;
    left: 50%;
    top: 49%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    display: inline-block;
}

.userbox {
    font-size: 13px;
    padding: 6px;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    color:#646464;
}


#page2 {
    z-index:100;
    position: absolute;
    left: 50%;
    top: 32%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    display: inline-block;
}