.section {
      padding-left: 50px
}

.section input[type="radio"],
.section input[type="checkbox"] {
    display: none
}
.radio-container {
    margin-bottom: 10px
}

.radio-container label {
    position: relative
}

.radio-container span::before,
.radio-container span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto
}

.radio-container span.radio:hover {
    cursor: pointer
}

.radio-container span.radio::before {
    left: -52px;
    width: 45px;
    height: 25px;
    background-color: #A8AAC1;
    border-radius: 50px
}

.radio-container span.radio::after {
    left: -49px;
    width: 17px;
    height: 17px;
    border-radius: 10px;
    background-color: #6C788A;
    transition: left .25s, background-color .25s
}

input[type="radio"]:checked+label span.radio::after {
    left: -27px;
    background-color: #EBFF43
}

.radio-container span.checkbox::before {
    width: 27px;
    height: 27px;
    background-color: #fff;
    left: -35px;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition: border-color .2s
}

.radio-container span.checkbox:hover::before {
    border: 3px solid #F0FF76
}

.radio-container span.checkbox::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    left: -31px;
    top: 2px;
    color: transparent;
    transition: color .2s
}

input[type="checkbox"]:checked+label span.checkbox::after {
    color: #62AFFF
}

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 20px;
    vertical-align: middle;
    margin-top: 8px;
}

.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dc1c1c;
    -webkit-transition: .4s;
    transition: .4s;

}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #318000;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
 font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*
.switch {
    text-align: center;
    margin: auto;
    width: 62px;
    height: 22px;
    z-index: 0;
    appearance: none;
    border: none;
    cursor: pointer;
    position: relative;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    background: #f4af6f;
    !* Old browsers *!
    background: -moz-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* FF3.6+ *!
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4af6f), color-stop(48%, #f19f53), color-stop(54%, #ec9544), color-stop(100%, #d37824));
    !* Chrome,Safari4+ *!
    background: -webkit-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* Chrome10+,Safari5.1+ *!
    background: -o-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* Opera 11.10+ *!
    background: -ms-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* IE10+ *!
    background: linear-gradient(to bottom, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* W3C *!
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4af6f', endColorstr='#d37824', GradientType=0);
    !* IE6-9 *!
}

.switch:before {
    content: ' ';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 60px;
    height: 20px;
    z-index: 1;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    background: #f4af6f;
    !* Old browsers *!
    background: -moz-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* FF3.6+ *!
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4af6f), color-stop(48%, #f19f53), color-stop(54%, #ec9544), color-stop(100%, #d37824));
    !* Chrome,Safari4+ *!
    background: -webkit-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* Chrome10+,Safari5.1+ *!
    background: -o-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* Opera 11.10+ *!
    background: -ms-linear-gradient(top, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* IE10+ *!
    background: linear-gradient(to bottom, #f4af6f 0%, #f19f53 48%, #ec9544 54%, #d37824 100%);
    !* W3C *!
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4af6f', endColorstr='#d37824', GradientType=0);
    !* IE6-9 *!
}

.switch:after {
    content: ' ';
    height: 19px;
    width: 19px;
    border-radius: 18px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-box-shadow: 0 2px 5px #999999;
    box-shadow: 0 2px 5px #999999;
}

.switchOn,
.switchOn:before {
    background: #4cd964 !important;
}

.switchOn:after {
    left: 42px !important;
}*/