* {
  box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.recharge {
  width: 450px;
  height: 350px;
  position: relative;
  margin-left: 20px;
}
.recharge .bg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(../../cms/File/gfx/recharge.png) 65px 0 no-repeat;
}
.recharge .button {
  width: 130px;
  height: 130px;
  position: absolute;
  z-index: 2;
  color: #fff;
  font: 600 18px 'Quicksand', sans-serif;
  text-align: center;
  left: 180px;
  bottom: 23px;
  cursor: pointer;
}
.recharge .button .front,
.recharge .button .back {
  border-radius: 130px;
  width: 130px;
  height: 130px;
  padding-top: 46px;
}
.recharge .button .front {
  padding-top: 34px;
}
.battery {
  border: 10px solid #18df7a;
  border-radius: 20px;
  width: 130px;
  height: 210px;
  padding: 5px;
  transition: border-color 1s ease;
  top: 50px;
}
.battery:after {
  content: '';
  position: absolute;
  top: -31px;
  left: 39px;
  width: 40px;
  height: 17px;
  background: #18df7a;
  border-top-left-radius: 13px 20px;
  border-top-right-radius: 13px 20px;
  transition: background-color 1s ease;
}
.battery .fuel {
  background: #18df7a;
  height: 0;
  border-radius: 10px;
  transition: height 1s ease, background-color 1s ease;
  position: absolute;
  width: 100px;
  bottom: 5px;
}
.battery span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 80px;
  left: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  transition: color .6s ease;
}
.battery.phone {
  position: absolute;
  left: 0;
  border-color: #f41328;
}
.battery.phone:after {
  background: #f41328;
}
.battery.phone .fuel {
  height: 30px;
  background: #f41328;
}
.battery.phone span {
  color: #f41328;
}
.battery.powerbank {
  position: absolute;
  right: 0;
}
.battery.powerbank .fuel {
  height: 180px;
}
.battery.powerbank span {
  color: #fff;
}
.recharge.complete .battery.phone {
  border-color: #18df7a;
}
.recharge.complete .battery.phone:after {
  background: #18df7a;
}
.recharge.complete .battery.phone .fuel {
  height: 130px;
  background: #18df7a;
}
.recharge.complete .battery.phone span {
  color: #fff;
}
.recharge.complete .battery.powerbank .fuel {
  height: 160px;
}
/* entire container, keeps perspective */
.flip-container {
  transition: opacity 1s ease, transform 1s ease;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back {
  transform: rotateY(0deg);
}
.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container.hover {
  opacity: 0;
  transform: scale(0);
}
/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */
.front,
.back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
/*  UPDATED! front pane, placed above back */
.front {
  z-index: 2;
  transform: rotateY(0deg);
  background: #f41328;
}
/* back, initially hidden pane */
.back {
  transform: rotateY(-180deg);
  background: #0090ff;
}