*{font-family: 'Open Sans', sans-serif;}
body { background:#000;font: 12pt Arial, Helvetica, sans-serif;padding: 0;margin: 0; overflow:hidden}
.clearfix{ clear:both}
.pop-logo{ position: absolute; top:5%; left:3%; z-index:99}
.pop-logo img{ width:140px}
#breakout {position: relative; background:#000}
#canvas {-webkit-transform: translateZ(0);}
#levels {position: absolute;left:0; right:0; margin:auto; text-align:center;top:11%;color: #fff;line-height: 20px; text-transform:uppercase}
#levels #next  { position: absolute;}
#levels #prev  { position: absolute; top: 14px; }
#levels #label { padding-left: 20px; }
#levels #level { font-size: 14pt; padding-left: 5px; font-weight: bold; color: #fff; }
#levels img{ cursor: pointer; }
#levels img.disabled{ opacity: 0.3; cursor: default; }
#levels img:active{ margin-top: 1px; margin-left: 1px; }
#levels img.disabled:active { margin-top: 0; margin-left: 0; }
#instructions {background: #000;color: #fff;padding:0px;white-space: nowrap;text-align: center;width:100%;margin: 0 auto; position: fixed; bottom:0%; left:0; right:0;text-transform: uppercase; font-weight:300; font-size:12px!important}
#instructions .keyboard { display: block; padding:10px  }
#instructions .touch { display: none; padding:21px 0  }
#instructions.touch .keyboard { display: none;  }
#instructions.touch .touch { display: block; }
#controls { display:none;position: absolute;bottom: 0.5em;left: 0.5em;}
#controls input,#controls label { vertical-align: middle; }

.game-button{ margin:auto; padding:10px;  border:1px solid #000; width:200px; left:0; background:#000; border-radius:60px; text-align:center; right:0; bottom:60px; position:relative}
.game-button li{ border-radius:100px; list-style-type:none; margin:auto; padding:30}
.button01{ float:left; background:#F00}
.game-button li a{ font-size:0px; padding:0px;width:70px; height:70px; display:block  }
.button02{ float:right; background:#090}
.cont{ display:block; position:relative}
.keyboard span{ padding:0 5px}
#breakout     { display: block; width:100%; height:100%; position:absolute; margin:auto; padding:10px; top:0; border:0px solid #fff  }
#canvas       { display: block; width:100%; height:100%;  position:absolute;top:0;  }
#instructions { font-size:18px; letter-spacing:1px; line-height:28px  }
.rotd-m{ width:100%; position:absolute; z-index:999; background:#000; height:100%; left:0; top:auto; right:0; bottom:auto; margin:auto; text-align: center d; display:none}
.rotd-m img{position: absolute;margin: auto;left: 0;right: 0;bottom: 0;top: 0;}

.button09{height:100%;width:100%;text-align:center;background:rgba(000, 000, 000, 0.9);text-align:center;position:absolute;top:0;left:0;z-index:999}
.button09 a{position:absolute;left:0;right:0;top:50%;background:#fff;width:100px; margin:auto; padding:10px 10px; border-radius:25px; cursor:pointer; text-transform:uppercase}

@media screen and (max-width:900px) {
.pop-logo img{ width:160px}
}
@media screen and (max-width:700px) {
body{ overflow-x:hidden; overflow-x:hidden; }
#breakout{ width:99%; height:100%; padding:0;overflow-x:hidden; overflow-x:hidden;}
#canvas{ width:100%; height:100%; position:relative; overflow-x:hidden; overflow-x:hidden; }
.cont{ display:block;}

#levels{ right:11%; left:auto; top:3%}
}
@media screen and (max-width:370px) {
#canvas{top:-12%;}
.pop-logo img{ width:140px}
#levels{  top:2%}
#levels{ right:14%;

}
@media screen and (max-height:350px) {
.rotd-m{ display:block}

}