/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Playfair.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html, body {
	font-family: Georgia;
	font-size:1em;
	margin:0px;
}
/*@media screen and (min-width: 960px){
    body{ font-size: 125%; }
}*/
body { 
 overflow-x:scroll;
 overflow-y:hidden;
}

h1 {

}

a {
	text-decoration: none; cursor: pointer;
  position: relative; 
  text-align: center;
  line-height: 43px;
  border-radius: 50%;
  font-size: 50px;
  color: #F2F2F2;
  transition: .5s;
}
a:hover {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffffff, 0 0 50px #ffffff;
}

#piano {
	background-color: transparent;
	color: #000000;
	width: 2300px;
	touch-action: none;
	-ms-user-select: None;
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None;

}

#pianoBody {
	height: 90vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 90);
	max-height:580px;
	position: relative;
	float: left;
	bottom: 15px;
	z-index:20;

}

#littleRedLine {
    background-color: #9C0413;
    color: #000000;
    height: 5px;
    position: fixed;
    top: 69px;
    width: 2295px;
    z-index: 200;
}
.keyboard {
height: 100%;
width: 100%;
}
.fson {
	display:inline-block;
}
.fsoff {
	display:none;
}
.desc {
	display:none;
}
@media only screen and (min-width: 500px) {
	.desc {
		display:inline-block;
		
	}		
}
#pedalwrapper {
	position: fixed; 
	left: 50%; 
	height: 100%;
	z-index:10;
	width:10%;
}
#keyspace {
	height: 75%;
	max-height: 580px;
}
#pedal {
	display:none;
margin-top: -130px;
margin-left: -50px;
}
#pedalimg {
width: 100%; 
}
@media (max-width: 500px) {
#pedalwrapper {
width: 25%; 
}
#pedal {
margin-left: -70px;
}
}
@media (max-width: 700px) {
#pedalwrapper {
width: 20%; 
}
#pedal {
margin-left: -70px;
}
}
@media (min-width: 1300px) {
#pedalwrapper {
width: 5%; 
}
#pedal {
margin-top: -120px;
}
}

.pianonav {
    position: fixed;
    left: 50%;
	    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	color: #FFF;
	text-align: center;
	font-family: 'Playfair Display', serif;
		  font-size: 2em;
    top:0px;
    width: 100%;
    height: 50px;
    padding: 10px;
    background-color: #000;
    z-index: 300;
		-moz-box-shadow: 0 -9px 5px 9px #303030 inset, 0 -10px #F7F7F7 inset;
	-webkit-box-shadow: 0 -9px 5px 9px #303030 inset, 0 -10px #F7F7F7 inset;
	box-shadow: 0 -9px 5px 9px #303030 inset, 0 -10px #F7F7F7 inset;
}
.left {
	  float: left;
	  margin-left: 20px;
}

.right {
	  float: right;
	  	  margin-right: 20px;
	
}

.left .right :hover {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(255, 255, 255, 0.67);
box-shadow:         0px 0px 30px 0px rgba(255, 255, 255, 0.67);
}

.octave {
	height:100%;
	position: relative;
	float: left;
} 

.white {
	float: left;
	width: 80px;
	height: 100%; /*original 400px*/
	max-height:580px;
  background-color: #F4F4F4;
  border: 1px solid #626262;
  position: relative;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px; 
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 2px 0px #838383 none, 0 -30px 40px 10px #EEEEEE inset;
	
	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset, 0 -30px 40px 10px #EEEEEE inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 2px 0px #838383 inset, 0 -30px 40px 10px #EEEEEE inset;    
	z-index: 10;

}

