
/* START MOBILE STYLES */ 

			/*Mobile styles from cls/grp css for consistency*/
			#mobileWrapper{font-family:"AvantGardeGothic",  "Uline", Verdana, Arial, Helvetica, sans-serif; padding:0 20px;}
			#mobileWrapper header { background: #FFF; color: #000; font-size: 16px; padding: 20px  0 5px; text-align: center; word-wrap: break-word; display: block; }
			#mobileWrapper h1 { font-size: 20px; text-transform: uppercase; text-align:left; margin-bottom:4px; font-weight:bold; line-height: 22px; }
			#mobileWrapper .products a img { max-width: 120px; max-height: 120px; }
			#mobileWrapper .products a { width: 50%; display: inline-block; text-align: center; font-size: 0; margin-bottom: 30px; overflow: hidden; vertical-align: top; }
			#mobileWrapper h3 { font-size: 14px; text-align: center; margin: 3px auto 0 auto; line-height: 14px; }
			#mobileWrapper .products .caption { margin: 8px auto 0 auto; width: 94%; height: auto; line-height: 15px; color: #000; }
			#mobileWrapper .products { text-align: left; font-size: 0; }
			#mobileWrapper, #productsWrapper, .products { margin: 0 auto; border: 0; font-size: 100%; vertical-align: baseline; }

			/*breadcrumbs*/
			#mobileBreadcrumbs{ background-color: #f2f2f2; width: 100%; padding: 44px 0 0 0; text-align:left; }
			#mobileBreadcrumbs a{ padding: 6px 0 6px 10px; color: #036;	padding-left: 20px; text-transform: none !important; text-decoration: none; font-size: 16px; text-align: left; background: url("https://www.uline.ca/h5/images/left_arrow.w_1463914163000hc.png") no-repeat 0% 50%; background-size: 10px 16px; display: inline-block; margin-left:10px; }
			.breadcrumbs, #mobileBreadcrumbs { padding: 2px !important; }

			/*top section*/
			.fourwidewidth-exception { width: 100%; margin: 0 auto; }
			.customcontentimageMobile img { max-width: 320px; max-height: 200px; margin-bottom: 30px; }
			.customcontentMobile { float: left; display: inline-block; width: 100%; margin-bottom: 6px; text-align: left; font-size: 13px; }
			.customcontentMobile ul { margin-bottom: 20px; }
			.customcontentMobile ul li { list-style: disc !important; margin-left: 20px; }
			.customcontentMobile p.customSubhead { font-weight: bold; color: #F00; text-align: center; }

			/*design button and artwork link*/
			.designButtonMobile { margin: 4px 0 30px 0; float: left; }
			.secondartwork-requirementsMobile { float: left; display: inline-block; padding: 12px 0 0 16px; margin: 0; }

			/*keyline*/
			div.customMobile { height: 1px; background: #e5e4e4; border: none; margin-bottom: 30px; clear: both; }

 			/*color swatches*/
			.custom-swatchMobile { width: 25%; float: left; display: inline-block; height: 94px; }
			.custom-swatchMobile p { margin: 0 auto; text-align: center; }

			.steps p.font-small { text-align: left; }

/* END MOBILE */




/* START DESKTOP */

.fourwidewidth-exception { width: 700px; margin: 0 auto; }

/*top section*/
.customcontentimage img { max-width: 252px; max-height: 252px; float: left; display: inline-block; margin-bottom: 38px; }
.customcontent { float: left; display: inline-block; width: 56%; padding-left: 26px; margin-bottom: 26px; }
.customcontent h1 { font-size: 22px; margin: 0; text-transform: uppercase; }
.customcontent p.customSubhead { font-weight: bold; color: #F00; text-align: center; }
.customcontent ul { padding-left: 20px; }
.customcontent li { margin-bottom: 6px; }

/*top section - Custom Mats*/
.custommatimage img { max-width: 422px; max-height: 422px; float: left; display: inline-block; margin-bottom: 38px; padding-top:48px; }
.custommatcontent { float: left; display: inline-block; width: 43%; padding-left: 26px; margin-bottom: 26px; }
.custommatcontent h1 { font-size: 22px; margin: 0; text-transform: uppercase; }
.custommatcontent p.customSubhead { font-weight: bold; color: #F00; text-align: center; }
.custommatcontent ul { padding-left: 20px; }
.custommatcontent li { margin-bottom: 6px; }


/*chart code*/
.charts { margin: 0 auto; width: max-content; }

/*design button and artwork link*/
.designButton { margin: 20px 0 12px 10px; float: left; }
.secondartwork-requirements { float: left; display: inline-block; padding: 27px 0 0 16px; margin: 0; }

/*keyline*/
div.custom { height: 1px; background: #e5e4e4; border: none; margin: 20px 0; clear: both; }

.ordering-instructions { font-weight: bold; text-transform: uppercase; text-align: left; margin-bottom: 12px; }
.cm-ordering-instructions { font-weight: bold; text-transform: uppercase; text-align: left; margin-bottom: 12px; margin-left:0px; }

/*color swatches*/
.custom-swatch { width: 10%; float: left; display: inline-block; height: 94px; }
.color-square { width: 50px; height: 50px; border: 1px solid #000; margin: 0 auto; }
.custom-swatch p { margin: 0 auto; text-align: center; }

/*Custom Mat Color Swatch*/
.colormat-square { width: 70px; height: 70px; border: 1px solid #000; margin: 0 auto; display:block; object-fit:cover; }

p.disclaimer { margin: 0; padding: 8px 0 26px 0; }

/* Custom - Group page styles */
.customwidthlarge, .customwidthlarge.normalfouracross {width:816px; margin:0 auto;}
.customwidthlarge.normalfouracross {width: 816px;}
.customh1{margin: 0 0 8px 12px;  padding:0 5px 0 0; text-align:left; text-transform:uppercase; font-size:22px; color:#000000;}

.cp-customHeader {display: flex; justify-content: center;}
.cp-maincustomimage img { width: 252px; height: 252px; float: left; display: inline-block; margin-bottom: 20px; }
.cp-customcopy { float: left; display: inline-block; width: 56%; padding-left: 26px; margin-bottom: 26px; }
.cp-customcopy h1 { font-size: 22px; margin: 0; text-transform: uppercase; }
.cp-customcopy ul { padding-left: 20px; }
.cp-customcopy li { margin-bottom: 6px; }


.cp-thumbContainer { position:relative; width: 25%; height: 185px; display: inline-block; float: left; text-align: center;}
.customthumbnails, .customwidthlarge.normalfouracross .customthumbnails { margin-top:20px; display: flex; flex-wrap: wrap;}
.customwidthlarge.normalfouracross .customthumbnails {margin-top: 0;}
.customthumbnails a, .customwidthlarge.normalfouracross a { margin:0 0 28px 0; width:25%; vertical-align:top; text-align:center; }
.customwidthlarge.normalfouracross .customthumbnails a {float: left;}
.customthumbnails .cp-caption, .customwidthlarge.normalfouracross .customthumbnails .cp-caption {font-size:12px; line-height:17px; font-weight: bold; color: #036;}
.customwidthlarge.normalfouracross .customthumbnails .cp-caption {margin: 4px auto 0 auto; line-height: normal; }
.customthumbnails a:hover .cp-caption, .customthumbnails a:hover .cp-productsize {color: #06c;}
.customthumbnails a:hover span.cp-productsize {text-decoration: none;}

.customthumbnails img{ max-width:120px; max-height:120px; margin-bottom: 15px;}
.customwidthlarge.normalfouracross .customthumbnails img {margin-bottom: 0; }

a.cssa:hover .cp-caption {	text-decoration:underline; }
.cp-productsize {padding-left: 20px; color: #000000}

.customkeyline { border-top: 2px solid #e5e4e4; margin: 0 auto; padding: 10px 0;  width: 94%; }

.cp-popUpDiv { z-index: 100; position:absolute;	width: 100%; height: 100px; text-align: center; border-style: none; border-color: #ccc; border-width: 1px; color:#c00; margin-top: -14px; padding:0; font-weight: bold; cursor:pointer;}

.cp-customchart, .cp-customchart table { margin: 0 auto; }

/* END DESKTOP */

 @media only screen and (min-width: 1260px){
	.customwidthlarge { width: 900px; }
	.customwidthlarge.normalfouracross {width: 1020px;}
	.cp-maincustomimage img { width: 352px; height: 352px; float: left; display: inline-block; }
	.custommatimage img { max-width: 538px; max-height: 538px; float: left; display: inline-block; padding-top:23px; }
	.cp-customcopy h1 { font-size: 24px; }
	.custom-swatch { width: 10%; float: left; display: inline-block; height: 94px; }
	.cm-ordering-instructions { font-weight: bold; text-transform: uppercase; text-align: left; margin-bottom: 12px; margin-left:15px; }

	/* Custom - Group page styles */
	.customh1{font-size:26px;}
	.customwidthlarge {width:1020px;}
	.cp-thumbContainer {height: 250px;}
	.customthumbnails a { margin:0 0 55px 0;  }
	.customwidthlarge.normalfouracross a {margin: 0 0 50px 0;}
	.customthumbnails img{ max-width:180px; max-height:180px;  margin-bottom: 22px;}
	.customthumbnails .cp-caption, .customwidthlarge.normalfouracross .customthumbnails .cp-caption { font-size:14px; }

	.customthumbnails .cp-caption, .cp-popUpDiv { font-size:14px;}

}