@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: 'TickingTimebombBB';
	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; }
a {text-decoration: none;}
body{ background: black;}
.col-100 { width: 100% }
.col-50 { width: 49%; }
.center{ text-align: center; }
.center2{margin:0 auto !important;}
.m-20{ margin-top:25px; }
.m-r-ajuste { margin-right: 0 !important; }
.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:#003333; 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: #003333; background: #000; font-family: 'TickingTimebombBB'; font-size: 90px; letter-spacing: 6px; padding: 10px 2px  0 0;   }
.input{ float: left; width:78%; margin-left:5%; height: 90%;text-align: right;color: #033; background: #000; font-family: 'TickingTimebombBB'; font-size: 90px; letter-spacing: 10px;  padding: 6px 0 0 0; background-color:rgba(0, 0, 0, 0); }
.bpmled{ float:right; width:17%; font-size: 14px; margin-top: 56px; }
.octaver{ margin:10px 5px 0 0; font-size: 12px; text-align:right;color:#003333; 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{ font-size:15px; display:flex; flex-direction: row; padding: 10px 20px;}
.notas-1-6, .notas-6-12 { display:flex; flex-direction: row; justify-content: space-between; width: 50%;}
.notas-1-6 { margin-right:3px; }
.notas-6-12 { margin-left:3px; }
.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; 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:#088; 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(0,85,85,1);
	background: -moz-linear-gradient(top, rgba(0,85,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,85,85,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,85,85,1)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,85,85,1)));
	background: -webkit-linear-gradient(top, rgba(0,85,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,85,85,1) 100%);
	background: -o-linear-gradient(top, rgba(0,85,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,85,85,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,85,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,85,85,1) 100%);
	background: linear-gradient(to bottom, rgba(0,85,85,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,85,85,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005555', endColorstr='#005555', 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(0,255,119,1);
	background: -moz-linear-gradient(top, rgba(0,255,119,1) 0%, rgba(0,255,0,1) 50%, rgba(0,255,119,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,255,119,1)), color-stop(50%, rgba(0,255,0,1)), color-stop(100%, rgba(0,255,119,1)));
	background: -webkit-linear-gradient(top, rgba(0,255,119,1) 0%, rgba(0,255,0,1) 50%, rgba(0,255,119,1) 100%);
	background: -o-linear-gradient(top, rgba(0,255,119,1) 0%, rgba(0,255,0,1) 50%, rgba(0,255,119,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,255,119,1) 0%, rgba(0,255,0,1) 50%, rgba(0,255,119,1) 100%);
	background: linear-gradient(to bottom, rgba(0,255,119,1) 0%, rgba(0,255,0,1) 50%, rgba(0,255,119,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff77', endColorstr='#00ff77', GradientType=0 );}

[class^="frame"]{ height: 32px;  font-family: 'TickingTimebombBB'; color:#033; 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 8px; height:27.5px;}
  .inputbox{padding-top: 0px; height: 120px; }
  .input{ padding-top: 0px; }
}

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

	.flex{justify-content: flex-start;}
	.col-100-m { width: 100%; }
	.notas { flex-direction: column;  }
	.notas-1-6, .notas-6-12 { margin: 0; }
	.notas-1-6, .notas-6-12 { margin-top: 10px; }
	.sombra-botoncillo, .bandera { width: 60px; height: 60px; }
	.foto-boton { width: 130px; }
	.inputbox { height: 60px; }
	.input{ font-size: 55px;}
	.bpmled { margin-top: 30px; }
}
@media screen and (max-height: 900px) {

	.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; font-size: 60px;}
	.inputbox{letter-spacing: 3px; }

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