/*grid for menu */
/***************************************************************/

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class^='grid-col-'] {
  float: left;
  padding: 0; 
}

[class^='grid-col-'] p {
  text-align: left; /* left align */
}

.grid-col-5of10, .grid-col-2of10 {
  width: 100%;
}

.grid-row-5of10{
  height: 50%;
}

.grid-col-1of4 {
  width: 50%;
}

.grid-col-1of3, .grid-col-2of3{
  width: 100%;
}

.grid-row:after, .grid-row-5of10:after{
  content: "";
  display: block;
  clear: both;
}

/*if the page is not mobile version */
@media (min-width: 800px) {
  .grid-col-2of10 {
    width: 20%;
  }

  .grid-col-1of4 {
    width: 25%;
  }

  .grid-col-5of10 {
    width: 50%;
  }

  .grid-col-5of10:first-of-type {
    padding-right: 0.5em;
  }

  .grid-col-5of10:last-of-type {
    padding-left: 0.5em;
  }

  .grid-col-1of3 {
    width: 33.3%;
  }

  .grid-col-2of3 {
    width: 66.7%;
  }
}

/* end of grid for menu */