/* *, *:after, *:before {
  box-sizing: border-box;
} */

/* html, body {
  height: 90%;
  background: #ecf0f1;
} */

/* label {
  display: block;
} */

label > input[type=checkbox] {
  display: none;
}

.check-1 {
  /* position: fixed; */
  top: 14px;
  left: 25px;
  transform: translatex(-50%) translatey(-50%);
  width: 43px;
  height: 26px;
  border-radius: 40px;
  position: relative;
}

.check-1 .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  border: 2px solid #e8e8e8;
  background: #f9f9f9;
  transition: all .2s ease;
}

.check-1 .bullet {
  position: relative;
  width: 17px;
  height: 17px;
  background: #eee;
  border-radius: 50%;
  transition: all .3s ease;
  top: 4px;
  left: 6px; 
  box-shadow: 0 3px 3px rgba(0,0,0,.15);
}

.check-1 input:checked ~ .inner {
  border: 13px solid #2ecc71;
  top: 0px;
  left: 0px;   
  transition: all .2s ease;
}

.check-1 input:checked ~ .bullet {
  left: 24px;
  transition: all .3s ease;
  animation: .2s bullet;
} 

@keyframes bullet {
  0%, 100% {
    width: 17px;
  }
  /* 20% {
    width: 17px;
  }   */
  40% {
    width: 17px;
  }
}