.audio-bfb, 
.audio-bfb .main, 
.audio-bfb .screen
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}

.audio-bfb *
{
	font-family: Oswald;
	
}

.audio-bfb .main {
    background: linear-gradient(307deg, #1d4ad9, #1ab2c3, #2aac15, #a6ce07, #d0571f, #ce1ab7); 
    background-size: 1200% 1200%;
	
    -webkit-animation: audio-bfb-bg 150s ease infinite;
    -moz-animation: audio-bfb-bg 150s ease infinite;
    animation: audio-bfb-bg 150s ease infinite;
}

@-webkit-keyframes audio-bfb-bg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes audio-bfb-bg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes audio-bfb-bg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.audio-bfb .screen
{
	width: 100%;
    height: calc(100vh);
    box-shadow: inset 0px 0px 200px #000;
    position: absolute;
    top: 0;
    left: 0;	
}


.audio-bfb .bigpanel
{
	display: block;
	height: auto;
	background: linear-gradient(180deg, #888, #666);
	border-top: 1px #999 solid;
	box-shadow: 0px -1px 0px rgba(0,0,0,0.3);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	min-height: 10px;
}


.audio-bfb btn
{
	background: linear-gradient(135deg, #666, #444);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.7);
	display: table;
	cursor: pointer;	
	border-collapse: collapse;
	border: 1px #555 solid;
	margin-right: 0;
	min-width: 36px;
	min-height: 36px;
}

.audio-bfb .table
{
	display: table;
	margin-right: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.audio-bfb btn .inner
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	padding: 0;		
	box-shadow: inset 1px 1px 0px rgba(255,255,255,0.3);	
	min-width: 36px;
	min-height: 36px;
	color: #04213e;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.4), -1px -1px 1px rgba(0,0,0,0.4);
}

.audio-bfb btn.pressed
{
	background: linear-gradient(45deg, #444, #222);
	box-shadow: inset 2px 2px 3px rgba(0,0,0,0.7);
	amargin-top: 1px;
	amargin-left: 1px;
	amargin-right: 0px;
	amargin-bottom: 0px;
	text-shadow: -1px -1px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.4);
}

.audio-bfb btn.pressed .inner
{
	box-shadow: inset -1px -1px 0px rgba(255,255,255,0.1);	
	color: #04b8fb;
	
}

.audio-bfb .white-text
{
	display: table-cell; vertical-align: middle;
	color: #CCC;
	text-transform: uppercase;
	padding-right: 4px;
}

.audio-bfb btn.red .inner
{
	color: #4e0808;
}

.audio-bfb btn.pressed.red .inner
{
	color:#d90a0a
}

.audio-bfb btn.green .inner
{
	color: #0f2d07;
}

.audio-bfb btn.pressed.green .inner
{
	color:#4abd24
}


.audio-bfb btn:hover
{
	background: linear-gradient(135deg, #777, #555);
}

.audio-bfb btn.pressed:hover
{
	background: linear-gradient(45deg, #333, #111);
}

.audio-bfb btn.red .inner
{
	color: #4e0808;
}

.audio-bfb btn.green .inner
{
	color: #0f2d07;
}

.audio-bfb .round
{
	border: 0;
}

.audio-bfb .round, .audio-bfb .round .inner
{
	border-radius: 100% !important;
}

.audio-bfb .rounded, .audio-bfb .rounded .inner
{
	border-radius: 0px;
}