*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Alef',Arial;
    font-size: 1em;
}

.sprite, .sprite_before:before, .sprite_after:after {
    content: '';
    display: inline-block;
    background-image: url(https://kidsgov.snunit.org.il/knesset/games/hack/images/sprites.png);
    background-size: auto 100vh;
    background-repeat: no-repeat;
}

button.play, button.next, button.reload, button.replay, button.info {
    padding-left: 7vh;
}
button {
    height: 6vh;
    max-height: 44px;
    border-radius: 3vh;
    display: inline-block;
    background-color: #50bc07;
    border: 0;
    padding: 0 2vh;
    color: #fff;
    position: relative;
    font-size: 3vh;
    font-weight: bold;
    line-height: 1vh;
    cursor: pointer;
}

button.play:after, button.next:after, button.back:before , button.reload:after, button.replay:after,  button.info:after {
    background-color: #000;
    border-radius: 50%;
    height: 5vh;
    width: 5vh;
    max-height: 36.5px;
    max-width: 36.5px;
    left: 4%;
    position: absolute;
    top: 9%;
    background-position: 77.1% 67.1%;
}

button.back {
    padding-right: 7vh;
}

button.back:before {
    right: 4%;
    left: auto;
    transform: rotateZ(60deg);
}

.hidden_settings {
    bottom: 7vh;
    left: 5vh;
    position: absolute;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 25vh;
    max-width: 182px;
    background-color: rgba(0,0,0,0.6);
    height: 13vh;
    max-height: 95px;
    border-radius: 6vh;
    padding: 1.5vh;
    z-index: 3;
}
.hidden_settings div:last-child {
    position: absolute;
}
.hidden_settings div {
    display: inline-block;
    width: 10vh;
    height: 10vh;
    max-width: 73px;
    max-height: 73px;
    border-radius: 50%;
    background-color: #000;
    margin: 0 0.5vh;
}
.hidden_settings div > a {
    cursor: pointer;
}
.hidden_settings div > a, .hidden_settings div > .circle-timer {
    display: block;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    text-align: center;
    color: #fff;
}

.hidden_settings div .home {
    margin: 1.8vh 0 0 -0.5vh;
}
.sprite.home {
    background-position: 62.9% 58%;
    height: 6vh;
    width: 7vh;
    max-height: 44px;
    max-width: 51px;
}

.hidden_settings div .circle-timer span.text {
    font-size: 3vh;
    font-weight: bold;
    left: 0;
    position: absolute;
    right: 0;
    top: 2.7vh;
}

.hidden_settings div .circle-timer span.sprite {
    width: 100%;
    height: 50%;
    display: block;
    margin: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 2.7vh;
    background-position: 78.2% 72.8%;
}

.stack .inner .hidden_points, .public .hidden_points {
    position: absolute;
    right: -25vh;
    height: 61%;
    bottom: 0;
    width: 25vh;
    max-width: 182px;
    border-radius: 0;
    background-position: 55% 67%;
    background-color: transparent;
    color: #fff;
    font-size: 4.5vh;
    font-weight: bold;
    line-height: 8vh;
    padding-right: 5%;
}
.committee .stack .inner .hidden_points, .public .hidden_points {
    background-image: none;
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    height: 41%;
    width: 23vh;
}
.public .hidden_points {
    bottom: 3vh;
    height: 8vh;
    max-height: 60px;
    padding-right: 10vh;
    right: 3vh;
    width: 26vh;
    max-width: 190px;
    z-index: 2;
}

.stack .inner .hidden_points:before, .public .hidden_points:before {
    background-position: 99% 26%;
    bottom: 7%;
    height: 76%;
    position: absolute;
    right: 3%;
    width: 30%;
}

.sound:after, .reload:after, .replay:after{
    position: absolute;
    background-position: 78.5% 37%;
    width: 75%;
    top: 21%;
    left: 16%;
    height: 75%;
}

.sprite.close {
    position: absolute;
    top: -1vh;
    right: -1vh;
    background-color: #000;
    height: 4vh;
    width: 4vh;
    max-height: 30px;
    max-width: 30px;
    cursor: pointer;
    background-position: 83.5% 36.2%;
    border-radius: 50%;
}

.sprite.sandclock {
    background-position: 71.3% 67.3%;
    height: 4vh;
    width: 3vh;
    max-height: 30px;
    max-width: 22px;
    vertical-align: text-bottom;
    margin-left: 1vh;
}

.checkbox.active {
    background-color: #50bc07;
}
.checkbox {
    display: inline-block;
    height: 4.5vh;
    width: 8.5vh;
    max-height: 32.7px;
    max-width: 62px;
    background-color: #b4b4b3;
    border-radius: 3vh;
    vertical-align: middle;
    margin: 0 1vh;
    cursor: pointer;
    position: relative;
}

.checkbox.active:after {
    left: auto;
    right: 3%;
}
.checkbox:after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 90%;
    position: absolute;
    left: 3%;
    top: 5%;
    width: 45%;
}

