/*---------- QUICK STORE EDITS - VARIABLES --------------------------------
-------------------------------------------------------------------------*/
:root {
/*CUTOMIZEABLE VARIABLES - (IN USE) - You can add more variables here (:root)*/

/*Colors*/  
   --navigation-background-color: var(--page-background-color, #fff);
   --navigation-text-color: var(--link-color, #323232);

/*Font Styles*/
    --main-font-style:  'Nunito', Helvetica, Arial, Sans-serif !important;
   
/*Banner - alternate*/
   /*--banner-background-image: url('/uploads/10343058/File/new_skin/banner_bg.png');*/
}    
  
/*DEFAULT VARIABLES (for ref only) Written by JS using colors from Branding/Website Colors UI
  The following variables are directly related to the Website Colors selected with the UI
   --topbar-text-color
   --topbar-background-color
   --header-text-color
   --top-background-color
   --page-background-color
   --text-color
   --link-color
   --button-text-color
   --button-background-color
   --column-text-color
   --column-background-color
   --banner-text-color
   --banner-background-color
   --footer-text-color
   --footer-background-color
   --legals-text-color:
   --legals-background-color:
*/
   
 
/*---------- FONTS -------------------------------------------------------
-------------------------------------------------------------------------*/
/* 1rem = 16px */
html {
    font-size: 16px;
    font-family:'Nunito', Helvetica, Arial, Sans-serif;
    font-family: var(--main-font-style);
}
h1 {
    font-size: 2.5rem;
    text-transform: capitalize;
    font-weight: bold;
    float: none;
    margin-top: 0;
    font-family: var(--headertag-font-style);
}
h2, h3 {
    font-size: 1.5rem;
    text-transform: capitalize;
    font-family: var(--headertag-font-style);
}
h4, p, a, th, td {
    font-size: 1rem;
    font-family: var(--main-font-style);
}
li {
    font-size: 1rem;
    font-family: var(--navigation-font-style);
}
.c_wrapper h1, .c_wrapper h2, .c_wrapper h3, .c_wrapper h4 {
    text-align: center;
}  
th, td {
    color: var(--text-color) !important;
}
input, textarea, select {
    color: var(--text-color);
}
/*Mobile Fonts*/
@media only screen and (min-width: 200px) and (max-width: 768px) { html {font-size:10px !important;}
h1 {font-size: 2rem;}
h2, h3 {font-size: 1.2rem;}}
@media only screen and (min-width:320px) and (max-width: 768px) { html {font-size:14px !important;}
h1 {font-size: 2rem;}
h2, h3 {font-size: 1.2rem;}}
@media only screen and (min-width:360px) and (max-width: 768px) { html {font-size:16px !important;}
h1 {font-size: 2rem;}
h2, h3 {font-size: 1.2rem;}}

/*low resolution desktop*/
@media only screen and (min-width:1000px) and (max-width: 1500px) { html {font-size:14px !important;}}


/*---------- HEADER -----------------------------------------------------
-------------------------------------------------------------------------*/
#page_top_container + div.extras div#pw_c_popup {
    position: fixed;
    background: #ebebeb;
    background: var(--footer-background-color);
    z-index: 100;
    height: 70px;
}
#pre_navigation.hub li {
    font-size: 1rem;
}
#header {
    -webkit-transition: margin-top 0.5s ease-in-out;
    transition: margin-top 0.5s ease-in-out;
}
#header div.set {
    position: fixed;
    background: inherit;
    z-index: 200;
    width: 100%;
}
#header h1 {
    height: 35px;
    padding: 0;
}
#header h1 a {
    font-size: 2rem;
    padding: 0;
    display: block;
    line-height: 2rem;
}
#header h1 div#logodiv {
    width: 100%;
    height: 35px;
    position: absolute;
    line-height: 25px;
}
#header h1 a img {
    float: left !important;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 200px !important;
    max-height: 60px;
    padding-left: 10px;
    padding-right: 10px;
}
#header h1 div#name-slogan {
    -ms-transform: translateY(-25%);
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -o-transform: translateY(-25%);
    transform: translateY(-25%);
    font-weight: normal;
    color: var(--header-text-color);
    float: left;
    text-align: center;
    line-height: 1.25rem;
}
#header h1 div#name-slogan.noslogan {
    line-height: 60px;
}
/* turn off (display:block) to show company name next to logo*/
#header h1 div#name-slogan p:first-child {
    /*font-size: 0;*/
    display: none;
}
#header h1 div#name-slogan p {
    margin: 0;
    font-size: 1rem;
}
/*Phone Number (replaced with JS link)*/
#header .phone, #footer .phone  {
    font-size: 0;
}
div#phone_number_header {
    background: none;
}
#header a#headphonelink.phone-nologo {
    font-size: 1rem;
    font-weight: normal;
    line-height: 35px;
    padding-left: 8px;
    float: left;
    color: var(--topbar-text-color);
}
#header a#headphonelink.phone-logo {
    font-size: 1rem;
    font-weight: normal;
    line-height: 35px;
    padding-right: 8px;
    float: right;
    position: absolute;
    right: 0;
}
a#headphonelink:before, a#footphonelink:before  {
    content: "J ";
    color: inherit;
    font-family: "dn-glyphs";
    font-size: 16px;
    line-height: 1;
    vertical-align: sub;
}
#header .pre_navigation {
     height: 35px;
}
#header #navigation_wrapper {
    height: 30px;
    background: #fff;
    background: var(--navigation-background-color);
    border-bottom: 1px solid #323232;
    border-bottom: 1px solid var(--navigation-text-color);
    width: 100%;
    position: fixed;
}
#header #navigation_wrapper a {
    color: #323232;
    color: var(--navigation-text-color);
}
#navigation > li > a:hover, #navigation > li.alt > a {
    border-bottom: 2px solid #323232;
    border-bottom: 2px solid var(--navigation-text-color);
}
#navigation > li > a {
    padding: 2px 5px;
    margin: 0 20px;
}
div#content {
  padding-top: 100px;/*full header height*/
}
/*---------- HEADER MOBILE -----------------------------------------------
-------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
/*all settings for fixed header only, except background (always needed)*/
#header .pre_navigation {
    height: 30px;
    padding: 2px 8px 8px 8px;
}
#header a#headphonelink.phone-nologo {
    line-height: 25px;
    height: 25px;
}
#header h1 a img {
    max-width: 150px !important;
    max-height: 55px;
}
#header #navigation_wrapper {
    height: 20px;
}
#header #navigation_wrapper a.nav-open[title="Show navigation"] {
    background: #fff;
    background: var(--navigation-background-color);
    height: 20px;
    text-align: center;
}
#header #navigation_wrapper a.nav-open[title="Show navigation"]::before {
    color: #323232;
    color: var(--navigation-text-color);
    font-size: 1rem;
    height: 20px;
    padding: 0px 10px 0px 10px;
}
#header #navigation_wrapper #hub_search {
    background: #fff;
    background: var(--navigation-background-color);
    left: 0;
    top: 85px;
    height: 55px;
}
#navigation_wrapper > ul {
    background: #fff;
    background: var(--navigation-background-color);
    left: 0;
    top: 140px;
    max-height: calc(100vh - 200px);
    max-height: calc(var(--Innerheightpx) - 140px);
    overflow-x: hidden;
    overflow-y: auto;
}
/*needed always*/
    #navigation > li > a, #navigation > li > a:hover {
    padding: 6px 0;
    margin: 0;
    width: 100%;
    text-decoration: none;
    border-bottom: none !important;
}
#navigation > li > a:hover, #navigation > li.alt > a {
    background: #f2f2f2;
}
div#content {
    padding-top: 85px;
}  
#header h1 div#name-slogan {
    line-height: 1rem;
    -ms-transform: translateY(-0%);
    -webkit-transform: translateY(-0%);
    -moz-transform: translateY(-0%);
    -o-transform: translateY(-0%);
    transform: translateY(-0%);
}
#header h1 div#name-slogan.noslogan {
    line-height: 40px;
}}
@media only screen and (max-width: 850px) {
#header h1 div#name-slogan p {
    font-size: 0.85rem;
}}
@media only screen and (max-width: 760px) {
#header h1 div#name-slogan.nologo {
    display: none;
}}
@media only screen and (max-width: 524px) {
#header a#headphonelink.phone-logo {
    font-size: 0rem !important;
    line-height: 0px!important;
    margin: 8px 0 0 0;
}
#header a#headphonelink.phone-nologo {
    font-size: 0rem !important;
    margin: 5px 0 0 0;
}}
@media only screen and (max-width: 414px) {
#header h1 a {
    font-size: 1.5rem;
}}
@media only screen and (max-width: 320px) {
#header h1 a img {
    max-width: 100px !important;
    max-height: 55px;
    padding-left: 5px;
    padding-right: 5px;
}}
@media only screen and (max-width: 250px) {
#header h1 a img {
    max-width: 50px !important;
    max-height: 55px;
    padding-left: 1px;
    padding-right: 5px;
}}
/*for some tablets*/
@media only screen and (max-width: 920px){
#navigation > li > a {
   margin: 0 10px;
}}


