@font-face {    
    font-family: AvenirLight;
    src: url('../fonts/AvenirLTStd-Light.otf');
}

@font-face {
    font-family: AvenirBlack;
    src: url(../fonts/AvenirLTStd-Black.otf);
}

body {
    font-family: AvenirLight;
    background: #F2F2F2;
}

.switch{
    height:14px;
    width:30px;
    cursor:pointer;
    display:inline-block;
    background-color:#C0C0C0; /* colorDisabled */
    border-radius:7px;
}
.switch input{
    display:none;
}
.switch .ball_onP{
    height:20px;
    width:20px;
    margin-top:-3px;
    margin-left:10px;
    background-color:#FF5100; /* colorPrimaryDark */
    border-radius: 10px;
}
.switch .ball_onP:hover{
    background-color:#A93600; /* colorPrimary */
}
.switch .ball_offP{
    height:20px;
    width:20px;
    margin-top:-3px;
    margin-left:-1px;
    background-color:#DDDDDD; /* colorDisabledLight */
    border-radius: 10px;
}
.switch .ball_onS{
    height:20px;
    width:20px;
    margin-top:-3px;
    margin-left:10px;
    background-color:#00B020; /* colorSecondaryDark */
    border-radius: 10px;
}
.switch .ball_onS:hover{
    background-color:#006A13; /* colorSecondary */
}
.switch .ball_offS{
    height:20px;
    width:20px;
    margin-top:-3px;
    margin-left:-1px;
    background-color:#DDDDDD; /* colorDisabledLight */
    border-radius: 10px;
}