/** ---------- 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%;
/*display:flex;
justify-content: center;*/
}
.grid .bx {
box-sizing: border-box;
/*margin:0;padding:0;*/
display:inline-block;
float: left;
position: relative;
margin-top:10px !important;
margin-bottom:10px !important;
}

/*.grid:before,.grid:after { content: ""; display: table; }
.grid:after { clear: both; }
.grid { zoom: 1; }*/

.grid:after {
content:"";
display:block;
clear:both;
}



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

 /* 1 BOX GRID */

.grid.one .bx {
width:90%;
display: block;
/*margin: 0 auto;*/
float: none;
margin-top:10px;
margin-bottom:10px;
margin-left:5%;
margin-right:5% ;
}

/* 2 BOX GRID */

.grid.two.set .bx {
width:46%;
margin-left: 2%;
margin-right: 2%;
}

.grid.two.set.respon_auto.odd > :last-child {
margin-left: 27%;
margin-right: 27%;
}

/* 3 BOX GRID */

.grid.three.set .bx {
width:31.3%;
margin-left: 1%;
margin-right: 1%;
}

/* 4 BOX GRID */

.grid.four.set .bx {
width: 23%;
margin-left: 1%;
margin-right: 1%;
}

.grid.three.og4 > :last-child {
width:31%;
margin-left: 34.5%;
margin-right: 34.5%;
}

/* 5 BOX GRID */

.grid.five.set .bx {
width: 19%;
margin-left: .5%;
margin-right: .5%;
}

/* below not tested and not right */

/* 6 BOX GRID */

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

/* 7 BOX GRID */

.grid.seven.set .bx {
width: 13.42%;
margin-left: .5%;
margin-right: .5%;
}

/* 8 BOX GRID */

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

/* 9 BOX GRID */

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

/* 10 BOX GRID */

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

/* /////////////////////////////////////////////////// */

/*----------------------------------------------------------------------
resp SIZING
------------------------------------------------------------------------*/

/*----------------------------------------------------------------------
5 grid
------------------------------------------------------------------------*/


/* 3 and 2 */
@media screen and (max-width: 1050px) {

.grid.five.set.resp #bx3:after {
content:"";
display:block;
clear:both;
}

.grid.five.set.resp .bx {
width:31.3%;
margin-left: 1%;
margin-right: 1%
}

.grid.five.set.resp #bx4 {
width:31.3%;
margin-left: 17.7%;
margin-right: 1%;
}

.grid.five.set.resp #bx5 {
width:31.3%;
margin-right: 17.7%;
margin-left: 1%;
}

}

/* 2 and 1 */
@media screen and (max-width: 700px) {

.grid.five.set.resp #bx2:after,.grid.five.set.resp #bx4:after {
content:"";
display:block;
clear:both;
}

.grid.five.set.resp .bx, .grid.five.set.resp #bx4 {
width:47%;
margin-left: 1.5%;
margin-right: 1.5%;
}

.grid.five.set.resp #bx5 {
width: 47%;
margin-left: 26.5%;
margin-right: 26.5%;
}

}

/* 1 */
@media screen and (max-width: 500px) {
.grid.five.set.resp .bx, .grid.five.set.resp #bx4, .grid.five.set.resp #bx5 {
content:"";
display:block;
clear:both;
width:90%;
display: block;
margin-left:5%;
margin-right:5% ;
}
}