/*---------- GENERAL PAGE & COLUMN WIDTHS -----------------------------------------------
-------------------------------------------------------------------------*/
#content .column, div#helpers_wrapper, #content div.set > .c_wrapper, #content div.set > .products.portal, #content div.set > .create_cont, #content div.set div.product_display, #content div.set > p, #content div.set > div.portal:not(.products), #content div.set > #sort + div.product_display, #content div.set > div.normal-list, #content div.set > div.interior, #content div.set > iframe#UploadTarget + *:not(script), #content div.set > div.c_wrapper, #content div.set > div.divider, #content div.set > div#category_description, #content div.set > div#quote_request_form_panel, #content div.set > form[action="/user/signup"], #content div.set > div#help_container, #home_store_directory #content div.set > div:not([class]), #home_quick_quote #content div.set > div.wizard, #content div.set > ul#checkout_steps, #content div.set > div.cart_empty, #content div.set > form, #content div.set > h2, #content div.set > h3, #content div.set > h4, #content div.set > img {
    max-width: 100%;
}
#home_create #content .column, #home_create .c_wrapper.normal-list,  #designs_index #content .column, #designs_index .c_wrapper.normal-list, #designs_category #content .column, #designs_category .c_wrapper.normal-list {
    padding: 0 0;
    width: 100%;
}
/*page width exceptions*/
.c_wrapper.normal-list, .column {
    /*width: 95%;*/
}
div#designs_product, div#quote_request_form_panel {
    max-width: 1200px!important;
}
#content div.set > #sort + *:not(#marketing):not(script), #content div.set > #quote_request_form_panel, #home_quick_quote #content div.set > div.wizard  {
    padding-top: 0px;
}
#content > div > div.column > div.column_a.right.normal-list {
    padding-top: 15px;
}
/*columns*/
.column_a {
    width: 80%;
    padding: 0 0 0 10px;
}
.column_b, .library_browser .hierarchy {
    width: 20%;
}
.popup .library_browser .hierarchy, .popup .font_selector .hierarchy, #home_quick_quote .wizard .select_product_hierarchy {
    width: 25%!important;
}
.popup .library_browser .listing, .popup .library_browser .library_listing, .library_browser .listing, #home_quick_quote .wizard .library_listing  {
    width: 75%!important;
}
#decoration_libraries.popup .popup_content {
    min-height: unset!important;
}
#select_product_listing div.int, .popup .library_browser .hierarchy .product_categories, .library_browser.font .listing ul, .library_categories, .popup .library_browser .hierarchy {
    max-height: unset!important;
    height: calc(100vh - 200px)!important;
    height: calc(var(--Innerheightpx) - 200px)!important;
}
#decoration_libraries.popup .library_browser .hierarchy .product_categories, div#decoration_list_container_8, div#decoration_list_container_3, div#decoration_list_container_1 {
    max-height: unset!important;
    height: calc(100vh - 290px)!important;
    height: calc(var(--Innerheightpx) - 290px)!important;
}
#select_product_listing div.int, .library_browser.font .listing ul, div#decoration_list_container_8, div#decoration_list_container_3, div#decoration_list_container_1  {
    overflow: auto!important;
}
#home_quick_quote .wizard .library_browser .hierarchy .select_product_categories, #home_quick_quote #select_product_listing div.int {
    max-height: unset!important;
    height: calc(100vh - 300px)!important;
    height: calc(var(--Innerheightpx) - 300px)!important;
}
/*General Pages Mobile */
@media only screen and (max-width: 1024px) {
.column_a, .column_b {
    width: 100%;
    padding: 0 0 0 0;
}}
@media only screen and (max-width: 825px) {
#home_quick_quote .wizard .select_product_hierarchy {
    width: 30%!important;
}
#home_quick_quote .wizard .library_listing {
    width: 70%!important;
}}
@media only screen and (max-width: 675px) {
#home_quick_quote .wizard .select_product_hierarchy {
    width: 40%!important;
}
#home_quick_quote .wizard .library_listing {
    width: 60%!important;
}}
@media only screen and (max-width: 455px) {
#home_quick_quote .wizard .select_product_hierarchy {
    width: 50%!important;
}
#home_quick_quote .wizard .library_listing {
    width: 50%!important;
}}
@media only screen and (max-height: 450px) {
#select_product_listing div.int, .popup .library_browser .hierarchy .product_categories, .library_browser.font .listing ul, .library_categories, .popup .library_browser .hierarchy, #decoration_libraries.popup .library_browser .hierarchy .product_categories, div#decoration_list_container_8, div#decoration_list_container_3, div#decoration_list_container_1, #home_quick_quote .wizard .library_browser .hierarchy .select_product_categories, #home_quick_quote #select_product_listing div.int {
   min-height: 350px;
}}

/*---------- NAVIGATION -------------------------------------------------------
-------------------------------------------------------------------------*/
/*Limit products to main categories in submenu*/
#tab_create_page .submenu {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
}
#tab_create_page ul {
     display: none;
}
@media only screen and (max-width: 600px) {
#tab_create_page .submenu {
     columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}}
@media only screen and (max-width: 374px) {
#tab_create_page .submenu {
     columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
}}