.wpressed {
  border: 1px solid #343434;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;
	
	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

.black {
	float: left;
	width: 50px;
	height: 65%; /*original 260px	*/
		max-height:360px;
  background-color: #000000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  position: absolute;
  top: 0px;
  z-index: 100;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px; 
	border-top: 0px;
	-moz-box-shadow: 0 -9px 10px 9px #303030 inset, 0 -15px #F7F7F7 inset;
	-webkit-box-shadow: 0 -9px 10px 9px #303030 inset, 0 -15px #F7F7F7 inset;
	box-shadow: 0 -9px 10px 9px #303030 inset, 0 -15px #F7F7F7 inset;
}

.bpressed {
  border: 1px solid #CECECE;
  border-top: 1px solid #626262;
	-moz-box-shadow: 0 0 6px 7px #303030 inset, 0 -5px #F7F7F7 inset;
	-webkit-box-shadow: 0 0 6px 7px #303030 inset, 0 -5px #F7F7F7 inset;
	box-shadow: 0 0 6px 7px #303030 inset, 0 -5px #F7F7F7 inset;
}

div.flats {

}

div.flats :nth-child(1) {
	margin-left: 56px;
}
div.flats :nth-child(2) {
	margin-left: 140px;
}
div.flats :nth-child(3) {
	margin-left: 306px;
}
div.flats :nth-child(4) {
	margin-left: 392px;
}
div.flats :nth-child(5) {
	margin-left: 478px;
}

div.black div.keyname,
div.black div.kbkeyname {
	margin-left: 0px;
}

.hide {display: none;}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  top:40%;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#overlay {
	position: fixed;
	top:0px;
	left: 50%;
	-ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
	z-index:200;
	background-color: #000;
		color: #FFF;
	text-align: center;
}
#loadtext {
	position:absolute;
	top:65%;
	width:100%;
	height:100%;
	text-align:center;
}
.about {
    position: fixed;
    left: 50%;
	    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	color: #000;
	text-align: center;
    bottom:60px;
    width: 100%;
    height: 50px;
    padding: 10px;
    z-index: 0;
}
#aboutmenu {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2000;
  cursor: pointer;
}

#text {
  position: absolute;
  height:100%;
  top: 50%;
  left: 50%;
  	text-align: center;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  overflow: auto;
}

#text a {
			font-size:1em;
}
.impressum {
		position:fixed;
	    left: 25%;
	    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	color: #000;
	text-align: left;
	padding-bottom:20px;
	padding-left:40px;
    bottom:10px;
    width: 50%;
    height: 10px;
	z-index:9;

}
.impressum a {
		font-size:1em;
		  color: #cecece;
}
.datenschutz {
		position:fixed;
	    left: 50%;
	    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	color: #000;
	text-align: right;
	padding-bottom:20px;
	padding-right:40px;
    bottom:10px;
    width: 100%;
    height: 10px;
	z-index:8;

}
.datenschutz a {
		font-size:1em;
		  color: #cecece;
}
#anleitung {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2000;
  cursor: pointer;
}
#demo {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2000;
  cursor: pointer;
}
#text2 {
  position: absolute;
  top: 50%;
  left: 50%;
  	text-align: center;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  overflow: auto;
}
#text2 a {
		font-size:2em;
}

#time {
  position: absolute;
  left: 150px;
  top:6px;
}

.alertcolor {
  color: orange;
}

.warningcolor {
  color: red;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #7a7a7a;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #FFFFFF;
}

input:focus + .slider {
  box-shadow: 0 0 1px #FFFFFF;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.susmobile {
display:inline-block;
}
@media (min-height: 600px) {
.susmobile {
display:none;
}
#pedal {
display:block;
}
}
.icon {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background-size: cover;
}
.icon:hover,
.icon:focus {
  filter:brightness(200%);
}
.icon-left {
	background-image: url(icon-left.svg);
}
.icon-right {
	background-image: url(icon-right.svg);
}
.icon-fullscreen-on{
	background-image: url(full-on.svg);
}
.icon-fullscreen-off{
	background-image: url(full-off.svg);
}
.icon-pedal{
	background-image: url(Pedal.svg);
	background-size:contain;
	background-repeat: no-repeat;
	height: 1em;
	width:0.4em;
}