img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

td.btn {
  border: 1px solid;
  border-radius:10px
}

body{
    width: 100%; // The width of this element is 100% of the viewports width
    height: 100vh; // The height of this element is 100% of the viewport height

    font-size: 1vmax; // You can fiddle with this to mame sure the font gets
                      // the size you want
}

table {
  /*border-collapse: collapse;*/
  font-family:Arial;
}

table, th, td {
  /*border: 1px solid black;*/
}
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    
		td {
			/* Behave  like a "row" */
			border: none;
			/*border-bottom: 1px solid #eee;*/
			position: relative;
			padding-left: 50%;
		}
	}

td.bin0 {
  background-color: #FFCC33;
}

td.bin1 {
  background-color: #CC3399;
}

td.bin2 {
  background-color: #99CC66;
}

td.bin3 {
  background-color: #996633;
}

td.bin4 {
  background-color: #6699FF;
}

td.bin5 {
  background-color: #996699;
}

td.timer {
	text-align: center;
	background: #66CC00;
	border-radius:10px;
	padding: 10;
}

td {
	text-align: center;
}