/*---------- SIDE NAVIGATION MOBILE --------------------------------------
-------------------------------------------------------------------------*/
/* Change side navigation to slide in - see JS*/
@media only screen and (max-width: 1024px) {
.sidenav-in {
    position: fixed;
    bottom: 0px;
    overflow: auto;
    background: #fff;
    background: var(--navigation-background-color);
    z-index: 100;
    height: 90vh;
    height: var(--Innerheightpx);
    width: calc(100vw - 60px) !important;
    margin-left: calc(-100vw + 45px); /*pages have 15px padding*/
}
#home_create .sidenav-in, #designs_index .sidenav-in, #designs_category .sidenav-in {
    margin-left: calc(-100vw + 60px);/*these pages have no padding*/
}  
#home_index .sidenav-in {
    display: none;
}  
.sidenav-out {
   margin-left: -15px;/*pages have 15px padding*/
   z-index: 1000;
}
#home_create .sidenav-out, #designs_index .sidenav-out,#designs_category .sidenav-out   {
   margin-left: 0px;/*these pages have no padding*/
}
nav#navtog.nav-toggle-in, nav#navtog.nav-toggle-out {
    position: fixed;
    height: 30px;
    width: 60px;
    background: #1682e2;
    background: var(--button-background-color);
    color: var(--button-text-color) !important;
    bottom: 0;
    margin-left: calc(100vw - 60px);
    border-radius: 0 10px 0px 0!important;
    font-size: 1.1rem;
    text-align: center;
    text-decoration: none;
}
.nav-toggle-in:before {
    content: "More \25b8";
}
.nav-toggle-out:before {
    content: "\25c2  Less";
}}

/*---------- FOOTER ------------------------------------------------------
-------------------------------------------------------------------------*/
/*Footer Product Listing*/
div#footer div.helpers:last-child ul {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
}
/*Mobile Footer Styles*/
@media only screen and (max-width: 500px) and (orientation: portrait) {
div#footer div.helpers:last-child ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}}
@media only screen and (max-width: 1024px) {
div#footer div.helpers {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
#footer .helpers:first-child h3 {
    margin-top: 0;
}
#footer .helpers h3 {
    margin-top: 20px;
}
div#footer div.helpers ul {
    width: 100%;
}
div#footer div.helpers ul li {
    line-height: normal;
}}

/*---------- TABLES ------------------------------------------------------
-------------------------------------------------------------------------*/
table.size_chart tr th, table.size_chart tr td:first-child, .popup table.size_chart tr th, .popup table.size_chart tr td:first-child {
    word-break: keep-all;
}  
.size_chart {
    overflow: auto;
}

/*---------- MISC STYLES -------------------------------------------------
-------------------------------------------------------------------------*/
/*Link More*/
.link_more {
    background: var(--button-background-color);
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    width: 100%;
}
.link_more > a {
    font-size: 0;
    color: var(--button-text-color);
    max-width: 100%;
    width: 100%;
    display: inline-block;
    /*line-height: 24px;*/
    text-transform: uppercase;
    padding: 0;
}
.link_more > a:after {
    content: "View Wider Selection of Products";
    font-size: 1rem;
}
/*Misc Buttons*/
#container a:hover, .link_more:hover, .d_c_cart_buttons #add_cart_container input:hover, .designer_container_large .view_controls ol#save_div a:hover, .d_c_cart_buttons #m_cart a:hover, .button:hover, .colorbutton:hover, .sub_button:hover {
    opacity: 0.75;
    text-decoration: none !important;
}
input[type="radio"], input[type="checkbox"], .signup .custom_values input {
    vertical-align: middle;
    height: 24px;
}

/*---------- MISC FIXES --------------------------------------------
-------------------------------------------------------------------------*/
/*Signup Page*/
body#user_signup div#content, #signup #content div.set {
    text-align: center;
}
/*Quick Quote Page*/
#home_quick_quote .wizard > .content {
    padding: 10px 0 0 0;
}
#home_quick_quote .wizard > .wizard-actions {
    padding: 10px 0 0 0!important;
}
#home_quick_quote div#sort {
    display: none;
}
#home_quick_quote div#multi_container_2:after, #quick_quote_content_4 > div > h5:before {
    white-space: pre-wrap;
    font-size: 0.85rem;
    font-weight: normal;
    content: "Price breaks at 6, 12, 24, 48, 96, 72, 144, 250, 500, 1000, 2500, 5000, 10K\A";
}
/*Images Responsive*/
#content div.set div.normal-list img, #content div.set div.c_wrapper.normal-list img, #content div.set div.column div div.c_wrapper img {
    max-width: 100%;
    height: auto!important;
}
/*Social Media Links*/
#designer #dn-social-media {
    display: none;
}
  
/*---------- BANNER ------------------------------------------------------
-------------------------------------------------------------------------*/
#home_index #marketing #m_window {
   background: var(--banner-background-image, var(--banner-background-color));
}

/*---------- PRODUCT DETAIL PAGE  ----------------------------------------
-------------------------------------------------------------------------*/
.tab_content > div h4{
    font-size: 1rem !important
}
#other_product_opts > li > a > span {
    font-size: 1.5rem;
    text-transform: capitalize;
}
#c_bun_info {
    font-size: 0;
}
#home_create_product #qty_container:after {
    white-space: pre-wrap;
    font-size: 0.85rem;
    font-weight: normal;
    content: "Price breaks at 6, 12, 24, 48, 96, 72, 144, 250, 500, 1000, 2500, 5000, 10K \A Enter a Quantity Below to View Price Breaks";
}
@media only screen and (max-width:400px) {
.product_display .description .tab_wrapper .tab_list li a {
    font-size: 0.85rem;
}}


/*---------- PRODUCT & DESIGN LISTING  -----------------------------------
-------------------------------------------------------------------------*/
#content div.set > .products.portal {
    padding: 0;
}
.row:after {
    display: none;
}
#create_list, #cat_list_products, #cat_list_stock, #design_list {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: space-around;
}
/*Home Page Products - limit 1 row*/
#home_index #create_list, #home_index #cat_list_products{
   -ms-flex-wrap: nowrap;
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
}
/*2 image*/
@media only screen and (max-width: 479px) {
#home_index #create_list > li {
    display: none;
}
#home_index #create_list > li:nth-child(1), #home_index #create_list > li:nth-child(2) {
    display: block !important;
}}
/*3 image*/
@media only screen and (min-width: 480px) {
#home_index #create_list > li {
    display: none;
}
#home_index #create_list > li:nth-child(1), #home_index #create_list > li:nth-child(2),#home_index #create_list > li:nth-child(3) {
    display: block !important;
}}
/*4 image*/
@media only screen and (min-width: 568px) {
#home_index #create_list > li {
    display: none;
}
#home_index #create_list > li:nth-child(1), #home_index #create_list > li:nth-child(2),#home_index #create_list > li:nth-child(3), #home_index #create_list > li:nth-child(4)  {
    display: block !important;
}}
/*5 image*/
@media only screen and (min-width: 640px) {
#home_index #create_list > li {
    display: none;
}
#home_index #create_list > li:nth-child(1), #home_index #create_list > li:nth-child(2),#home_index #create_list > li:nth-child(3), #home_index #create_list > li:nth-child(4) , #home_index #create_list > li:nth-child(5)  {
    display: block !important;
}}
/*6 image*/
@media only screen and (min-width: 1024px) {
#home_index #create_list > li {
    display: none;
}
#home_index #create_list > li:nth-child(1), #home_index #create_list > li:nth-child(2),#home_index #create_list > li:nth-child(3), #home_index #create_list > li:nth-child(4) , #home_index #create_list > li:nth-child(5), #home_index #create_list > li:nth-child(6)  {
    display: block !important;
}}
@media only screen and (max-width: 700px) {
div#ask_filter_popup {
    -ms-transform: scale(calc(var(--Innerwidth) / 700));
    -webkit-transform: scale(calc(var(--Innerwidth) / 700));
    -moz-transform: scale(calc(var(--Innerwidth) / 700));
    -o-transform: scale(calc(var(--Innerwidth) / 700));
    transform: scale(calc(var(--Innerwidth) / 700));
}}


