* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'OpenSansHebrew-Regular';
    src: url('/piano/Content/Fonts/OpenSansHebrew-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSansHebrew-Bold';
    src: url('/piano/Content/Fonts/OpenSansHebrew-Bold.ttf') format('truetype');
}

#popup {
    width: 50%;
}

#popup, #popup2 {
    display: none;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999;
    color: #111;
    direction: rtl !important;
    padding: 10px 0 0;
    text-align: center;
    line-height: 21px;
}

#popup4 {
    display: none;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999;
    color: #111;
    direction: rtl !important;
    padding: 37px 0;
    text-align: center;
    line-height: 21px;
}

    #popup4 div p:first-child {
        width: 70%;
    }

    #popup4 div p {
        font-size: 100%;
        width: 79%;
        margin: 3% auto;
    }

        #popup4 div p a {
            font-size: 100% !important;
            word-wrap: break-word;
            text-decoration: underline;
        }

    #popup4 h2 {
        color: #2b91af;
        width: 88%;
    }

#popup2 h2 {
    color: #2b91af;
}

#popup4 div img {
    position: absolute;
    top: 6%;
    left: 3%;
    width: 9%;
}

#popup4 .button.b-close {
    font-size: 100%;
    background-color: #2b91af;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
}

#popup2 div img, #popup3 div img {
    position: absolute;
    top: 4%;
    left: 2%;
    width: 8%;
}

#popup div p, #popup2 div p, #popup3 div p {
    font-size: 100%;
    width: 81%;
    margin: 3% auto;
}

    #popup div p a, #popup2 div p a, #popup3 div p a {
        font-size: 100% !important;
        word-wrap: break-word;
        text-decoration: underline;
    }

#popup div img {
    position: absolute;
    top: 20%;
    left: 78%;
    width: 12%;
}

.button.b-close, .button.bClose {
    border-radius: 7px 7px 7px 7px;
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: -7px;
    top: -7px;
}

#popup .button.b-close, #popup2 .button.b-close, #popup3 .button.b-close {
    font-size: 100%;
    background-color: #2b91af;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
}

.test {
    text-align: center;
}

.center_block {
    margin: 0 auto;
    overflow: hidden;
    background: #000;
    font-size: 11.4px;
    /*width: 65%;*/
}

#error_text {
    display: none;
    font-size: 24px;
    background-color: #F4F8FA;
}

.fullscreenLayer {
    width: 100%;
    height: 2000px;
    display: block;
    background: #111111;
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.piano_box {
    position: relative;
    height: 100%;
}

    .piano_box .loading-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
    }

        .piano_box .loading-wrapper .black-bg {
            width: 100%;
            height: 100%;
            background-color: #D7DEFF;
            z-index: 999;
        }

        .piano_box .loading-wrapper .loading {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 80px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            z-index: 9;
        }

.piano_wrapper.fullScreen {
    margin: 0 auto !important;
}

.piano_wrapper {
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'OpenSansHebrew-Regular';
    overflow: hidden;
    font-size: 60%;
    position: relative;
    min-height: 320px;
    height: 691.011px;
}

@media screen and (max-width: 1269px) {
    .piano_wrapper {
        height: 522.472px;
    }
}

@media screen and (max-width: 991px) {
    .piano_wrapper {
        height: 387.64px;
    }
}

@media screen and (max-width: 767px) {
    .piano_wrapper {
        height: 340px;
    }
}

@media screen and (max-width: 510px) {
    .piano_wrapper {
        height: 320px;
    }
}

    .piano_wrapper .tempo_small_version {
        display: none;
    }

    .piano_wrapper #showNotes {
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .piano_wrapper #visualizationBlock {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

        .piano_wrapper #visualizationBlock canvas {
            float: left;
        }

    .piano_wrapper .visualizationBlock {
        margin: 0 1%;
        position: relative;
        height: 32.5%;
        background-color: #FFFFFF;
        overflow: hidden;
    }


    .piano_wrapper .close_visualization {
        position: absolute;
        right: 0;
        top: 0;
        width: 3%;
        margin-top: 0.3%;
        cursor: pointer;
    }

    .piano_wrapper .visualizationBlock.hide {
        display: none;
    }

    .piano_wrapper .visualizationBlock.show {
        display: block;
    }

    .piano_wrapper .piano_top_controls.hide {
        display: none;
    }

    .piano_wrapper .piano_top_controls.show {
        display: block;
    }

    .piano_wrapper .info-popup {
        width: 50%;
        left: 0;
        right: 0;
        margin: 10% auto;
        position: absolute;
        z-index: 100;
        background-color: #282828;
        color: #FFFFFF;
        display: none;
        direction: ltr;
    }

        .piano_wrapper .info-popup .popup-header {
            margin: 5%;
            text-align: center;
            line-height: 1.5;
            border-bottom: 1px solid #404040;
            padding-bottom: 5%;
        }

        .piano_wrapper .info-popup .popup-body {
            margin: 5%;
            text-align: center;
            line-height: 1.5;
            color: #FFFFFF !important;
            color: inherit !important;
        }

        .piano_wrapper .info-popup a[href^=tel] {
            text-decoration: inherit;
            color: inherit;
        }

        .piano_wrapper .info-popup .popup-button {
            background-color: #3AEE6D;
            width: 60%;
            margin: 0 20% 5% 20%;
            padding: 3%;
            text-align: center;
            border-radius: 100px;
            cursor: pointer;
            color: #1F1F1F;
            font-weight: 700;
            display: block;
            text-decoration: none;
        }

        .piano_wrapper .info-popup .close-popup-btn {
            position: absolute;
            top: -5%;
            right: -5%;
           /* background-color: #D3D3D3;*/
            border-radius: 50%;
            width: 9%;
            height: 15%;
            cursor: pointer;
            background-image: url('/piano/Content/Images/closebtn.png');
            /*background-image: url('/piano/Content/Images/cancel_pop-up.png');*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50%;
        }

@media screen and (max-width: 540px) {
    .piano_wrapper .info-popup {
        width: 70%;
    }

    .player .player-bar {
        height: auto;
        text-align: center;
    }

    .player-bar > span {
        top: 0px !important;
        width: 53%;
    }

    .column.left .box.blue {
        width: auto;
        float: none;
    }

    #popup4 {
        width: 300px !important;
    }

        #popup4 div p a {
            display: block;
        }
}

@media only screen and (min-width: 960px) and (max-width: 1050px) {
    #popup {
        width: 70%;
    }
}

@media only screen and (min-width: 700px) and (max-width: 767px) {

    #popup {
        width: 75%;
    }

    #popup4 {
        width: 500px !important;
    }

    .column.left .box.blue {
        width: auto;
        float: none;
    }

    .player-bar > span {
        width: 65% !important;
    }
}

@media screen and (max-width: 625px) {

    #popup div img {
        top: 20%;
    }

    #popup {
        width: 85%;
    }

    .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_control_image {
        height: 42px;
        width: 60px;
    }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    .player-bar > span {
        width: 55% !important;
    }

    #popup {
        width: 60%;
    }

    #popup4 {
        width: 480px !important;
    }
}

@media screen and (min-width: 541px) and (max-width: 700px) {
    #popup {
        width: 85%;
    }

    #popup4 {
        width: 450px !important;
    }

    .player .player-bar {
        height: auto !important;
        text-align: center;
    }

    .player-bar > span {
        width: 50% !important;
        top: 0 !important;
        right: 0%;
    }

    .column.left .box.blue {
        width: auto;
        float: none;
    }
    /*#popup{
      left: 9% !important;
    }*/
    .piano_wrapper .info-popup {
        width: 58%;
    }
}

