@font-face {
	font-family: 'din';
	src: url('../fonts/DIN Alternate Bold.eot');
	src: local('☺'), url('../fonts/DIN Alternate Bold.woff') format('woff'), url('../fonts/DIN Alternate Bold.ttf') format('truetype'), url('../fonts/DIN Alternate Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Xolonium-Regular';
	src: url('../fonts/Xolonium-Regular.eot');
	src: local('☺'), url('../fonts/Xolonium-Regular.woff') format('woff'), url('../fonts/Xolonium-Regular.ttf') format('truetype'), url('../fonts/Xolonium-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'digital-7';
	src: url('../fonts/TickingTimebombBB.eot');
	src: local('☺'), url('../fonts/TickingTimebombBB.woff') format('woff'), url('../fonts/TickingTimebombBB.ttf') format('truetype'), url('../fonts/TickingTimebombBB.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

*{ margin:0; padding:0; border:0; box-sizing: border-box; box-shadow: none; outline:none; user-select:none; }
body{ background: black;}
.col-100{ width: 100% }
.center{ text-align: center; }
.center2{margin:0 auto !important;}
.m-20{ margin-top:25px; }
.float{float: left;}
.greytext{ color:#AAA; }
.grey2text{ color:#888; }
.grey3text{ color:#555;}
.grey4text{ color:#333;}

h1{ text-align: center; font-size: 17px; font-family: Xolonium-Regular; text-shadow: 2px 0px 13px #000; }
h2{ text-align: center; font-size: 48px;  font-family: Xolonium-Regular; text-shadow: 3px 0px 13px #000; position:relative; z-index: 0}
span{ float:right; color:#330033; line-height: 1; }

.flex{ min-width: 340px; height:100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.rack{ position:relative; border:4px solid #222; width:100%;  max-width:600px;  background-image: url(../img/carbon_fibre.png); border-radius: 8px; }
.gradiente{ position:relative; width:100%; border-radius: 4px; z-index: 98;
	background: rgba(0,0,0,0.63);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.06) 65%, rgba(0,0,0,0.81) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.63)), color-stop(42%, rgba(0,0,0,0)), color-stop(51%, rgba(0,0,0,0)), color-stop(62%, rgba(0,0,0,0)), color-stop(65%, rgba(0,0,0,0.06)), color-stop(100%, rgba(0,0,0,0.81)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.06) 65%, rgba(0,0,0,0.81) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.06) 65%, rgba(0,0,0,0.81) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.06) 65%, rgba(0,0,0,0.81) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.06) 65%, rgba(0,0,0,0.81) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 ); padding:20px 20px 40px 20px;
}
[class^="tornillo"]{ position: absolute; z-index: 99;}
.tornillo-1{ top: 10px; left:10px; }
.tornillo-2{ top: 10px; right:10px; }
.tornillo-3{ bottom: 10px; left:10px; }
.tornillo-4{ bottom: 10px; right:10px; }
.torna{ width:35px; }

.bloke{ position: relative; padding: 0 20px; }
.bandera{width:35px; height:35px; padding: 2px;  border-radius: 3px;
	background: rgba(85,85,85,1);
	background: -moz-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(85,85,85,1)), color-stop(100%, rgba(51,51,51,1)));
	background: -webkit-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: -o-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: -ms-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: linear-gradient(to right, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#333333', GradientType=1 );
}
.notacion{ border-radius: 3px;}
.bpm-textbox{ width:100%;}

.linea{  width:40%;margin-top: 25px; height:11px; padding: 0 2px;}
.raya-L{ height: 2px; 
	background: rgba(37,37,37,1);
background: -moz-linear-gradient(left, rgba(37,37,37,1) 0%, rgba(85,85,85,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(37,37,37,1)), color-stop(100%, rgba(85,85,85,1)));
background: -webkit-linear-gradient(left, rgba(37,37,37,1) 0%, rgba(85,85,85,1) 100%);
background: -o-linear-gradient(left, rgba(37,37,37,1) 0%, rgba(85,85,85,1) 100%);
background: -ms-linear-gradient(left, rgba(37,37,37,1) 0%, rgba(85,85,85,1) 100%);
background: linear-gradient(to right, rgba(37,37,37,1) 0%, rgba(85,85,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#555555', GradientType=1 );
}
.raya-R{ height: 2px; 
	background: rgba(85,85,85,1);
	background: -moz-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(34,34,34,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(85,85,85,1)), color-stop(100%, rgba(34,34,34,1)));
	background: -webkit-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(34,34,34,1) 100%);
	background: -o-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(34,34,34,1) 100%);
	background: -ms-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(34,34,34,1) 100%);
	background: linear-gradient(to right, rgba(85,85,85,1) 0%, rgba(34,34,34,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222', GradientType=1 );
}
.raya-L2{ height: 2px; 
	background: rgba(68,68,68,1);
background: -moz-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(68,68,68,1)), color-stop(100%, rgba(85,85,85,1)));
background: -webkit-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 100%);
background: -o-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 100%);
background: -ms-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 100%);
background: linear-gradient(to right, rgba(68,68,68,1) 0%, rgba(85,85,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#555555', GradientType=1 );
}
.textobpm{ margin-top: 15px; width:20%;}
.lineams{ width:30%;margin-top: 25px; height:15px;}
.textonote{ margin-top: 15px; width:15%; margin-right: 5%;}
.textoms{ margin-top: 15px; width:15%;}

.displaybox{ padding:2px; box-shadow: inset 2px 0px 13px #000;
	background: rgba(85,85,85,1);
background: -moz-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 42%, rgba(119,119,119,1) 68%, rgba(51,51,51,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(85,85,85,1)), color-stop(42%, rgba(119,119,119,1)), color-stop(68%, rgba(119,119,119,1)), color-stop(100%, rgba(51,51,51,1)));
background: -webkit-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 42%, rgba(119,119,119,1) 68%, rgba(51,51,51,1) 100%);
background: -o-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 42%, rgba(119,119,119,1) 68%, rgba(51,51,51,1) 100%);
background: -ms-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 42%, rgba(119,119,119,1) 68%, rgba(51,51,51,1) 100%);
background: linear-gradient(to right, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 42%, rgba(119,119,119,1) 68%, rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#333333', GradientType=1 ); }
.inputbox{ position: relative; float: left; width:100%; height: 100px;color: #330033; background: #000; font-family: 'digital-7'; font-size: 90px; letter-spacing: 6px; }
.input{ float: left; width:78%;   padding-top: 7px; text-align: right;color: #303; background: #000; font-family: 'digital-7'; font-size: 98px; letter-spacing: 10px; line-height: 0;  background-color:rgba(0, 0, 0, 0); }
.bpmled{ float:right; width:22%; font-size: 14px; margin-top: 65px; }
.octaver{ margin:23px 5px 0 0; font-size: 12px; text-align:right;color:#330033; position:absolute; top: 0; right:0;}
.octaver p {margin:10px 0; cursor: default;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=number]{ -moz-appearance:textfield; }

.notas{padding: 10px 0 0 20px;  font-size:15px; }
.notillas{width: 40px; margin: 10px 0 0 0; position: relative; z-index: 0;}

.foto-boton{width: 50%; max-width:200px; margin-left: 5.5%; }

.sombra-botoncillo{font-family:din; margin-right:7.2px; padding: 1px; width:36px; height:36px;
		background: #222; border-radius: 3px; box-shadow: 3px 0 7px #000; -webkit-user-select: none; /* Chrome, Opera, Safari */
}
.marco-botoncillo{padding: 2px; width:100%; height:100%; border-radius: 3px;
	background: rgba(85,85,85,1);
	background: -moz-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(85,85,85,1)), color-stop(100%, rgba(51,51,51,1)));
	background: -webkit-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: -o-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: -ms-linear-gradient(left, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	background: linear-gradient(to right, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#333333', GradientType=1 );
}
.botoncillo{width:100%; height: 100%; border-radius: 3px; display:flex;justify-content: center; align-items: center; font-family:din; color:#808; letter-spacing: -1px; cursor: default;
	
	-webkit-user-select: none;
	-moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
	background: rgba(85,0,85,1);
	background: -moz-linear-gradient(top, rgba(85,0,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(85,0,85,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(85,0,85,1)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(85,0,85,1)));
	background: -webkit-linear-gradient(top, rgba(85,0,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(85,0,85,1) 100%);
	background: -o-linear-gradient(top, rgba(85,0,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(85,0,85,1) 100%);
	background: -ms-linear-gradient(top, rgba(85,0,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(85,0,85,1) 100%);
	background: linear-gradient(to bottom, rgba(85,0,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(85,0,85,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550055', endColorstr='#550055', GradientType=0 );
	}
.ajuste{font-size: 0.8em}
.boton-brillante{ width:100%; height: 100%; border-radius: 3px; display:flex;justify-content: center; align-items: center; font-family:din; color:#505; letter-spacing: -1px; cursor: default;
	
	background: rgba(255,0,119,1);
	background: -moz-linear-gradient(top, rgba(255,0,119,1) 0%, rgba(255,0,0,1) 50%, rgba(255,0,119,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,0,119,1)), color-stop(50%, rgba(255,0,0,1)), color-stop(100%, rgba(255,0,119,1)));
	background: -webkit-linear-gradient(top, rgba(255,0,119,1) 0%, rgba(255,0,0,1) 50%, rgba(255,0,119,1) 100%);
	background: -o-linear-gradient(top, rgba(255,0,119,1) 0%, rgba(255,0,0,1) 50%, rgba(255,0,119,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,0,119,1) 0%, rgba(255,0,0,1) 50%, rgba(255,0,119,1) 100%);
	background: linear-gradient(to bottom, rgba(255,0,119,1) 0%, rgba(255,0,0,1) 50%, rgba(255,0,119,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0077', endColorstr='#ff0077', GradientType=0 );}

[class^="frame"]{ height: 32px;  font-family: 'digital-7'; color:#303; font-size: 24px;padding:2px 2px 0px 2px; box-shadow: inset 2px 0px 13px #000;     -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;}
[class^="frame-note"]{ width:15%; margin: 0 5% 20px 0; 
	background: rgba(68,68,68,1);
	background: -moz-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(68,68,68,1) 0%, rgba(102,102,102,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(68,68,68,1)), color-stop(0%, rgba(68,68,68,1)), color-stop(100%, rgba(102,102,102,1)));
	background: -webkit-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(68,68,68,1) 0%, rgba(102,102,102,1) 100%);
	background: -o-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(68,68,68,1) 0%, rgba(102,102,102,1) 100%);
	background: -ms-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(68,68,68,1) 0%, rgba(102,102,102,1) 100%);
	background: linear-gradient(to right, rgba(68,68,68,1) 0%, rgba(68,68,68,1) 0%, rgba(102,102,102,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#666666', GradientType=1 );}

.frame-ms{ width:80%; letter-spacing: 5px; margin: 0 0 20px 0; 
	background: rgba(102,102,102,1);
	background: -moz-linear-gradient(left, rgba(102,102,102,1) 0%, rgba(102,102,102,1) 0%, rgba(136,136,136,1) 44%, rgba(68,68,68,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(44%, rgba(136,136,136,1)), color-stop(100%, rgba(68,68,68,1)));
	background: -webkit-linear-gradient(left, rgba(102,102,102,1) 0%, rgba(102,102,102,1) 0%, rgba(136,136,136,1) 44%, rgba(68,68,68,1) 100%);
	background: -o-linear-gradient(left, rgba(102,102,102,1) 0%, rgba(102,102,102,1) 0%, rgba(136,136,136,1) 44%, rgba(68,68,68,1) 100%);
	background: -ms-linear-gradient(left, rgba(102,102,102,1) 0%, rgba(102,102,102,1) 0%, rgba(136,136,136,1) 44%, rgba(68,68,68,1) 100%);
	background: linear-gradient(to right, rgba(102,102,102,1) 0%, rgba(102,102,102,1) 0%, rgba(136,136,136,1) 44%, rgba(68,68,68,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444', GradientType=1 );}
.inside-frame{background: #000; padding: 4px 0 0 5px; height:27.5px; line-height: 1;  }

.ultimos{display: flex; align-items: center; justify-content: center; font-size: 13px;}

/*@-moz-document url-prefix() { 
  .inside-frame{ padding: 0 1px 0 11px; height:27.5px;}
  .inputbox{padding-top: 10px; height: 120px; }
  .input{padding-top: 0; height:80px;}
  .bpmled{margin-top: 63px;}
}*/

@media screen and (max-width: 768px) {

	.flex{justify-content: flex-start;}
}

@media screen and (max-width: 400px) {

	.inside-frame{padding: 4.5px 0 0 2%;}
	[class^="frame"]{ font-size: 20px; }
	.input{ letter-spacing: 1px; }
	.inputbox{letter-spacing: 3px; }

	/*@-moz-document url-prefix() { 
	  .inside-frame{ padding: 0 1px 0 10%;}
	}*/
}