@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; -webkit-user-select: none; /* Chrome, Opera, Safari */-moz-user-select: none; /* Firefox 2+ */-ms-user-select: none; /* IE 10+ */}
body{ background: black;}
.col-100{ width: 100% }
.center{ text-align: center }
.m-20{ margin-top:30px; }
.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; margin-top: 20px; font-family: Xolonium-Regular; text-shadow: 3px 0px 13px #000; position:relative; z-index: 0}
span{ float:right; color:#003300; line-height: 1; }

.flex{ height:100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.rack{ position:relative; border:4px solid #222; width:100%; min-width: 300px; 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 60px 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; }

.bpm-textbox{ width:100%;}
.linea{  width:42.5%;margin-top: 30px; 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: 20px; width:15%;}
.lineams{ width:32%;margin-top: 30px; height:15px;}
.textonote{ margin-top: 20px; width:15%; margin-right: 5.5%;}
.textoms{ margin-top: 20px; 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{ float: left; width:100%; height: 100px;color: #003300; background: #000; font-family: 'digital-7'; font-size: 90px; letter-spacing: 6px; padding: 10px 2px  0 0;   }
.input{ float: left; width:80%; margin-left:5%; height: 90%;text-align: right;color: #030; background: #000; font-family: 'digital-7'; font-size: 90px; letter-spacing: 10px;  padding: 9px 10px 0 0; background-color:rgba(0, 0, 0, 0);}
.bpmled{ float:right; width:15%; font-size: 14px; margin-top: 56px; }

input{-webkit-user-select: auto;}
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; }

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

[class^="frame"]{ height: 32px;  font-family: 'digital-7'; color:#030; 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; }
[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: 2px 0 0 5px; height:27.5px; line-height: 1;  }

/*@-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: 380px) {

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

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

	}*/
}