.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: center no-repeat #fff;
}
.noPadding{
	padding: 0px!important;
}

#containerKeyboard{
/*	height: 500px;*/
	width:100%;
	padding-left: 0.8%;
	float:left;
}

body,#wrapper {
	    user-select: none;
	    background-position: center;
	    background-attachment: fixed;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    overflow: hidden;
}
#wrapper{
	height:100%;
	background-position: bottom;
}

.forPos{
	position:absolute;
}

#logo{
	right:2%;
}
#home{
	left:2%;
}

/* .instrumentChoice{
	margin-left:3.106667%;
} */

.myImgs{
	height:100%
}



#startBtn{
	position:fixed;
	bottom: 0px;
	
	z-index:10;
}

.myRows{
	margin:5% auto 2% 5%;
}
.roundBox{
	margin-top:10px;
	border-radius: 10px;
	margin-left:3%;
	background-color:#FF5722;
	border-style: solid;
	border-width: 5px;
	border-color:#ffffff;
}

#Icons{
	position:absolute;
	z-index:30;
	height:80px;
	border-radius:10px;
	background-color:rgba(255, 255, 255, 0.7);
}

#instrumentOptions{
	height:100%;
	color:#ffffff;
}
.text-bottom{
	font-size:2vw;
	color:white;
	position: absolute;
	bottom:0;
	

}
.keysMain{
	width:6.6%;
	background-color:#FFFFFF;
	border-style: solid;
	border-width: 1px;
	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
	box-shadow: 0px 10px 5px #888888;
	text-align:center;
}

.keysBlack{
	width:5.6%;
	z-index:20;
	position: absolute;
	background:linear-gradient(#c0c2c5,#00082f);
	border-style: solid;
	border-width: 2px 5px 5px 5px;
	border-top-style: solid;
	border-color:#00082f;
	border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
	box-shadow: 0px 5px 5px #888888;
}

.keypress:hover { 
    background-color: #b1b1b1;
}
.keysBlack:hover { 
    background-color: #424242;
}
.keysBlack:active { 
	background:linear-gradient(#00082f,#c0c2c5);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
.keysBlackActive { 
	background:linear-gradient(#00082f,#c0c2c5);
	transform: translateY(4px);box-shadow: 0 5px #666;
}

#keyNote1:active,#keyNote8:active,#keyNote15:active,.active1815{
	background:linear-gradient(#864894,#c8a3cb);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
#keyNote2:active,#keyNote9:active,.active29{
	background:linear-gradient(hsl(203, 100%, 37%),#48b6e9);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
#keyNote3:active,#keyNote10:active,.active310{
	background:linear-gradient(#ee7e0c,#fccf00);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
#keyNote4:active,#keyNote11:active,.active411{
	background:linear-gradient(#0d9028,#76af18);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
#keyNote5:active,#keyNote12:active,.active512{
	background:linear-gradient(#cb2112,#ec9f73);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
#keyNote6:active,#keyNote13:active,.active613{
	background:linear-gradient(#00BFA5,#64FFDA);
	transform: translateY(4px);box-shadow: 0 5px #666;
}
#keyNote7:active,#keyNote14:active,.active714{
	background:linear-gradient(#3E2723,#A1887F);
	transform: translateY(4px);box-shadow: 0 5px #666;
}


#keyNote1,#keyNote8,#keyNote15{
	background:linear-gradient(#c8a3cb, #864894);
}
#keyNote2,#keyNote9{
	background:linear-gradient(#48b6e9, #0074bd);
}
#keyNote3,#keyNote10{
	background:linear-gradient(#fccf00, #ee7e0c);
}
#keyNote4,#keyNote11{
	background:linear-gradient(#76af18, #0d9028);
}
#keyNote5,#keyNote12{
	background:linear-gradient(#ec9f73, #cb2112);
}
#keyNote6,#keyNote13{
	background:linear-gradient(#64FFDA, #00BFA5);
}
#keyNote7,#keyNote14{
	background:linear-gradient(#A1887F, #3E2723);
}

.blackKey1{
	margin-left: 4%;
}
.blackKey2{
	margin-left: 10.5%;
}
.blackKey3{
	margin-left: 23.5%;
}
.blackKey4{
	margin-left: 30.2%;
}
.blackKey5{
	margin-left: 37%;
}
.blackKey6{
	margin-left: 49.6%;
}
.blackKey7{
	margin-left: 56.3%;
}
.blackKey8{
	margin-left: 68.5%;
}
.blackKey9{
    margin-left: 75%;
}
.blackKey10{
	margin-left: 81.5%;
}


@media screen  and (min-device-width :470px) and (max-device-width:680px){

	#Icons{
		height:30px;
	}
	#myLogo, #myHome{
		height:28px;
	}
	
	#instrumentName{
		font-weight: bold;
        font-size: 19px;
    }
}
@media screen  and (min-device-width :681px) and (max-device-width:767px){
	
	#Icons{
		height:40px;
	}
	#myLogo,#myHome{
		height:38px;
	}
	#instrumentName{
		font-weight: bold;
        font-size: 23px;
    }
	
}
@media screen  and (min-device-width :768px) and (max-device-width:1024px){

	#Icons{
		height:55px;
	}
	#myLogo,#myHome{
		height:52px;
	}
	#instrumentName{
		font-weight: bold;
        font-size: 25px;
    }
}
@media screen  and (min-device-width :1025px) and (max-device-width:1279px){
	
	#Icons{
		height:65px;
	}
	#myLogo,#myHome{
		height:62px;
	}
	#instrumentName{
		font-weight: bold;
        font-size: 39px;
    }

}

@media screen  and (min-device-width :1280px) and (max-device-width:1535px){

	#Icons{
		height:75px;
	}
	#myLogo,#myHome{
		height:72px;
	}
	#instrumentName{
		font-weight: bold;
        font-size: 45px;
    }
	
}
@media screen  and (min-device-width :1535px){
	
	#Icons{
		height:85px;
	}
	#myLogo,#myHome{
		height:82px;
	}
	#instrumentName{
		font-weight: bold;
        font-size: 55px;
    }

}