@font-face {
    font-family: silkscreen-bold;
    src: url('fonts/slkscrb.ttf');
  }
  @font-face {
    font-family: koala;
    src: url('fonts/koala.ttf');
  }
  @font-face {
    font-family: karina;
    src: url('fonts/Karina.ttf');
  }

  #header{
    -webkit-transform: perspective(1px) translate3d(0,0,0);
    transform: perspective(1px) translate3d(0,0,0) rotate(.01deg);
    -ms-transform: none;
    position: relative;
    background: #fff;
    border-radius: 25px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 4px solid white;
    border-top: none;
    height: 346px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.75);
    -webkit-animation: header-init .5s ease-out 0s 1;
    animation: header-init .5s ease-out 0s 1;
  }
  #header:before{
    content:'';
    background: #000;
    position: absolute;
    top: 0; left: 0;
    border-radius: 25px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    height: 346px;
    width: 707px;
    box-sizing: border-box;
    -webkit-animation: header-init .7s ease-out 0s 1;
    animation: header-init .7s ease-out 0s 1;
  }
  .header-keys{
    font-size: 0;
    position: absolute;
    left: 334px;
    z-index: 3;
    overflow: hidden;
    top: 0;
  }
  .header-keys, .header-clef{
    display: inline-block;
  }
  .black-key, .key{
    overflow: hidden;
    vertical-align: bottom;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: inline-block;
    -webkit-transition: -webkit-transform ease-out .1s, background-color linear .1s;
    transition: transform ease-out .1s, background-color linear .1s;
    box-sizing: border-box;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    padding: 0;
    border: 0;
    margin-left: -19px;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  .black-key.active, .black-key:hover{
    background: #2b2b2b;
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.1, 0, .001, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1.1, 0, .001, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  .black-key .clef{
    opacity: 0;
    filter: alpha(opacity=0);
    content: '';
    display: block;
    position: absolute;
    top: -8px;
    background: transparent;
    height: 79px;
    background-image: url('img/clef.png');
    width: 39px;
    -webkit-transition: opacity ease-in .2s;
    transition: opacity ease-in .2s;
    -webkit-animation: spin .5s linear 0s infinite;
    animation: spin .5s linear 0s infinite;
  }
  .black-key.active span, .black-key:hover span{
    color: #dbba90;
  }
  .black-key:hover .clef, .black-key.active .clef{
    -webkit-animation: spin .5s linear 0s infinite;
    animation: spin .5s linear 0s infinite;
    opacity: .3;
    filter: alpha(opacity=30);
  }
  .key{
    background: #fff;
    height: 182px;
    width: 56px;
    border: 1px solid #cbcbcb;
    position: relative;
    box-shadow: inset 0px 0px 7px 0px #cbcbcb;
    box-shadow: inset 0px 0px 7px 0px #cbcbcb;
    -webkit-animation: keys-init 1.1s ease-out 0 1;
    animation: keys-init 1.1s ease-out 0 1;
  }
  .black-key{
    cursor: pointer;
    -webkit-animation: black-keys-init 1.3s ease-out .1s 1;
    animation: black-keys-init 1.3s ease-out .1s 1;
    background: #000;
    width: 38px;
    z-index: 2;
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    border: 0px solid transparent;
    height: 102px;
    position: relative;
    top: -80px;
  }
  .black-key span{
    font-smooth: never;
    -webkit-font-smoothing : none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    bottom: -16px;
    position: absolute;
    color: #fff;
    font-family: silkscreen-bold;
    font-size: 8px;
    margin-bottom: -7px;
    display: inline-block;
    white-space: nowrap;
    line-height: 36px;
    -webkit-transition: color linear .2s;
    transition: color linear .2s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
  }
  .header-top{
    height: 104px;
    width: 100%;
    position: absolute;
    background-image: url('img/header-bg.png');
    -webkit-animation: header-top-init 1s linear 0s 1;
    animation: header-top-init 1s linear 0s 1;
    background-size: cover;
  }
  .header-top:before, .header-bottomright:before{
    content: '';
    width: 100%;
    height: 100%;
    display: inline-block;
    background-repeat: no-repeat;
  }
  .header-top:before{
    background: url('img/header-bg-mask.png');
    background-size: cover;
    z-index: 2;
    position: absolute;
    width: 60%;
  }
  .header-top-hideclef{
    opacity: 0;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url('img/header-noclef.jpg');
    -webkit-animation: swap-header-bg 3s linear 0s 1;
    animation: swap-header-bg 3s linear 0s 1;
  }
  .header-top:after, .header-keys:before, .header-bottomright:before, .header-titlearea:before{
    content:'';
    position: absolute;
    pointer-events: none;
    width: 0px;
    height: 0px;
    background-size: 70px;
    background-repeat: no-repeat;
    opacity: .4;
    filter: alpha(opacity=40);
    display: block;
    background-image: url('img/key-shine.png');
    left: 0;
    bottom: 0;
  }
  .header-top:after{
    z-index: 1;
    background-size: 100% 500%;
    background-position: 0 50%;
    -webkit-animation: header-shine 9.5s linear 2s infinite;
    animation: header-shine 9.5s linear 2s infinite;
  }
  .header-textarea, .header-titlearea{
    position:absolute;
    z-index: 20;
  }
  .header-titlearea{
    -webkit-animation: text-init 1.3s ease-out 0s 1;
    animation: text-init 1.3s ease-out 0s 1;
  }
  .header-titlearea:before{
    opacity: 0;
    filter: alpha(opacity=0);
    background-size: initial;
    left: 9px;
    top: 10px;
    width: 40px;
    height: 77px;
    background-size: 100% 100%;
    background-image: url('img/headerclef.png');
    -webkit-animation: pop-out 4s linear 0s 1;
    animation: pop-out 4s linear 0s 1;
  }
  .header-title{
    font-size: 26px;
    margin-top: 30px;
    font-family: karina;
    -webkit-animation: text-init 1.4s ease-out 0s 1;
    animation: text-init 1.4s ease-out 0s 1;
  }
  .header-subtitle{
    font-family: tahoma;
    font-size: 10px;
    letter-spacing: 1px;
    -webkit-animation: text-init 1.6s ease-out 0s 1;
    animation: text-init 1.6s ease-out 0s 1;
  }
  .header-title, .header-subtitle{
    text-shadow: 2px 2px black;
    margin-left: 45px;
    margin-bottom: 0;
    color: #d9d19b;
    text-align: center;
    position: relative;
    white-space: nowrap;
  }
  .header-textarea:before{
    -webkit-animation: fade-in .5s linear 1s 1;
    animation: fade-in .5s linear 1s 1;
  }
  .header-keys:before{
    z-index: 4;
    -webkit-animation: key-shine 9.5s linear 2s infinite;
    animation: key-shine 9.5s linear 2s infinite;
  }
  .header-bottomright:before{
    left: -10%;
    width: 0;
    height: 0;
    background-size: 100% 100%;
    width: 100px;
    height: 100%;
    top: 0;
    bottom: initial;
    -webkit-animation: bottomright-shine 9.5s linear 2s infinite;
    animation: bottomright-shine 9.5s linear 2s infinite;
  }
  .header-bottomright:after{
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border-left: 90px solid black;
    border-top: 38px solid black;
    box-sizing: border-box;
    background: url('img/bottomright-mask.png');
    background-position: bottom right;
    background-repeat: no-repeat;
  }
  .header-bottom{
    position: absolute;
    top: 104px;
    height: 238px;
    width: 100%;
  }
  .header-pic{
    height: 100%;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    margin-left: 20px;
    width: 314px;
    -webkit-animation: fade-in 2s linear 0s 1;
    animation: fade-in 2s linear 0s 1;
  }
  .header-bottomright{
    position: absolute;
    display: inline-block;
    left: 334px;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    background-image: url('img/bottomright.png');
    -webkit-animation: fade-in 1s linear 0s 1;
    animation: fade-in 1s linear 0s 1;
    overflow: hidden;
    background-position: bottom right;
    background-repeat: no-repeat;
  }
  .header-textarea{
    position: absolute;
    display: none;
    -webkit-animation: text-init 2s ease-out 0s 1;
    animation: text-init 2s ease-out 0s 1;
    margin-top: 100px;
    margin-left: 20px;
  }
  .header-textarea .subtitle{
    font-family: tahoma;
    margin: 12px 0;
    white-space: nowrap;
    color: #c6baa8;
  }
  .header-textarea .title{
    font-family: koala;
    font-weight: 400;
    white-space: nowrap;
    color: #fbd19a;
    margin: 0;
    font-size: 32px;
    line-height: 32px;
  }
  @-webkit-keyframes in{
    0% {background: #000;}
    10% {background: #454545;}
    100% {background: #2b2b2b;}
  }
  @keyframes in{
    0% {background: #000;}
    10% {background: #454545;}
    100% {background: #2b2b2b;}
  }
  @-webkit-keyframes spin{
    0% {-webkit-transform: rotatey(0deg);transform: rotatey(0deg);}
    100% {-webkit-transform: rotatey(360deg);transform: rotatey(360deg);}
  }
  @keyframes spin{
    0% {-webkit-transform: rotatey(0deg);transform: rotatey(0deg);}
    100% {-webkit-transform: rotatey(360deg);transform: rotatey(360deg);}
  }
  @-webkit-keyframes swap-header-bg{
    0% {opacity: 1;filter: alpha(opacity=100);}
    75% {opacity: 1;filter: alpha(opacity=100);}
    100% {opacity: 0;filter: alpha(opacity=0);}
  }
  @keyframes swap-header-bg{
    0% {opacity: 1;filter: alpha(opacity=100);}
    75% {opacity: 1;filter: alpha(opacity=100);}
    100% {opacity: 0;filter: alpha(opacity=0);}
  }
  @-webkit-keyframes header-shine{
    0%{left: 5.5%; top: 10%; width: 20px; height: 80px;}
    45%{left: 5.5%; top: 10%; width: 20px; height: 80px;}
    50%{left: -4%;}
    55%{left: 6%; width: 20px; height: 80px; top: 10%;}
    61%{width: 0; height: 0; top: -20%; left: 6%;}
    62%{left: 60%;  top: -20%; height: 0; width: 0;}
    63%{left: 60%; top: 5%; width: 50px; height: 60px;}
    75%{left: 5%; width: 50px; top: 5%;}
    76%{width: 10px; top: 40%;}
    77%{width: 50px; left: 5%;}
    85%{left: 60%; height: 60px; width: 50px;}
    93%{left: 60%; top: 40%; height: 0; width: 0;}
    100%{left: 6%; top: 10%; width: 0; height: 0;}
  }
  @keyframes header-shine{
    0%{left: 5.5%; top: 10%; width: 20px; height: 80px;}
    45%{left: 5.5%; top: 10%; width: 20px; height: 80px;}
    50%{left: -4%;}
    55%{left: 6%; width: 20px; height: 80px; top: 10%;}
    61%{width: 0; height: 0; top: -20%; left: 6%;}
    62%{left: 60%;  top: -20%; height: 0; width: 0;}
    63%{left: 60%; top: 5%; width: 50px; height: 60px;}
    75%{left: 5%; width: 50px; top: 5%;}
    76%{width: 10px; top: 40%;}
    77%{width: 50px; left: 5%;}
    85%{left: 60%; height: 60px; width: 50px;}
    93%{left: 60%; top: 40%; height: 0; width: 0;}
    100%{left: 6%; top: 10%; width: 0; height: 0;}
  }
  @-webkit-keyframes key-shine{
    0% {left: -10%; bottom: 30%; height: 60px; width: 60px;}
    30% {left: -10%; bottom: 30%;}
    33% {left: 100%; bottom: 100%}
    39% {left: 100%; bottom: 100%}
    43% {left: -10%; bottom: 30%;}
    100%{left: -10%; bottom: 30%; height: 60px; width: 60px;}
  }
  @keyframes key-shine{
    0% {left: -10%; bottom: 30%; height: 60px; width: 60px;}
    30% {left: -10%; bottom: 30%;}
    33% {left: 100%; bottom: 100%}
    39% {left: 100%; bottom: 100%}
    43% {left: -10%; bottom: 30%;}
    100%{left: -10%; bottom: 30%; height: 60px; width: 60px;}
  }
  @-webkit-keyframes bottomright-shine{
    0% {left: -10%;}
    36% {left: -10%;}
    50% {left: 120%;}
    100%{left: 120%;}
  }
  @keyframes bottomright-shine{
    0% {left: -10%;}
    36% {left: -10%;}
    50% {left: 120%;}
    100%{left: 120%;}
  }
  @-webkit-keyframes header-init{
    0%{top: -200%;}
    20%{top: -200%;}
    100%{top: 0;}
  }
  @keyframes header-init{
    0%{top: -200%;}
    20%{top: -200%;}
    100%{top: 0;}
  }
  @-webkit-keyframes header-top-init{
    0%{top:-200%}
    100%{top:0}
  }
  @keyframes header-top-init{
    0%{top:-200%}
    100%{top:0}
  }
  @-webkit-keyframes keys-init{
    0%{top: -400px}
    100%{top: 0;}
  }
  @keyframes keys-init{
    0%{top: -400px}
    100%{top: 0;}
  }
  @-webkit-keyframes black-keys-init{
    0%{top: -400px}
    100%{top: -80px;}
  }
  @keyframes black-keys-init{
    0%{top: -400px}
    100%{top: -80px;}
  }
  @-webkit-keyframes fade-in{
    0% {opacity: 0;filter: alpha(opacity=0);}
    75% {opacity: 0;filter: alpha(opacity=0);}
    100% {opacity: 1;filter: alpha(opacity=100);}
  }
  @keyframes fade-in{
    0% {opacity: 0;filter: alpha(opacity=0);}
    75% {opacity: 0;filter: alpha(opacity=0);}
    100% {opacity: 1;filter: alpha(opacity=100);}
  }
  @-webkit-keyframes pop-out{
    0%{opacity: 1;filter: alpha(opacity=100);}
    99%{opacity: 1;filter: alpha(opacity=100);}
    100%{opacity: 0;filter: alpha(opacity=0);}
  }
  @keyframes pop-out{
    0%{opacity: 1;filter: alpha(opacity=100);}
    99%{opacity: 1;filter: alpha(opacity=100);}
    100%{opacity: 0;filter: alpha(opacity=0);}
  }
  @-webkit-keyframes text-init{
    0%{left: 500px; opacity: 0; filter: alpha(opacity=0);}
    80%{left: 500px; opacity: 0; filter: alpha(opacity=0); top: -20px;}
    100%{left: 0; opacity: 1; filter: alpha(opacity=100); top: 0;}
  }
  @keyframes text-init{
    0%{left: 500px; opacity: 0; filter: alpha(opacity=0);}
    80%{left: 500px; opacity: 0; filter: alpha(opacity=0); top: -20px;}
    100%{left: 0; opacity: 1; filter: alpha(opacity=100); top: 0;}
  }

  .key1 .home, .key2 .about, .key3 .downloads, .key4 .tips, .key5 .contact{
    display: block;
  }

  #header ul{
    list-style: none;
    margin: 0;
    margin-left: 19px;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  #sheet-shine{
    position:absolute;
    bottom: 0;
    right: 0;
  }
  #sheet-shine path{
    fill: transparent;
  }