* {
  box-sizing: border-box;
}

body {
  background: #fff;
    -webkit-perspective: 800px;
    font-family: 'Arimo';
}

.controls {
  text-align: center;
}

input[type=text], input[type=date], input[type=time] {
    font-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
        display: inline-block;
    font-family: 'Arimo';
    font-weight: 300;
    background: hsl(0, 0%, 100%);
    color: #a5a5a5;
    border: 1px solid #e6e6e6;
    line-height: 1;
    font-size: 1.5em;
    padding: .25em 8px 0.25em .8em;
    margin: .5rem auto 0;
    width: 18rem;
}

.radios {
  display: flex;
  width: 18em;
  margin: .5rem auto 1rem;
  border: 1px solid #efeff6;
  border-radius: .3rem;
  padding: .2rem;
}
.radios li {
  flex: 1;
  width: 50%;
    display: block;
}
.radios li input {
  position: absolute;
  opacity: 0;
}
.radios li label {
  vertical-align: middle;
    display: block;
    text-align: center;
    border: 1px solid #00a8e6;
    color:#00a8e6;
    padding: .5rem;
    border-radius: .3rem;
    transition: background .2s ease-in-out, color .2s ease-in-out;
}
.radios li input:checked + label {
  background: #00a8e6;
color: #ffffff;
}
.radios li input:focus + label {
  border: 1px solid #eee;
}

.stats li {
  flex: 1;
  text-align: center;
  min-width: 14em;
  padding: 2em 0;
  display: block;
}
.stats li i, .stats li b {
  display: block;
}
.stats li i {
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.stats li b {
  font-size: 5.5em;
}

@media all and (min-width: 28em) {
  .stats {
    display: flex;
    flex-wrap: wrap;
      max-width: 60%;
  }
}