@charset "utf-8";

/* PDF Preview Popup/Zoom */
#pp-img {

}
table.pp-fg {
	background: #aaa;
	border-bottom: 1px solid #888;
	border-right: 1px solid #888;
	border-left: 1px solid #888;
}
table.pp-cg {
	background: #fff;
	border-top: 1px solid #888;
	border-right: 1px solid #888;
	border-left: 1px solid #888;
}
.pp-caption {
	font-size: 80%;
	font-weight: bold;
	padding-left: 4px;
}
.pp-close {
	font-size: 80%;
	padding-right: 16px;
	background: url(/images/c-del-bw.png) right no-repeat;
	text-transform: uppercase;
}

.pp-help {
	height: 22px;
	width: 170px;
	background: #fff;
	position: absolute;
	bottom: 4px;
	left: 4px;
	padding: 2px;
	border: 1px solid #000;
	font-size: 80%;
	font-weight: bold;
	text-transform: uppercase;
    text-align: center;
}

/* Carousel */
.carousel {
  position: relative;
  margin-bottom: 1em;
}
.carousel img {
  border: 0;
  display: block;
  cursor: pointer;
}
.carousel ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Carousel: Viewport */
.carousel .viewport {
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}
.carousel .viewport ul {
  width: 6000px;
}
.carousel .viewport ul li {
  display: block;
  float: left;
}
.carousel .viewport ul ul {
  width: auto;
  float: left;
}

.carousel .viewport ul ul li {
  margin-right: 5px;
}

/* Carousel: Navigation */
.carousel .nav {
  position: relative;
  padding: 0 3px;
  height: 10px;
}

.carousel .nav li a {
  display: block;
  overflow: hidden;
  text-indent: -100em;
  background: url(/images/carousel.png) no-repeat 0 0;
  outline: none;
}

.carousel .nav li a:hover {
  background-position: -46px 0;
}

.carousel .nav .prev {
  position: absolute;
  right: 22px;
}

.carousel .nav .next {
  position: absolute;
  right: 5px;
}

.carousel .nav .prev a, .carousel .nav .next a {
  width: 10px;
  height: 10px;
  background-position: -91px 0;
}

.carousel .nav .prev a:hover {
  background-position: -179px 0;
}

.carousel .nav .next a {
  background-position: -135px 0;
}

.carousel .nav .next a:hover {
  background-position: -223px 0;
}

.carousel .nav .pages {
  position: absolute;
  top: 0px;
  left: 2px;
}

.carousel .nav .pages ul {
  float: left;
}

.carousel .nav .pages li {
  float: left;
  margin-right: 8px;
}

.carousel .nav .pages li a {
  width: 10px;
  height: 10px;
}

.carousel .nav .pages li.active a {
  background-position: -46px 0;
}

.carousel ul:after, .carousel .nav .pages:after, .carousel .nav:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.carousel .carousel-inner .item a img {
    margin: 0 auto;
}

/* == TAGS ===================================================== */
body.hide-media .form-group.field-media,
body.hide-printing .form-group.field-printing,
body.hide-project-title .form-group.field-description,
body.hide-size .form-group.field-size,
body.hide-quantity .form-group.field-quantity,
body.hide-subtotal .list-group-item.sub-total,
body.hide-pricing #pricingWrapper,
body.hide-pricing div#order.panel-default>.panel-heading,
body.hide-pricing div#order.panel-default .details {
    display: none;
}

.bootbox.modal {
    z-index: 9999 !important;
}

div.swatch-panel {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0 5px 0 5px;
}

div.swatch {
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 1px solid lightgrey;
}

div.active {
    border:1px solid black;
}

/* == DDP ================================================================== */
body.ddp #s-subnav {
  display: none;
}

/*body.ddp #s-content {
  width: 938px;
  border: none;
  padding-bottom: 1px;
}

body.ddp #tbl-order-item {
  width: 935px;
}*/

#ddp-templates {
  padding-left: 0;
}

#ddp-templates .categories li a {
  display: block;
  background: url("/images/default/menu-prod.gif") no-repeat left center;
  color: #333333;
  font-family: sans-serif;
  font-size: 12px;
  margin: 0 0 2px;
  padding: 4px 0 4px 20px;
  text-decoration: none;
}

#ddp-templates .categories li a:hover {
  background: #bbb url("/images/default/menu-prod.gif") no-repeat left center;
}

#ddp-templates .categories li a.selected {
  background: #bbb url(/images/default/menu-prod-h.gif) no-repeat left center;
}

#ddp-templates .thumbnail img {
  border: solid 1px #ccc;
  padding: 5px;
}

#ddp-templates .name {
  margin: 10px 0 10px 0;
}

#ddp-templates .message {
  text-align: center;
  padding-top: 20px;
}

div.ddp.footer {
  clear: both;
}

.hide-on-desktop {
  display: none !important;
}
.show-on-desktop {
  display: block !important;
}

@media screen and (max-width: 760px) {
    .hide-on-mobile {
        display: none !important;
    }
    .show-on-mobile {
        display: block !important;
    }
}

/*===================== FEATURED TAG ============================================================*/
#products .featured {
    margin-top: 20px;
}

.featured-product-thumbnail-wrapper {
    height: 180px;
}

.featured .featured-product-wrapper .product {
    text-align: center;
    vertical-align: bottom;
    background: none;
    height: 220px;
    border: solid 1px #c9c9c9;
    background: #fff;
}

.featured .featured-product-wrapper .product .title {
    position: absolute;
    bottom: 25px;
    height: 35px;
    width: 90%;
}

.featured .featured-product-wrapper .product .title h3 {
    padding: 0 5%;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    color: #000;
}

.featured .featured-product-wrapper .product.thumbnail img {
    border-radius: 5px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.featured .featured-product-wrapper .thumbnail .caption {
    padding: 10px;
}

.featured .featured-product-wrapper .thumbnail .caption .sku {
    position: absolute;
    top: -150px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 5px;
    line-height: 10px;
    border-radius: 5px;
    height: 17px;
}

.featured .featured-product-wrapper .featured-product-thumbnail-wrapper img {
    max-height: 180px;
}

.featured a:hover {
    text-decoration: none;
}
/*===================== END OF FEATUED TAG ======================================================*/