/*---------- PRODUCT CATALOG DISPLAY -------------------------------------
-------------------------------------------------------------------------*/
/* Settings for Vertical Catalog Mode */
/*Menu select color*/
ul.subcategories li.alt, body div.normal-list ul li.alt {
  background: var(--column-background-color);
}
/* Product Title */
.det_title a {
   width: 175px;
}
/* Adjust Vertical Display */
.row li .details ul li.det_title:first-child + li.det_price {
    padding-top: 0px;
}
.vertical_cat .details {
   overflow: hidden;
}
.vertical_cat .details .det_price a {
   width: 175px;
   text-transform: capitalize !important;
   font-size: .875rem !important;*/
}
.vertical_cat .details .det_price span {
   font-size: .875rem !important;
   font-weight: bold;
}
span.rrp {
   text-decoration: line-through;
   font-weight: 100;
   color: red!important;
}
li.det_price:after {
   content: " and Lower";
   font-style: italic;
   font-size: .875rem !important;
}
#create_list li .details ul {
   margin: 0 !important;
}
/* Fix product spacing */
.vertical_cat .details ul.color_panel {
   margin-top: 0px !important;
   height: 80px;
   overflow-y: scroll;
}
.row li.display {
    margin: 0 5px 20px 5px !important;
   }
/* shirt colors and sizes*/
ul.color_panel::-webkit-scrollbar-thumb:hover {
   background-color: #97948d;
}
ul.color_panel::-webkit-scrollbar-button {
   background-color: #ffffff;
}
ul.color_panel::-webkit-scrollbar-thumb {
   background-color: rgba(128, 119, 102, 0.38);
}
ul.color_panel::-webkit-scrollbar-track {
   background-color: #ebe9dd!important;
}
ul.color_panel::-webkit-scrollbar {
   width: 12px!important;
}
.vertical_cat .details ul.sizing {
   margin-top: 3px;
}
/* Adjust Category Display */
#cat_list_products div.details {
   height: auto !important;
}
#cat_list_products div.block {
   overflow: hidden !important;
}
#cat_list_products .det_title a {
   white-space: nowrap !important;
}


/*---------- FEATURED PRODUCTS --------------------------------------------
-------------------------------------------------------------------------*/
#feature_featured .block, #featured-products .block {
    position: relative;
}
#feature_featured .block::after, #featured-products .block::after {
    background-image: url("/uploads/10343058/File/sale_ribbon_left.png");
    background-repeat: no-repeat;
    background-size: 90px auto;
    content: "";
    height: 90px;
    left: -5px;
    position: absolute;
    text-align: center;
    top: -5px;
    width: 90px;
    z-index: 10;
}
#tab_featured a {
    text-transform: capitalize;
}
#tab_featured a::after {
    content: " on sale!";
}
#feature_featured .det_price {
    color: red;
    font-size: 1.2em !important;
}


/*---------- DESIGNER SETTINGS --------------------------------------------
-------------------------------------------------------------------------*/
/*Make Designer Full Screen & Pin to Top */
.designer_container_large {
   background: #fff !important;
   position: absolute;
   z-index: 1000;
   width: 1100px !important;
   height: 720px;
   left: calc(50% - 555px);/*includes padding*/
   padding: 5px 5px 0px 5px !important;
}
body#designer {
   margin-top: -3000px;
   background: #fff;
}
@media only screen and (orientation: portrait) {
.designer_container_large, .designer_container_large .d_c_right, .designer_container_large .d_c_layers {
   width: 600px!important;
   left: 0 !important;
   top: 5px!important;
}
.designer_container_large {
   left: calc(50% - 305px)!important;
}}
@media only screen and (orientation: landscape) {
body#designer {
   overflow: auto!important; /*override js popup hide scroll*/
}}
/* ---------- DESIGNER FONTS ---------- */
div#used_palette_inset, .tab_pane_designer, .designer_container_large .cart_container .price, .qty_price label, .popup .button[value="Cancel"], .popup a, .popup input, .popup select, .popup textarea, .popup .popup_int, .foot .cancel_button, #content .popup h2, #content .popup h3, #content .popup h4, #content .popup h5, .designer_container_large .d_title .help, .designer_container_large .d_title .help:hover, .designer_container_large .area_view, .designer_container_large .view_controls ol a, .designer_container_large .area_view ul.views li label, .area_view ul li label, .designer_container_large #no_items h3, .designer_container_large #no_items, .designer_container_large #not_cart, #content .designer_container_large .d_title h3, #content .designer_container_large .d_c_right #m_properties h3, #content .designer_container_large .d_c_right #not_cart h3, #content .designer_container_large .d_c_right .d_c_layers > h3, #content .designer_container_large #views_container h4, #content .designer_container_large #area_selector_container h4 {
   color: var(--text-color);
}
.designer_container_large #m_cart a, .designer_container_large .d_c_cart_buttons .button:hover, .designer_container_large .d_c_cart_buttons .button {
     color: var(--link-color) !important;
     font-weight: bold;
}
.designer_container_large .d_title h3 span {
font-size: 1rem !important;
max-width: 500px;
}

/* ---------- DESIGNER BUTTONS ---------- */
/*All Buttons*/
.designer_container_large .d_title .help, .designer_container_large .view_controls ol#save_div li a, .designer_container_large .designer_options .button, .designer_container_large .add_items ul a, .designer_container_large .d_g_button_large {
    font-weight: bold;
}
/*Fix Unstyled Buttons*/
.designer_container_large .button {
    background: var(--button-background-color);
    color: var(--button-text-color);
}
.designer_container_large .button:hover {
    background: var(--button-background-color);
    color: var(--button-text-color);
    opacity: 75%;
}  
/*Designer Add Items Buttons*/
.designer_container_large .add_items ul a {
    padding: 0 39px 0 55px;
    line-height: 30px;
    margin-right: 0;
}
.designer_container_large .add_items ul a:hover, .designer_container_large .designer_options .button:hover {
    opacity: 0.75;
    text-decoration: none!important;
  }
body#designer ul#add_item_0 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    width: 600px;
    z-index: 9999;
}
li#add_item_text, li#add_item_image {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}
.designer_container_large .add_items ul {
    background: #fff;
    padding: 0;
}
.designer_container_large .add_items ul a:after {
    background-position: 0px -0px;
    background-size:  auto 25px;
    background-repeat: no-repeat;
    height: 25px;
    width: 35px;
    left: 0;
    top: 0;
    margin: 2px 0 0 10px;
}
.designer_container_large .add_items ul li#add_item_image a:after {
   background-position: 0px 0px;
   background-image: url('/uploads/10709143/File/add.art.svg');
   display: block;
}
.designer_container_large .add_items ul li#add_item_text a:after {
   background-position: 0px 0px;
   background-image: url('/uploads/10709143/File/add.text.svg');
   display: block;
}
.designer_container_large .add_items ul li#add_item_team_name a:after {
   background-position: 0px 0px;
   background-image: url('/uploads/10709143/File/add.name.svg');
   display: block;
}
/*Product Buttons*/
.designer_container_large h3 a {
    font-size: 1rem !important;
    font-weight: bold;
    text-align: center;
    padding: 3px 8px;
    text-decoration: none;
    background: var(--button-background-color);
    color: var(--button-text-color)!important;
    border-radius: 4px !important;
    margin: -5px 0 0 0;
    width: 125px;
}
a.change_product_link {
    margin-right: 10px !important;
}
.designer_container_large h3 a:before {
    display:none;
    color: transparent;
    margin: 0;
}
.designer_container_large .designer_options li .button {
   width: 100px;
}
/*Options Buttons*/
ul.designer_options a.button {
   margin-right: 7px;
}


