@font-face{font-family:'Calculator';src:url(../fonts/lcd_solid-webfont.woff) format("woff"),url(../fonts/LCD_Solid.ttf) format("truetype")}header,section,footer,aside,nav,main,article,figure{display:block}body{background-image:url(../images/notes-pattern.svg);background-size:18%;background-color:#383838;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}header{width:100%;background-color:#F7F7F7;text-align:center;font-size:2.5em;padding:1.5% 0;position:relative}header #sourceFiles{float:left;margin-left:3%;margin-right:-12%;font-size:.7em;color:#fff;background-color:#006D00;padding:.5%}header #sourceFiles a{text-decoration:none;color:#fff}header span{color:#006D00}header #colored{color:#03939A;font-size:.6em;position:absolute;top:37%;right:5%}#mainInfo{width:65%;margin:3% auto;background-color:#F7F7F7;box-sizing:border-box;padding:1% 2%;text-align:justify;font-size:1.6em;border-radius:2%/4%}#mainInfo h1{color:#006D00}#mainInfo img{display:block;margin:2% auto;width:50%;height:auto}#pianoContainer{margin:5% auto;-moz-font-weight:600;position:relative;overflow:hidden;border-radius:2%/3%;box-shadow:-.18rem -.09rem .15rem .09rem rgba(0,0,0,0.6);background-image:url(../images/texture.png);-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:pixelated}#pianoContainer .overlay,#pianoContainer .overlayAngular{position:absolute;background-color:rgba(255,255,255,0.8);width:100%;height:100%;bottom:0;z-index:3;text-align:center}#pianoContainer .overlayShow,#pianoContainer .overlayAngularShow{display:block}#pianoContainer .overlay #preloaderWrapper,#pianoContainer .overlayAngular #preloaderWrapper{margin:30% auto 0;width:20%;display:none;font-size:1.8em}#pianoContainer .overlay #preloaderWrapper img,#pianoContainer .overlayAngular #preloaderWrapper img{margin-top:-2%;float:left}#pianoContainer .overlay #error,#pianoContainer .overlayAngular #error{color:red;font-size:1.5em;margin-top:31%;display:none}#pianoContainer .overlay #runApp,#pianoContainer .overlayAngular #runApp{background-color:#006D00;width:11%;height:15%;margin:27% auto 0;color:#fff;padding-top:3.3%;text-align:center;font-size:2em;box-sizing:border-box;cursor:pointer;border-radius:14%}#pianoContainer .overlay #result,#pianoContainer .overlayAngular #result{display:none;width:34%;background-color:#006D00;color:#FFF;text-align:center;position:absolute;top:22%;left:33%;box-shadow:0 3px 7px 0 rgba(0,0,0,0.4);line-height:1.7em;padding:3% 2%;font-size:1.4em;-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both}#pianoContainer .overlay #result h1,#pianoContainer .overlayAngular #result h1{font-size:1.4em;color:#EDFF44;margin:4% 0}#pianoContainer .overlay #result #comment,#pianoContainer .overlayAngular #result #comment{color:#F967FB;font-weight:700;font-size:1.3em;display:block;margin:6% 0}#pianoContainer .overlay #result #tryAgain,#pianoContainer .overlayAngular #result #tryAgain,#pianoContainer .overlay #result #close,#pianoContainer .overlayAngular #result #close{background-color:#339133;color:#fff;width:47%;padding:1%;cursor:pointer;float:left;margin:0 .5%;margin-top:4%}#pianoContainer .overlay #result #tryAgain:hover,#pianoContainer .overlayAngular #result #tryAgain:hover,#pianoContainer .overlay #result #close:hover,#pianoContainer .overlayAngular #result #close:hover{background-color:#B1BF31}#pianoContainer .overlayAngular{display:block}#pianoContainer .overlayAngular #preloaderWrapper{display:block}#pianoContainer .overlayAngular #error{display:block}#pianoContainer #controlsPanel{width:32%;height:86%;position:absolute;top:7%;right:0;text-align:center;z-index:0}#pianoContainer #controlsPanel #display{width:63%;height:18%;margin:2% auto;border-radius:5%;font-size:1.3em;text-align:center;font-family:'Calculator';box-sizing:border-box;padding-top:4.5%;color:#020202;line-height:1.3em;background-position:99.5% 0;background-size:219%;background-repeat:no-repeat;box-shadow:-.36rem -.18rem .3rem .18rem rgba(0,0,0,0.6)}#pianoContainer #controlsPanel #display #volumeInfo,#pianoContainer #controlsPanel #display #counter{display:inline-block;margin-top:11%}#pianoContainer #controlsPanel .indicator{width:21%;margin:10% auto 28%;border-radius:50%;padding-bottom:21%;background-position:66.5% 77.5%;background-size:520%;background-repeat:no-repeat;-ms-interpolation-mode:auto;image-rendering:auto;box-shadow:-.18rem -.09rem .2rem .12rem rgba(0,0,0,0.6)}#pianoContainer #controlsPanel .indicatorRed{background-position:33% 77.5%!important}#pianoContainer #controlsPanel .indicatorGreen{background-position:33% 92.4%!important}#pianoContainer #controlsPanel .startTrain{width:15.6%;height:17%;margin:0 0 29% 21%;position:relative;color:#FFF;cursor:pointer;float:left;border-radius:9%/8%;background-position:94% 38.6%;background-size:726%;background-repeat:no-repeat;box-shadow:-.18rem -.09rem .2rem .12rem rgba(0,0,0,0.6)}#pianoContainer #controlsPanel .startTrain span{position:absolute;width:100%;text-align:center;left:0;top:-33%}#pianoContainer #controlsPanel .startTrainPressed{background-position:62.4% 38.6%!important}#pianoContainer #controlsPanel .startTrainPressed::before{content:'';width:99%;height:68%;display:block;top:16%;z-index:-1;border-radius:50%;box-shadow:-1px 0 15px 3px rgba(229,72,38,0.8);left:-1%;position:absolute}#pianoContainer #controlsPanel .repeat{width:18%;padding-bottom:18%;margin:34% 0 0 61%;position:relative;border-radius:50%;cursor:pointer;background-position:99.5% 58%;background-size:544%;background-repeat:no-repeat;-ms-interpolation-mode:auto;image-rendering:auto;box-shadow:-.18rem -.09rem .2rem .12rem rgba(0,0,0,0.6)}#pianoContainer #controlsPanel .repeat span{position:absolute;color:#fff;top:-59%;width:100%;text-align:center;left:0}#pianoContainer #controlsPanel .repeatPressed{background-position:66.5% 58%!important;box-shadow:-.09rem -.09rem .075rem .045rem rgba(0,0,0,0.6)!important}#pianoContainer #controlsPanel #volume{width:55%;height:9%;margin:5% auto;position:relative;top:5%;text-align:center;clear:both}#pianoContainer #controlsPanel #volume span{color:#fff;display:block;position:absolute;top:-61%;width:100%}#pianoContainer #controlsPanel #volume hr{width:2px;border:none;background-color:#fff;display:inline-block;height:100%}#pianoContainer #controlsPanel #volumeSlider{width:100%;height:16%;position:absolute;top:44%;background-color:#000;border:none;border-radius:3%/50%;box-shadow:inset 0 -1px 1px rgba(255,255,255,0.4)}#pianoContainer #controlsPanel #volumeSlider span{width:38%;height:365%;margin-left:-19%;margin-top:-4%;cursor:pointer;border:none;background-color:transparent;background-position:61% 16.8%;background-size:848%;background-repeat:no-repeat;box-shadow:-.36rem -.18rem .35rem .21rem rgba(0,0,0,0.6)}#pianoContainer #controlsPanel #volumeSlider span:focus{outline:none}#pianoContainer #controlsPanel #keyVolume{width:55%;height:9%;margin:41% auto 0;position:relative}#pianoContainer #controlsPanel #keyVolume span{color:#fff;display:block;position:absolute;top:-70%;width:100%}#pianoContainer #controlsPanel #keyVolume slider-easy{display:block;position:relative;top:-60%;width:100%;height:100%}#pianoContainer #controlsPanel #keyVolume slider-easy .slider{display:block;vertical-align:middle;position:relative;width:100%;height:16%;margin:0 auto}#pianoContainer #controlsPanel #keyVolume slider-easy .slider-track{height:100%;width:100%;left:0;position:absolute;cursor:pointer;background-color:#000;border-radius:3%/50%;box-shadow:inset 0 -1px 1px rgba(255,255,255,0.4)}#pianoContainer #controlsPanel #keyVolume slider-easy .slider-track .slider-handle{position:absolute;width:38%;height:353%;margin:-6% 0 0 -19%;background-position:61% 17%;background-size:848%;background-repeat:no-repeat;box-shadow:-.36rem -.18rem .35rem .21rem rgba(0,0,0,0.6)}#pianoContainer #controlsPanel #keyVolume slider-easy .slider .hint{display:none}#pianoContainer #controlsPanel #keyVolume hr{width:2px;border:none;background-color:#fff;display:inline-block;height:100%}#pianoContainer #keys{width:64%;height:86%;-webkit-user-select:none;font-size:0;top:7%;left:6%;position:absolute;background-color:#000;z-index:0;overflow:hidden}#pianoContainer #keys::before{content:'';width:2%;height:100%;display:block;position:absolute;top:0;left:-2%;z-index:-2;transform-origin:bottom left;transform:rotate(-0.35deg);box-shadow:.36rem 0 .3rem .18rem rgba(0,0,0,0.6)}#pianoContainer #keys::after{content:'';width:2%;height:100%;display:block;position:absolute;top:0;right:-1.7%;z-index:-2;transform-origin:bottom right;transform:rotate(0.7deg);box-shadow:-.27rem -.18rem .25rem .15rem rgba(0,0,0,0.6)}#pianoContainer #keys #redline{width:100%;margin-bottom:.5%;padding-bottom:2%;background-position:0 65.7%;background-size:124%;background-repeat:no-repeat}#pianoContainer #keys .key{display:inline-block;cursor:pointer}#pianoContainer #keys .white{width:14.24%;height:97%;position:relative}#pianoContainer #keys .white .top{background-position:0 0;background-size:407% 172%;background-repeat:no-repeat;height:65%;position:relative}#pianoContainer #keys .white .bottom{background-position:0 100%;background-size:407% 319%;background-repeat:no-repeat;height:35%;border-radius:8% 6%;position:relative;top:-1px}#pianoContainer #keys .white::before{content:'';width:10%;height:100%;display:block;position:absolute;top:0;left:0;z-index:-2;transform-origin:bottom left;transform:rotate(0.7deg);box-shadow:-.27rem -.18rem .25rem .15rem rgba(0,0,0,0.6)}#pianoContainer #keys .white::after{content:'';width:10%;height:100%;display:block;position:absolute;top:0;right:0;z-index:-2;transform-origin:bottom right;transform:rotate(-0.35deg);box-shadow:.36rem 0 .3rem .18rem rgba(0,0,0,0.6)}#pianoContainer #keys .whitePressed .top{height:66%;z-index:-3}#pianoContainer #keys .whitePressed .bottom{height:34%;background-position:0 99%;background-size:407% 327%;z-index:-3}#pianoContainer #keys .whitePressed::before,#pianoContainer #keys .whitePressed::after{display:none}#pianoContainer #keys #D .top{background-position:-4.5% 0;background-size:459% 172%;background-repeat:no-repeat}#pianoContainer #keys #G .top{background-position:-5% 0;background-size:407% 172%;background-repeat:no-repeat}#pianoContainer #keys #A .top{background-position:-9.5% 0;background-size:407% 172%;background-repeat:no-repeat}#pianoContainer #keys #E .top,#pianoContainer #keys #B .top{background-position:-14.1% 0;background-size:407% 172%;background-repeat:no-repeat}#pianoContainer #keys #C .bottom,#pianoContainer #keys #F .bottom{border-top-left-radius:0}#pianoContainer #keys #E .bottom,#pianoContainer #keys #B .bottom{border-top-right-radius:0;border-top-left-radius:8%}#pianoContainer #keys .black{height:62%;width:7.8%;position:absolute;background-position:31.3% 0;background-size:724% 173%;background-repeat:no-repeat}#pianoContainer #keys .black::before{content:'';width:50%;height:93%;display:block;position:absolute;top:0;left:-6%;z-index:-2;transform-origin:bottom left;transform:rotate(1.5deg);box-shadow:-.27rem -.18rem .25rem .15rem rgba(0,0,0,0.25);border-bottom-left-radius:15%}#pianoContainer #keys .black::after{border-bottom-right-radius:5%;content:'';width:50%;height:98%;display:block;position:absolute;top:0;right:-10%;z-index:-2;transform-origin:bottom right;transform:rotate(-0.2deg);box-shadow:.18rem 0 .15rem .09rem rgba(0,0,0,0.3)}#pianoContainer #keys .blackPressed{box-shadow:inset 0 -5px 4px 3px #000;background-position:31.3% -1%!important;background-size:724% 179%!important}#pianoContainer #keys .blackPressed::before,#pianoContainer #keys .blackPressed::after{display:none}#pianoContainer #keys #Db{left:8.3%}#pianoContainer #keys #Eb{left:26.2%}#pianoContainer #keys #Gb{left:51%}#pianoContainer #keys #Ab{right:25%}#pianoContainer #keys #Bb{right:8.7%}#pianoContainer #screws .screw{position:absolute;width:1.4%;padding-bottom:1.4%;border-radius:50%;background-position:83.5% 16.5%;background-size:3959%;background-repeat:no-repeat;box-shadow:-.09rem 0 .05rem .03rem rgba(0,0,0,0.6)}#pianoContainer #screws .screw:nth-child(1){top:4%;left:3%}#pianoContainer #screws .screw:nth-child(2){left:3%;bottom:4%}#pianoContainer #screws .screw:nth-child(3){top:4%;right:3%}#pianoContainer #screws .screw:nth-child(4){right:15%;top:45%}#pianoContainer #screws .screw:nth-child(5){right:15%;bottom:25%}#pianoContainer #screws .screw:nth-child(6){right:3%;bottom:4%}footer{text-align:center;background-color:#292929;font-size:1.2em;padding:1% 0;color:#fff}@media screen and (min-width: 5px) and (max-width: 530px){html{font-size:7px}#mainInfo{width:98%}#pianoContainer{font-size:7px;width:98%;padding-bottom:65%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 8%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-small.png)}}@media screen and (min-width: 530px) and (max-width: 620px){html{font-size:8px}#mainInfo{width:98%}#pianoContainer{font-size:8px;width:98%;padding-bottom:65%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 8.5%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-small.png)}}@media screen and (min-width: 620px) and (max-width: 720px){html{font-size:9px}#mainInfo{width:98%}#pianoContainer{font-size:9px;width:98%;padding-bottom:65%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-small.png)}}@media screen and (min-width: 720px) and (max-width: 800px){html{font-size:10px}#mainInfo{width:80%}#pianoContainer{font-size:9px;width:80%;padding-bottom:53%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-small.png)}}@media screen and (min-width: 800px) and (max-width: 980px){html{font-size:12px}#mainInfo{width:80%}#pianoContainer{font-size:10px;width:80%;padding-bottom:53%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-small.png)}}@media screen and (min-width: 980px) and (max-width: 1100px){html{font-size:9px}#mainInfo{width:80%}#pianoContainer{font-size:12px;width:80%;padding-bottom:53%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-middle.png)}}@media screen and (min-width: 1100px) and (max-width: 1250px){html{font-size:11px}#mainInfo{width:65%}#pianoContainer{font-size:11px;width:65%;padding-bottom:43%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-middle.png)}}@media screen and (min-width: 1250px) and (max-width: 1440px){html{font-size:12px}#mainInfo{width:65%}#pianoContainer{font-size:12px;width:65%;padding-bottom:43%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-middle.png)}}@media screen and (min-width: 1440px) and (max-width: 1600px){html{font-size:12px}#mainInfo{width:65%}#pianoContainer{font-size:14px;width:65%;padding-bottom:43%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-middle.png)}}@media screen and (min-width: 1600px) and (max-width: 1750px){html{font-size:16px}#mainInfo{width:65%}#pianoContainer{font-size:15px;width:65%;padding-bottom:43%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-large.png)}}@media screen and (min-width: 1750px) and (max-width: 1920px){html{font-size:17px}#mainInfo{width:65%}#pianoContainer{font-size:16px;width:65%;padding-bottom:43%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-large.png)}}@media screen and (min-width: 1920px) and (max-width: 3000px){html{font-size:18px}#mainInfo{width:65%}#pianoContainer{font-size:18px;width:65%;padding-bottom:43%}#pianoContainer #keyVolume hr,#pianoContainer #volume hr{margin:0 9.1%}#pianoContainer #display,#pianoContainer .indicator,#pianoContainer .startTrain,#pianoContainer .repeat,#pianoContainer #volumeSlider span,#pianoContainer #keyVolume .slider-handle,#pianoContainer #redline,#pianoContainer .white .top,#pianoContainer .white .bottom,#pianoContainer .black,#pianoContainer .screw{background-image:url(../images/sprite-large.png)}}@-webkit-keyframes bounceIn{from,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{from,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;display:block!important}