/** ---------- GRID ---------- **/
/*----------------------------------------------------------------------
LIST GRID
------------------------------------------------------------------------*/
/* column count must have top padding and margin set to 0 - otherwise they get set to first column only
to compensate jquery is used (in grid.js) to wrap div with class="listgrid-wrap" with margin-top set in spacing.
*/

.listgrid li {
margin-left: 20px !important; /* this is needed for chrome  */
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 8px;
display: block !important;
}

ul.listgrid, ol.listgrid {
margin-left: 0 !important;
}

.listgrid {
margin-top: 0 !important;
padding-top: 0 !important;
}

.listgrid.two {
column-count: 2;
column-gap: 5px; /* small gutter because have to add left margin above due to chrome bug */  
}
.listgrid.three {
column-count: 3;
column-gap: 5px;
}
.listgrid.four {
column-count: 4;
column-gap: 5px;
}


/*----------------------------------------------------------------------
LIST GRID PERCENT
------------------------------------------------------------------------*/

ul.listgrid-pc {
overflow: hidden;
}

ul.listgrid-pc li {
float: left;
display: inline;
}

ul.listgrid-pc.two li, ul.listgrid-pc li.two { width:50%;}
ul.listgrid-pc.three li, ul.listgrid-pc li.three { width:33.333%; }
ul.listgrid-pc.four li, ul.listgrid-pc li.four { width:25%; }
ul.listgrid-pc.six li, ul.listgrid-pc li.six { width:16.666%; }

/*----------------------------------------------------------------------
  VARIABLE GRID
 ------------------------------------------------------------------------*/
.grid {
width: 100%;
}
.grid .bx {
box-sizing: border-box;
/*margin:0;padding:0;*/
display:inline-block;
float: left;
position: relative;
}
.grid:before,.grid:after { content: ""; display: table; }
.grid:after { clear: both; }
.grid { zoom: 1; }

/*----------------------------------------------------------------------
 SET GRIDS
 ------------------------------------------------------------------------*/
 /* NOTE: grid box number (two, three, four etc) is required by UPD */


 /* 1 BOX GRID */

.grid.one .bx {
width:100% !important;
display: block;
margin: 0 auto;
float: none;
}

/* 2 BOX GRID */

.grid.two.set .bx {
width:48% !important;
}
.grid.two.set .bx {
margin-left: 4% !important;
}

.grid.two.set .bx:first-of-type {
margin-left: 0 !important;
}


/* 3 BOX GRID */

.grid.three.set .bx {
width:32%;
}
.grid.three.set .bx {
margin-left: 2%;
}

.grid.three.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 4 BOX GRID */

.grid.four.set .bx {
width: 23.5%;
}
.grid.four.set .bx {
margin-left: 2%;
}

.grid.four.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 5 BOX GRID */

.grid.five.set .bx {
width: 19.2%;
}
.grid.five.set .bx {
margin-left: 1%;
}

.grid.five.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 6 BOX GRID */

.grid.six.set .bx {
width: 15.83%;
}
.grid.six.set .bx {
margin-left: 1%;
}

.grid.six.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 7 BOX GRID */

.grid.seven.set .bx {
width: 13.42%;
}
.grid.seven.set .bx7 {
margin-left: 1%;
}

.grid.seven.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 8 BOX GRID */

.grid.eight.set .bx {
width: 11.62%;
}
.grid.eight.set .bx {
margin-left: 1%;
}

.grid.eight.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 9 BOX GRID */

.grid.nine.set .bx {
width: 10.22%;
}
.grid.nine.set .bx {
margin-left: 1%;
}

.grid.nine.set .bx:first-of-type {
margin-left: 0 !important;
}

/* 10 BOX GRID */

.grid.ten.set .bx {
width: 9.1%;
}
.grid.ten.set .bx {
margin-left: 1%;
}

.grid.ten.set .bx:first-of-type {
margin-left: 0 !important;
}