.grid
{
  max-width: 1920px;
  margin: auto;
  padding: 16px;
}
.grid:after,
.row:after
{
  content: "";
  display: table;
  clear: both;
}
@media(max-width: 1920px){.grid{max-width:1600px}}
@media(max-width: 1620px){.grid{max-width:1440px}}
@media(max-width: 1460px){.grid{max-width:1280px}}
@media(max-width: 1300px){.grid{width:1024px}}
@media(max-width: 1044px){.grid{width:960px }}
@media(max-width: 980px ){.grid{width:840px }}
@media(max-width: 860px ){.grid{width:720px }}
@media(max-width: 740px ){.grid{width:600px }}
@media(max-width: 620px ){.grid{width:480px }}
@media(max-width: 500px ){.grid{width:400px }}
@media(max-width: 420px ){.grid{width:360px }}
@media(max-width: 380px ){.grid{width:auto  }}
[class*="col-"]
{
  float: left;
  padding: 12px;
}
[class*="col-"] [class*="col-"]
{
  padding: 0;
}
[class*="col-"].center
{
  float: none;
  margin-right: auto;
  margin-left: auto;
}
@media(max-width: 600px){[class*="col-"]{padding:8px}}

.col-1-4{width:25% }
.col-2-4{width:50% }
.col-3-4{width:75% }
.col-4-4{width:100%}

.col-1-3{width:33.3% }
.col-2-3{width:66.6% }
.col-3-3{width:100%  }


@media(min-width: 720px)
{
  .col-1-8{width:12.5%}
  .col-2-8{width:25%  }
  .col-3-8{width:37.5%}
  .col-4-8{width:50%  }
  .col-5-8{width:62.5%}
  .col-6-8{width:75%  }
  .col-7-8{width:87.5%}
  .col-8-8{width:100% }
}
@media(min-width: 960px)
{
  .col-1-12 {width:8.33% }
  .col-2-12 {width:16.66%}
  .col-3-12 {width:25%   }
  .col-4-12 {width:33.33%}
  .col-5-12 {width:41.66%}
  .col-6-12 {width:50%   }
  .col-7-12 {width:58.33%}
  .col-8-12 {width:66.66%}
  .col-9-12 {width:75%   }
  .col-10-12{width:83.33%}
  .col-11-12{width:91.66%}
  .col-12-12{width:100%  }
}
@media(max-width:1919px)
{
  .col-l-1-4{width:25% }
  .col-l-2-4{width:50% }
  .col-l-3-4{width:75% }
  .col-l-4-4{width:100%}
}
@media(max-width:1439px)
{
  .col-m-1-4{width:25% }
  .col-m-2-4{width:50% }
  .col-m-3-4{width:75% }
  .col-m-4-4{width:100%}
}
@media(max-width:1023px)
{
  .col-s-1-4{width:25% }
  .col-s-2-4{width:50% }
  .col-s-3-4{width:75% }
  .col-s-4-4{width:100%}
}
@media(max-width:479px)
{
  .col-xs-1-4{width:25% }
  .col-xs-2-4{width:50% }
  .col-xs-3-4{width:75% }
  .col-xs-4-4{width:100%}
}
@media(min-width:600px) and (max-width:1023px)
{
  .col-s-1-8{width:12.5%}
  .col-s-2-8{width:25%  }
  .col-s-3-8{width:37.5%}
  .col-s-4-8{width:50%  }
  .col-s-5-8{width:62.5%}
  .col-s-6-8{width:75%  }
  .col-s-7-8{width:87.5%}
  .col-s-8-8{width:100% }

  .col-s-1-12 {width:8.33% }
  .col-s-2-12 {width:16.66%}
  .col-s-3-12 {width:25%   }
  .col-s-4-12 {width:33.33%}
  .col-s-5-12 {width:41.66%}
  .col-s-6-12 {width:50%   }
  .col-s-7-12 {width:58.33%}
  .col-s-8-12 {width:66.66%}
  .col-s-9-12 {width:75%   }
  .col-s-10-12{width:83.33%}
  .col-s-11-12{width:91.66%}
  .col-s-12-12{width:100%  }
}
@media(min-width:1024px) and (max-width:1439px)
{
  .col-m-1-8{width:12.5%}
  .col-m-2-8{width:25%  }
  .col-m-3-8{width:37.5%}
  .col-m-4-8{width:50%  }
  .col-m-5-8{width:62.5%}
  .col-m-6-8{width:75%  }
  .col-m-7-8{width:87.5%}
  .col-m-8-8{width:100% }

  .col-m-1-12 {width:8.33% }
  .col-m-2-12 {width:16.66%}
  .col-m-3-12 {width:25%   }
  .col-m-4-12 {width:33.33%}
  .col-m-5-12 {width:41.66%}
  .col-m-6-12 {width:50%   }
  .col-m-7-12 {width:58.33%}
  .col-m-8-12 {width:66.66%}
  .col-m-9-12 {width:75%   }
  .col-m-10-12{width:83.33%}
  .col-m-11-12{width:91.66%}
  .col-m-12-12{width:100%  }
}
@media(min-width:1440px) and (max-width:1919px)
{
  .col-l-1-8{width:12.5%}
  .col-l-2-8{width:25%  }
  .col-l-3-8{width:37.5%}
  .col-l-4-8{width:50%  }
  .col-l-5-8{width:62.5%}
  .col-l-6-8{width:75%  }
  .col-l-7-8{width:87.5%}
  .col-l-8-8{width:100% }

  .col-l-1-12 {width:8.33% }
  .col-l-2-12 {width:16.66%}
  .col-l-3-12 {width:25%   }
  .col-l-4-12 {width:33.33%}
  .col-l-5-12 {width:41.66%}
  .col-l-6-12 {width:50%   }
  .col-l-7-12 {width:58.33%}
  .col-l-8-12 {width:66.66%}
  .col-l-9-12 {width:75%   }
  .col-l-10-12{width:83.33%}
  .col-l-11-12{width:91.66%}
  .col-l-12-12{width:100%  }
}
@media(min-width: 1920px)
{
  .col-xl-1-4{width:25% }
  .col-xl-2-4{width:50% }
  .col-xl-3-4{width:75% }
  .col-xl-4-4{width:100%}

  .col-xl-1-8{width:12.5%}
  .col-xl-2-8{width:25%  }
  .col-xl-3-8{width:37.5%}
  .col-xl-4-8{width:50%  }
  .col-xl-5-8{width:62.5%}
  .col-xl-6-8{width:75%  }
  .col-xl-7-8{width:87.5%}
  .col-xl-8-8{width:100% }

  .col-xl-1-12 {width:8.33% }
  .col-xl-2-12 {width:16.66%}
  .col-xl-3-12 {width:25%   }
  .col-xl-4-12 {width:33.33%}
  .col-xl-5-12 {width:41.66%}
  .col-xl-6-12 {width:50%   }
  .col-xl-7-12 {width:58.33%}
  .col-xl-8-12 {width:66.66%}
  .col-xl-9-12 {width:75%   }
  .col-xl-10-12{width:83.33%}
  .col-xl-11-12{width:91.66%}
  .col-xl-12-12{width:100%  }
}