.hidden_settings div .circle-timer span.sprite {
    width: 100%;
    height: 50%;
    display: block;
    margin: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 2.7vh;
    background-position: 78.2% 72.8%;
}

.sound_panel {
    display: inline-block;
    width: auto;
    height: auto;
    background-color: rgba(0,0,0,0.6);
    padding: 1vh 4vh;
    position: absolute;
    left: 2vh;
    bottom: 2vh;
    border-radius: 15px;
    color: #fff;
    font-weight: bold;
    z-index: 3;
}

.sound, .reload, .home_btn, .sound_panel span:after, .sound_panel span:before, .instructions-button {
    content: "";
    background-color: rgba(0,0,0,0.6);
    height: 8vh;
    width: 8vh;
    max-height: 53px;
    max-width: 53px;
    border-radius: 50%;
    position: absolute;
    left: 4vh;
    cursor: pointer;
    bottom: 2vh;
    z-index: 1;
}

.sound_panel span {
    display: block;
    text-align: right;
    width: 21vh;
    height: 9vh;
    max-width: 153px;
    max-height: 66px;
    line-height: 9vh;
    position: relative;
    cursor: pointer;
}

.sound_panel span:nth-child(1):before {
    background-position: 64.7% 34%;
}
.sound_panel span:nth-child(2):before {
    background-position: 58.2% 34%;
}
.sound_panel span:nth-child(3):before {
    background-position: 51.5% 34.5%;
}
.sound_panel span:nth-child(4):before {
    background-position: 78.8% 36%;
}
.sound_panel span:before {
    background-color: transparent;
    opacity: 0.5;
    z-index: 2;
}

.sound_panel span:before, .sound_panel span:after {
    left: -2vh;
    bottom: 1vh;
}

@media only screen and (min-height: 728px) {
     .hidden_settings {
        bottom: 51px;
        left: 37px;
        border-radius: 44px;
        padding: 11px;
    }

     .hidden_settings div {
        margin: 0 4px;
    }

    .hidden_settings div .circle-timer span.text, .hidden_settings div .circle-timer span.sprite {
        font-size: 22px;
        top: 20px;
    }
    .hidden_settings div .circle-timer canvas {
        margin: 11px 0 0 4px;
    }

    
    .sprite, .sprite_before:before, .sprite_after:after {
        background-size: auto 727px;
    }

    .sprite.not_static, .sprite_before.not_static:before, .sprite_after.not_static:after {
        background-size: auto 100vh;
    }

    button {
        padding: 0 15px;
        font-size: 22px;
        line-height: 8px;
    }

        button.play, button.next,  button.info, button.replay {
            padding-left: 51px;
        }

        button.back{
            padding-right: 51px;
        }

        button.small {
            padding: 0 15px;
            font-size: 15px;
        }

            button.small.play, button.small.next, button.small.back {
                padding-left: 44px;
            }
}