* { box-sizing:border-box; }

body{ 
    margin:0; 
    width:100%;
    height:1000px;
    font-family: sense;
}


@font-face { 
    font-family: Sensations; 
    src: url("/7e2fa270c231945ebb6e041ee2e6716002c7aae3/15d51/fonts/sensations.ttf") format('truetype'); } 

@font-face { 
    font-family: Comfortaa; 
    src: url("/67a904245723c220d7c391a036b8b973f4d6415a/a826c/fonts/comfortaa.ttf") format('truetype'); } 

#logo{
    
}

.piano {
    height:25%;
    width:550px;
    margin:5em auto; 
    padding:3em 0 0 3em; 
    position:relative;
    border:1px solid #160801; 
    border-radius:1em;
    background:#222;
    box-shadow:0 5px 45px rgba(0,0,0,0.5);
    animation: expand 1s;
}

li { 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:relative; 
    float:left; 
}
.piano li:first-child { border-radius:5px 0 5px 5px;
    margin:0 0 0 0; }

.white1 {
	height:100%; 
    width:4em; 
    z-index:1;
	border-left:1px solid #dbdbdb;
	border-bottom:1px solid #bbb;
	border-radius:0 0 5px 5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #ffffff 0%,rgb(227, 227, 227) 100%);
	background: linear-gradient(top, #be0000 0%,#ff0000 100%);
}

.white1:active {
    height:99.5%; 
	border-top:1px solid #777;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #fff 0%,#e9e9e9 100%);
	background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
}

.black1 {
	height:60%; 
    width:2em; 
    margin:0 0 0 -1em; 
    z-index:2;
	border:1px solid #000;
	border-radius:0 0 3px 3px;
	box-shadow:0 -5px 2px 3px #211717 inset, 0 2px 4px #f7f7f7;
	background:-webkit-linear-gradient(45deg, #453535 0%,#656565 100%);
	background:linear-gradient(45deg, #453535 0%,#656565 100%);
}

.black1:active {
    height:59.5%;
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
	background:-webkit-linear-gradient(left, #444 0%,#222 100%);
	background:linear-gradient(left, #444 0%,#222 100%);
}

.b1{
    border-radius:0 5px 5px 5px;
}

.whitechanged2{
    
}

.blackchanged2{
    
}

.helpwhite{
   
    position: relative;
    top: 80%;
    left: 45%;
    font-size: 15px;
    user-select: none;
}

.helpwhite2{
    
    font-size: 0px;
    user-select: none;
}

.helpblack{
    
    color: #d8d8d8;
    position: relative;
    top: 70%;
    left: 28%;
    font-size: 15px;
    user-select: none;
}

.helpblack2{
   
    font-size: 0px;
    user-select: none;
}

@media only screen and (min-width: 1000px) {
    .piano {
         width:1050px;
         height:27%;
    }
    
    ul .white2 {
        height:100%; 
        width:4em; 
        z-index:1;
        border-left:1px solid #dbdbdb;
        border-bottom:1px solid #bbb;
        border-radius:0 0 5px 5px;
        box-shadow: 0 0 3px rgba(0,0,0,0.2);
        background: -webkit-linear-gradient(top, #ffffff 0%,rgb(227, 227, 227) 100%);
        background: linear-gradient(top, #be0000 0%,#ff0000 100%);
    }

    ul .white2:active {
       height:99.5%; 
       border-top:1px solid #777;
	   border-left:1px solid #999;
	   border-bottom:1px solid #999;
	   box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
	   background: -webkit-linear-gradient(top, #fff 0%,#e9e9e9 100%);
	   background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
    }

    .black2 {
        height:60%; 
        width:2em; 
        margin:0 0 0 -1em; 
        z-index:2;
        border:1px solid #000;
        border-radius:0 0 3px 3px;
        box-shadow:0 -5px 2px 3px #211717 inset, 0 2px 4px #f7f7f7;
        background:-webkit-linear-gradient(45deg, #453535 0%,#656565 100%);
        background:linear-gradient(45deg, #453535 0%,#656565 100%);
    }

    .black2:active {
        height:59.5%; 
        box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
	   background:-webkit-linear-gradient(left, #444 0%,#222 100%);
	   background:linear-gradient(left, #444 0%,#222 100%);
    }
    
    .whitechanged2{
    height:100%; 
    width:4em; 
    z-index:1;
	border-left:1px solid #dbdbdb;
	border-bottom:1px solid #bbb;
	border-radius:0 0 5px 5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #ffffff 0%,rgb(227, 227, 227) 100%);
	background: linear-gradient(top, #be0000 0%,#ff0000 100%);
    height:99.5%; 
	border-top:1px solid #777;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #fff 0%,#e9e9e9 100%);
	background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
    }
    
    .blackchanged2{
    height:60%; 
    width:2em; 
    margin:0 0 0 -1em; 
    z-index:2;
	border:1px solid #000;
	border-radius:0 0 3px 3px;
	box-shadow:0 -5px 2px 3px #211717 inset, 0 2px 4px #f7f7f7;
	background:-webkit-linear-gradient(45deg, #453535 0%,#656565 100%);
	background:linear-gradient(45deg, #453535 0%,#656565 100%);
    height:59.5%;
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
	background:-webkit-linear-gradient(left, #444 0%,#222 100%);
	background:linear-gradient(left, #444 0%,#222 100%);
    }
    
    

    .b1 { border-radius:0 0 5px 5px;  }
    
    .helpwhite2{
    font-size: 15px;
    position: relative;
    top: 80%;
    left: 45%;}
    
    .enter{
        left:20%;
    }
    
    .helpblack2{
    color: #d8d8d8;
    position: relative;
    top: 70%;
    left: 28%;
    font-size: 15px;
    }
}



.a,.g,.d,.e,.b1,.b2 { margin:0 0 0 -1em;  }

.piano li:last-child { border-radius:0 5px 5px 5px;}

.foot {
    font-family: Sensations;
    font-size: 40px;
    transition: 2s;
    cursor: default;
    user-select:none;
}

.foot :hover{
    font-family: Sensations;
    font-size: 40px;
    color: #ff9418; 
    
}



.whitechanged{
    height:100%; 
    width:4em; 
    z-index:1;
	border-left:1px solid #dbdbdb;
	border-bottom:1px solid #bbb;
	border-radius:0 0 5px 5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #ffffff 0%,rgb(227, 227, 227) 100%);
	background: linear-gradient(top, #be0000 0%,#ff0000 100%);
    height:99.5%; 
	border-top:1px solid #777;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #fff 0%,#e9e9e9 100%);
	background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
}

.blackchanged{
    height:60%; 
    width:2em; 
    margin:0 0 0 -1em; 
    z-index:2;
	border:1px solid #000;
	border-radius:0 0 3px 3px;
	box-shadow:0 -5px 2px 3px #211717 inset, 0 2px 4px #f7f7f7;
	background:-webkit-linear-gradient(45deg, #453535 0%,#656565 100%);
	background:linear-gradient(45deg, #453535 0%,#656565 100%);
    height:59.5%;
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
	background:-webkit-linear-gradient(left, #444 0%,#222 100%);
	background:linear-gradient(left, #444 0%,#222 100%);
}


#loader {
    width: 100px;
    height: 2px;
    background: #ff9300;
    position:absolute;
    -webkit-animation: load 5s; /* Safari 4.0 - 8.0 */
    animation: load 3s;
    top:0px;
    width: 100%;
    left:0px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes load {
    0%   {width: 0%;}
    25%  {width: 25%;}
    75%  {width: 80%}
    100% {width: 100%;}
}

/* Standard syntax */
@keyframes load {
    0%   {width: 0%;}
    25%  {width: 25%;}
    75%  {width: 80%}
    100% {width: 100%;}
}

@keyframes expand {
    0%   {height: 0%;}
    12.5% {height: 3.125%}
    25%  {height: 6.25%;}
    37.5% {height: 9.375%}
    50%  {height: 12.5%;}
    62.5% {height: 15.625%}
    75%  {height: 18.75%;}
    87.5% {height: 21.875%;}
    100% {height: 25%;}
}

#help{
    position:absolute;
    right: 2%;
    font-family: Comfortaa;
    font-size: 15px;
    user-select: none;
}

#help:hover{
    color:orange;
    cursor: pointer;
}

.switch{
    display: none;
    font-family: Comfortaa;
    cursor: default;
}

.switch:hover{
    color:orange;
    
}


@font-face { 
    font-family: Comfortaa; 
    src: url("/67a904245723c220d7c391a036b8b973f4d6415a/a826c/fonts/comfortaa.ttf") format('truetype'); } 

* {
  margin: 0;
  padding: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
html {
  line-height: 1.2;
}
body {
  background-color: #f5f5f5;
  color: #333;
  font-family: Comfortaa;
  font-size: 16px;
}
.selected-item {
  margin: 20px 0;
  text-align: center;
}
.selected-item p {
  font-size: 18px;
}
.selected-item p span {
  font-weight: bold;
}
/* dropdown list */
.dropdown {
  margin: 20px auto;
  width: 300px;
  position: relative;
  -webkit-perspective: 800px;
          perspective: 800px;
}
.dropdown.active .selLabel:after {
  content: '\25B2';
}
.dropdown.active .dropdown-list li:nth-child(1) {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.dropdown.active .dropdown-list li:nth-child(2) {
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}
.dropdown.active .dropdown-list li:nth-child(3) {
  -webkit-transform: translateY(300%);
          transform: translateY(300%);
}
.dropdown.active .dropdown-list li:nth-child(4) {
  -webkit-transform: translateY(400%);
          transform: translateY(400%);
}
.dropdown > span {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  background: #ff5800;
  display: block;
  padding: 0 50px 0 30px;
  position: relative;
  z-index: 9999;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dropdown > span:after {
  content: '\25BC';
  position: absolute;
  right: 0px;
  top: 15%;
  width: 50px;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  height: 70%;
  line-height: 24px;
  border-left: 1px solid #ddd;
}
.dropdown > span:active {
  -webkit-transform: rotateX(45deg);
          transform: rotateX(45deg);
}
.dropdown > span:active:after {
  content: '\25B2';
}
.dropdown-list {
  position: absolute;
  top: 0px;
  width: 100%;
}
.dropdown-list li {
  display: block;
  list-style: none;
  left: 0;
  opacity: 1;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
  position: absolute;
  top: 0;
  width: 100%;
    letter-spacing: 1px;
    font-size:16px;
}
.dropdown-list li:nth-child(1) {

  background-color: #797979;
  z-index: 4;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.dropdown-list li:nth-child(2) {
  background-color: #1d3443;
  z-index: 3;
  -webkit-transform: translateY(3%);
          transform: translateY(3%);
}

.dropdown-list li:nth-child(3) {
  background-color: #2a2a2a;
  z-index: 2;
  -webkit-transform: translateY(6%);
          transform: translateY(6%);
}
.dropdown-list li:nth-child(4) {
  background-color: #000000;
  z-index: 1;
  -webkit-transform: translateY(9%);
          transform: translateY(9%);
}
.dropdown-list li span {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  font-size: 16px;
  line-height: 60px;
  padding: 0 30px;
  display: block;
  color: #fff;
  cursor: pointer;
  letter-spacing: 1px;
}