@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,700i');
html,
body {
	height: 100%;
}

body {
	margin:0;
	padding:0;
	background: #111;
}

header {
	display: flex;
	align-items: center;
}

.logo {
	margin-left: 30px;
}


h3 {
	font-weight: bold;
    text-align: left;
    color: #ddd;	
    width:90%;
    margin:30px;
	font-family: 'Roboto', sans-serif;
}

footer{
	font-family: 'Roboto', sans-serif;
	text-align: center;
	padding:20px;
	background: #3a3a3a;
	
}

footer a {
	color:#b5b5b5;
	text-decoration: none;
}

footer a:hover,
footer a:active {
	color:#ddd;
}


.main {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

.wrapper-k8 {
	display: flex;
	flex: 1;
	justify-content: space-evenly;
	align-items: center;
}

.pixel {
	text-align: center;
	color: white;
	background: #868686;
	padding: 20px;
	width:260px;
	height:260px;
	border-radius: 50%;
	opacity: 1;
}

.rc {
	width: 320px;
	margin:50px auto;
	text-align: center;
}

.rc p {
	width:40px;
	height: 30px;
	display: inline-block;
	text-align: center;
}

	.rc p a {
		display: block;
		font-family: 'Roboto', sans-serif;
		text-decoration: none;
		color:#000;
		background: #ddd;
		border-radius: 50%;
		height: 100%;
		padding-top:10px;
	}

	.rc p a.ok {
		background: #06EF9D;
	}

	.rc p a:hover {
		background: #19aeb1;	
	}

	.remote {
	    width: 240px;
	    height: 396px;
	    background: url(../assets/remote/remoteback.svg);
	    padding-top: 17px;
	    background-size: cover;
	}

		.remote .row {
			display: flex;
		    justify-content: space-around;
		    margin: 3px 14px;
		    /*margin: 7px 13px;*/
		}

		.remote .row:nth-child(2){
			margin-top: 5px;
		}
		
			.remote .row div {
				display: inline-flex;
		    	width: 44px;
		    	height: 44px;
		    	border-radius: 50%;
		    	background-position: center;
		    	background-repeat: no-repeat;
		    	background-size: cover;
			}

			.remote .row div.btn-play,
			.remote .row div.btn-stop {
				background-size: 88%;
			}
			
				.remote .row div:hover {
				    background-color: #06EF9D;
				    cursor:pointer;
				}

	.remote .row .btn-empty:hover {
		background: none;
		cursor:default;
	}

	.remote .btn-batt {
	    background-image: url(../assets/remote/batt.svg);
	}

	.remote .btn-signal {
	    background-image: url(../assets/remote/signal.svg);
	}

	.remote .btn-minus {
	    background-image: url(../assets/remote/minussign.svg);
	}

	.remote .btn-plus {
	    background-image: url(../assets/remote/plussign.svg);
	}

	.remote .btn-sync {
	    background-image: url(../assets/remote/sync.svg);
	}

	.remote .btn-off {
	    background-image: url(../assets/remote/off.svg);
	}	

	.remote .btn-g {
	    background-image: url(../assets/remote/g.svg);
	}

	.remote .btn-r {
	    background-image: url(../assets/remote/r.svg);
	}	

	.remote .btn-b {
	    background-image: url(../assets/remote/b.svg);
	}		

	.remote .btn-y {
	    background-image: url(../assets/remote/y.svg);
	}	

	.remote .btn-c {
	    background-image: url(../assets/remote/c.svg);
	}

	.remote .btn-m {
	    background-image: url(../assets/remote/m.svg);
	}	

	.remote .btn-w {
	    background-image: url(../assets/remote/w.svg);
	}		

	.remote .btn-fade {
	    background-image: url(../assets/remote/fade.svg);
	}	

	.remote .btn-ff {
	    background-image: url(../assets/remote/ff.svg);
	}			

	.remote .btn-1 {
	    background-image: url(../assets/remote/1.svg);
	}		

	.remote .btn-2 {
	    background-image: url(../assets/remote/2.svg);
	}			

	.remote .btn-3 {
	    background-image: url(../assets/remote/3.svg);
	}				

	.remote .btn-4 {
	    background-image: url(../assets/remote/4.svg);
	}					

	.remote .btn-5 {
	    background-image: url(../assets/remote/5.svg);
	}						

	.remote .btn-play {
	    background-image: url(../assets/remote/play.svg);
	}	

	.remote .btn-demo {
	    background-image: url(../assets/remote/demo.svg);
	}	

	.remote .btn-rec {
	    background-image: url(../assets/remote/rec.svg);
	}									

	.remote .btn-ch1 {
	    background-image: url(../assets/remote/ch1.svg);
	}								

	.remote .btn-ch2 {
	    background-image: url(../assets/remote/ch2.svg);
	}		

	.remote .btn-stop {
	    background-image: url(../assets/remote/stop.svg);
	}															

	.remote .btn-aSpeed {
	    background-image: url(../assets/remote/aspeed.svg);
	}												

	.remote .btn-bSpeed {
	    background-image: url(../assets/remote/bspeed.svg);
	}													

	.remote .btn-cSpeed {
	    background-image: url(../assets/remote/cspeed.svg);
	}											

	.remote .btn-dSpeed {
	    background-image: url(../assets/remote/dspeed.svg);
	}																		


@media all and (max-width: 640px) {
  
   .wrapper-k8 {
        flex-flow: column;
   }

	.pixel {
		width:160px;
		height:160px;
	}

	.remote {
		width: 200px;
		height: 330px;
		padding-top: 17px;	
	}

		.remote .row {
		    margin: 2px 13px;
		}
		
			.remote .row div {
		    	width: 36px;
		    	height: 36px;
			}	

	.btn-stop {
		background-size: 90%;		
	}


	footer,
	header {
		display: none;
	}


}