.section--nummi {
    background: #0E5F76; }
.toggle-button {
  position: relative;
  display: inline-block;
  color: #fff;
  margin: 0 20px; }
  .toggle-button label {
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left; }
  .toggle-button input {
    display: none; }
  .toggle-button__icon {
    cursor: pointer;
    pointer-events: none; }
    .toggle-button__icon:before, .toggle-button__icon:after {
      content: "";
      position: absolute;
      transition: 0.2s ease-out; }

@media only screen and (max-width: 480px) {
  .toggle-button--nummi {
    display: block;
    width: 110px;
    margin: 0 auto 10px auto; } }

.toggle-button--nummi label {
  width: 110px;
  height: 20px;
  line-height: 20px;
  transition: all 0.2s; }
  .toggle-button--nummi label:before, .toggle-button--nummi label:after {
    position: absolute;
    top: 0;
    left: 30px;
    width: 110px;
    transition: all 0.2s .1s ease-out; }
  .toggle-button--nummi label:before {
    content: attr(data-text); }

.toggle-button--nummi input:checked ~ .toggle-button__icon {
  animation: wiggle .2s ease-out; }
  .toggle-button--nummi input:checked ~ .toggle-button__icon:after {
    animation: flyInRight .4s;
    transform: translate(0); }

.toggle-button--nummi .toggle-button__icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15); }
  .toggle-button--nummi .toggle-button__icon:before, .toggle-button--nummi .toggle-button__icon:after {
    border-radius: 50%; }
  .toggle-button--nummi .toggle-button__icon:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); }
  .toggle-button--nummi .toggle-button__icon:after {
    top: 4px;
    left: 4px;
    width: 60%;
    height: 60%;
    background: #61B136;
    transition: none;
    transform: translate(200%);
    animation: flyOutLeft .4s; }

.toggle-button--nummi:hover input:not(:checked) ~ .toggle-button__icon {
  animation: hover .2s; }

.toggle-button--nummi:hover input:not(:checked) ~ label:before {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

@keyframes flyInRight {
  0% {
    transform: translate(200%); }
  50% {
    transform: translate(200%); }
  70% {
    transform: translate(-50%); }
  100% {
    transform: translate(0); } }

@keyframes flyOutLeft {
  0% {
    transform: translate(0); }
  70% {
    transform: translate(0); }
  100% {
    transform: translate(-200%); } }

@keyframes wiggle {
  0% {
    transform: translate(0); }
  80% {
    transform: translate(5px); }
  100% {
    transform: translate(0); } }

@keyframes hover {
  0% {
    transform: scale(1); }
  30% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }