/*
	Column sizing for .price-grid-bg ul li
	lets do some math:
	100/number of columns - 3 = column width
	We are subtracting three to compensate for padding.
	1-3 col have 3% padding so the math is slightly different

	1 column - width:96%
	2 columns - width:46%
	3 columns - width:29.333333%
	4 columns - width:23%
	5 columns - width:17%
	6 columns - width:13.6666666667%
	7 columns - width:11.285714%
	8 columns - width:9.5%
	9 columns - width:8.1111111%
	10 columns - width:7%

	There is no need to include this commented out section on yuor page. In other words please remove this chunk of code.

*/

.price-grid-container{
	display: block;
	margin: 0px;
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif; color:#333 /* this may not be needed since it should be part of the page wrapper. */
	text-align: left;
	position:relative;
	text-rendering: auto !important;
}

.price-grid-container.pg-name-only {}
.price-grid-container.col1 {width:220px;}
.price-grid-container.col2 {width:440px}
.price-grid-container.col3 {width:450px}
.price-grid-container.col4 {width:600px}
.price-grid-container.col5 {width:750px}
.price-grid-container.col6 {width:860px}
.price-grid-container.col7 {width:930px}
.price-grid-container.col8 {max-width:980px}

.price-grid-container.pg-name-only ul li {width: 100%; padding: 4px 8px}
.price-grid-container.col1 ul {width:92%; padding: 0 4%}
.price-grid-container.col1 ul li {width:96%;}
.price-grid-container.col2 ul li {width:46%}
.price-grid-container.col3 ul li {width:29.333333%}
.price-grid-container.col4 ul li {width:23%}
.price-grid-container.col5 ul li {width:17%}
.price-grid-container.col6 ul li {width:13.6666667%}
.price-grid-container.col7 ul li {width:11.2857%}
.price-grid-container.col8 ul li {width:9.5%}



#price-grid-sort{display: none} /* only show on mobile */

.price-grid-bg {
	padding:8px 0px;
	border:1px solid #efefef;
	border-radius:2px;
	background-color:#f9f9f9;
	display:block;
	width:100%;
	position: relative;
}


.price-grid-bg a {
	text-decoration:none; display:block; color:#333
}


.price-grid-bg ul {
	padding:0px;
	margin:0px;
	display:table;
	width:100%;
}

.price-grid-bg ul li {
	border-right:1px solid #e5e5e5;
	display:table-cell;
	padding:0 1.5% 0 1.5%;
	line-height: 125%;
}

.price-grid-container .owc-product-title h4 {margin-top: 0}

.price-grid-container.col1 ul li {padding: 1.5% 3%}

.price-grid-container.col2 ul li,
.price-grid-container.col3 ul li
	{padding:1.5% 2.5%}

.price-grid-bg ul li:last-child {
	border:0;
}

.price-grid-bg ul li span {display:block;}

.price-grid-bg h4 {
	font-size: 28px;
	font-weight:bold;
	line-height: 100%;
	margin:8px 0 0 0;
	padding:0;
}
.price-grid-bg .product-spec small {font-size: 80%; padding-left: 1px; padding-bottom: 8px}

.price-grid-bg h4.owc-product-title, .price-grid-bg .product-spec {font-size: 20px; font-weight: bold}

.price-grid-bg h4.owc-product-title small {display:block; font-size: 60%; margin: 0; padding: 4px 0 3px 0; font-weight:normal; line-height: 100%}

.price-grid-bg .pg-shipping-time {
	font-weight: bold;
	line-height: 0;
	margin:6px 0 0px 0;
	padding-bottom: 8px;
	font-size:12px;
}

.price-grid-bg .pg-shipping-time span{
	display: inline;
	color: green;
}


.price-grid-bg .product-description {
	font-size:12px;
	line-height:125%;
	margin:0px 0 15px 0;
	padding:0;
	font-weight: bold
}


.price-grid-bg .product-price {
	font-size:18px;
	line-height: 100%;
	color:red;
	font-weight:bold;
	margin:8px 0 0 0;
	padding:0;
}

.price-grid-bg .pg-learnmore {
	color:red;
	font-size:12px;
	margin:2px 0 0 0;
	padding:0;
}

.price-grid-bg .pg-spacing {
	height:10px
}

.price-grid-bg .pg-cartbutton {
	margin:8px 0;
	background-color:#3489C5;
	padding:7px 0 9px 0;
	width:100%;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	text-align:center;
	line-height: 100%;
}

.price-grid-bg .pg-cartbutton:hover {
	background-color:#327cb1;
}

/*
Helper Clasess
Not In example HTML but in real files
*/
.pg-float-left {float:left}
.pg-float-right {float:right}




/*
connected price-grid / plays well with Bootstrap 3
*/

ul.price-grid {
    padding: 0;
    margin: 0;
    border: 1px solid #efefef;
    border-radius: 2px;
    background-color: #f6f6f6;
    display: table;
    width: 100%;
    position: relative;
    float: left;
    text-align: left;
	margin-bottom: 30px;
}
ul.price-grid a {
    text-decoration: none;
    display: block;
    color: #333
}
ul.price-grid li {
    border-right: 1px solid #e5e5e5;
    display: table-cell;
    padding: 1.5% 2.5% 0;
    line-height: 125%;
    position: relative
}
ul.price-grid li:last-child {
    border: 0
}
ul.price-grid li span {
    display: block
}
ul.price-grid > li:first-child:nth-last-child(1) {
    width: 96%
}
ul.price-grid > li:first-child:nth-last-child(2),
ul.price-grid > li:first-child:nth-last-child(2) ~ li {
    width: 46%
}
ul.price-grid > li:first-child:nth-last-child(3),
ul.price-grid > li:first-child:nth-last-child(3) ~ li {
    width: 29.33333333%
}
ul.price-grid > li:first-child:nth-last-child(4),
ul.price-grid > li:first-child:nth-last-child(4) ~ li {
    width: 23%
}
ul.price-grid > li:first-child:nth-last-child(5),
ul.price-grid > li:first-child:nth-last-child(5) ~ li {
    width: 17%
}
ul.price-grid > li:first-child:nth-last-child(6),
ul.price-grid > li:first-child:nth-last-child(6) ~ li {
    width: 13.666666666%
}
ul.price-grid > li:first-child:nth-last-child(7),
ul.price-grid > li:first-child:nth-last-child(7) ~ li {
    width: 11.28575714%
}
ul.price-grid > li:first-child:nth-last-child(8),
ul.price-grid > li:first-child:nth-last-child(8) ~ li {
    width: 9.5%
}