@font-face{ 
    font-family: "SugaryPancake"; 
    src: local('☺'), url('../media/fonts/DK Sugary Pancake.woff') format('woff');
}

@font-face{ 
    font-family: "IndieFlower"; 
    src: local('☺'), url('../media/fonts/IndieFlower.woff') format('woff');
}

@font-face{ 
    font-family: "SatisfyRegular"; 
    src: local('☺'), url('../media/fonts/Satisfy-Regular.woff') format('woff');
}

@font-face{ 
    font-family: "SlaboRegular"; 
    src: local('☺'), url('../media/fonts/Slabo27px-Regular.woff') format('woff');
}


::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-button {
   display:none;
}

::-webkit-scrollbar-thumb {
    border: 3px solid rgba(0, 0, 0, 0);
    background-color: #ffffff;
    background-clip: padding-box;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff;
}

::-webkit-scrollbar-track {
    background: rgba(1,0,0,0.3);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}


html, body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
	background-color: #ffffff;
	-ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none; 
	-webkit-user-callout: none;
	-ms-touch-action: manipulation !important;
    overflow: hidden;
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;
}


img, canvas {
    display: inline-block;
   	background: transparent;
	background-color: transparent;

    -webkit-backface-visibility: hidden;

}


.generic_absolute{
    position: absolute;
    display: inline-block;
    pointer-events: none;
}



textarea:focus, input:focus{
    outline: none;
}

div {
    display: inline-block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

    -webkit-backface-visibility: hidden;
}



#debug{
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 0px;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(255,0,0,0.5);
    color: #ffffff;
    pointer-events: none;
    font-size: 10px;
    font-family: "Arial";


}




/* wrapper */

#wrapper {
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 0px;
    background-color: #e61f27;
    overflow: hidden;
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('../media/images/background_burst.svg');

  
}

/* mute */

#div_utils{
    position: absolute;
    display: inline-block;
    top: 0px; 
    right: 0px;
    -ms-transform-origin: 100% 0%; /* IE 9 */
    -webkit-transform-origin: 100% 0%; /* Chrome, Safari, Opera */
    transform-origin: 100% 0%;
}

.b_mute{
    position: absolute;
    display: inline-block;
    top: 0px;
    right: 10px;
    width: 50px;
    height: 50px;
    pointer-events:auto;
    background: url('../media/images/b_mute_off.svg');
}
.b_mute:hover{
    cursor:pointer;
}

.b_mute_on{
    position: absolute;
    display: inline-block;
    top: 0px;
    right: 10px;
    width: 50px;
    height: 50px;
    pointer-events:auto;
    background: url('../media/images/b_mute_on.svg');
}
.b_mute_on:hover{
    cursor:pointer;
}

/* loader */

.loader_container{
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 0px;
    width: 200px;
    text-align: center;
    pointer-events: none;
}

.loader_bar_base{
    position: relative;
    display: inline-block;
    margin-top: 20px;
    height: 8px;
    width: 100%;
    background-color: rgba(0,0,0,0.15);
}

.loader_bar{
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    height: 100%;
    background-color: #ffffff;
}

/* title screen */

.screens{
    position: absolute;
    display: block;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%;
}

.finish_screen{
    position: absolute;
    display: block;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('../media/images/background_office.jpg');
}

.b_play{
    position: absolute;
    display: inline-block;
    width: 630px;
    height: 189px;
    color: #000000;
    font-family: 'SugaryPancake';
    font-size: 65px;
    line-height: 160px;
    padding: 10px;
    text-align: center;
    background-image: url('../media/images/b_play_norm.svg');
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;


 }

 .b_play:hover{
    cursor: pointer;
    background-image: url('../media/images/b_play_over.svg');
 }

 

.image_block{
    position: absolute;
    display: block;
    width: 920px;
    height: 920px;
    border: none;
    border-radius: 460px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('../media/images/background_office.jpg');
}





.character_block{
    position: absolute;
    display: inline-block;
    width:984px;
    height:943px;
    right:49px;
    bottom:49px;
    overflow: hidden;
}

.burst_1{
    position: absolute;
    display: table;
    width: 763px;
    height: 610px;
    font-size: 60px;
    margin-left: -380px;
    margin-top: -305px;
    line-height: 60px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../media/images/burst_1.svg');

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}

