/* Grid */ 

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; 
  font-family: Helvetica, Arial, Sans-serif
}
.container{
  max-width: 960px;/* 100% - 60em*/
  margin: 0 auto;
  padding: 0px;
  position: relative;
}
.container:after, .container:before {
  content:"";
  display: table;
}
.container:after{
  clear: both;
}
.g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8, .g-9, .g-10, .g-11, .g-12, .g-13, .g-14, .g-15, .g-16, .g-1-3 {
  float: left;
  margin: 0 1%; /* 0 10px - 0 0.625em */
}

.g-1   {width: 4.16% /* 40px - 2.5em*/}
.g-2   {width: 10.41% /* 100px - 6.25em*/}
.g-3   {width: 16.66% /* 160px - 10em */}
.g-4   {width: 22.91% /* 220px - 13.75em*/}
.g-5   {width: 29.16% /* 280px - 17.5em*/}
.g-6   {width: 35.41% /* 340px - 21.25em*/}
.g-7   {width: 41.66% /* 400px - 25em */}
.g-8   {width: 47.91% /* 460px - 28.75em*/}
.g-9   {width: 54.16% /* 520px - 32.5em*/}
.g-10  {width: 60.41% /* 580px - 36.25em*/}
.g-11  {width: 66.66% /* 640px - 40em*/}
.g-12  {width: 72.91% /* 700px -43.75em */}
.g-13  {width: 79.16% /* 760px - 47.5em*/}
.g-14  {width: 85.41% /* 820px - 51.25em*/}
.g-15  {width: 91.66% /* 880px - 55em */}
.g-16  {width: 97.91% /* 940px - 58.75em*/}
.g-1-3 {width: 31.25% /* 300px - 18.75em */}


@media only screen and (min-width: 768px) and (max-width:959px) {
  
  .container{
    max-width: 768px;
  }
  
  .g-1		{width: 3.64%; /* 28px*/}
  .g-2		{width: 9.89%; /* 76px */}
  .g-3		{width: 16.14%; /* 124px */}
  .g-4		{width: 22.39%; /* 172px */}
  .g-5		{width: 28.64%; /* 220px */}
  .g-6		{width: 34.82%; /* 268px */}
  .g-7		{width: 41.14%; /* 316px */}
  .g-8		{width: 47.39%; /* 364px */}
  .g-9		{width: 53.64%; /* 412px */}
  .g-10	  {width: 59.89%; /* 460px */}
  .g-11	  {width: 66.14%; /* 508px */}
  .g-12	  {width: 72.39%; /* 556px */}
  .g-13	  {width: 78.64%; /* 604px */}
  .g-14	  {width: 84.89%; /* 652px */}
  .g-15	  {width: 91.14%; /* 700px */}
  .g-16	  {width: 97.39%; /* 748px */}
  .g-1-3	{width: 30.72%; /* 236px */}
  
}

@media only screen and (max-width:467px) {
  
  .container{
    max-width: 300px;
  }
  
  .g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8, .g-9, .g-10, .g-11, .g-12, .g-13, .g-14, .g-15, .g-16, .g-1-3 {
    width: 300px;
    margin: 0 0 20px 0;
    float: none;
}
  
}