.calculator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  width: 259px;
  -webkit-box-shadow: 0 0 10px rgba(85, 85, 85, 0.2);
          box-shadow: 0 0 10px rgba(85, 85, 85, 0.2);
  border-radius: 12px;
}
.calculator.pre-enter {
  opacity: 0;
  -webkit-transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(0);
          transform: rotateX(30deg) rotateY(30deg) translateY(300px) translateZ(0);
  visibility: hidden;
}
.calculator.pre-enter .total {
  opacity: 0;
}
.calculator.on-enter {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  visibility: visible;
  -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
background-image: linear-gradient(-45deg, #2196F3 0%, #2196F3 33%, #00BFA5 100%);
width: 320px;
padding: 16px;
margin: auto;
}
.calculator.on-enter .total {
  opacity: 1;
  -webkit-transition: opacity 300ms ease-out 1000ms;
  transition: opacity 300ms ease-out 1000ms;
}
.calculator button {
  display: block;
  padding: 0;
  border: 0;
  width: 64px;
  height: 64px;
  background: none;
  font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
.calculator button:active, .calculator button.active {
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}
.calculator .screen {
  width: 100%;
}
.calculator .equation {
  width: 100%;
  padding: 6px;
  border-radius: 12px 12px 0 0;
  color: #fff;
  overflow: hidden;
}
.calculator .equation .summary, .calculator .equation .total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.calculator .summary {
  padding: 6px 6px 0;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.calculator .total {
  padding: 3px 6px 6px;
  font-size: 32px;
}
.calculator .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.calculator .numbers {
  width: 216px;
}
.calculator .numbers ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  border-bottom-left-radius: 12px;
}
.calculator .numbers button {
  font-size: 24px;
  font-weight: 400;
color: #fff;
background: rgba(255, 255, 255, 0.3);
border-radius: 12px;
margin: 4px;
}
.calculator .numbers button:hover, .calculator .numbers button:focus {
  background: rgba(255, 255, 255, 0.75);
}
.calculator .numbers button:active, .calculator .numbers button.active {
  background: rgba(51, 51, 51, 0.05);
}
.calculator .numbers li {

}
.calculator .numbers li.zero, .calculator .numbers li:last-child {
  border-bottom: 0;
}
.calculator .numbers li.clear, .calculator .numbers li:nth-child(2), .calculator .numbers li:nth-child(5), .calculator .numbers li:nth-child(8), .calculator .numbers li.zero {
  border-left: 0;
}
.calculator .numbers .clear {
  width: 100%;
}
.calculator .numbers .clear button {
  background: rgba(255, 255, 255, 0.25);
margin: 4px;
width: 208px;
}
.calculator .numbers .clear button:hover, .calculator .numbers .clear button:focus {
  background: rgba(255, 255, 255, 0.75);
}
.calculator .numbers .clear button:active, .calculator .numbers .clear button.active {
  background: rgba(51, 51, 51, 0.05);
}
.calculator .numbers .zero {
  width: 144px;
}
.calculator .numbers .zero button {
  width: 136px;
  border-bottom-left-radius: 12px;
}
.calculator .operators {
  width: 65px;
}
.calculator .operators ul {
  border-bottom-right-radius: 12px;
}
.calculator .operators button {
  font-size: 36px;
  font-weight: 300;
  border-radius: 12px;
color: #fff;
background: rgba(255, 255, 255, 0.3);
margin:4px;
}
.calculator .operators button:hover, .calculator .operators button:focus {
  background: rgba(255, 241, 224, 0.25);
}
.calculator .operators button:active, .calculator .operators button.active {
  background: rgba(224, 123, 0, 0.25);
}
.calculator .operators li:last-child button {
border-radius: 12px;
background: #fa722e;
color: #fff;
}