/* ---------- DESIGNER LEFT SIDE -----------------------------------------
-------------------------------------------------------------------------*/

/* ---------- DESIGNER PRODUCT VIEWS (TOP) ---------- */
/*Move Views to Top - add Store Logo (var will not work in IE, uses js backup)*/
.designer_container_large .area_view {
    /*background-image: var(--store-logo);added by JS for wider compatability*/
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: contain !important;
    margin-top: 17px !important;
    width: 110px;
    height: 55px;
    position: absolute;
    top: 0;
}
div.clearfix.d_c_cart_buttons{
   position: relative;
}
/*Reposition Customize Area*/
.designer_container_large .add_items {
    margin-top: 55px;
}
/*Reposition Add Art Buttons*/
body#designer div.d_customize {
    height: 600px;
}
/*Views & Areas Position*/
#designer #product_views {
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    width: 500px!important;
    height: 125px;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-top: 23px;
}
.designer_container_large #views_container {
   float: left;
   margin-right: -100px;
   height: 0px;
   margin-left: 125px;
   margin-top: -25px;
}
.designer_container_large #area_selector_container {
   padding-left: 0px;
   margin-left: 390px;
   white-space: nowrap;
}
div#area_selector_container ul.areas {
    height: 90px;
    overflow-y: auto;
    overflow-x: hidden;
}
ul.areas li label {
    line-height: 20px!important;
}
ul.areas input[type="radio"] {
    height: 20px;
}
ul.areas input[type="radio"]:checked + label {
    color: var(--button-background-color);
    font-weight: bold!important;
    font-size: 1rem!important;
}
#content .designer_container_large #views_container h4 {
    margin-bottom: 3px !important;
    margin-top: -3px !important;
    font-size: 1rem !important;
    background: none !important;
    border: none !important;
    display: none;
}
#content .designer_container_large #area_selector_container h4 {
    background: none;
    border: none;
    display: none;
}
.designer_container_large .area_view ul.views li.d_layout_selected:hover::before, .designer_container_large .area_view ul.views li.d_layout_selected::before {
    border-width: 3px;
    margin: -3px;
}
.designer_container_large .area_view ul.views li:hover:before, .designer_container_large .area_view ul.views
li.d_layout_selected:hover:before, .designer_container_large .area_view ul.views li.d_layout_selected:before {
    border-color: var(--link-color) !important;
    border-width: 3px;
    margin: -3px;
}
.designer_container_large .area_view ul.views li, .designer_container_large .area_view ul.views li.d_layout_selected {
    margin: 2px 15px 2px 6px;
}
.designer_container_large #show_preview {
    padding-top: 30px;
}
.designer_container_large .area_view ul.views li {
    box-shadow: none;
    border: none;
    background: transparent;
    float: left;
}
.designer_container_large .area_view ul.views li label {
    white-space: nowrap;
    width: 90px;
    overflow: hidden;
    font-size: 1rem;
    padding: 0;
}
#content .designer_container_large .d_title h3 {
    margin: -10px 0 0 0;
    max-width: 475px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.5rem;
}
#designer_container > div:nth-child(2) > div.d_c_left > div.d_title > a {
    margin-top: 5px;
    margin-right: 5px;
}
.designer_container_large #views_container h4, .designer_container_large #area_selector_container > h4 {
    margin: 5px 0 3px 0!important;
}
.designer_container_large ul#product_views, .designer_container_large div#area_selector_container ul.areas {
    margin-top: -5px;
}
.powered_by {
display: none;
}
@media only screen and (orientation: portrait) {
.designer_container_large .d_title .help {
  margin-right: 50px!important;
}}


/* ---------- DESIGNER CANVAS ------------------ */
.designer_container_large #d_pane, .designer_container_large .d_customize_canvas .height_setter {
    height: 625px !important;
}
#designer_toolbar {
    height: 25px !important;
}
.designer_container_large .view_controls {
    height: 25px !important;
}
div#used_palette_inset {
    width: 50px!important;
    left: 550px!important;
    font-weight: bold;
    font-size: 0.5rem!important;
    top: 25px !important;
}
span#used_palette_inset_count {
    font-size: 1rem !important;
}
/*Enlarge Corner Selectors*/
img[alt*="Sizer"], img[alt*="preload image"] {
  width:20px;
}
@media only screen and (max-device-width: 1366px){
img[alt*="Sizer"], img[alt*="preload image"] {
  width:25px;
}}
@media only screen and (max-device-width: 768px){
img[alt*="Sizer"], img[alt*="preload image"] {
  width:35px;
}}
@media only screen and (orientation: portrait) {
div#used_palette_inset {
    -ms-transform: scale(1.50);
    -webkit-transform: scale(1.50);
    -moz-transform: scale(1.50);
    -o-transform: scale(1.50);
    transform: scale(1.50);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}}

/* ---------- DESIGNER RIGHT SIDE ----------------------------------------
-------------------------------------------------------------------------*/
.designer_container_large .d_c_right {
    width: 495px;
    margin: 34px 0 0 5px;
}
#designer_container #not_cart > h3, #designer_container #m_properties > h3,  #tab_pane_designer > div.d_c_layers > h3 {
    padding: 10px 5px!important;
}

/* ---------- CLOSE BUTTON ------------------ */
#close_designer {
    display: block;
    top: 5px;
    margin: 5px 5px 0 0;
    width: 25px;
    height: 25px;
    border-radius: 4px!important;
    background: var(--button-background-color);
}
#close_designer:hover {
    background: var(--button-background-color);
    opacity: 0.75;
}
#close_designer:after {
    margin: -15px 0 0 5px;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
@media only screen and (orientation: portrait) {
#close_designer {
    width: 35px;
    height: 35px;
}
#close_designer:after {
    margin: -10px 0 0 10px;
    background-size: 25px;
}
.designer_container_large .d_c_cart_box {
      padding-top: 32px;
}}

/* ---------- PRODUCT OPTIONS ---------------- */
.designer_container_large #des_opt_sel_extra_fields {
    max-width: 300px;
    font-size: 0.75rem !important;
    word-wrap: break-word;
}
.designer_container_large .designer_options li label, .designer_container_large li .color_name {
    font-size: 1rem !important;
    font-weight: bold;
    max-width: 300px;
}
#designer #qty_container:after {
    white-space: pre-wrap;
    font-size: 0.85rem;
    font-weight: normal;
    content: "Price breaks at 6, 12, 24, 48, 96, 72, 144, 250, 500, 1000, 2500, 5000, 10K \A Enter a Quantity Above to View Price Breaks";
}

