body
{
	background-color: #EEEEEE;
}

table
{
	width:100%;
	background-color: #DDDDDD;
}

tr
{
	background-color: #D4D4D4;
}

.row
{
  width:100%;
  max-width:960px; 
  /* for desktop view */
  margin:0 auto;
  outline: 1px solid blue; 
  /* to visualize our element */
  text-align: center;
  font-size: 24px;
  color: #000000;
  background-color: #D0D0D0;
}

/* clearfix set against the row class  for conveniance */
.row:before,.row:after {content: " ";display: table;}
.row:after {clear: both;}


.grid
{
  height:60px;
/*
  display: table-cell;
  vertical-align: middle;
*/
  /* to visualize */
  float:left;
  margin:1%;
  outline:1px solid #006633;
  /* to visualize */
}

.m-grid-1
{
  width:48%;
}

@media (max-width:499px)
{
  .d-grid-1
  {
	width:48%;
  }
}

@media (min-width:500px) and (max-width:999px)
{
  .d-grid-1
  {
    width:31.3%;
  }
}

@media (min-width:1000px)
{
  .d-grid-1{width:23%;}
}

// 48%   == 2 across
// 31.3% == 3 across
// 23%   == 4 across
// 14.6% == 6 across

.adde
{
}