.piano_wrapper .help_block {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    display: inline-block;
    visibility: hidden;
}

    .piano_wrapper .help_block .help_header {
        height: 12%;
        float: left;
        width: 100%;
    }

        .piano_wrapper .help_block .help_header > span {
            color: #FFFFFF;
            font-size: 130%;
            line-height: 450%;
            padding: 0 3%;
        }

        .piano_wrapper .help_block .help_header .close_help_icon {
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            float: right;
            width: 4%;
            margin: 0 2%;
        }

            .piano_wrapper .help_block .help_header .close_help_icon img {
                width: 100%;
                cursor: pointer;
            }

    .piano_wrapper .help_block .helper_left_column, .piano_wrapper .help_block .helper_right_column {
        width: 50%;
        height: 85%;
        float: left;
        font-size: 85%;
    }

    .piano_wrapper .help_block .helper_row {
        color: #FFFFFF;
        height: 8%;
        padding: 0.8% 3%;
        overflow: hidden;
        /*> img {
                height: 100%;
                float: left;
                margin-left: 4%;
                margin-right: 3%;
            }

            

            > span {
                @include vertical-align();
                float: left;
            }

            span.title {
                padding-right: 1%;
            }

            .title_description {
                border-left: 2px solid #FFFFFF;
                padding-left: 1%;
            }*/
    }

        .piano_wrapper .help_block .helper_row .helper_img_box {
            height: 100%;
            width: 15%;
            float: left;
            text-align: center;
            background-size: 53%;
            background-position: center;
            background-repeat: no-repeat;
        }

            .piano_wrapper .help_block .helper_row .helper_img_box img {
                height: 100%;
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.play {
                background-image: url('/piano/Content/Images/play_passive.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.pause {
                background-image: url('/piano/Content/Images/pause_passive.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.stop {
                background-image: url('/piano/Content/Images/stop_passive_btn.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.zoom_out {
                background-image: url('/piano/Content/Images/zoom_out_help.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.zoom_in {
                background-image: url('/piano/Content/Images/zoom_in_help.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.full_screen {
                background-image: url('/piano/Content/Images/full_screen_help.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.sustain {
                background-image: url('/piano/Content/Images/sustain_help.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.metronom {
                background-image: url('/piano/Content/Images/metronom_passive.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.ton {
                background-image: url('/piano/Content/Images/ton_passive.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.noten_zeigne {
                background-image: url('/piano/Content/Images/noten_zeigne_passive.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.cde {
                background-image: url('/piano/Content/Images/cde_passive.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.two_hands {
                background-image: url('/piano/Content/Images/two_hands.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.right_hand {
                background-image: url('/piano/Content/Images/right_hand.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.left_hand {
                background-image: url('/piano/Content/Images/left_hand.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.tempo {
                background-image: url('/piano/Content/Images/tempo.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box.chord {
                background-image: url('/piano/Content/Images/chord_help.png');
            }

        .piano_wrapper .help_block .helper_row .helper_img_box_notitle {
            height: 100%;
            width: 37%;
            float: left;
            background-size: 61% 80%;
            background-position: 25% 60%;
            background-repeat: no-repeat;
        }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle img {
                height: 100%;
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.loop {
                background-image: url('/piano/Content/Images/loop_help.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.loop_hebrew {
                background-image: url('/piano/Content/Images/loop_help_hebrew.png');
                background-position: 80% 60%;
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.einfachGerman {
                background-image: url('/piano/Content/Images/einfach.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.einfachHebrew {
                background-image: url('/piano/Content/Images/einfachHeb.png');
                background-position: 80% 60%;
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.einfachEng {
                background-image: url('/piano/Content/Images/einfachEng.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.mittelschwerGerman {
                background-image: url('/piano/Content/Images/mittelschwer.png');
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.mittelschwerHebrew {
                background-image: url('/piano/Content/Images/mittelschwerHeb.png');
                background-position: 80% 60%;
            }

            .piano_wrapper .help_block .helper_row .helper_img_box_notitle.mittelschwerEng {
                background-image: url('/piano/Content/Images/mittelschwerEng.png');
            }

        .piano_wrapper .help_block .helper_row .helper_title_box {
            width: 22%;
            float: left;
            height: 100%;
            padding-left: 1%;
            padding-right: 1%;
            box-sizing: border-box;
            display: table;
        }

            .piano_wrapper .help_block .helper_row .helper_title_box span {
                display: table-cell;
                vertical-align: middle;
            }

        .piano_wrapper .help_block .helper_row .helper_description_box {
            float: left;
            width: 60%;
            height: 100%;
            padding: 0 3%;
            box-sizing: border-box;
            display: table;
            border-left: 1px solid #FFFFFF;
        }

            .piano_wrapper .help_block .helper_row .helper_description_box span {
                display: table-cell;
                vertical-align: middle;
                direction: ltr;
            }

        .piano_wrapper .help_block .helper_row .helper_btn_img {
            height: 65% !important;
            margin-left: 10%;
            margin-top: 5%;
        }

        .piano_wrapper .help_block .helper_row .helper_btn_img_tempo {
            height: 45% !important;
            margin-top: 18%;
        }

.piano_wrapper .piano_header {
    position: relative;
    height: 15%;
    background-image: url('/piano/Content/Images/header_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    color: #FFFFFF;
}

    .piano_wrapper .piano_header .piano_song_title_wrapper {
        height: 100%;
        position: relative;
        float: left;
        width: 35%;
    }

        .piano_wrapper .piano_header .piano_song_title_wrapper .piano_song_name {
            height: 50%;
            /*overflow: hidden;*/
            padding-top: 7%;
            padding-left: 10%;
            width: 102%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            .piano_wrapper .piano_header .piano_song_title_wrapper .piano_song_name .piano_name {
                display: inline-block;
            }

        .piano_wrapper .piano_header .piano_song_title_wrapper .piano_song_author {
            height: 50%;
            overflow: hidden;
            padding-left: 10%;
            padding-top: 1%;
        }

            .piano_wrapper .piano_header .piano_song_title_wrapper .piano_song_author .piano_author {
                display: inline-block;
            }

    .piano_wrapper .piano_header .piano_times_wrapper {
        float: left;
        height: 100%;
        position: relative;
        padding-top: 5%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 20%;
    }

        .piano_wrapper .piano_header .piano_times_wrapper .piano_times {
            display: inline-block;
            width: 50%;
        }

            .piano_wrapper .piano_header .piano_times_wrapper .piano_times .piano_passed_time {
                width: 53%;
                display: block;
                float: left;
                text-align: center;
                border-right: 1px solid #FFFFFF;
                box-sizing: border-box;
                padding-right: 5%;
            }

                .piano_wrapper .piano_header .piano_times_wrapper .piano_times .piano_passed_time .piano_passed_time_min {
                    width: 45%;
                    display: block;
                    float: left;
                    text-align: right;
                    box-sizing: border-box;
                }

                .piano_wrapper .piano_header .piano_times_wrapper .piano_times .piano_passed_time .piano_passed_time_separator {
                    width: 10%;
                    display: block;
                    float: left;
                    text-align: right;
                    box-sizing: border-box;
                }

                .piano_wrapper .piano_header .piano_times_wrapper .piano_times .piano_passed_time .piano_passed_time_sec {
                    width: 45%;
                    display: block;
                    float: left;
                    text-align: left;
                    box-sizing: border-box;
                }

            .piano_wrapper .piano_header .piano_times_wrapper .piano_times .piano_all_time {
                display: block;
                width: 47%;
                float: left;
                text-align: center;
            }

    .piano_wrapper .piano_header .piano_complexity_buttons_wrapper {
        float: left;
        height: 100%;
        position: relative;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 45%;
    }

    .piano_wrapper .piano_header .piano_einfach_btn, .piano_wrapper .piano_header .piano_mittelschwer_btn {
        text-transform: uppercase;
        /*font-weight: 700;*/
        font-family: 'OpenSansHebrew-Bold';
        border-radius: 100px;
        padding: 2% 5%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        cursor: pointer;
    }

    .piano_wrapper .piano_header .piano_einfach_btn {
        background-color: #FFFFFF;
        color: #252525;
        float: right;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-right: 4%;
    }

    .piano_wrapper .piano_header .piano_mittelschwer_btn {
        background-color: #421F4F;
        color: #9984A0;
        float: right;
        margin-right: 4%;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .piano_wrapper .piano_header .piano_help {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        float: right;
        width: 10%;
        height: 100%;
        padding-right: 4%;
        cursor: pointer;
        background-image: url('/piano/Content/Images/help_icon.png');
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;
    }

        .piano_wrapper .piano_header .piano_help img {
            width: 100%;
        }

.piano_wrapper .piano_top_controls {
    position: relative;
    height: 32.5%;
    background-color: #000000;
}

    .piano_wrapper .piano_top_controls .piano_top_controls_left {
        height: 100%;
        width: 55%;
        float: left;
        padding-right: 2%;
        box-sizing: border-box;
    }

        .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top {
            height: 60%;
            width: 100%;
            padding-left: 2%;
        }

            .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper {
                width: 20%;
                height: 100%;
                float: left;
                text-align: center;
                position: relative;
            }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box {
                    display: none;
                    position: absolute;
                    width: 220%;
                    left: -60%;
                    z-index: 10;
                    bottom: -75%;
                    height: 80%;
                }

                    .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box {
                        width: 50%;
                        height: 100%;
                        float: left;
                    }

                        .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box img, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box img {
                            width: 55%;
                        }

                            .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box img.left_hand, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box img.left_hand {
                                content: url('/piano/Content/Images/left_hand.png');
                            }

                            .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box img.right_hand, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box img.right_hand {
                                content: url('/piano/Content/Images/right_hand.png');
                            }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_ton_slider_box {
                    display: none;
                    position: relative;
                    width: 300%;
                    left: 100%;
                    z-index: 10;
                    bottom: -12%;
                    cursor: pointer;
                }

                    .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_ton_slider_box .ui-state-default, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_ton_slider_box .ui-widget-content .ui-state-default, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_ton_slider_box .ui-widget-header .ui-state-default {
                        border-radius: 50%;
                        border: none;
                        background: none !important;
                        background-color: #FFFFFF !important;
                        width: 14px;
                        height: 14px;
                        top: -160%;
                        cursor: pointer;
                        outline: none;
                        z-index: 5;
                        direction: rtl !important;
                    }

                    .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_ton_slider_box .ui-widget-content {
                        height: 3px;
                        margin-top: 6%;
                        border: none;
                        background: none;
                        background-color: #515151;
                    }

                    .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_ton_slider_box .ui-widget-header {
                        background: none;
                        background-color: #3AEE6D;
                        cursor: pointer;
                    }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_control_image {
                    height: 60%;
                    padding-top: 15%;
                    background-size: 60%;
                    background-position: center;
                    background-repeat: no-repeat;
                    /*img.metronom {
                            content: url('/piano/Content/Images/metronom_passive.png');
                        }*/
                    /*img.ton {
                            content: url('/piano/Content/Images/ton_passive.png');
                        }*/
                    /*img.noten_zeigen {
                            content: url('/piano/Content/Images/noten_zeigne_passive.png');
                        }*/
                    /*img.c-e-d {
                            content: url('/piano/Content/Images/cde_passive.png');
                        }*/
                    /*img.zweihande {
                            content: url('/piano/Content/Images/two_hands.png');
                        }*/
                }

                    .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_control_image img {
                        cursor: pointer;
                        height: 90%;
                    }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #noten_zeigen {
                    background-image: url('/piano/Content/Images/noten_zeigne_passive.png');
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #cde {
                    background-image: url('/piano/Content/Images/cde_passive.png');
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #metronome {
                    background-image: url('/piano/Content/Images/metronom_passive.png');
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #ton_button {
                    background-image: url('/piano/Content/Images/ton_passive.png');
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #zweihande {
                    background-image: url('/piano/Content/Images/two_hands.png');
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #leftPosition {
                    background-image: url('/piano/Content/Images/left_hand.png');
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #rightPosition {
                    background-image: url('/piano/Content/Images/right_hand.png');
                }


                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper .piano_control_title {
                    height: 30%;
                    color: #FFFFFF;
                    text-transform: uppercase;
                    white-space: nowrap;
                    /*overflow: hidden;*/
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper.active .piano_control_title {
                    color: #3AEE6D;
                }

        .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom {
            height: 40%;
            width: 100%;
        }

            .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper {
                width: 50%;
                height: 100%;
                margin: 0 auto;
            }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider_title {
                    text-transform: uppercase;
                    color: #FFFFFF;
                    padding-top: 4%;
                    text-align: center;
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-state-default, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-widget-content .ui-state-default, .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-widget-header .ui-state-default {
                    border-radius: 50%;
                    border: none;
                    background: none !important;
                    background-color: #FFFFFF !important;
                    width: 14px;
                    height: 14px;
                    top: -160%;
                    z-index: 5;
                    outline: none;
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-widget-content {
                    height: 3px;
                    margin-top: 3%;
                    border: none;
                    background: none;
                    cursor: pointer;
                    background-color: #515151;
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-widget-header {
                    background: none;
                    background-color: #3AEE6D;
                    cursor: pointer;
                }

    .piano_wrapper .piano_top_controls .piano_top_controls_right {
        height: 100%;
        width: 45%;
        float: left;
        border-left: 2px dashed #262626;
        box-sizing: border-box;
    }

        .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_chord_title_wrapper {
            float: left;
            height: 100%;
            width: 40%;
        }

            .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_chord_title_wrapper .title {
                text-transform: capitalize;
                position: relative;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
                color: #FFFFFF;
                padding-left: 10%;
            }

        .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_chord_wrapper {
            float: left;
            height: 100%;
            width: 35%;
        }

            .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_chord_wrapper .piano_chord {
                height: 100%;
                width: 100%;
                color: #FFFFFF;
                text-align: center;
                position: relative;
                background-image: url('/piano/Content/Images/chord_frame.png');
                background-size: 96%;
                background-repeat: no-repeat;
                background-position: center;
                /*img {
                        height: 69%;
                        margin-top: 15%;
                    }

                    @media screen and (max-width: 641px) {
                        img {
                            height: 80px;
                            width: 80px;
                        }
                    }*/
            }

                .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_chord_wrapper .piano_chord .piano_chord_letter {
                    position: absolute;
                    left: 18%;
                    top: 34%;
                    font-size: 145%;
                    direction: ltr;
                    width: 70%;
                    line-height: 230%;
                    font-family: 'Arimo', sans-serif;
                }

        .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_sustain_wrapper {
            float: left;
            height: 100%;
            width: 24%;
            color: #FFFFFF;
        }

            .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_sustain_wrapper .piano_sustain {
                text-align: center;
                position: relative;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
                height: 100%;
            }

                .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_sustain_wrapper .piano_sustain .sustain_img {
                    background-image: url(/piano/Content/Images/sustain_passive.png);
                    height: 33%;
                    margin-top: 40%;
                    width: 55%;
                    margin-right: 22%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_sustain_wrapper .piano_sustain .title {
                    color: #353535;
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_sustain_wrapper .piano_sustain.active .sustain_img {
                    -moz-transition: all 0.05s;
                    -o-transition: all 0.05s;
                    -webkit-transition: all 0.05s;
                    transition: all 0.05s;
                    background-image: url(/piano/Content/Images/sustain_active.png);
                }

                .piano_wrapper .piano_top_controls .piano_top_controls_right .piano_sustain_wrapper .piano_sustain.active .title {
                    -moz-transition: all 0.05s;
                    -o-transition: all 0.05s;
                    -webkit-transition: all 0.05s;
                    transition: all 0.05s;
                    color: #3AEE6D;
                }

.piano_wrapper .piano_keys_block {
    position: relative;
    height: 21%;
    background-color: #4B4744;
    overflow: hidden;
    font-family: 'Arimo', sans-serif;
}

    .piano_wrapper .piano_keys_block .english_version, .piano_wrapper .piano_keys_block .german_version, .piano_wrapper .piano_keys_block .hebrew_version {
        display: none;
    }

    .piano_wrapper .piano_keys_block .piano_octave {
        height: 100%;
        width: 13.46%;
        float: left;
    }

        .piano_wrapper .piano_keys_block .piano_octave .piano_white_btn {
            width: 14.28%;
            float: left;
            height: 100%;
            background-image: url('/piano/Content/Images/piano_white_key.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: 1px solid #000000;
            box-sizing: border-box;
            position: relative;
            float: left !important;
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_black_btn {
            width: 84%;
            position: absolute;
            height: 60%;
            right: -45%;
            z-index: 3;
            background-image: url('/piano/Content/Images/piano_black_key.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_note {
            display: none;
        }

            .piano_wrapper .piano_keys_block .piano_octave .piano_note.active {
                width: 100%;
                height: 17.5%;
                bottom: 0;
                position: absolute;
                text-align: center;
                display: block;
                font-size: 110%;
            }

                .piano_wrapper .piano_keys_block .piano_octave .piano_note.active .hebrew_version {
                    font-size: 85%;
                }

        .piano_wrapper .piano_keys_block .piano_octave .piano_white_btn.right {
            background-image: url('/piano/Content/Images/piano_white_key_green.png');
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_black_btn.right {
            background-image: url('/piano/Content/Images/piano_black_key_green.png');
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_white_btn.left {
            background-image: url('/piano/Content/Images/piano_white_key_red.png');
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_black_btn.left {
            background-image: url('/piano/Content/Images/piano_black_key_red.png');
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_white_btn > .piano_note_zeigen {
            display: none;
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_black_btn > .piano_note_zeigen {
            display: none;
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_white_btn.left > .piano_note_zeigen.active, .piano_wrapper .piano_keys_block .piano_octave .piano_black_btn.left > .piano_note_zeigen.active {
            background-color: #FFFFFF;
            border: 1px solid #222222;
            display: table;
        }

        .piano_wrapper .piano_keys_block .piano_octave .piano_white_btn.right > .piano_note_zeigen.active, .piano_wrapper .piano_keys_block .piano_octave .piano_black_btn.right > .piano_note_zeigen.active {
            background-color: #FFFFFF;
            border: 1px solid #222222;
            display: table;
        }

        .piano_wrapper .piano_keys_block .piano_octave.first_two_buttons {
            width: 3.846%;
        }

            .piano_wrapper .piano_keys_block .piano_octave.first_two_buttons .piano_white_btn {
                width: 50%;
            }

        .piano_wrapper .piano_keys_block .piano_octave.last_one_button {
            width: 1.92%;
        }

            .piano_wrapper .piano_keys_block .piano_octave.last_one_button .piano_white_btn {
                width: 100%;
            }

    .piano_wrapper .piano_keys_block.zoom {
        width: 144.3%;
        left: 19.5%;
    }

        .piano_wrapper .piano_keys_block.zoom .piano_octave .piano_white_btn .piano_note_zeigen.active {
            bottom: 17%;
        }

        .piano_wrapper .piano_keys_block.zoom .piano_octave .piano_black_btn {
            width: 68%;
            right: -35%;
        }

        .piano_wrapper .piano_keys_block.zoom .piano_octave .piano_note.active {
            bottom: 2%;
        }

            .piano_wrapper .piano_keys_block.zoom .piano_octave .piano_note.active .german_version, .piano_wrapper .piano_keys_block.zoom .piano_octave .piano_note.active .english_version {
                font-size: 130%;
                margin-top: -4%;
            }

            .piano_wrapper .piano_keys_block.zoom .piano_octave .piano_note.active .hebrew_version {
                font-size: 110%;
            }

.piano_wrapper .piano_footer {
    position: relative;
    height: 31.5%;
    background-color: #000000;
    overflow: hidden;
}

    .piano_wrapper .piano_footer .piano_rewind_wrapper {
        height: 52%;
        position: relative;
    }

        .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_song_time_line {
            height: 50%;
            width: 100%;
        }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_song_time_line .piano_elapsed_time, .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_song_time_line .piano_all_time {
                color: #FFFFFF;
                width: 50%;
                float: left;
                text-align: left;
                padding-left: 2%;
                padding-right: 2%;
                box-sizing: border-box;
                padding-top: 0.7%;
            }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_song_time_line .piano_all_time {
                text-align: right;
            }

        .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line {
            height: 25%;
            width: 100%;
            padding-top: 0;
            box-sizing: border-box;
            padding-left: 3%;
            padding-right: 3%;
            position: absolute;
        }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line .ui-state-default, .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line .ui-widget-content .ui-state-default, .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line .ui-widget-header .ui-state-default {
                border-radius: 50%;
                border: none;
                background: none !important;
                background-color: #FFFFFF !important;
                width: 10px;
                top: -150%;
                height: 10px;
                cursor: pointer;
                outline: none;
            }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line .ui-widget-content {
                height: 3px;
                border: none;
                background: none;
                z-index: 2;
                background-color: #515151;
                cursor: pointer;
            }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line .ui-widget-header {
                background: none;
                background-color: #3AEE6D;
            }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_rewind_slider_line span.pin {
                position: absolute;
                width: 14px;
                height: 16px;
                top: -18px;
                left: -2px;
                background-image: url('/piano/Content/Images/loop_pin.png');
                outline: none;
                background-size: 100% 100%;
                cursor: pointer;
            }

        .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line {
            height: 25%;
            width: 100%;
            padding-top: 0;
            box-sizing: border-box;
            padding-left: 3%;
            padding-right: 3%;
            position: absolute;
        }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider {
                display: none;
                height: 3px;
                border: none;
                background: none;
                background-color: #515151;
                width: 100%;
            }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .layer {
                    background-color: #515151;
                    width: 100%;
                    height: 10px;
                    height: 3px;
                    border: none;
                    display: block;
                    position: absolute;
                    width: 100%;
                    z-index: 3;
                }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .ui-state-default, .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .ui-widget-content .ui-state-default, .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .ui-widget-header .ui-state-default {
                    outline: none;
                    width: 4px;
                    top: -0.5em;
                    margin-left: -4px;
                    /*z-index: 11;*/
                    z-index: 5;
                    cursor: pointer;
                    width: 0.7%;
                    margin-left: -0.8%;
                }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .ui-state-active {
                    border: 1px solid #c5c5c5 !important;
                    background: #f6f6f6 !important;
                    font-weight: normal;
                    color: #454545;
                }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .ui-slider-horizontal .ui-slider-handle {
                    margin-left: 0;
                }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider .ui-widget-header {
                    background: none;
                }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider span.pin {
                    position: absolute;
                    width: 14px;
                    height: 10px;
                    top: -11px;
                    left: -5px;
                    cursor: pointer;
                    background-image: url('/piano/Content/Images/loop_pin.png');
                    outline: none;
                    background-size: 100% 100%;
                }

                    .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider span.pin.right .finger_layer {
                        padding: 150%;
                        margin-left: 60%;
                    }

                    .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_loop_slider_line #loop-slider span.pin.left .finger_layer {
                        padding: 150%;
                        margin-left: -240%;
                    }

        .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_parts_line {
            height: 29%;
            margin-top: 2%;
            box-sizing: border-box;
            margin-left: 3%;
            margin-right: 3%;
            position: relative;
        }

            .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_parts_line .piano_word {
                display: inline-block;
                height: 85%;
                color: #FFFFFF;
                text-align: center;
                line-height: 150%;
                border-right: 1px solid #787878;
                box-sizing: border-box;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 0.1%;
                float: left;
            }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_parts_line .piano_word:last-child {
                    border: none;
                }

                .piano_wrapper .piano_footer .piano_rewind_wrapper .piano_parts_line .piano_word.active {
                    color: #3AEE6D;
                    /*font-weight: 700;*/
                    font-family: 'OpenSansHebrew-Bold';
                }

    .piano_wrapper .piano_footer .piano_player_controls_wrapper {
        height: 48%;
    }

        .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block {
            width: 38%;
            height: 100%;
            float: left;
        }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .exitfullscreen, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .exitfullscreen {
                display: none;
            }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper {
                width: 50%;
                height: 100%;
                float: left;
                position: relative;
            }

                .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_icon, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_icon, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_icon, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_icon {
                    position: absolute;
                    bottom: 0;
                    width: 15%;
                    margin-bottom: 10%;
                    margin-left: 10%;
                    left: 10%;
                }

                .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_loop_button, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_loop_button, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_loop_button, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_loop_button {
                    border: 2px solid #FFFFFF;
                    border-radius: 100px;
                    color: #FFFFFF;
                    width: 70%;
                    position: relative;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    -o-transform: translateY(-50%);
                    transform: translateY(-50%);
                    position: relative;
                    float: right;
                    margin-right: 5%;
                    cursor: pointer;
                    background-image: url('/piano/Content/Images/loop_passive_icon.png');
                    background-repeat: no-repeat;
                    background-size: 25% auto;
                    background-position: 9% center;
                    /*img {
                            content: url('/piano/Content/Images/loop_passive_icon.png');
                            float: left;
                            margin: 6% 0 7% 10%;
                            width: 20%;
                        }*/
                }

                    .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_loop_button .title, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_loop_button .title, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_loop_button .title, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_loop_button .title {
                        padding: 11%;
                        box-sizing: border-box;
                        text-align: center;
                    }

                    .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_loop_button.active, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_loop_button.active, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_loop_button.active, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_loop_button.active {
                        border: 2px solid #3AEE6D;
                        color: #3AEE6D;
                        background-image: url('/piano/Content/Images/loop_active_icon.png');
                        /*img {
                            content: url('/piano/Content/Images/loop_active_icon.png');
                        }*/
                    }

                .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_box, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_box, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_box, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_box {
                    width: 60%;
                    height: 55%;
                    border: none;
                    position: relative;
                    background: transparent;
                    background-image: url('/piano/Content/Images/volume_gray.png');
                    background-repeat: no-repeat;
                    background-size: 90%;
                    margin-left: 40%;
                    position: absolute;
                    bottom: 0;
                    margin-bottom: 14%;
                    margin-left: 40%;
                }

                    .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_box .piano_volume_gray, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_box .piano_volume_gray, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_box .piano_volume_gray, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_box .piano_volume_gray {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                        z-index: 1;
                    }

                    .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_box .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_box .ui-widget-content .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_box .ui-widget-header .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_box .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_box .ui-widget-content .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_box .ui-widget-header .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_box .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_box .ui-widget-content .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_box .ui-widget-header .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_box .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_box .ui-widget-content .ui-state-default, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_box .ui-widget-header .ui-state-default {
                        display: none;
                    }

                    .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_volume_wrapper .piano_volume_box .ui-widget-header, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_left_controls_block .piano_loop_wrapper .piano_volume_box .ui-widget-header, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_volume_wrapper .piano_volume_box .ui-widget-header, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block .piano_loop_wrapper .piano_volume_box .ui-widget-header {
                        background: transparent;
                        background-image: url('/piano/Content/Images/volume_white.png');
                        background-repeat: no-repeat;
                        background-size: 60px 112%;
                    }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_right_controls_block img {
                position: relative;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
                float: right;
                padding: 2%;
                box-sizing: border-box;
                width: 11%;
                cursor: pointer;
            }

        .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block {
            width: 24%;
            float: left;
            height: 100%;
        }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block .piano_pause_box, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block .piano_stop_box {
                width: 30%;
                float: left;
                text-align: center;
                height: 100%;
                /*img {
                        @include vertical-align();
                        width: 75%;
                        cursor: pointer;
                    }*/
            }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block .piano_play_box {
                width: 40%;
                float: left;
                height: 100%;
                text-align: center;
                /*img {
                        @include vertical-align();
                        width: 75%;
                        cursor: pointer;
                    }*/
            }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block #pause, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block #play, .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block #stop {
                background-image: url('/piano/Content/Images/play_passive.png');
                background-size: 75%;
                background-repeat: no-repeat;
                background-position: center;
                cursor: pointer;
            }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block #pause {
                background-image: url('/piano/Content/Images/pause_passive.png');
            }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block #play {
                background-image: url('/piano/Content/Images/play_passive.png');
            }

            .piano_wrapper .piano_footer .piano_player_controls_wrapper .piano_center_controls_block #stop {
                background-image: url('/piano/Content/Images/stop_passive_btn.png');
            }

        .piano_wrapper .piano_footer .piano_player_controls_wrapper #zoomOut {
            background-image: url('/piano/Content/Images/zoom_out_active.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
            float: right;
            width: 11%;
            cursor: pointer;
            margin: 0 2%;
        }

        .piano_wrapper .piano_footer .piano_player_controls_wrapper #zoomIn {
            background-image: url('/piano/Content/Images/zoom_in.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
            float: right;
            width: 11%;
            cursor: pointer;
            margin: 0 2%;
        }

.piano_wrapper .zIndex10 {
    z-index: 10;
}

.piano_wrapper .circle_black_default {
    padding: 80% 90% !important;
    left: -40% !important;
}

    .piano_wrapper .circle_black_default span.english_version, .piano_wrapper .circle_black_default span.german_version {
        font-size: 96% !important;
        line-height: 175% !important;
    }

    .piano_wrapper .circle_black_default span.hebrew_version {
        font-size: 60% !important;
    }

        .piano_wrapper .circle_black_default span.hebrew_version span {
            left: 0;
            right: 0;
            position: absolute;
            margin: auto;
            line-height: normal;
        }

            .piano_wrapper .circle_black_default span.hebrew_version span:first-child {
                font-size: 140% !important;
                top: 12%;
            }

            .piano_wrapper .circle_black_default span.hebrew_version span:last-child {
                font-size: 140% !important;
                bottom: -10%;
            }

.piano_wrapper .zoom_circle_black_default {
    padding: 74% 82% !important;
    left: -50% !important;
}

    .piano_wrapper .zoom_circle_black_default span.english_version, .piano_wrapper .zoom_circle_black_default span.german_version {
        /*font-weight: 900;*/
        font-family: 'OpenSansHebrew-Bold';
        font-size: 115% !important;
        line-height: 164% !important;
    }

    .piano_wrapper .zoom_circle_black_default span.hebrew_version span {
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        line-height: normal;
    }

        .piano_wrapper .zoom_circle_black_default span.hebrew_version span:first-child {
            font-size: 145% !important;
            top: 2%;
        }

        .piano_wrapper .zoom_circle_black_default span.hebrew_version span:last-child {
            font-size: 130% !important;
            bottom: -10%;
        }

.piano_wrapper .circle_white_default {
    padding: 70% !important;
    z-index: 1;
    left: -30% !important;
}

    .piano_wrapper .circle_white_default span.english_version, .piano_wrapper .circle_white_default span.german_version {
        font-size: 155% !important;
        line-height: 160% !important;
    }

    .piano_wrapper .circle_white_default span.hebrew_version {
        font-size: 145%;
        line-height: 160% !important;
    }

.piano_wrapper .zoom_circle_white_default span.english_version, .piano_wrapper .zoom_circle_white_default span.german_version {
    font-size: 160% !important;
    line-height: 160% !important;
}

.piano_wrapper .zoom_circle_white_default span.hebrew_version {
    font-size: 155%;
    line-height: 160% !important;
}

.piano_wrapper .circle_black_740 {
    padding: 80% 90% !important;
    left: -40% !important;
}

    .piano_wrapper .circle_black_740 span.english_version, .piano_wrapper .circle_black_740 span.german_version {
        font-size: 96% !important;
        line-height: 175% !important;
    }

    .piano_wrapper .circle_black_740 span.hebrew_version {
        font-size: 60% !important;
    }

        .piano_wrapper .circle_black_740 span.hebrew_version span {
            left: 0;
            right: 0;
            position: absolute;
            margin: auto;
            line-height: normal;
        }

            .piano_wrapper .circle_black_740 span.hebrew_version span:first-child {
                font-size: 120% !important;
                top: 8%;
            }

            .piano_wrapper .circle_black_740 span.hebrew_version span:last-child {
                font-size: 140% !important;
                bottom: -10%;
            }

.piano_wrapper .zoom_circle_black_740 {
    padding: 74% 82% !important;
    left: -50% !important;
}

    .piano_wrapper .zoom_circle_black_740 span.english_version, .piano_wrapper .zoom_circle_black_740 span.german_version {
        font-size: 115% !important;
        line-height: 164% !important;
    }

    .piano_wrapper .zoom_circle_black_740 span.hebrew_version span {
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        line-height: normal;
    }

        .piano_wrapper .zoom_circle_black_740 span.hebrew_version span:first-child {
            font-size: 145% !important;
            top: 2%;
        }

        .piano_wrapper .zoom_circle_black_740 span.hebrew_version span:last-child {
            font-size: 130% !important;
            bottom: -10%;
        }

.piano_wrapper .circle_white_740 {
    padding: 70% !important;
    z-index: 1;
    left: -30% !important;
}

    .piano_wrapper .circle_white_740 span.english_version, .piano_wrapper .circle_white_740 span.german_version {
        font-size: 140% !important;
        line-height: 165% !important;
    }

    .piano_wrapper .circle_white_740 span.hebrew_version {
        font-size: 125%;
        line-height: 160% !important;
    }

.piano_wrapper .zoom_circle_white_740 span.english_version, .piano_wrapper .zoom_circle_white_740 span.german_version {
    font-size: 160% !important;
    line-height: 165% !important;
}

.piano_wrapper .zoom_circle_white_740 span.hebrew_version {
    font-size: 155%;
    line-height: 160% !important;
}

.piano_wrapper .circle_black_639 {
    padding: 80% 90% !important;
    left: -40% !important;
}

    .piano_wrapper .circle_black_639 span.english_version, .piano_wrapper .circle_black_639 span.german_version {
        font-size: 110% !important;
        line-height: 140% !important;
    }

    .piano_wrapper .circle_black_639 span.hebrew_version {
        font-size: 60% !important;
    }

        .piano_wrapper .circle_black_639 span.hebrew_version span {
            left: 0;
            right: 0;
            position: absolute;
            margin: auto;
            line-height: normal;
        }

            .piano_wrapper .circle_black_639 span.hebrew_version span:first-child {
                font-size: 120% !important;
                top: -3%;
            }

            .piano_wrapper .circle_black_639 span.hebrew_version span:last-child {
                font-size: 130% !important;
                bottom: -9%;
            }

.piano_wrapper .circle_white_639 {
    padding: 70% !important;
    z-index: 1;
    left: -20% !important;
}

    .piano_wrapper .circle_white_639 span.english_version, .piano_wrapper .circle_white_639 span.german_version {
        font-size: 160% !important;
        line-height: 150% !important;
    }

    .piano_wrapper .circle_white_639 span.hebrew_version {
        font-size: 120%;
        line-height: 160% !important;
    }

.piano_wrapper .zoom_circle_white_639 span.english_version, .piano_wrapper .zoom_circle_white_639 span.german_version {
    font-size: 160% !important;
    line-height: 185% !important;
}

.piano_wrapper .zoom_circle_white_639 span.hebrew_version {
    font-size: 155%;
    line-height: 160% !important;
}

.piano_wrapper .zoom_circle_black_639 {
    padding: 74% 82% !important;
    left: -50% !important;
}

    .piano_wrapper .zoom_circle_black_639 span.english_version, .piano_wrapper .zoom_circle_black_639 span.german_version {
        font-size: 115% !important;
        line-height: 164% !important;
    }

    .piano_wrapper .zoom_circle_black_639 span.hebrew_version span {
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        line-height: normal;
    }

        .piano_wrapper .zoom_circle_black_639 span.hebrew_version span:first-child {
            font-size: 145% !important;
            top: 2%;
        }

        .piano_wrapper .zoom_circle_black_639 span.hebrew_version span:last-child {
            font-size: 130% !important;
            bottom: -10%;
        }

.piano_wrapper .pedal_639 {
    height: 60% !important;
    margin-top: 12% !important;
}

.piano_wrapper .circle_black_1000 {
    padding: 80% 83% !important;
    left: -40% !important;
}

    .piano_wrapper .circle_black_1000 span.english_version, .piano_wrapper .circle_black_1000 span.german_version {
        font-size: 96% !important;
        line-height: 200% !important;
    }

    .piano_wrapper .circle_black_1000 span.hebrew_version {
        font-size: 60% !important;
    }

        .piano_wrapper .circle_black_1000 span.hebrew_version span {
            left: 0;
            right: 0;
            position: absolute;
            margin: auto;
            line-height: normal;
        }

            .piano_wrapper .circle_black_1000 span.hebrew_version span:first-child {
                font-size: 140% !important;
                top: 12%;
            }

            .piano_wrapper .circle_black_1000 span.hebrew_version span:last-child {
                font-size: 140% !important;
                bottom: -3%;
            }

.piano_wrapper .zoom_circle_black_1000 {
    padding: 75% 75% !important;
    left: -32% !important;
}

    .piano_wrapper .zoom_circle_black_1000 span.english_version, .piano_wrapper .zoom_circle_black_1000 span.german_version {
        font-size: 115% !important;
        line-height: 190% !important;
    }

    .piano_wrapper .zoom_circle_black_1000 span.hebrew_version span {
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        line-height: normal;
    }

        .piano_wrapper .zoom_circle_black_1000 span.hebrew_version span:first-child {
            font-size: 145% !important;
            top: 2%;
        }

        .piano_wrapper .zoom_circle_black_1000 span.hebrew_version span:last-child {
            font-size: 130% !important;
            bottom: -3%;
        }

.piano_wrapper .circle_white_1000 {
    padding: 70% !important;
    z-index: 1;
    left: -20% !important;
}

    .piano_wrapper .circle_white_1000 span.english_version, .piano_wrapper .circle_white_1000 span.german_version {
        font-size: 140% !important;
        line-height: 202% !important;
    }

    .piano_wrapper .circle_white_1000 span.hebrew_version {
        font-size: 145%;
        line-height: 190% !important;
    }

.piano_wrapper .zoom_circle_white_1000 span.english_version, .piano_wrapper .zoom_circle_white_1000 span.german_version {
    font-size: 160% !important;
    line-height: 190% !important;
}

.piano_wrapper .zoom_circle_white_1000 span.hebrew_version {
    font-size: 155%;
    line-height: 190% !important;
}

.piano_wrapper .circle_black_1200 {
    padding: 80% 83% !important;
    left: -40% !important;
}

    .piano_wrapper .circle_black_1200 span.english_version, .piano_wrapper .circle_black_1200 span.german_version {
        font-size: 96% !important;
        line-height: 197% !important;
    }

    .piano_wrapper .circle_black_1200 span.hebrew_version {
        font-size: 60% !important;
    }

        .piano_wrapper .circle_black_1200 span.hebrew_version span {
            left: 0;
            right: 0;
            position: absolute;
            margin: auto;
            line-height: normal;
        }

            .piano_wrapper .circle_black_1200 span.hebrew_version span:first-child {
                font-size: 140% !important;
                top: 7%;
            }

            .piano_wrapper .circle_black_1200 span.hebrew_version span:last-child {
                font-size: 140% !important;
                bottom: -3%;
            }

.piano_wrapper .zoom_circle_black_1200 {
    padding: 75% 75% !important;
    left: -32% !important;
}

    .piano_wrapper .zoom_circle_black_1200 span.english_version, .piano_wrapper .zoom_circle_black_1200 span.german_version {
        font-size: 115% !important;
        line-height: 190% !important;
    }

    .piano_wrapper .zoom_circle_black_1200 span.hebrew_version span {
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        line-height: normal;
    }

        .piano_wrapper .zoom_circle_black_1200 span.hebrew_version span:first-child {
            font-size: 145% !important;
            top: 7%;
        }

        .piano_wrapper .zoom_circle_black_1200 span.hebrew_version span:last-child {
            font-size: 130% !important;
            bottom: -3%;
        }

.piano_wrapper .circle_white_1200 {
    padding: 70% !important;
    z-index: 1;
    left: -20% !important;
}

    .piano_wrapper .circle_white_1200 span.english_version, .piano_wrapper .circle_white_1200 span.german_version {
        font-size: 140% !important;
        line-height: 206% !important;
    }

    .piano_wrapper .circle_white_1200 span.hebrew_version {
        font-size: 145%;
        line-height: 190% !important;
    }

.piano_wrapper .zoom_circle_white_1200 {
    padding: 50% 51%;
}

    .piano_wrapper .zoom_circle_white_1200 span.english_version, .piano_wrapper .zoom_circle_white_1200 span.german_version {
        font-size: 160% !important;
        line-height: 200% !important;
    }

    .piano_wrapper .zoom_circle_white_1200 span.hebrew_version {
        font-size: 155%;
        line-height: 205% !important;
    }

.piano_wrapper .circle_black_1700 {
    padding: 80% 83% !important;
    left: -40% !important;
}

    .piano_wrapper .circle_black_1700 span.english_version, .piano_wrapper .circle_black_1700 span.german_version {
        font-size: 96% !important;
        line-height: 170% !important;
    }

    .piano_wrapper .circle_black_1700 span.hebrew_version {
        font-size: 60% !important;
    }

        .piano_wrapper .circle_black_1700 span.hebrew_version span {
            left: 0;
            right: 0;
            position: absolute;
            margin: auto;
            line-height: normal;
        }

            .piano_wrapper .circle_black_1700 span.hebrew_version span:first-child {
                font-size: 140% !important;
                top: 3%;
            }

            .piano_wrapper .circle_black_1700 span.hebrew_version span:last-child {
                font-size: 140% !important;
                bottom: -3%;
            }

.piano_wrapper .zoom_circle_black_1700 {
    padding: 75% 75% !important;
    left: -32% !important;
}

    .piano_wrapper .zoom_circle_black_1700 span.english_version, .piano_wrapper .zoom_circle_black_1700 span.german_version {
        font-size: 115% !important;
        line-height: 165% !important;
    }

    .piano_wrapper .zoom_circle_black_1700 span.hebrew_version span {
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        line-height: normal;
    }

        .piano_wrapper .zoom_circle_black_1700 span.hebrew_version span:first-child {
            font-size: 145% !important;
            top: 2%;
        }

        .piano_wrapper .zoom_circle_black_1700 span.hebrew_version span:last-child {
            font-size: 130% !important;
            bottom: -6%;
        }

.piano_wrapper .circle_white_1700 {
    padding: 70% !important;
    z-index: 1;
    left: -20% !important;
}

    .piano_wrapper .circle_white_1700 span.english_version, .piano_wrapper .circle_white_1700 span.german_version {
        font-size: 140% !important;
        line-height: 175% !important;
    }

    .piano_wrapper .circle_white_1700 span.hebrew_version {
        font-size: 145%;
        line-height: 172% !important;
    }

.piano_wrapper .zoom_circle_white_1700 {
    padding: 50% 51%;
}

    .piano_wrapper .zoom_circle_white_1700 span.english_version, .piano_wrapper .zoom_circle_white_1700 span.german_version {
        font-size: 160% !important;
        line-height: 170% !important;
    }

    .piano_wrapper .zoom_circle_white_1700 span.hebrew_version {
        font-size: 155%;
        line-height: 179% !important;
    }

.opacity_layer:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
    background-color: #000000;
    z-index: 5;
}

#toneClose {
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 6;
    width: 4%;
    right: 0;
    top: 0;
    margin: 2.2% 1%;
}

#alt_flash_link {
    position: absolute;
    color: #fff;
    margin-right: 10px;
    bottom: 0px;
}

#but-popup {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

.player-bar > span {
    position: relative;
    top: 12px;
    display: block;
    margin: 0 auto;
    width: 50%;
    color: #fff;
}



@media only screen (min-width: 540px) and (max-width: 767px) {

    .player-bar > span {
        color: yellow !important;
    }
}


#showNotes {
    color: #FFFFFF;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    float: left;
    padding: 7%;
    width: 35%;
    cursor: pointer;
}

#messageBox {
    margin: 0 1%;
    position: relative;
    height: 32.5%;
    background-color: #FFFFFF;
    overflow: hidden;
}

    #messageBox.hide {
        display: none;
    }

    #messageBox.show {
        display: block;
    }

    #messageBox .visualization_message {
        position: absolute;
        left: 0;
        font-size: 20px;
        right: 0;
        top: 50%;
        bottom: 0;
        text-align: center;
        width: 100%;
        margin: auto;
        display: table;
    }

#showNotesMessageForUnregistered {
    display: none;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 69%;
    font-size: 110%;
    font-weight: 600;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    background-color: #FFFFFF;
}

#notes_info_popup_buttontext {
    background-color: #3AEE6D;
    width: 60%;
    margin: 0 20% 5% 20%;
    padding: 2%;
    text-align: center;
    border-radius: 100px;
    cursor: pointer;
    color: #1F1F1F;
    font-weight: 700;
    display: block;
    text-decoration: none;
}

#notes_info_popup_body,
#notes_info_popup_title,
#notes_info_popup_buttontext{
    direction: ltr;
}

.background-im {
  background:url(/piano/Content/Images/backg.jpg);
  color: #fff;
  float: left;
  font-size: 24px;
  padding: 20px 0;
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
  background-size: 100% 100%;
}
  .side-textc {
  color: #fff;
  float: right;
  font-size: 24px;
  padding-top:50px;
  width: 36%;
}
.piano_wrapper .close_visualization {
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}
.piano_wrapper .close_visualization1 {
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}
.piano_wrapper .close_visualization2 {
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}
.piano_wrapper .close_visualization3 {
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}
.piano_wrapper .close_visualization4 {
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}
.piano_wrapper .close_visualization5 {
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}
.piano_wrapper .close_visualization6{
    position: absolute;
    right: 4px;
    top: 0;
    width: 3%;
    margin-top: 0.3%;
    cursor: pointer;
}

.introtextloop{
    color:#fff;
    padding: 19px;
    font-size: 24px;
    font-family:OpenSansHebrew-Regular;
}

.introtexts{
    color:#fff;
    padding: 25px;
    font-size: 24px;
    font-family:OpenSansHebrew-Regular;
}
    span#tempoValue {
    padding-top: 0 !important;
    height: auto !important;
    left: 16px !important;
    bottom: 0px !important;
}
.escortrate_btm_anchr, .escortrate_btm_anchr:hover {
  background: #ff8526 none repeat scroll 0 0;
  color: #fff;
  display: table;
  font-size: 36px;
  font-weight: bold;
  margin: 20px auto;
  padding: 10px 30px;
  text-decoration: none;
}
@media screen and (min-width: 1200px) and (max-width: 2000px) {
    .introtextloop {
        padding-top: 10% !important;
        padding-bottom: 2% !important;
    }
    .background-im {
        padding: 33px 0 !important;
    }
    .arrowimgc {
    padding-right: 26% !important;
}
   
}

@media screen and (min-width: 900px) and (max-width: 1024px) {
#show_helpID {
  height: 250px !important;
  width: 450px !important;
}
#show_ton_buttonID{
     height: 250px !important;
  width: 450px !important;
}
#show_metronomeID{
      height: 250px !important;
  width: 450px !important;
}
#show_zweihandeID{
     height: 250px !important;
  width: 450px !important;
}
#video{
      height: 250px !important;
  width: 450px !important;
}
#info_popupID{
      height: 250px !important;
  width: 450px !important; 
}
#show_loop_buttonID{
      height: 250px !important;
  width: 450px !important; 
}
}


@media screen and (min-width: 768px) and (max-width: 1023px) {

.side-textc {
  color: #fff;
  float: right;
  font-size: 22px;
  /*padding-top: 89px;*/
  padding-top: 0px;
  width: 24%;  
}

#show_helpID {
  height: 184px !important;
  width: 337px !important;
}
#show_speedID{
   height: 184px !important;
  width: 337px !important;  
}
#show_ton_buttonID{
    height: 184px !important;
    width: 337px !important; 
}
#show_metronomeID{
    height: 184px !important;
    width: 337px !important; 
}
#show_zweihandeID{
    height: 184px !important;
    width: 337px !important; 
}
#video{
    height: 184px !important;
    width: 337px !important; 
}
#info_popupID{
    height: 184px !important;
    width: 337px !important; 
}
#show_loop_buttonID{
    height: 184px !important;
    width: 337px !important;  
}

.center-img {
    width: 100% !important;
}
    .piano_wrapper .close_visualization {
        right: 4px;
        top: 20px;

    }
     .piano_wrapper .close_visualization1 {
        right: 4px;
        top: 20px;

    }
     .piano_wrapper .close_visualization2 {
        right: 4px;
        top: 20px;

    }
     .piano_wrapper .close_visualization3 {
        right: 4px;
        top: 20px;

    }
     .piano_wrapper .close_visualization4 {
        right: 4px;
        top: 20px;

    }
    .piano_wrapper .close_visualization5 {
        right: 4px;
        top: 20px;

    }
    .piano_wrapper .close_visualization6 {
        right: 4px;
        top: 20px;

    }

     .introtextloop{
        font-size: 19px !important;
    }
}






@media screen and (min-width: 768px) and (max-width: 963px) {
    .introtexts {
  font-size: 19px;
  padding: 10px;
}


.piano_wrapper .visualizationBlock {
    height: 29.5%;
}

}
/* #piano_wrapper{
    height: 588.202px !important;
} */

@media screen and (min-width: 510px) and (max-width: 767px) {

#show_zweihandeID {
  height: auto !important;
  width: auto !important;
}
#info_popupID, #video,#show_speedID {
  height: auto !important;
  width: auto !important;
}
#show_metronomeID{
 width: auto !important;
  height: auto !important;

}
#show_loop_buttonID{
 width: auto !important;
  height: auto !important;

}
#show_ton_buttonID{
 width: auto !important;
  height: auto !important;

}
.center-img {
    width: 100% !important;
}
.side-textc {
    -webkit-text-size-adjust:100%
  font-size: 17px;
  padding-top: 27px;
  width: 30%;
}
#piano_wrapper a {
  font-size: 16px !important;
  margin-top: 20px !important;
}
.introtextloop {
    -webkit-text-size-adjust:100%
  font-size: 17px;
  padding: 5px;
}
.introtexts {
    -webkit-text-size-adjust:100% 
    font-size: 17px;
}
.background-im {
  margin-bottom: 4px;
}
/* #piano_wrapper{*/
/*    height:359.202px !important;*/
/*} */
 .cheight #piano_wrapper.piano_wrapper_help_window{
    height: 359.483px !important;
} 

/*.cheight #piano_wrapper {
  height: 397.9px !important;
}*/

}

@media screen and (min-width: 510px) and (max-width: 581px) {

.center-img {
  width: 100% !important;
}

}
@media only screen and (max-device-width: 767px) {
   .introtextloop {
      font-size: 17px;
       -webkit-text-size-adjust:100%
    }
    .introtexts {
        font-size: 17px;
        padding: 10px !important;
         -webkit-text-size-adjust:100%
    }
    .side-textc {
        -webkit-text-size-adjust:100%;
        font-size: 15px;
    }
        span#tempoValue {
        padding-top: 3px !important;
        height: auto !important;
        left: 12px !important;
        bottom: -2px !important;
    }
    #show_helpID{
      height: auto !important;
      width: auto !important;
    }
     .cheight #piano_wrapper.piano_wrapper_help_window{
        height: 359.202px !important;
    }
}