/* ---------- PROPERTIES --------------------- */
div#properties_container {
    background: url(/uploads/11430423/File/designer_select_art_mssg.svg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 50px;
}
.managepaneoff, .managepaneoff2 {
    background: #fff !important;
}
/*Text Options*/
.font_options .cell {
    width: 200px;
}
.mp_textarea {
    width: 97%!important
}
.mp_font_container {
    width: 100px;
}
.mp_font_container img {
    -ms-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -ms-transform-origin: left;
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;
}
.mp_font_selector {
    float: left;
    overflow: hidden;
    width: 160px;
}
.mp_edit_button .change {
    font-size: 1.25rem !important;
}
.managepane_body div.ratio input {
    width: 20px;
    height: 20px;
}
.font_options .mp_align {
    float: left;
    padding-right: 10px;
}
/*Images*/
div#properties_container .layer_container label {
    font-size: 1rem;
}
div#properties_container ul.image_options li.colors label {
    font-size: 0.5rem!important;
}
ul.image_options {
    width: 250px;
}
ul.image_options li img {
    -ms-transform: scale(1.50);
    -webkit-transform: scale(1.50);
    -moz-transform: scale(1.50);
    -o-transform: scale(1.50);
    transform: scale(1.50);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
.layer_container .image_options .colors {
    -ms-transform: scale(1.5);
    -ms-transform-origin: top left;
    -webkit-transform: scale(1.5);
    -webkit-transform-origin: top left;
    transform: scale(1.5);
    transform-origin: top left;
    width: 35%;
    padding: 10px 0 20px 20px;
}
li.alert_digitization_notice:before {
    content: "Lower Your Price by Reducing Colors for Screen-Print or Image Size for Embroidery. \A";
    white-space: pre-wrap;
    font-weight: bold;
}
/*Groups*/
.layer_right.layer_right_2_column {
    width: 175px !important;
    float: right!important;
}
.layer_left.layer_left_small {
    width: 125px;
}
.layer_left.layer_left_small .image_options .colors {
    padding-left: 0;
}

/*Advanced Pane*/
.advanced_button {
    bottom: unset;
    margin: -35px 5px 0 0;
}
.et_container .et_content .et_elist {
    float: left;
    width: 300px;
}
.designer_container_large .et_container .et_tabs li {
    border-width: 0;
    background: none;
}
.designer_container_large .et_container .et_content {
    background: none;
}
.designer_container_large .et_container .et_tabs {
    margin-bottom: -1px;
}
.designer_container_large .et_container li.et_selected_tab {
    border-width: 1px 1px 0 1px !important;
    background: var(--button-background-color);
}
.designer_container_large .et_selected_tab a, .designer_container_large .et_selected_tab a:hover {
    color: var(--button-text-color)!important;
    text-decoration: none !important;
}
/*Properties - Mobile*/
@media only screen and (orientation: portrait) {
div#properties_container {
    -ms-transform: scale(1.90);
    -webkit-transform: scale(1.90);
    -moz-transform: scale(1.90);
    -o-transform    -o-transform: scale(1.90);
    transform: scale(1.90);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    width: 52.63%;
    margin-bottom: 52.63%!important;
}
.advanced_button {
    -ms-transform: scale(.65);
    -webkit-transform: scale(.65);
    -moz-transform: scale(.65);
    -o-transform: scale(.65);
    transform: scale(.65);
    -ms-transform-origin:  5px 40px;
    -webkit-transform-origin:  5px 40px;
    -moz-transform-origin:  5px 40px;
    -o-transform-origin:  5px 40px;
    transform-origin: 5px 40px;
}
.et_container .et_content .et_props {
     width: auto;
}
.font_options .cell {
    width: 300px!important;
    padding: 0 0 10px;
}
ul.image_options {
    height: 125px;
}}
@media only screen and (orientation: landscape) {
.designer_container_large .tab_pane_designer {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 375px;
}}

/* ---------- LAYERS --------------------------- */
.designer_container_large .d_c_layers {
    position: relative;
    width: auto;
    height: 375px;
}  
.designer_container_large #m_customize_pane {
    max-height: 225px;
    overflow: auto;
}
.designer_container_large .managepane_header {
    height: 35px;
}
.managepane_header .mp_title li.title {
    padding-left: 75px!important;
    line-height: 2;
}
.designer_container_large .managepane_header .mp_title li {
    padding: 4px 0;
}
.designer_container_large .managepane_header .mp_title li.dimension {
    line-height: 3;
}
.managepane_header .mp_title li.icon img {
    width: initial;
    max-width: 75px;
    height: 25px;
}
#tab_pane_designer > div.d_c_layers > div.view_controls.alt {
    position: absolute;
    width: 300px;
    top: 0px;
    right: 5px;
    text-transform: capitalize;
}
.designer_container_large .view_controls ol#save_div li a#save_working_version_link {
    border-radius: 4px!important;
    padding: 3px 8px;
    border-right: 2px solid whitesmoke !important;
}
.designer_container_large .view_controls ol#save_div li a#email_link {
    border-radius: 4px!important;
    padding: 3px 8px;
    border-left: 2px solid whitesmoke !important;
}  
/*Layers - Mobile*/
@media only screen and (orientation: portrait) {
#designer .layer_right {
    float: left;
}
.designer_container_large .managepane_header .mp_control {
    margin: 2px 12px 0 0;
    -ms-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}
.designer_container_large .managepane_header {
    -ms-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    width: 472px;
    margin-bottom: 15px!important;
}}


/* ---------- DESIGNER POPUPS --------------------------------------------
-------------------------------------------------------------------------*/
.popup .pagination, .popup .pagination .next_page, .popup .pagination .prev_page,  .popup div.foot a {
    font-size: 1.125rem !important;
    color: var(--text-color)!important;
}
#library_browser > div > div.select_product_hierarchy.hierarchy.span3 > div > h3, #library_browser #products_heading {
    font-size: 1.25em;
}

/* ---------- ADD STORE LOGO (see JS) --------------------- */
div#poplogo {
    width: 150px; /*170 w/padding*/
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    background-position-y: 0px;
    position: absolute;
    margin-left: calc(50% - 85px);
    margin-top: -7px;
}
.popup .popup_int h3, .popup .int h3, div#limited_colors_popup .popup_content {
    padding-top: 45px!important;
}