.burst_2{
    position: absolute;
    display: table;
    width: 503px;
    height: 407px;
    margin-left: -280px;
    margin-top: -150px;
    font-size: 80px;
    line-height: 80px;
    right:0px;
    top:0px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../media/images/burst_2.svg');

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}

.burst_txt{
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    font-family: 'SugaryPancake';
    color: #ffffff;
    text-align: center;
}

.main_logo{
    position: absolute;
    display: block;
    width: 568px;
    height: 448px;
    pointer-events: none;
    background-image: url('../media/images/logo.png');
}

.main_logo_txt_holder{
    position: absolute;
    display: table;
    left:210px;
    top:220px;
    width:230px;
    height:180px;
    vertical-align: middle;
    transform: rotate(14deg);
}

.main_logo_txt{
    position: relative;
    display: table-cell;
    width:100%;
    height:100%;
    text-align: center;
    font-size: 30pt;
    vertical-align: middle;
    font-family: 'SugaryPancake';
    color: #000000;
}


.content_block{
    position: absolute;
    display: block;
    width: 1024px;
    height: 100%;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('../media/images/background_office.jpg');
}

.frame_left{
    position: absolute;
    display: block;
    width: 72px;
    height: 100%;
    border: none;
    background-image: url('../media/images/frame_left.svg');
   }

.frame_right{
    position: absolute;
    display: block;
    width: 72px;
    height: 100%;
    border: none;
    background-image: url('../media/images/frame_right.svg');
   }





.title_block{
    position: absolute;
    display: block;
    width: 512px;
    height: 121px;
    top:-2px;
    left:-2px;
    text-align: center;
    line-height: 121px;
    font-size: 36pt;
    font-family: 'SugaryPancake';
    color: #000000;
    pointer-events: none;
    background-image: url('../media/images/section_header.svg');
}

.word_bubble_1{
    position: absolute;
    display: block;
    width: 1004px;
    height: 326px;
    top:122px;
    left:10px;
    text-align: center;
    font-size: 34pt;
    padding-top: 52px;
    font-family: 'SugaryPancake';
    color: #000000;
    pointer-events: none;
    background-image: url('../media/images/word_balloon_1.svg');
}


.word_bubble_2{
    position: absolute;
    display: table;
    width: 1004px;
    height: 280px;
    top:122px;
    left:10px;
    text-align: center;
    font-size: 34pt;
    font-family: 'SugaryPancake';
    color: #000000;
    pointer-events: none;
    background-image: url('../media/images/word_balloon_2.svg');
}

.word_bubble_txt{
    position: relative;
    display: table-cell;
    width:100%;
    height:100%;
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 30pt;
    vertical-align: middle;
    font-family: 'SugaryPancake';
    color: #000000;
}


.question_input{
    position: relative;
    display: inline-block;
    color: #000000;
    background-color: #e7ecf8;
    font-family: 'SugaryPancake';
    font-size: 40px;
    line-height: 70px;

    margin-top: 10px;

    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;

    text-align: left;

    pointer-events: auto;
    width: 800px;
    border: none;
}

.b_next{
    position: absolute;
    display: block;
    width: 448px;
    height: 189px;
    bottom: 10px;
    left:288px;
    color: #000000;
    font-family: 'SugaryPancake';
    font-size: 65px;
    line-height: 160px;
    padding: 10px;
    text-align: center;
    background-image: url('../media/images/b_next_norm.svg');

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
 }

 .b_next:hover{
    cursor: pointer;
    background-image: url('../media/images/b_next_over.svg');
 }

 .character_george{
    position: absolute;
    display: block;
    bottom: -140px;
    left: -150px;
    width: 819px;
    height:729px;
    pointer-events: none;
    background-image: url('../media/images/george.png');
}
 .character_harold{
    position: absolute;
    display: block;
    bottom: -100px;
    right: -30px;
    width: 487px;
    height:741px;
    pointer-events: none;
    background-image: url('../media/images/harold.png');
}


.options_block{
    position: absolute;
    display: block;
    left: 10px;
    top: 420px;
    width:680px;
    text-align: center;
}