.piano_register_button {
    background: #802d9d;
    color:#fff;
    padding: 10px 30px;
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
    font-size:24px;
    font-family: OpenSansHebrew-Bold;
}

.piano_video {
    padding: 30.5% 0 0 0;
    position: relative;
}

.introtext{
    color:#fff;
    padding-top: 10%;
    padding-bottom: 2%;
    font-size: 24px;
    font-family:OpenSansHebrew-Regular;
}

@media screen and (max-width: 1271px) {
    .introtext {
        font-size: 20px;
    }

    .piano_video {
        padding: 27.5% 0 0 0;
    }

    .piano_register_button {
        padding: 7px 30px;
    }
}

@media screen and (max-width: 991px) {
    .introtext {
        font-size: 17px;
    }

    .piano_register_button {
        padding: 2px 13px;
        margin-top: 11px;
        font-size: 21px;
    }

    .introtexts {
        font-size: 17px;
        padding-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .piano_video {
        padding: 30.5% 0 0 0;
    }

    .piano_register_button {
        padding: 7px 17px;
        margin-top: 11px !important;
    }

    .introtexts {
        font-size: 15px;
        padding-top: 5px;
    }
}

@media screen and (max-width: 525px) {
    #pianoRegistrationPopup {
        display: none;
    }
}