.rd-switch {
  position: relative;
  margin: 15px;
  margin-top: 0;
  float: left;
  font-family: "Dosis", sans-serif;
  cursor: pointer;
}

.rd-switch .label {
  position: relative;
  margin-right: 10px;
  float: left;
  width: 14px;
  height: 14px;
  display: block;
  border: 2px solid #C8CCD4;
  border-radius: 100%;
  -webkit-tap-highlight-color: transparent;
}
.rd-switch .label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #cf120d;
  transform: scale(0);
  transition: all .2s ease;
  opacity: .08;
  pointer-events: none;
}
.rd-switch:hover .label:after {
  transform: scale(3.6);
}

.rd-switch input[type="radio"]:checked + .label {
  border-color: #cf120d;
}
.rd-switch input[type="radio"]:checked + .label:after {
  transform: scale(1);
  transition: all .2s cubic-bezier(.35,.9,.4,.9);
  opacity: 1;
}

.rd-switch input[type="radio"] {
  display: none;
  visibility: hidden;
}


/***********************************************
Mobile (portrait 300px)
***********************************************/
@media only screen and (max-width:767px) {

  .rd-switch {
    width: 100%;
  }

}

/***********************************************
Mobile (landscape 420px)
***********************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {

  .rd-switch {
    width: auto;
  }

}