/* ---------- ADD ART & TEXT ------------------------ */
/*styles general */
.no_items .disabled a {
    display: none; /*hide unvailable decoration methods*/
}
#select_type_popup .no_items a {
    height: 85px!important;
    font-weight: bold;
    background: #f2f2f2 !important;
    color: var(--button-background-color)!important;
    border: 1px solid var(--button-background-color) !important;
}
#add_image_link_12 > span, #add_text_link_12 > span, #add_image_link_1 > span,#add_teamname_link_12 > span,#add_text_link_1 > span, #add_image_link_8 > span, #add_text_link_8 > span, #add_image_link_3 > span, #add_text_link_3 > span {
    line-height: 14px;
    padding: 10px 10px 10px 95px !important;
    text-align: left !important;
    height: 75px !important;
}
/*styles by method*/
#add_text_link_12 > span, #add_image_link_12 > span, #add_teamname_link_12 > span {
    background: url(/uploads/10835338/Image/transfer-icon100.png) 10px calc(50% - 5px) no-repeat !important;
    background-size: 75px !important;
}
#add_image_link_12 > span:after, #add_text_link_12 > span:after, #add_teamname_link_12 > span:after {
    content: "\A Personalize it. Add names and numbers using basic fonts and standard colors.";
    font-size: 0.85rem !important;
    font-weight: 300;
    white-space: pre-line;
    text-transform: none;
    line-height: 1.1rem;
}
#add_text_link_1 > span, #add_image_link_1 > span {
    background: url(/uploads/10835338/Image/fullcolor-icon100.png) 10px calc(50% - 5px) no-repeat !important;
    background-size: 75px !important;
}
#add_image_link_1 > span:after, #add_text_link_1 > span:after {
    content: "\A Unlmited colors. Best for less than 12 or detailed illustrations & photos. Printed digitally or 4-color process screen-print.";
    font-size: 0.85rem !important;
    font-weight: 300;
    white-space: pre-line;
    text-transform: none;text-transform: none;
    line-height: 1.1rem;
}
#add_text_link_8 > span, #add_image_link_8 > span {
    background: url(/uploads/10835338/Image/screenprint-icon100.png) 10px calc(50% - 5px) no-repeat !important;
    background-size: 75px !important;
}
#add_image_link_8 > span:after, #add_text_link_8 > span:after {
    content: "\A Most popular. Solid areas and simple gradations. Best price for 1-4 colors on 12 pieces or 1-8 colors on 24 pieces or more.";
    font-size: 0.85rem !important;
    font-weight: 300;
    white-space: pre-line;
    text-transform: none;
    line-height: 1.1rem;
}
#add_text_link_3 > span, #add_image_link_3 > span {
    background: url(/uploads/10835338/Image/embroidery-icon100.png) 10px calc(50% - 5px) no-repeat !important;
    background-size: 75px !important;
}
#add_image_link_3 > span:after, #add_text_link_3 > span:after {
    content: "\A Elegance and professionalism. Your logo is sewn using an extensive offering of thread colors. Image size will affect price.";
    font-size: 0.85rem !important;
    font-weight: 300;
    white-space: pre-line;
    text-transform: none;
  
  line-height: 1.1rem;
}
@media only screen and (orientation: landscape) {
div#select_type_popup {
    min-width: 450px;
}}

/* ---------- PRODUCT INFO, SAVE, SHARE, TEAMNAME, OPTIONS, MISC -------------- */
.popup, #dynamic_popup, #create_account_popup, #edit_teamname_popup, #custom_fields_popup {
    top: 0!important;
    margin-top: 0!important;
    bottom: 0!important;
    margin-bottom: 0!important;
    position: fixed!important;
    overflow: auto!important;
}
/*fix double scale on class in js*/
div#save_working_version_form {
    transform: scale(1)!important;
}

/* ---------- SELECT ARTWORK, PRODUCT SELECTOR, FONT SELECTOR --------------- */
div#select_product_popup, #pwSelectFont_0_8, #decoration_libraries  {
    width: 100% !important;
    max-width: 100%!important;
    top: 0!important;
    margin-top: 0!important;
    bottom: 0!important;
    margin-bottom: 0!important;
    position: fixed!important;
    overflow: auto!important;
}
/* ---------- SELECT ARTWORK ------------------------ */
.popup .library_browser .toolbar {
    margin: -20px 0 0 0;
    padding: 0;
}
.popup .library_browser .toolbar li label {
    padding: 0;
}
h3#d_sel_heading {
    line-height: 1rem;
}
div#decoration_libraries.popup .popup_int h3:after {
    white-space: pre-line;
    font-size: 0.85rem !important;
    font-weight: normal;
    content: "\A Choose from Clipart, Templates, Facebook, Instagram or Upload Your Own. \A accepted formats: SVG, CDR, PDF, EPS, PNG, JPG, GIF";
    }
#decoration_libraries .modify_image {
    top: 50%!important;
}
.modify_image ul li label {
    float: none;
    width: 100%;
    font-weight: bold;
    padding-right: 10px;
}
#image_details_8 > div.interior > div.submit > a {
    padding-bottom: 10px;
}


/* ---------- PRODUCT SELECTOR --------------------- */
#select_product_popup #select_product_popup div.library_browser ul.decoration_list li img {
    width: 150px !important;
}
.popup .library_browser .interior {
    margin-top: -50px;
}

/* ---------- CART --------------------------------- */
div#show_cart_popup {
    width: 50%;
    left: 25%!important;
    margin-left: 0!important;
}
@media only screen and (max-width: 1023px) and (orientation: landscape) {
div#show_cart_popup {
    width: 100%;
    left: 0%!important;
    margin-left: 0!important;
}}
@media only screen and (orientation: portrait) {
div#show_cart_popup {
    width: 100%;
    left: 0%!important;
    margin-left: 0!important;
}}

/* ---------- COLOR PICKER ------------------------ */
@media only screen and (orientation: landscape) {
.color_picker_container {
    top: 0!important;
    bottom: 0!important;
    left: calc(50% - 148.5px);/*dynamic change by JS*/
}}
@media only screen and (orientation: portrait) {
.color_picker_container {
    -ms-transform: scale(2)!important;
    -webkit-transform: scale(2)!important;
    -moz-transform: scale(2)!important;
    -o-transform: scale(2)!important;
    transform: scale(2)!important;
    top: 0!important;
    left: calc(50% - 297px)!important;
    max-height: calc(100vh / 2)!important;
    max-height: calc(var(--Innerheightpx) / 2)!important;
}}

/* ---------- PORTRAIT SCALE POPUPS ------------------------ */
@media only screen and (orientation: portrait) {
div#type_colors_popup, div#size_field_popup, #new_teamname_popup{
    -ms-transform: scale(2)!important;
    -webkit-transform: scale(2)!important;
    -moz-transform: scale(2)!important;
    -o-transform: scale(2)!important;
    transform: scale(2)!important;
    -ms-transform-origin: top;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    width: 50vw!important;
    max-height: calc(100vh / 2)!important;
    max-height: calc(var(--Innerheightpx) / 2)!important;
}
div#select_type_popup, #new_text_popup, div#new_layout_popup, #limited_colors_popup {
    -ms-transform: scale(1.50)!important;
    -webkit-transform: scale(1.50)!important;
    -moz-transform: scale(1.50)!important;
    -o-transform: scale(1.50)!important;
    transform: scale(1.50)!important;
    -ms-transform-origin: top;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    width: 66.7vw!important;
    max-height: calc(100vh / 1.5)!important;
    max-height: calc(var(--Innerheightpx) / 1.5)!important;
   
}}

/* ---------- DESIGNER MOBILE SINGLE PAGE APP ----------------------------
-------------------------------------------------------------------------*/
.designer-option-off {
    display: none;
}
.designer-option-on {
    display: block!important;
    width: 100%;
    background: white;
    height: 50px;
    bottom: -3px;
    z-index: 5000;
    position: fixed;
}
.designer-option-bttn {
    background: var(--button-background-color);
    width: calc(33.33% - 4px);
    display: inline-block;
    color: var(--button-text-color);
    font-size: 2rem;
    text-align: center;
    border: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
}
.designer-option-bttn:hover {
    opacity: 0.75;
}
/*set to designer single page view - see js*/
@media only screen and (orientation: portrait) {
body#designer {
    max-height: calc(var(--Innerheightpx) - 60px)!important;
    overflow: hidden!important;
    
}
.designer_container_large .d_c_right {
    max-height: calc(var(--Innerheightpx) - 60px)!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
}
#designer .designer-option-off {
    display: block!important;
    width: 100%;
    background: white;
    height: 50px;
    bottom: -3px;
    z-index: 2500;
    position: fixed;
}
body#designer #designer_container div.d_control, body#designer .designer_container_large #not_cart   {
    display:none;
}
div#popup_loading {
    width: 300px!important;
    left: 0%!important;
    margin-left: 150px!important;
}}
/* set back to default for whole page view - see js */
@media only screen  and (orientation:landscape) {
#designer_container div.d_control, .designer_container_large #not_cart, div.d_customize, .designer_container_large .add_items, #designer_container div.d_c_cart_box, #product_views, #area_selector_container, img[alt*='Sizer'], img[alt*='preload image']  {
   display: block!important;
}
#designer_container div.d_c_cart_box, #designer_container div.d_control {
   margin-top: 0!important;
}
#designer_container {
  z-index:1000!important;
}}