.options_block_right{
    position: absolute;
    display: block;
    right: 10px;
    top: 440px;
    width:680px;
    text-align: center;
}


/* option buttons */

.option_sm{
    position: relative;
    display: inline-block;
    width: 320px;
    height: 128px;
    margin: 5px;
    color: #000000;
    font-family: 'SugaryPancake';
    font-size: 55px;
    line-height: 135px;
    text-align: center;
    pointer-events: auto;
}

.option_sm_1{
    background-image: url('../media/images/button_sm_1.svg');
}
.option_sm_1:hover{
    cursor: pointer;
    background-image: url('../media/images/button_sm_1_over.svg');
}
.option_sm_1_selected{
    background-image: url('../media/images/button_sm_1_over.svg');
}

.option_sm_2{
    background-image: url('../media/images/button_sm_2.svg');
}
.option_sm_2:hover{
    cursor: pointer;
    background-image: url('../media/images/button_sm_2_over.svg');
}
.option_sm_2_selected{
    background-image: url('../media/images/button_sm_2_over.svg');
}

.option_sm_3{
    background-image: url('../media/images/button_sm_3.svg');
}
.option_sm_3:hover{
    cursor: pointer;
    background-image: url('../media/images/button_sm_3_over.svg');
}
.option_sm_3_selected{
    background-image: url('../media/images/button_sm_3_over.svg');
}



.option_lg{
    position: relative;
    display: inline-block;
    width: 512px;
    height: 128px;
    margin: 5px;
    color: #000000;
    font-family: 'SugaryPancake';
    font-size: 55px;
    line-height: 135px;
    text-align: center;
    pointer-events: auto;
}

.option_lg_1{
    background-image: url('../media/images/button_lg_1.svg');
}
.option_lg_1:hover{
    cursor: pointer;
    background-image: url('../media/images/button_lg_1_over.svg');
}
.option_lg_1_selected{
    background-image: url('../media/images/button_lg_1_over.svg');
}

.option_lg_2{
    background-image: url('../media/images/button_lg_2.svg');
}
.option_lg_2:hover{
    cursor: pointer;
    background-image: url('../media/images/button_lg_2_over.svg');
}
.option_lg_2_selected{
    background-image: url('../media/images/button_lg_2_over.svg');
}

.option_lg_3{
    background-image: url('../media/images/button_lg_3.svg');
}
.option_lg_3:hover{
    cursor: pointer;
    background-image: url('../media/images/button_lg_3_over.svg');
}
.option_lg_3_selected{
    background-image: url('../media/images/button_lg_3_over.svg');
}








.song_sheet{
    position: absolute;
    display: inline-block;
    color: #333333;
    text-align: center;
    background-color: #ffffff;
    font-family: 'SugaryPancake';
    font-size: 12px;
    overflow: hidden;
    width: 714px;
    height: 924px;
    box-shadow: 4px 4px 0px rgba(0,0,0,.4);
    background: linear-gradient(-45deg,  #ececec, #ffffff, #ffffff); /* Standard syntax */
}

.song_sheet_canvas{
    position: absolute;
    display: inline-block;
    left:0px;
    top:0px;
    background: linear-gradient(-45deg,  #ececec, #ffffff, #ffffff); /* Standard syntax */
}


.b_print{
    position: absolute;
    display: block;
    width: 448px;
    height: 189px;
    bottom: 10px;
    left:288px;
    color: #000000;
    font-family: 'SugaryPancake';
    font-size: 65px;
    line-height: 160px;
    padding: 10px;
    text-align: center;
    background-image: url('../media/images/b_next_norm.svg');

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
 }

 .b_print:hover{
    cursor: pointer;
    background-image: url('../media/images/b_next_over.svg');
 }

 .b_replay{
    position: absolute;
    display: inline-block;
    width: 450px;
    height: 150px;
    bottom: 16px;
    left:-50px;
    color: #000000;
    font-family: 'SugaryPancake';
    font-size: 60px;
    line-height: 140px;
    padding: 8px;
    text-align: center;
    background-image: url('../media/images/b_replay_norm.svg');
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
 }

 .b_replay:hover{
    cursor: pointer;
    background-image: url('../media/images/b_replay_over.svg');
 }