.on{
    background-color: orange;
}

.off{
    background-color: gray;
}

.buttonSwitch{
    display: inline-block;
}

.buttonSwitch > div {
    background-color: white;
    /*    box-shadow: 0.02em 0.02em 0.1em #555;*/
}

.transition{
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}


.functionButton.middle {
    background: rgba(189,189,189,1);
    background: -moz-linear-gradient(to right, gray 0%, gray 40%, #f79226 60%, #f79226 100%);
    background: -webkit-linear-gradient(to right, gray 0%, gray 40%, #f79226 60%, #f79226 100%);
    background: -o-linear-gradient(to right, gray 0%, gray 40%, #f79226 60%, #f79226 100%);
    background: -ms-linear-gradient(to right, gray 0%, gray 40%, #f79226 60%, #f79226 100%);
    background: linear-gradient(to right, gray 0%, gray 40%, #f79226 60%, #f79226 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdbdbd', endColorstr='#a1ffc7', GradientType=1 );
}

.functionButton.right {
    background: #f79226;
}

.functionButton.left {
    background: gray;
}

/* APP SIZE*/
@media (orientation: landscape) {
    body {
        font-size: 2.2vmin;
    }
}

@media (orientation: portrait) {
    body {
        font-size: 1.4vh;
    }
}