/*----------------------- Checkbox ------------------------*/

.check-btn
  vertical-align: top
  width: 17px
  height: 17px
  margin: 0

.check-btn + label
  cursor: pointer
  font-size: 12px
  font-family: $font-reg

.check-btn:not(checked)
  position: absolute
  opacity: 0

.check-btn:not(checked) + label
  position: relative
  padding: 0 0 0 20px

.check-btn:not(checked) + label:before
  content: ''
  position: absolute
  top: 0
  left: 0
  width: 12px
  height: 12px
  background: transparent
  border-radius: 20%
  border: 1px solid lighten(#45484a, 15)

.check-btn:not(checked) + label:after
  content: ''
  background-image: url('../img/checkboxes.png')
  background-repeat: no-repeat
  background-position: 0 -10px
  -webkit-background-size: cover
  background-size: cover
  background-color: $check-color
  z-index: auto
  position: absolute
  top: 0
  left: 0
  width: 12px
  height: 12px
  border-radius: 20%
  opacity: 0
  border: 1px solid $check-color
  -webkit-transition: .3s ease all
  -moz-transition: .3s ease all
  -ms-transition: .3s ease all
  -o-transition: .3s ease all
  transition: .3s ease all
  color: #fff

.check-btn:not(checked) + label:after, .check-btn + label:before
  border-color: $check-color

.check-btn:checked + label:after
  opacity: 1