/* ---------- CAMPAIGN PAGE ----------------------------------------------
-------------------------------------------------------------------------*/
/*General*/
div.campaign-wizard {
    margin-top: -100px;
    width: 100%!important;
}
.campaign-steps {
    width: 100%!important;
}
.campaign-wizard .content {
    min-height: 600px!important;
    margin-top: 0px!important;
}
.campaign-wizard, .campaign-wizard h1, .campaign-wizard h2, .campaign-wizard h3, .campaign-wizard p, .campaign-wizard .campaign-steps li a, .campaign-wizard label, .campaign-wizard .wizard-step input, .campaign-wizard .wizard-step textarea {
    color: #808080!important;
}
/*Select Product*/
.campaign-wizard #select_product_listing div.int {
    overflow: unset!important;
    max-height: unset!important;
    height: unset!important;
}
.campaign-wizard div#library_categories_scroll {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 350px;
}
.product_categories ul {
    margin-left: 12px;
}
.product_categories ul li label, .product_categories ul li span {
    padding: 0 10px;
    line-height: 24px;
}
.campaign-wizard .product_categories ul li span a {
    font-size: 14px;
    line-height: 24px;
}
.product_categories ul li span a.divider, .product_categories ul li span a.null, .product_categories ul li span a.close, .product_categories ul li span a.open {
    vertical-align: middle;
}
#campaign_step_0 > div > p:after {
    content: "\AWant multiple styles? Pick One and Reply to your Confirmation email with details & we'll add the products!";
    color: #1682E2;
    white-space: pre-line;
}
/*Design*/
.campaign-wizard .advanced_button {
    background: #1682e2;
    bottom: 0;
    margin: -35px 0px 0 0;
}
.campaign-wizard .advanced_button a {
    color: #fff;
}
.campaign-wizard .managepane_header {
    height: 35px;
    background: aliceblue;
    border: #1682e2 solid 1px;
}
.campaign-wizard .managepaneselected {
    border: 2px solid #1682e2;
}
.campaign-wizard .managepaneoff, .campaign-wizard .managepaneoff2 {
    border: none;
}
.campaign-wizard .managepane_header .mp_title li.dimension {
    padding: 10px 0 0 50px;
    font-size: 12px;
}
.campaign-wizard .layer_container .image_options .colors {
    -ms-transform: scale(1.5);
    -ms-transform-origin: 0px;
    -webkit-transform: scale(1.5);
    -webkit-transform-origin: 0px;
    transform: scale(1.5);
    transform-origin: 0px;
    width: 85%;
    padding: 55px 0 10px 0;
}
.campaign-wizard #manage_pane_container input[type="text"] {
    font-size: 10px!important;
    height: 20px;
}
.campaign-wizard .mp_font_selector {
    width: 125px;
}
.campaign-wizard .font_options .cell {
    width: unset;
}
.campaign-wizard .button, .campaign-wizard .popup .button {
    background-color: #1682e2;
}
.campaign-wizard #decoration_libraries.popup .library_browser .hierarchy .product_categories, .campaign-wizard div#decoration_list_container_8, .campaign-wizard div#decoration_list_container_3, .campaign-wizard div#decoration_list_container_1 {
    max-height: unset!important;
    height: calc(100vh - 290px)!important;
}
body:not(#designer) .library_browser.font .listing ul, body:not(#designer) .library_categories, body:not(#designer) .popup .library_browser .hierarchy {
    max-height: unset!important;
    height: calc(100vh - 200px)!important;
}
body:not(#designer) #pwSelectFont_0_8, body:not(#designer) #pwSelectFont_0_8, body:not(#designer) #decoration_libraries {
    overflow: unset!important;
}
@media only screen and (max-height: 450px) {
.campaign-wizard #decoration_libraries.popup .library_browser .hierarchy .product_categories, .campaign-wizard div#decoration_list_container_8, .campaign-wizard div#decoration_list_container_3, .campaign-wizard div#decoration_list_container_1, body:not(#designer) .library_browser.font .listing ul, body:not(#designer) .library_categories, body:not(#designer) .popup .library_browser .hierarchy {
   min-height: 350px;
}}
@media only screen and (orientation: landscape) {
body:not(#designer) .color_picker_container {
    top: 0!important;
    bottom: 0!important;
    left: calc(50% - 148.5px)!important;
}}
body:not(#designer) .color_picker_container .color_picker {
    margin: 0;
}
/*Goal*/
.wizard-step.campaign_goal {
    height: 378px;
}
.campaign-wizard .goal_input, .campaign-wizard .campaign_detail select {
    height: 30px!important;
}  
#campaign_step_2 > div > div.wizard-step.campaign_goal > div.row-fluid.clearfix > label {
    float: right!important;
    margin: -16px 15px 0 0!important;
}
.wizard-step.available_colors:before {
    content: "\25C0- - - Limit the product colors you offer!";
    float: right;
    font-size: 1.5rem;
    color: #1682E2;
    font-weight: 600;
    text-indent: -575px;
}
.campaign-wizard .wizard-step .profit label#campaign_estimated_total_profit {
    font-size: 30px !important;
    color: #1682e2 !important;
}
/*Add Details*/
#campaign_step_3 > div > div.wizard-step.campaign_detail > div:nth-child(12) > label.label_small {
font-size: 0;
}
#campaign_step_3 > div > div.wizard-step.campaign_detail > div:nth-child(12) > label.label_small:before {
content: "Recommended size 2000x150px";
font-size: 12px;
}
#campaign_step_3 > div > p:after, #campaign_step_4 > div > p:after {
    content: "\AOrders ship USPS for $3.99 ea. and $2.00 ea additional shirt. You can choose Bulk Shipping to one location by replying to your Confirmation email.\AWant multiple styles? Pick One and Reply to your Confirmation email with details & we'll add the products!";
    color: #1682E2;
    font-weight: 100;
    white-space: pre-line;
}

/*---------- SAMPLE GALLERY -------------------------------------------------------
-------------------------------------------------------------------------*/
div#sample-gallery {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 75px 0 75px;
}
.samples {
    float: left;
    width: 200px;
    height: 200px;
    background-size: cover!important;
    background-position: center!important;
    margin-bottom: 20px;
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
    -webkit-text-stroke: .02rem #000000;
    font-weight: bold;
}
.samples:hover {
    width: 100px;
    height: 100px;
    margin: 50px 50px 0 50px;
    background-size: 150%!important;
    -ms-transform: scale(4);
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
    -ms-transform-origin: center;
    -moz-transform-origin: center;
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-transition: transform .25s ease-in-out;
    -moz-transition: transform .25s ease-in-out;
    -o-transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
    font-size: .5rem;
    z-index: 500;
    position: sticky;
}

