* 
{
   /* box-sizing: border-box; */
   font-family: Roboto;
   color: inherit;
}


sup 
{
   font-size: .7rem; 
   vertical-align:top;
   font-family: Arial;
}

body 
{
   margin: 0;                                                                          
}

span, a
{
   font-size: inherit;
}

h1, h2, h3, h4
{
   margin: 0;
   padding: 0;
}

header, footer, nav
{
   width: 100%;
}

table
{
   margin: auto;
   /* display: inline-block; */
}

img
{
   display: inline;
}


.atc_button{
   background-color: #d10000; /* deep navy blue */
   color: #ffffff;
   padding: 12px 24px;
   font-size: 1.4rem;
   border: none;
   border-radius: 8px; /* gently rounded corners */
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.2s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-decoration: none;
   white-space: nowrap;
}

.atc_button:hover {
   background-color: #ff1111;
   transform: translateY(-2px);
}

.atc_button:active {
   background-color: #001122;
   transform: translateY(0);
}


/* colors */
/* standard text color */
.tc_normal
{
   color: #555555;
}


.stc a
{
   text-decoration: none;
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
   margin-bottom: 20px;
}

.stc a:hover
{
   text-decoration: none;
   color: #888888;
}

.hback
{
   color: #555555;
   font-size: 3rem;
   padding: 5px;
}

/* menu colors */
.mc_orange { color: #f8951e !important; }
.mc_green { color: #7dc243 !important; }
.mc_blue { color: #32c1e9 !important; }
.mc_red { color: #e44647 !important; }
.mc_normal { color: #444444 !important; }
.mc_hilight { color: #000000 !important; }


/* div just inside of body that we determine to be the screen */
body .screen
{
   display: flex;
   width: 100% !important;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

/* the page is layed out so that there are rows of divs stacked for each section. e.g. header/body/footer */
body .screen > div
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
}

/* row to column div */
.rowtocolumn
{
   display: flex;
   flex-direction: row;
   /* justify-content: center; */
   align-items: middle;
   width: 100%;
   /* padding: 10px; */
}

.rtc_center
{
   justify-content: center;
   align-items: center;
}

.rowtocolumn > div
{
   padding: 10px;
}

.rowtocolumn img
{
   width: 100%;
}

/* the header background is full screen */
header div.hbg
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: #abbaab;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to bottom, #fefefe, #fafafa);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to bottom, #fefefe, #fafafa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   width: 100%;
}

/* the body and footer elements are less than the size of the screen */
.screen div.cbox
{
   width: 100%;
   display: flex;
   flex-direction: row;
}

/* the header elements are less than the width of the screen */
header div.hbox
{
   width: 100%;
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid #dddddd;
}

/* the header is two divs stacked on top of each other */
header div.hbar1
{
   display: flex;
   align-items: top;
   justify-content: flex-end;
   flex-direction: row;
   background-color: #f4ede9;
   padding: 0px 20px 0px 10px;
   margin: 0px;
}
header div.hbar11
{
   display: flex;
   flex-direction: row;
   background-color: #f4ede9;
   justify-content: center;
   margin: 0px;
   width: 100%;
   font-family: "Roboto";
}

@keyframes changeLetter {
  0% {
    content: "Hands Down The Best Online Framing Experience";
  }
  40% {
    content: "WebPictureFrames Is The Authority In Custom Framing";
  }
  80% {
    content: "2nd Generation Family Business Since 1974";
  }
}

header div.hbar11 > div
{
   font-size: 1.3rem;
   font-weight: bold;
   line-height: 20px;
   color: #666666;
   margin: 0px 0px 10px 0px;
   font-family: "Roboto";
&:after {
    animation: changeLetter 15s linear infinite alternate;
    display: block;
    content: "Hands Down The Best Online Framing Experience";
  }   
}



header div.hbar2
{
   display: flex;
   align-items: left;
   flex-direction: row;
   justify-content: center;
   padding: 15px 15px 15px 15px;
   background-color: #fffef8;
}

header .banner_text
{
   font-size: 2.5rem;
   text-align: center;
}

header .hma
{
   font-size: 1rem;
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #555555;
   padding-right: 20px;
   line-height: 15px;
}

/* phone number in header */
header .hph 
{
   text-decoration: none !important;   
   pointer-events: none;
   font-size: 30px !important;
   color: #8888ff;
}

/* logo in the header */
header div .hlogo
{
   display: flex;
   align-items: center;
   margin-left: 0px;
   margin-right: 5px;
   width: 300px;
   height: 28px;
}

header .hmma
{
   padding-left: 7px;
   display: none;
   float: left;
}

header .hmmb
{
   padding-left: 5px;
   display: none;
   float: right;
}

header .hmms
{
   padding-right: 7px;
   display: none;
   float: right;
}

header .hmmc
{
   padding-left: 7px;
   display: none;
   float: left;
}


/* mobile menu icon for activating the menu */
header .hmmi
{
   padding-right: 5px;
   display: none;
   float: right;
}
header .hmmi a
{
   text-decoration: none;
   font-size: 1.6rem;
}

#mmc
{
   float: right;
   font-size: 2rem;
   text-decoration: none;
   padding-right: 20px;
}


/* main header menu */
header .menu
{
   
   width: 100%;
   font-weight: bold;
   padding-left: 0px;
   min-width: 480px;
}


header .banner_sale 
{
   color: #ffffff;
   background-color: #cc2222;
   font-family: arial;
   font-weight: bold;
   text-decoration: none;
   font-size: 1rem;
   display: block;
   padding: 3px 6px;
}


.skusearch 
{
   display: flex;   
   float: right;
   justify-content: flex-start;
   width: auto;
}
.skusearch input[type=text] 
{
  padding: 5px;
  font-size: 1rem;
  border: 1px solid #555555;
  border-radius: 5px;
}
.skusearch button 
{
   float: right;
   background: transparent;
   cursor: pointer;
   width: 30px; 
   height: 30px;   
   border: none;
}

.skusearch button img
{
   width: 20px; 
   height: 20px;   
}

header .menu .skusearch a 
{
   display: none;
}
header .menu .skusearch button:hover 
{
}
header .menu a 
{
   display: inline-block;
   color: #555555;
   text-align: center;
   text-decoration: none;
   font-size: 1.2rem;
   margin-right: 20px;
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
   
   background-image: linear-gradient(#9e6060 0 0);
   background-position: 0 100%; /*OR bottom left*/
   background-size: 0% 1px;
   background-repeat: no-repeat;
   transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/   
}
header .menu a:hover 
{
   color: #9e6060;
   background-position: 100% 100%; /*OR bottom right*/
   background-size: 100% 1px;    
}

header .menu .menuitem > a:hover 
{
   color: #9e6060;                                                                    
   text-decoration: none;
}

header .menubox 
{
   display: flex; 
   flex-direction: row; 
   justify-content: right;
   align-items: center;
   min-width: 200px;
}
header .menu .menuitem
{
}
header .menu .menuitem:hover .dropdown 
{
   visibility: visible;
   opacity: 1;
   transition: all .3s ease-in;   
}

header .menu .menuitem:hover .dropdown > table
{
   width: 80%; 
   margin: auto; 
   padding-top: 20px; 
   padding-bottom: 20px;
}


/* dropdown menu */
header .dropdown 
{
   position: absolute;
   left: 0px;
   top: 96px;
   width: 100%;
   background-color: #fffef8;
   border-bottom: 1px solid #ffffff;
   visibility: hidden;
   opacity: 0;
   z-index: 1;    
   min-height: 100px;
   text-align: center;
}
header .dropdown .menuitem
{
   font-size: .8rem;
   font-weight: bold;
}
header .dropdown .menu_header_item
{
   font-size: 1.4rem !important;   
   color: #333333;
   font-weight: bold !important;
   display: block;
   width: 100%;
   padding: 0px 0px;
}

header .dropdown .menu_sub_item
{
   font-size: 1rem !important;   
   text-decoration: none;
   color: #626161;
   padding: 6px 3px 3px 3px !important;
   font-style: normal;
}


header .dropdown .flex_menu
{
   width: 100%;
   display: flex; 
   flex-direction: row; 
   justify-content: center; 
   flex-wrap: wrap;
}

header .dropdown .section
{
   padding: 40px;
   min-width: 300px;
}

header .dropdown .section .cpf_right_1 > tbody > tr:nth-child(1) > td
{
   text-align: center;
}

header .dropdown .section .cpf_right_1 > tbody > tr:nth-child(2) > td > a
{
   text-align: center;
   font-size: 1.6rem !important;
   font-weight: bold;
}

header .dropdown .section .cpf_right_1 > tbody > tr:nth-child(3) > td
{
   font-size: 1rem; 
   padding-top: 10px;
   font-weight: bold;
}

header .dropdown .section .cpf_right_1 > tbody > tr:nth-child(4) > td
{
   font-size: 1rem; 
   font-weight: normal;
}

header .dropdown .section .ff_right_1 > tbody > tr:nth-child(1) > td
{
   text-align: center;
}

header .dropdown .section .ff_right_1 > tbody > tr:nth-child(2) > td > a
{
   text-align: center;
   font-size: 1.6rem !important;
   font-weight: bold;
}

header .dropdown .section .ff_right_1 > tbody > tr:nth-child(3) > td
{
   font-size: 1rem; 
   font-weight: normal;
   padding-top: 15px;
}

header .dropdown .section .mats_right_1 > tbody > tr:nth-child(1) > td
{
   text-align: center;
}

header .dropdown .section .mats_right_1 > tbody > tr:nth-child(2) > td > a
{
   text-align: center;
   font-size: 1.6rem !important;
   font-weight: bold;
}

header .dropdown .section .mats_right_1 > tbody > tr:nth-child(3) > td
{
   font-size: 1rem; 
   font-weight: normal;
   padding-top: 15px;
}

header .dropdown .section .mats_right_2 > tbody > tr:nth-child(1) > td 
{
   text-align: center;
}

header .dropdown .section .mats_right_2 > tbody > tr:nth-child(2) > td > a
{
   text-align: center;
   font-size: 1.6rem !important;
   font-weight: bold;
}

header .dropdown .section .mats_right_2 > tbody > tr:nth-child(3) > td
{
   font-size: 1rem; 
   font-weight: normal;
   padding-top: 15px;
}

header .dropdown .section .supplies_right_1 > tbody > tr:nth-child(1) > td
{
   text-align: center;
}

header .dropdown .section .supplies_right_1 > tbody > tr:nth-child(2) > td > a
{
   text-align: center;
   font-size: 1.6rem !important;
   font-weight: bold;
}

header .dropdown .section .supplies_right_1 > tbody > tr:nth-child(3) > td
{
   font-size: 1rem; 
   font-weight: normal;
   padding-top: 15px;
}


/* header mobile menu */
.hmmdropdown
{
   background-color: #fffef8;
   position:fixed;
   width: 90%;
   height: 100vh;
   top: 0px;
   left:0px;
   z-index:20000;
   display: none;
   font-family: Arial;
   overflow-y: auto;
}

header .hmmdropdown nav
{
   height: 100%;
}

/* phone number in header */
header .hmmdropdown .hphmm
{
   text-align: center;
   margin-top: 20px;
}

header .hmmdropdown .hphmm a
{
   display: inline-block;
   text-decoration: none !important;   
   pointer-events: none;
   font-size: 1.4rem;
   color: #8888ff;
   font-family: arial;
}

header .hmmdropdown .cnt
{
   display: flex;  
   flex-direction: column; 
}

header .hmmdropdown .cnt > div
{
   font-size: 1.1rem;
   padding: 15px 10px;
   font-family: arial;
   border-bottom: 1px solid #d0d0d0;
   font-family: Arial;
}

header .hmmdropdown .cnt > div a
{
   display: inline-block;
   width: 100%;
   text-decoration: none;
   font-family: Arial;
}

header .hmmdropdown .cnt > div.ndd
{
   color: #ffffff;
   background: #967969;
   font-family: Arial;
}

header .hmmdropdown .cnt > div.dd
{
   color: #002D62;
   background: #fffef8;
   display: flex;
   flex-direction: column;
   width: 100%;
   font-family: Arial;
}

header .hmmdropdown .cnt > div.dd > div:first-child 
{
   width: 100%;
   display: flex;
   flex-direction: row;
}

header .hmmdropdown .cnt > div.dd > div:first-child > div:first-child
{
   width: 90%;
}

header .hmmdropdown .cnt > div.dd > div.ddm
{
   display: flex;
   flex-direction: column;
   margin: 8px 10px 0px 30px;
   display: none;
   font-family: Arial;
}

header .hmmdropdown .cnt > div.dd > div.ddm > div
{
   margin: 5px 0px;
   font-family: Arial;
}


header .hmmdropdown .cnt > div.dd > div:last-child img
{
   height: 8px;
}


/* header offer */
.hoff
{
   font-size: 1.2rem;
   color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   font-weight: bold;
   background: #625652;
   padding: 5px;
}
.hoff span
{
   padding-left: 20px;
}
.hoff a.freeshipping
{
   display: block;
   font-size: .7rem;
   color: #ffffff;
   text-decoration: none;
   border: 1px solid #ffffff;
   padding: 8px;
   border-radius: 10px;   
}

.hoff_packages
{
   font-size: 1rem;
   color: #ffffff;
   display: flex;
   justify-content: left;
   align-items: center;
   background: #bcd0dd;
   padding-left: 20px;
   display: flex;
}

.hoff_packages .dm
{
   border: 3px solid #f0f0f0;
   background: #ffffff; 
   color: #333333;
   margin: 3px 5px;
}

.hoff_packages .nm
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: bottom;
}

.hoff_packages .state
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: bottom;
}


.hoff_packages .whatisthis
{
   border: 3px solid #ffffff;
   text-decoration: none;
   padding: 10px;
   font-weight: bold;
   font-size: 1.2rem;
   margin-left: 10px;
}

.hoff_packages .manage_designs
{
   border: 3px solid #ffffff;
   text-decoration: none;
   padding: 10px;
   font-weight: bold;
   font-size: 1rem;
   margin-left: 10px;
}

.hoff_packages .details
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: top;
}

.hoff_packages .details_sel
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: top;         
}


.left_packages
{
   background-image: linear-gradient( #bcd0dd 0%, #ffffff 800px);
   font-size: .8rem;
   color: #ffffff;
   display: flex;
   justify-content: left;
   align-items: top;
   flex-direction: column; 
   display: flex;
}

.left_packages .dm
{
   border: 3px solid #f0f0f0;
   background: #ffffff; 
   color: #333333;
   margin: 3px 5px;
}

.left_packages .nm
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: bottom;
}

.left_packages .state
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: bottom;
}


.left_packages .whatisthis
{
   border: 3px solid #ffffff;
   text-decoration: none;
   padding: 10px;
   font-weight: bold;
   font-size: 1.2rem;
   margin-left: 10px;
}

.left_packages .manage_designs
{
   border: 3px solid #ffffff;
   text-decoration: none;
   padding: 10px;
   font-weight: bold;
   font-size: 1rem;
   margin-left: 10px;
}

.left_packages .details
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: top;
}

.left_packages .details_sel
{
   font-size: .8rem;
   text-align: center;
   color: #333333;
   vertical-align: top;
}


/* footer */
footer
{
   display: flex; 
   flex-direction: column; 
   align-items: center;
}

.footer
{
   display: flex;
   width: 100%;
   background-color: rgb( 50, 50, 50 );
   min-height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   padding: 20px;
}

.footer .link_rows
{
   width: 100%;
   display: flex;
   justify-content: center;
   flex-direction: row;
}

.footer .link_rows > div
{
   text-align: center;
   width: 100%;
}

.footer .link_rows > div > div:first-child
{
   color: #ffffff;
   font-weight: bold;
   font-size: 1rem;
}

.footer > .link_rows > div > div:last-child
{
   text-align: center;
   padding-top: 10px;
   padding-bottom: 20px;
   width: 100%;
}


.footer > .link_rows > div > div:last-child ul
{
   width: 100%;
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

.footer > .link_rows > div > div:last-child ul li
{
   padding-top: 10px;
}

.footer > .link_rows > div > div:last-child ul li a
{
    text-decoration: none;
    color: #ffffff;
    padding: 5px;
    font-size: .9rem;
    font-weight: normal;
}
.footer > .link_rows > div > div:last-child ul li a:hover
{
   text-decoration: underline;
}

footer > .link_rows
{
   text-align: center; 
   padding: 5px; 
   color: #ffffff;  
   align-items: bottom; 
   vertical-align: bottom; 
   width: 100%; 
   font-size: .9rem;
}


footer > div:last-child
{
   width: 100%;
   background: #000000;
   color: #f0f0f0;
   text-align: center;
}

.footer-social-icon
{
   width: 40px; 
   height: 40px;
}

.footer > div > div
{
   margin: 20px 20px;
   font-size: 1rem;
   font-weight: bold;
   text-align: center;
}
.footer > .link_rows
{
   flex-direction: column;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 0px 40px;
}

.footer > .logos
{
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   display: flex;
}

.footer > .social
{
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   display: flex;
   margin-bottom: 40px;
}


.footer > .social a
{
   display: block; 
   width: 35px; 
   height: 35px;
}

.footer > .privacy_statement
{
   width: 100%; 
   color: #f0f0f0;
   font-size: 1.2rem;
   text-align: center;
   font-family: Arial;
   margin-top: 20px;
}

.footer > .privacy_statement a
{
   font-size: 1.1rem;
}



.frame_author_text_box
{
   width: 100%;
   margin-top: 2px;
   margin-bottom: 10px;
}
.frame_author_text_box > div:first-child, .frame_author_text_box > div:last-child
{
   width: 100%;
   text-align: center;
   margin: auto;
   padding: 0px;
}
.frame_author_text_box #text
{
   width: 100%;
   color: #333333;
   font-size: 1.2rem;
   padding: 20px 40px 20px 40px;
   text-align: left;
   margin: 0px;
   line-height: 1.8rem;
   word-spacing: 3px;
}   

.frame_author_text_box #text list 
{
   color: #555555;
   font-size: 1rem;
}

.frame_author_text_box a
{
   color: #555555;
   font-weight: bold;
   font-family: arial;
   font-size: 1rem;
}




.page_header_text_box
{
   width: 100%;
   margin: auto;
}

.page_header_text_box a
{
   font-family: Arial;
   font-weight: bold;
   color: #333333;
}

.page_header_text_box #text
{
   width: 100%;
   background-color: #f8f8f8; 
   color: #222222;
   font-size: 1.2rem;
   padding: 30px;
   text-align: left;
   margin: 0px;
   line-height: 1.8rem;
   word-spacing: 5px;
   border-bottom: 1px solid #888888;
}   

.page_header_text_box #text list 
{
   color: #555555;
   font-size: 1rem;
}



.mib
{
   width: 100%;
   margin-bottom: 20px;
   text-align: center;
   margin: auto;
   margin-bottom: 20px;
   position: relative;
}

.mib .hero 
{
   background-image: url( '../site_images/fpb_images_002.jpg' );
   background-position: -140vw 0px;
   background-repeat:no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}   

.mib .hero a
{
   display: block;
   height: 25vw; 
   width: 100%;  
   margin: 0px;
   padding: 0px;
}   

.mib .htext
{
   padding-bottom: 10px;
   text-align: center;
   margin: 0px;
   font-size: 1.3rem;
   color: #555555;
}
.mib .htext a
{
   text-decoration: none;
} 

.mib .htext h1
{
   font-weight: bold;
   font-size: 1.5rem;
   color: #555555;
}

.mib > .hero img
{
   width: 100%; 
   margin: auto;
}   

.madb
{
   width: 100%; 
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}


.madb > div
{
   width: 100%; 
   display: flex;
   flex: 1;
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
   padding-bottom: 40px;
}

.madb > div > div
{
   display: flex;
   justify-content: start;
   align-items: center;
   flex-direction: column;
   overflow: off;
   width: 100%;
   height: 100%;
}

.madb > div > div > div
{
   width: 80%;
   text-align: center;
   padding-bottom: 3px;
}

.madb .b > a
{
   font-weight: normal;
   width: 100%;
   text-align: center;
   color: #333333;
   display: inline;
   margin: 0px;   
   padding-bottom: 0px;
   text-decoration: none;
   font-family: helvetica; 
   font-size: 2rem; 
   font-weight: bold;   
}

.madb .s > a
{
   font-weight: normal;
   width: 100%;
   text-align: center;
   color: #333333;
   display: inline;
   margin: 0px;   
   padding-bottom: 5px;
   text-decoration: none;
   font-family: helvetica; 
   font-size: 1.6rem; 
   font-weight: normal;   
}

.madb > div > div img
{
   display: inline; 
   width: 100%; 
   height: auto;
}

.madb .mpi
{
   display: flex;
   height: 29vw;
   width: 22vw;
}

.madb .mpi a
{
   display: block;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
}   


.madb #mpi_1
{
   background-image: url( '../site_images/fpb_images_002.jpg' );
   background-position: 0px 0px;
   background-repeat:no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.madb #mpi_2
{
   background-image: url( '../site_images/fpb_images_002.jpg' ) ;
   background-position: -24.5vw 0px;
   background-repeat:no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.madb #mpi_3
{
   background: url( '../site_images/fpb_images_002.jpg' );
   background-position: -47vw 0px;
   background-repeat:no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.madb #mpi_4
{
   background: url( '../site_images/fpb_images_002.jpg' );
   background-position: -70vw 0px;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.sadb
{
   width: 100%; 
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-wrap: wrap;   
   text-align: center;
}


.sadb > div
{
   width: 100%; 
   display: flex;
   flex: 1;
   justify-content: center;
   flex-direction: row;
   padding-bottom: 40px;
   flex-wrap: wrap;   
   text-align: center;
}

.sadb > div > div
{
   display: flex;
   justify-content: start;
   flex-direction: column;
   margin: 40px;
   text-align: center;
   max-width: 150px;
}

.sadb > div > div > div
{
   text-align: center;
   padding-bottom: 3px;
}

.sadb .b > a
{
   font-weight: normal;
   width: 100%;
   text-align: center;
   color: #333333;
   display: inline;
   margin: 0px;   
   padding-bottom: 0px;
   text-decoration: none;
   font-family: helvetica; 
   font-size: 1.8rem; 
   font-weight: bold;   
}

.sadb .s > a
{
   font-weight: normal;
   width: 100%;
   text-align: center;
   color: #333333;
   display: inline;
   margin: 0px;   
   padding-bottom: 5px;
   text-decoration: none;
   font-family: helvetica; 
   font-size: 1.2rem; 
   font-weight: normal;   
}

.sadb > div > div img
{
   display: inline; 
   width: 100%; 
   height: auto;
}

.sadb a
{
   display: block;
   width: 150px;
   height: 145px;
   margin: 0px;
   padding: 0px;
}

.sadb .black
{
   left: 0px;
   background: url( "../site_images/fpb_images_002.jpg" ) -1325px 0; 
}   

.sadb .economy_metal
{
   left: 0px;
   background: url( "../site_images/fpb_images_002.jpg" ) -1475px 0; 
}   

.sadb .collage_mats
{
   left: 0px;
   background: url( "../site_images/fpb_images_002.jpg" ) -1650px 0; 
}   

.sadb .gallery
{
   left: 0px;
   background: url( "../site_images/fpb_images_002.jpg" ) -1806px 0; 
}   

.sadb .acrylic
{
   left: 0px;
   background: url( "../site_images/fpb_images_002.jpg" ) -1964px 0; 
}   

.sadb .panel
{
   left: 0px;
   background: url( "../site_images/fpb_images_002.jpg" ) -2125px 0; 
}   


.popular_links
{
   width: 100%;
   text-align: center;
   padding: 40px 20px 20px 20px;
}

.popular_links > div:first-child
{
   border-bottom: 1px solid #555555;
   font-size: 1.4rem;
   padding-bottom: 5px;
}

.popular_links .ll
{
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding-top: 10px;
   width: 100%;
}
.popular_links .ll > div
{
   padding: 5px 20px;
}


.reviews
{
   width: 90%;
   text-align: center;
   display: inline-block;
   margin: 0px 5% 0px 5%;
}

.reviews .header
{
   width: 100%; 
   text-align: center;
   font-size: 1.4rem;
   padding-bottom: 10px;
}

.reviews .read
{
   padding-top: 10px;
}

.reviews .review_list
{
   width: 100%;
   text-align: center;
}

.reviews .review_list .review
{
   text-align: left;
   line-height: 25px;
}

.reviews .review_list .review .name
{
   font-weight: bold;
   font-size: 1rem;
}

.reviews .review_list .review .text
{
   padding-left: 10px; 
   text-align: left; 
   font-style: italic;
   max-width: 600px;
}

.reviews #rt
{
   font-familly: arial;
   font-weight: bold;
   color: #222222;
   font-size: .9rem;
}
.reviews #rc
{
   font-familly: arial;
   font-weight: normal;
   color: #555555;
   font-size: .8rem;
}
.reviews #rl
{
   font-family: arial;
   font-size: .8rem;
   color: #555555;
}

.customerquote
{
   padding: 20px 80px 20px 80px;
   width: 100%;
}
.customerquote span
{
   color: #555555;
   font-size:90px;
   line-height:0.6em;
   opacity:0.8;   
}
.customerquote p
{
   padding-left: 10px;
   margin-top: -10px;
   margin-bottom: -15px;
   width: 90%;
   color: #555555;
   font-size:1rem;
}

.customerquote i
{
   color: #555555;
   font-size:1.2rem;
   text-align: justify;
   word-spacing: 5px;
   line-height: 1.6rem;
}

.hp_fi
{
   margin: 30px;
   padding: 10px 30px 20px 30px;
   color: #333333;
   text-align: left;
   font-size: .95rem;
   text-align: justify;
   word-spacing: 5px;
   line-height: 1.4rem;
   border: 1px solid #e0e0e0;
   background: #fefefe;
}

.hp_fi .ut
{
   font-size: 1.1rem;
   text-align: left;
   line-height: 1.6rem;
}

.hp_fi h2
{
   font-weight: bold;
   font-size: 1.2rem;
   text-align: center;
   padding: 20px 0px 20px 0px;
}

.hp_fi .hdr
{
   font-weight: bold;
   font-size: 1rem;
   text-align: left;
   padding: 20px 0px 10px 0px;
}

.pp_back_button
{
   padding: 10px;
   font-size: 1.2rem;
   background: #f0f0f0;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   min-width: content;
}

.pp_back_button:hover
{
   background: #e0e0e0 !important;
   color: #000000 !important;
}


@media screen and (max-width: 1300px) 
{
   header .dropdown 
   {
      top: 90px;
   }

   header .menu a 
   {
      font-size: 1rem;
      margin-right: 15px;
   }
   
   header div .hlogo img
   {
      width: 200px;
   }
   
   header .hph 
   {
      font-size: 20px !important;
   }
   
}


@media screen and (max-width: 1050px) 
{
   header .dropdown 
   {
      top: 110px;
   }
   
   .pp_back_button
   {
      font-size: 1rem;
   }
   
   .madb .s > a
   {
      font-size: 1.4rem;
   }

   .sadb .s > a
   {
      font-size: 1.4rem;
   }
   
   .mib .htext h1
   {
      font-size: 1.0rem;
   }
   
   .mib
   {
      width: 100%;
   }
   
   header .dropdown 
   {
      text-align: left;   
   }   

   header .menu a 
   {
      font-size: .9rem;
      margin-right: 15px;
   }
}

@media screen and (max-width: 600px) 
{
   .pp_back_button
   {
      font-size: .8rem;
   }

   .continue_shopping
   {
      font-size: 1.5rem;
      font-weight: bold;
   }

   .mib .hero 
   {
      display: none;
   }

   header div .hlogo
   {
      justify-content: center;
      width: 100%;
      margin: auto 10px auto 10px;
   }   
   
   .mib .htext 
   {
      font-size: 1rem;
   }
   
   .mib .hero 
   {
      background-image: url( '../site_images/fpb_images_mobile_002.jpg' );
   }   
   
   .madb #mpi_1
   {
      background-image: url( '../site_images/fpb_images_mobile_002.jpg' );
   }

   .madb #mpi_2
   {
      background-image: url( '../site_images/fpb_images_mobile_002.jpg' ) ;
   }

   .madb #mpi_3
   {
      background-image: url( '../site_images/fpb_images_mobile_002.jpg' );
   }

   .madb #mpi_4
   {
      background-image: url( '../site_images/fpb_images_mobile_002.jpg' );
   }
   
.sadb .black
{
   background: url( "../site_images/fpb_images_mobile_002.jpg" ) -1325px 0; 
}   

.sadb .economy_metal
{
   background: url( "../site_images/fpb_images_mobile_002.jpg" ) -1475px 0; 
}   

.sadb .collage_mats
{
   background: url( "../site_images/fpb_images_mobile_002.jpg" ) -1650px 0; 
}   

.sadb .gallery
{
   background: url( "../site_images/fpb_images_mobile_002.jpg" ) -1806px 0; 
}   

.sadb .acrylic
{
   background: url( "../site_images/fpb_images_mobile_002.jpg" ) -1964px 0; 
}   

.sadb .panel
{
   background: url( "../site_images/fpb_images_mobile_002.jpg" ) -2125px 0; 
}   
   
   
   .madb   
   {
      padding-left: 5px;
      padding-right: 5px;
   }


   .madb .b > a
   {
      font-size: 1.5rem;
   }
   
   .madb .s > a
   {
      font-size: 1.3rem;
   }
   
   .madb > div 
   {
      flex-wrap: wrap;
      justify-content: space-between;
      padding-left: 5px;
      padding-right: 5px;
   }
   
   .madb > div > div
   {
      width: 45%;
      margin: 5px;
   }

   .madb > div > div > div h2 > a
   {
      font-size: .4rem;
   }


   .sadb   
   {
      padding-left: 5px;
      padding-right: 5px;
   }


   .sadb .s > a
   {
      font-size: 1.2rem; 
   }

   .sadb > div 
   {
      flex-wrap: wrap;
      padding-left: 5px;
      padding-right: 5px;
   }
   
   .sadb > div > div
   {
      padding: 20px 5px;
      width: 50%;
      max-width: 160px;
      margin: 5px;
   }

   .sadb > div > div > div h2 > a
   {
      font-size: .4rem;
   }

   
   .mib
   {
      width: 100%;
   }
   
   .rh
   {
      font-size: 1rem;
   }
   
   .mib h1
   {
      font-size: 1.2rem;
   }
   
   .customerquote i
   {
      font-size: 1rem;
   }
   
   .customerquote
   {
      padding: 20px;
   }      
   

   .popular_links .ll
   {
       flex-direction: column;
   }
   
}   

@media screen and (max-width: 400px) 
{
   .mib h1
   {
      font-size: 1rem;
   }
}
   

.page_description_header
{
   width: 100%;
   height: 130px;
   vertical-align: middle;
   display: flex;
   align-items: center;
   background-repeat: no-repeat;
   background-position: right;
   background-size: 300px 200px;
   margin: auto;
   margin-top: 0px;
   position: relative;
}

.page_description_header h1
{
   position: absolute;
   top: 10px;
   left: 40px;   
   background: #ffffff;
   padding: 20px;
   background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
   background: rgba(255, 255, 255, 1);   
   font-size: 1.8rem;
   color: #222222;
}


/* catalog page common sizes */
.catalog_common_sizes
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
}
.catalog_common_sizes ul
{
}
.catalog_common_sizes ul li 
{
   display: inline-block;
   font-family: Arial;
   color: #555555;
   width: 60px;
   height: 40px;
}
.catalog_common_sizes ul li a
{
   font-family: Arial;
   font-size: 1rem;
   color: #555555;
   text-decoration: none;
   padding: 10px;
}
.catalog_common_sizes ul li a:hover
{
   background: #222222;
   color: #ffffff;
}

/* catalog sizing box */
.catalog_sizing_box
{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   background: #f0f0f0;   
   padding: 10px;
   margin: auto;
}


.catalog_sizing_box .current_size_text
{
   padding: 5px;
   color: #222222;
   font-size: 1.3rem;
}

.catalog_sizing_box .sizing_selection
{
   width: 100%;
   padding: 10px;
}


.catalog_sizing_box .sizing_button
{
   padding: 10px;
   color: #fefefe;
   background: #b00000;
   font-size: 1.4rem;
}

.catalog_sizing_box .sizing_button:hover
{
   background: #ff3333;
   color: #ffffff;
   cursor: pointer;
   font-size: 1.4rem;
}


.catalog_sizing_box .current_size
{
   color: #555555;
   font-weight: bold;
   font-family: Arial;
   font-size: 1.6rem;
}

.catalog_sizing_box .current_size sup
{
   color: #555555;
   font-weight: bold;
}


.catalog_sizing_box .calculate_price
{
   padding: 10px 0px 10px 0px;
   text-align: center;
}

.catalog_sizing_box .calculate_price a
{
   color: #555555;
}

.catalog_sizing_box .measure_artwork
{
   padding: 0px 0px 10px 0px;
   color: #555555;
}

.catalog_sizing_box #catalog_sizing_div_instructions
{
   padding: 5px;
   color: #555555;
   text-align: center;
}

.catalog_sizing_box #catalog_sizing_div_instructions .calculate_price_button
{
   padding: 10px;
   border: 1px solid #555555;
   color: #555555;
   background: #fefefe;
   text-align: center;
   margin: auto;
   max-width: 200px;
}

.catalog_sizing_box #catalog_sizing_div_instructions .calculate_price_button:hover
{
   background: #dddddd;
   cursor: pointer;
}



.catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection
{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   width: 100%;
   padding: 5px;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection div   
{
   color: #555555;
   padding: 0px 5px;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection .sizing_selection_description
{
   color: #555555;
   min-width: 380px;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection .sizing_selection_sizers
{
   color: #555555;
   min-width: 140px;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection .sizing_selection_sizers select
{
   color: #555555;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection .sizing_selection_sizers select option
{
   color: #555555;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_instructions
{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   padding: 5px;
   color: #555555;
}

.catalog_sizing_box #catalog_sizing_div_instructions div
{
   font-size: 1rem; 
   line-height: 20px; 
   word-spacing: 8px; 
   padding: 10px;
   text-align: left;
}

.catalog_sizing_box #catalog_sizing_div_instructions .sizing_instructions .sizing_instructions_images
{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   width: 100%;
   padding: 5px;
   color: #555555;
}


/* catalog page sort options */
.catalog_sort_options
{
   width: 100%;
   text-align: center;
}
.catalog_sort_options ul
{
   padding: 0px;
}
.catalog_sort_options ul li 
{
   display: inline-block;
   font-family: Arial;
   color: #333333;
   font-size: .9rem;
}
.catalog_sort_options ul li.selected
{
   padding: 5px;
   margin: 5px;
   color: #222222;
   background-color: #e0e0e0;
}

.catalog_sort_options ul li a
{
   font-family: Arial;
   font-size: .9rem;
   color: #333333;
   text-decoration: none;
   padding: 5px;
   margin: 5px;
}
.catalog_sort_options ul li a:hover
{
   background: #222222;
   color: #ffffff;
}
.catalog_sort_options ul li select
{
   font-family: Arial;
   font-size: 1rem;
   color: #333333;
   text-decoration: none;
   padding: 5px;
}
.catalog_sort_options ul li select option
{
   font-family: Arial;
   font-size: 1rem;
   color: #333333;
   text-decoration: none;
   padding: 5px;
}

/* container for the catalog page items */
.catalog_items_container
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
}

/* catalog items */
.catalog_item_container
{
   display: flex;
   margin: 30px;
   /* border: 1px solid #eeeeee; */
   padding: 10px;
   border-radius: 10px;
   width: 18%;
   align-items: center;
   flex-direction: column;
   min-width: 280px;
   justify-content: center;
}

.catalog_item
{
   display: flex; 
   align-items: center; 
   flex-direction: column;
   flex: 1;
   width: 100%;
}   

.catalog_item #line1
{
   display: flex; 
   flex-direction: row; 
   justify-content: center; 
   align-items: center;
   padding: 10px; 
   width: 80%;
}

.catalog_item #line1 #new
{
   font-size: 1.4rem; 
   font-weight: bold; 
   color: #ff3333; 
   padding-left: 10px;
}   

.catalog_item #line1 a
{
   font-size: .9rem; 
   color: #333333; 
   font-weight: bold;   
}

.catalog_item #select
{
   display: flex; 
   flex-direction: row; 
   align-items: center;
   justify-content: center;
   padding: 10px; 
   width: 100%;
}   

.catalog_item #select > div
{
   margin: 0px 10px 0px 10px;
}

.catalog_item #details
{
   display: flex;
   flex-direction: row;
   font-size: 1rem; 
   font-weight: bold; 
   padding: 0px 0px 10px 0px;
}
   
.catalog_item #details > div
{
   font-size: 1.2rem;
   padding: 5px;
   color: #000000;   
}
.catalog_item #details > div sup
{
   color: #000000;   
}

.catalog_item .dl-thumbnails > div
{
   margin: 5px;
}

.catalog_item #options > div a
{
   color: #555555;
   font-size: .8rem;
   text-decoration: none;
   border-radius: 5px;   
   border: 1px solid #888888;
   padding: 3px;
   margin: 5px;
}

.catalog_item #options > div a:hover
{
   color: #ffffff;
   background-color: #888888;
}

.catalog_item .description
{
   vertical-align: top;
   color: #111111;
   font-size: 1.2rem;
   text-decoration: none;
   padding: 10px 5px; 
   line-height: 1.4rem;
   word-spacing: 3px;
   margin-top: 2px;   
   text-align: justify;
}

.catalog_item .description a
{
   color: #111111;
   font-size: 1.3rem;
   text-decoration: none;
   padding: 10px 5px; 
   line-height: 1.4rem;
   word-spacing: 5px;
   margin-top: 10px;   
}
.catalog_item .description a:hover
{
   color: #000000;
}

.catalog_item .product_link a
{
   color: #222222;
   text-align: left;
   font-size: 1.2rem;
}

.catalog_item #sku, .catalog_item #size, .catalog_item #price
{
   font-family: Arial;
   font-size: 1.3rem;
   color: #555555;
   margin: 5px 2px;
}

.catalog_item .collage_mat_outside
{
   font-family: Arial;
   font-size: 1rem;
}

.catalog_item .collage_mat_outside sup
{
   font-family: Arial;
}


.catalog_item .metalvolumepricing
{
   display: flex; 
   flex-direction: column;
   margin-top: 15px;
}

.catalog_item .metalvolumepricing > div:first-child
{
   font-weight: bold; 
   font-size: 1rem; 
   width: 100%; 
   text-align: center;
   margin-bottom: 5px;
   border-bottom: 1px solid #a0a0a0;
}

.catalog_item .metalvolumepricing > div:last-child
{
   width: 100%;
}

.catalog_item .metalvolumepricing > div:last-child > table tr > td
{
   font-family: Arial; 
}


.catalog_item #size
{
   font-size: 1.4rem;
}

.zoom
{
   width: 32px !important;
   height: 32px;
   background: url( "../site_images/catalog_zoom_001.png" );
   background-size: 32px 32px;
   display: block;
}
.zoom:hover
{
   cursor: zoom-in;
}



.order_sample
{
   font-size: 1rem !important;
   padding: 5px !important; 
}

.catalog_select
{
   font-size: 1rem !important;
   padding: 5px !important;
}


.okcancel
{
}

.okcancel > div
{
   text-align: center;
}

.okcancel a
{
   border: 4px solid #e0e0e0;
   padding: 20px;
   font-size: 1.6rem;
   font-weight: bold;
   background: #f0f0f0;
   display: block;
   text-decoration: none;
}


.button_1
{
   padding: 20px;
   font-size: 1.2rem;
   background: #f0f0f0;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   white-space:nowrap;
   min-width: content;
}

.button_1:hover
{
   background: #e0e0e0 !important;
   color: #000000 !important;
}

.button_2
{
   padding: 20px;
   font-size: 1.2rem;
   background: #f0f0f0;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   white-space:nowrap;
   min-width: content;
}

.button_2:hover
{
   background: #e0e0e0 !important;
   color: #000000 !important;
}

.instructions
{
   font-size: 1.2rem;
   text-align: justify;
   word-spacing: 5px;
   line-height: 1.6rem;
}

.inputpair
{
   font-size: 1.2rem;
   padding: 10px 0px;
   text-align: left;
   width: 100%;
}

.inputdescription
{
   font-size: 1.4rem;
   font-weight: bold;
   color: #555555;
   padding: 10px 0px;
}


.inputbox
{
   border: 4px solid #e0e0e0;
   font-size: 1.8rem;
   background-color: #f0f0f0 !important;
   border-radius: 10px;
   padding: 10px;
   font-family: Arial;
   color: #555555;
}

.header_success
{
   padding: 40px;
   font-size: 1.6rem;
   color: #ff3333;
}

.header_info
{
   padding: 10px;
   font-size: 1.6rem;
   color: #555555;
}

.header_failed
{
   font-size: 1.6rem;
   color: #ff4444;
}


.product_back_to_collection 
{
   padding: 10px 0px 0px 10px;
   text-align: left;
   font-size: .9rem;
   max-width: 180px;
   vertical-align: middle;
}
.product_back_to_collection a
{
   text-align: center;
   background: rgba( 0, 0, 0, .6 );      
   text-decoration: none;
   display: block;
   padding: 5px;
   color: #ffffff;
   font-weight: bold;
   font-family: Arial;
}



/* media queries */
@media screen and (max-width: 1600px) {

   header .menu .skusearch form
   {
      display: none;
   }
   
   header .menu .skusearch a 
   {
      display: block;
   }   
}

@media (max-width: 1350px) 
{
   /* make the header and footer full screen */
   header div.hbox, .fbox, .screen .cbox
   {
      width: 100% !important;
   }


   .hma
   {
      font-size: .8rem;
   }
   
   #page_description_header h1
   {
      font-size: 1.2rem;
   }
   
   .page_header_text_box, .page_description_header, .catalog_sizing_box
   {
      width: 100%;
   }   
}

@media screen and (max-width: 800px) 
{
   header .dropdown 
   {
      top: 110px;
   }

   header .hma
   {
      font-size: .8rem;
   }
   
   header .menu a 
   {
      font-size: .9rem;
   }
   
   header .hph 
   {
      font-size: 15px !important;
   }

   .page_description_header h1
   {
      width: 100%;
      font-size: 1.1rem;
      top: 0px;
      padding: 5px 0px;
      text-align: center;
   }
   
   .left_packages
   {
      font-size: 1rem;
      min-height: 40px;
      display: none;
   }

   .hoff_packages
   {
      font-size: 1rem;
      min-height: 40px;
      display: none;
   }
   
   .pp4_title > #sbs > #left_box > div:first-child #design_options_bottom
   {
      display: flex !important;
   }

   .pp4_title > #sbs > #left_box > #design_options
   {
      display: none;
   }
   
   .pp4_title > #sbs > #left_box, .pp4_title > #sbs > #left_box > div:first-child
   {
      flex-direction: column !important;
      justify-content: center !important;
   }

}


@media screen and (max-width: 720px) 
{

   header .menu a 
   {
      font-size: .8rem;
      margin-right: 10px;
   }
}   

@media screen and (max-width: 600px) 
{
   .hbar11
   {
      display: none !important;
   }
   
   .sso_tab 
   {
      display: none !important;
   }      


   .header_success, .header_info, .header_failed
   {
      font-size: 1.2rem;
   }

   .inputbox, .description, .button_1, .inputdescription
   {
      font-size: 1.2rem;
   }
   
   header .menu 
   { 
      display: none; 
   }
   
   header div.hbar1
   {
      display: none;
   }
   

   header div.hbar2
   {
      flex-direction: row !important;
      padding: 8px 8px 8px 8px;
   }

   /* show the header mobile menu icon */   
   header .hmmi
   {
      display: block;
   }

   header .hmma
   {
      display: block;
   }

   header .hmmb
   {
      display: block;
   }

   header .hmms
   {
      display: block;
   }

   header .hmmc
   {
      display: block;
   }

   /* enable pointer events to allow the phone number to be clicked on mobile devices */
   header .hph 
   {
      pointer-events: auto;
      font-size: 2rem;
   }
   
   /* header offer */
   .hoff
   {
      font-size: 1rem;
      min-height: 40px;
      display: none;
   }

   

   .frame_author_text_box img
   {
      height: 15px;
   }   
   
   .frame_author_text_box #text
   {
      font-size: .9rem;
   }

   .page_header_text_box img
   {
      height: 15px;
   }   
   
   .page_header_text_box #text
   {
      font-size: 1.2rem;
   }
   
   .catalog_item, .catalog_item_container
   {
      width: 100%;
   }
   
   .catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection
   {
      flex-direction: column;
   }
   
   .catalog_sizing_box .current_size_text
   {
      font-size: 1rem;
      min-width: 360px;
   }
   
   .catalog_sizing_box #catalog_sizing_div_instructions .sizing_selection .sizing_selection_description
   {
      font-size: .8rem;
      min-width: 280px;
      padding: 10px 0px;
   }

   .catalog_sizing_box #catalog_sizing_div_instructions .sizing_instructions .sizing_instructions_images
   {
      flex-direction: column;
   }
   
   .catalog_flpm_pt
   {
      width: 100% !important;
   }
}



@media screen and (max-width: 400px) 
{
   /* header offer */
   .hoff
   {
      font-size: .8rem;
      min-height: 40px;
   }

} 

#page_load_spinner
{
   background-color:#000000;
   opacity: .8;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:1000;
   display: none;
   margin: 0 auto;
}





* {box-sizing: border-box !important;}


/* FONTS */


/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky_header {
  position: fixed;
  top: 0;
  z-index: 2000;
  border-bottom: 3px solid black;
}

.cppopover
{
   background-color:#ffffff;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:2000;
   display: none;
   text-align: center;
   margin:auto;
   margin:auto;   
}

.cppopover #close_button
{
   font-size: 2.5rem;
   text-decoration: none;
   padding-right: 20px;
   float: right; 
}


.nav_box
{
   width: 1360px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   padding: 0px 0px;
   flex-wrap: wrap;
   margin-left: auto;
   margin-right: auto;
   align-content: flex-start;
}   

.nav_box > div
{
   padding: 10px;
   width: 300px;
   margin: 20px;
}

.nav_box > div > div > div
{
   text-align: center;
   padding: 5px;
   font-size: 1.2rem;
   color: #555555;   
   line-height: 30px;
   word-spacing: 6px;
}

.nav_box > div img
{
   width: 250px;
}

.nav_box > div  a
{
   width: 100%;
   font-size: .9em;
   color: #555555;
   text-decoration: none;

}

.nav_box h2
{
   font-size: 1.4em;
}

@media screen and (max-width: 1360px) 
{
   .nav_box
   {
      width: 1020px;
   }      
}

@media screen and (max-width: 1020px) 
{
   .nav_box
   {
      width: 680px;
   }  
   
   /* change the footer to column */
   .footer > .link_rows, .footer > .logos
   {
      flex-direction: column;
   }
   .footer > .link_rows > div > div:first-child
   {
      font-size: 1.6rem;
   }
   .footer > .link_rows > div > div:last-child ul li
   {
      padding: 10px;
   }
   .footer > .link_rows > div > div:last-child ul li a
   {
      font-size: 1.4rem;
   }
   
}

@media screen and (max-width: 680px) 
{
   .nav_box
   {
      width: 100%;
   }      
}


@media screen and (max-width: 600px) 
{
   .nav_box > div
   {
      width: 100% !important;
      margin-top: 30px;
      background: #f0f0f0;
   }   
   
   .nav_box img
   {
      width: 100% !important;
   }
   
   .nav_box > div  a
   {
      font-size: 1.4rem;
   }
   
   .nav_box > div > div > div
   {
      font-size: 2rem;
      line-height: 40px;
      word-spacing: 10px;
   }   
   
   .catalog_image_div
   {
      height: 400px;
   }
   
   .mat_sample td
   {
      font-size: .5rem !important;
   }         
}


.sp_list 
{
   padding: 0px 5px 10px 3px;
   width: 100%;
   text-align: left;
}

.sp_list  a
{
   text-decoration: none;
   width: 100%;
   display: block;
   font-size: .8rem;
   padding: 0px;
}

.sp_list:hover 
{
   text-decoration: none;
   background: #c0c0c0;
}

.catalog_image_div
{
   height: auto;
   position:relative;
}

.catalog_image_div img
{
   width: 300px;
   max-width: 400px;   
}

.catalog_image_overlay_div
{
   width: 100%; 
   height: 100%; 
   position: absolute; 
   top: 0; 
   left: 0; 
   text-align: center; 
   vertical-align: middle; 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   flex-direction: column;
   cursor: pointer;
   z-index: 1000;
}

.catalog_image_sale_overlay
{
   position: absolute; 
   top: 0; 
   right: 0; 
   z-index: 1000;
   width: 100px;
   height: 120px;
}

.catalog_image_sale_overlay > img
{
   width: 70px;
}

.catalog_image_overlay_div div
{
   background: rgba(255, 255, 255, .7); 
   padding: 10px;
}   

.catalog_image_overlay_div .lt
{
   font-size: 2vw; 
   font-weight: bold; 
   color: #ff0000;
   background: none;
}

.catalog_image_overlay_div .st
{
   font-size: 1vw; 
   color: #ff0000;
   background: none;
}

.blocktext
{
   font-size: 1.2rem; 
   padding-top:10px; 
   text-align: justify; 
   text-justify: newspaper; 
   line-height: 30px; 
   color: #555555; 
}

.headertext
{
   font-size: 1.6rem;
   font-weight: bold;
   /* padding-top:30px; */
   color: #555555;
}

.catalog_flp_profile
{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.catalog_flp_profile > div
{
   padding: 10px;
}

.catalog_flpm_pt
{
   padding: 20px; 
   text-align: center;   
   width: 100%;
}

.catalog_flpm_pt td
{
   font-size: 1rem;
   border: 1px solid black;
   padding: 5px;
}


.mat_samples_grid
{
   display: grid;
   grid-template-columns: 15% 15% 15% 15% 15% 15% ;
   justify-content: center;
   margin-top: 20px;
}

.mat_samples_grid > div
{
   display: flex; 
   flex-direction: column; 
   justify-content: top; 
   align-items: center; 
   margin-bottom: auto;
   border: 1px solid #e0e0e0;
   height: 100%;
   padding: 10px;
   cursor: pointer;
}

.mat_samples_grid > div > div
{
   width: 100%;
}

.mat_samples_grid > div:hover
{
   background: #888888;
}

.mat_samples_grid > div > div img
{
   width: 100%;
}

.mat_samples_selected
{
   width: 100%;
   text-align: center;   
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;         
   margin-left: auto;
   margin-right: auto;
   margin: 10px;
   flex-wrap: wrap;
   min-height: 30px;
}

.mat_samples_selected > div
{
   width: 30px;
   height: 30px;
   border: 1px solid #888888;
}

.mat_sample
{
   padding: 20px 10px;
}

.mat_sample table
{
   border-collapse: collapse; 
}

.mat_sample td
{
   width: 140px;
   padding: 5px;
   font-size: .9rem;
   text-align: center;
}             

.mat_sample img
{
   width: 100%;
   height: 100%;
}

.mat_samples_sticky_header {
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #fafafa; 
  text-align: center;  
  padding: 10px;
  border: 1px solid #d0d0d0;
  align-items: center;
  justify-content: center;
}



.cart_productsection
{
   border: 1px solid #d0d0d0;
   text-align: center;
   margin-top: 20px;
}

.cart_productsection .hbox
{
   margin: auto;
   padding: 5px;
}

.cart_productsection .htype
{
   color: #555555;
   font-family: Arial;
   font-weight: bold;
   text-align: center;
   padding: 5px;
   font-size: 1.4rem;
}

.cart_productsection .htext
{
   font-size: 1.2rem;
   color: #555555;
   text-align: center;
   margin: auto;
   padding: 5px;
}

.cart_productsection .hsctext
{
   font-size: 1.2rem;
   color: #555555;
   text-align: center;
   margin: auto;
   padding: 5px;
}

.cart_productsection .hscount
{
   font-family: Arial;
   font-size: 1.4rem;
   color: #555555;
   text-align: center;
   padding: 5px;
}

.cart_productsection .slist
{
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: left;
   padding: 20px 40px;
   flex-wrap: wrap;
}   

.cart_productsection .slist .item
{
   min-width: 100px;
   padding: 10px;
}   

.cart_productsection .subtotal
{
   text-align: right;
   font-size: 1.4rem;
   font-weight: bold;
   font-family: Arial;
   color: #555555;
   padding: 10px;
   border-top: 1px solid #d0d0d0;
   background-color: #f0f0f0;
}   

.cart_productsection .product:nth-child(even) {background: #ffffff;}
.cart_productsection .product:nth-child(odd) {background: #f8f8f8;}

.cart_productsection .product
{
   width: 100%;   
}

.cart_productsection .product > table
{
   width: 100%;  
   display: table; 
}

.cart_productsection .product > table tbody
{
   width: 100%;   
}



.cart_productsection .product .options
{
   display: flex;  
   flex-direction: row;   
   flex-wrap: wrap; 
}

.cart_productsection .product .options div
{
   padding-left: 5px;
}

.cart_productsection .product .options div img
{
   max-width: 160px;
   min-width: 90px;
   width: 100%;
}

.cart_productsection .sprice
{
   width: 60px;
}

.cart_productsection .quantity
{
   width: 60px;
}

.cart_productsection .quantity .change
{
   font-size: 16px;
   font-family: Arial;
   display: block;
   text-decoration: none;
   background: #bbd87b;
   padding: 8px;
   color: #555555;
   font-weight: bold;
}

.cart_productsection .price
{
   font-size: 1.2rem;
   font-family: Arial;
   min-width: 70px;
}

.cart_productsection .pdetails
{
   text-align: center;
   min-width: 100px;
}

.cart_productsection .pdetails > div
{
   margin: 5px;
}

.cart_productsection .pdetails .edit
{
   font-size: 16px;
   font-family: Arial;
   display: inline-block;
   text-decoration: none;
   background: #bbd87b;
   padding: 8px;
   color: #555555;
   font-weight: bold;
   text-align: center;
}

.cart_productsection .item_details .item:nth-child(even) {background: #ffffff}
.cart_productsection .item_details .item:nth-child(odd) {background: #f8f8f8}

.cart_productsection .item_details
{
   padding: 10px;
   margin-right: auto;
   text-align: left;
}

.cart_productsection .item_details table
{
   margin-left: 20px;
}

.cart_productsection .item_details td
{
   padding: 8px;
   font-size: 1rem;
   text-align: center;
}

.cart_productsection .framer_notes
{
   padding: 10px;
   width: 100%
}

.cart_productsection .framer_notes > div:first-child
{
   padding: 10px;
   font-family: Arial;
   font-weight: bold;
   font-size: 1rem;
   color: #555555;
}


.cart_productsection .framer_notes > div:last-child
{
   overflow-wrap: break-word;
   width: 60%;
   margin-left: auto;
   margin-right: auto;
} 

.pp4_default_packages
{
   background-color: #f0f0f0;
   padding: 20px;
}

.pp4_default_packages .header
{
   font-size: 1.2rem;
}

.pp4_default_packages .packages
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: left;
   padding: 10px;
   flex-wrap: wrap;
}

.pp4_default_packages .package
{
   padding: 10px;
}

.pp4_default_packages .package div
{
   padding: 5px;
}

.pp4_default_packages .description
{
}

.pp4_default_packages .description .title
{
   font-size: 1rem;
   font-weight: bold;
   color #555555;
}

.pp4_default_packages .description ul
{
   font-size: 1rem;
   color: #555555;
   text-align: left;
   margin: 0px;
}

.pp4_default_packages .description .highlight1
{
   font-size: 1rem;
   font-weight: bold;
   color: #8888ff;
}

.pp4_description
{
   font-size: 1.2rem;
   color: #222222;
   text-align: left;
   margin: 20px 5% 20px 5%;
   line-height: 25px;
}

.pp4_description p
{
   font-size: 1.2rem;
   color: #222222;
   text-align: left;
   line-height: 25px;
}



.pp4_title
{
   margin-top: 5px;
}

.pp4_title > #top_box
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: left;
   font-size: 1.2rem; 
   font-weight: bold; 
   color: #ff3333;   
}

.pp4_title > #top_box h1
{
   font-size: 1.2rem; 
   color: #555555;
   font-weight: bold;
   padding: 0px 10px;
}

.pp4_title #sbs
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: flex-start; 
   align-content: center;
   margin-top: 20px;
   padding: 3px 10px;
}


.pp4_title > #sbs > #right_box
{
   margin: 10px 20px auto 20px; 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: flex-start;
   border: 1px solid #d0d0d0;
   padding: 20px;
}


.pp4_title > #sbs > #right_box_rm_sizes
{
   margin: 10px 20px auto 20px; 
   display: flex;
   flex-direction: column;
   justify-content: left;   
   align-content: flex-start;
   border: 1px solid #d0d0d0;
   padding: 20px;
}

.pp4_title > #sbs > #right_box_rm_sizes > div
{
   margin: 10px; 
   text-align: left;
}  
 
.pp4_title > #sbs > #right_box_rm_sizes > div > a
{
   font-size: 1.2rem; 
   font-family: Arial; 
   text-decoration: none;
}   

.pp4_title > #sbs > #right_box_static_price
{
   margin: auto 20px; 
   display: flex;
   flex-direction: column;
   justify-content: left;   
   align-content: flex-start;
}

.pp4_title > #sbs > #right_box_static_price > div
{
   font-size: 1.4rem;
   margin: 5px;
}

.pp4_title > #sbs > #right_box_static_price  img
{
   width: 200px;
}


.pp4_title > #sbs > #right_box > div:first-child
{
   font-size: 1.2rem; 
   font-weight: bold;
}

.pp4_title > #sbs > #right_box > div:nth-child(2)
{
   font-size: 1.4rem; 
   padding-top: 10px; 
   padding-bottom: 10px; 
   font-family: Arial; 
   text-align: center;
}

.pp4_title > #sbs > #right_box > div:nth-child(2) > span
{
   color: #ff2222; 
   font-weight: bold;
   font-size: 1.4rem;
}

.pp4_title > #sbs > #right_box > div:nth-child(2) > a
{
   font-size: 1rem;
}

.pp4_title > #sbs > #right_box > div:last-child
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: flex-start;
   font-size: 1rem;   
}

.pp4_title > #sbs > #right_box > div:last-child > div
{
   padding-top: 5px;
}

.pp4_title > #sbs > #right_box > div:last-child > div:first-child
{
   padding-bottom: 15px; 
   font-size: 1.2rem; 
   font-family: Arial;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(2) a
{
   font-size: 1rem;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(3)
{
   margin-top: 10px;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(3) span
{
   font-size: 1.4rem;
   font-weight: bold;
   color: #FF3333;   
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(3) img
{
   width: 200px;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(4)
{
   font-size: 1.2rem; 
   font-weight: bold; 
   color: #ff2222;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(5) > div:first-child
{
   text-align: center; 
   padding-top: 10px; 
   font-size: 1.6rem; 
   font-weight: bold; 
   color: #ff3333;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(5) > div:last-child
{
   text-align: center; 
   padding-top: 3px; 
   font-size: 1rem; 
   color: #ff3333;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(6)
{
   font-size: 1.4rem;
   text-align: center;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(6) span
{
   font-size: 1.3rem; 
   font-weight: bold; 
   font-family: Arial;
}

.pp4_title > #sbs > #right_box > div:last-child > div:nth-child(7)
{
   margin-top: 10px;
   font-size: 1.2rem; 
}


.pp4_title > #sbs > #left_box
{
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.pp4_title > #sbs > #left_box > div:first-child
{
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.pp4_title > #sbs > #left_box > div:first-child #name
{
   font-size: 1.2rem; 
}   

.pp4_title > #sbs > #left_box > div:first-child #name a
{
   font-size: .8rem;
   text-decoration: none;
}

.pp4_title > #sbs > #left_box > div:first-child #pimg #fin
{
   position: relative;   
}

.pp4_title > #sbs > #left_box > div:first-child #pimg #fin #waiting
{
   width: 400px;
   position: absolute;   
   top: 0%;
   left: 0%;
   display: none;
}


.pp4_title > #sbs > #left_box > div:first-child #pimg #fin #waiting img
{
   margin: auto;
   width: 200px;
   margin-top: 100px;
}   

.pp4_title > #sbs > #left_box > div:first-child #pimg #fin .di
{
   width: 400px; 
}   


.pp4_title > #sbs > #left_box > div:first-child .bpi div
{
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: center;
   padding: 3px 10px;
}

.pp4_title > #sbs > #left_box > div:first-child > div:first-child  #thumbnails
{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.pp4_title > #sbs > #left_box > div:first-child > div:first-child  #thumbnails > div
{
   margin: 10px 20px 10px 0px;
   width: 50px;
}   

.pp4_title > #sbs > #left_box > div:first-child > div:first-child  #thumbnails > div:hover
{
   cursor: zoom-in;
}   

.pp4_title > #sbs > #left_box > div:first-child > div:first-child  #thumbnails > div img
{
   width: 50px;
   height: 50px;
}   

.pp4_title > #sbs > #left_box > div:first-child > div:first-child 
{
   padding-top: 5px;
   margin:0px 20px 0px 20px;
}


.pp4_title > #sbs > #left_box > #design_options
{
   padding: 5px;
   font-size: .8rem;
   text-align: left;
   background-color: #ffffff;
   vertical-align: top;
}

.pp4_title > #sbs > #left_box > #design_options a
{
   font-size: .8rem;
   padding: 5px;
   text-decoration: none;
   min-width: 120px;
   margin: 0px 0px 5px 0px;
   background-color: #ffffff;
}

.pp4_title > #sbs > #left_box > #design_options a:hover
{
   background-color: #ffffff;
   color: #eeeeee;
}

.pp4_title > #sbs > #left_box > #design_options a:selected
{
   text-decoration: none;
}

.pp4_title > #sbs > #left_box > div:first-child #design_options_bottom
{
   padding: 5px;
   font-size: .8rem;
   background-color: #ffffff;
   flex-direction: row;
   flex-wrap: wrap;
   display: none;
   align-items: center;
   justify-content: center;
}

.pp4_title > #sbs > #left_box > div:first-child #design_options_bottom a
{
   font-size: .8rem;
   padding: 5px;
   text-decoration: none;
   margin: 0px 0px 5px 0px;
   background-color: #ffffff;
   text-align: center;
}

.pp4_title > #sbs > #left_box > div:first-child #design_options_bottom a:hover
{
   background-color: #ffffff;
   color: #eeeeee;
}

.pp4_title > #sbs > #left_box > div:first-child #design_options_bottom a:selected
{
   text-decoration: none;
}

.pp4_title > #sbs > #left_box > div:first-child #fltinfo
{
   font-size: 1.2rem; 
   font-weight: bold; 
   text-align: center; 
   margin-top: 10px;
}   


.pp4_pricedimensions
{
   border-bottom: 1px solid #555555;
   display: flex;
   flex-direction: row;
   justify-content: left;
   padding: 5px 0px;
   margin: 0px 0px 5px 0px;
}

.pp4_pricedimensions > div
{
   padding: 0px 20px;   
}

.pp4_option_tiles
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 1rem;
   width: 100%;
   background: #f0f0f0;   
}

.pp4_option_tiles .header
{
   font-size: 3rem;
   font-weight: bold;
   color: #222222;
   padding: 10px 0px 0px 10px;
}

.pp4_option_tiles .tiles
{
   display: flex;
   flex-direction: row;
   justify-content: left;
   font-size: 1rem;
   flex-wrap: wrap;
   padding: 20px;
}

.pp4_option_tiles .tiles .tile
{
   font-size: .95rem;
   font-family: Arial;
   text-align: center; 
   border: 10px solid white; 
   width: 155px;
   height: 80px;
   vertical-align: middle;
}

.pp4_option_tiles .tiles .tile a
{
	color: #ffffff; 
	text-decoration: none;
	display: inline;
	margin: auto;
}
.pp4_option_tiles .tiles .tile a:visited 
{
	text-decoration: none;
}
.pp4_option_tiles .tiles .tile a:hover 
{
	color: #000000;
	text-decoration: underline;
}



.pp4_select_topbar
{
   border-bottom: 1px solid #555555;
   background: #f0f0f0;
   text-align: left;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: left;
   background: url( '../site_images/600x200_wall_faded_001.png' ); 
   background-repeat: no-repeat; 
   background-position: center; 
   background-size: cover;   
}

.pp4_select_topbar div
{
   padding: 10px;
}

.pp4_select_topbar a
{
}

.pp4_select_topbar img
{
   vertical-align: middle;
}

.pp4_headerbartext
{
   font-size: 1.4rem;
   line-height: 25px;
   border-bottom: 1px solid #e0e0e0;
   width: 95%;
   font-weight: bold;
   text-align: left; 
   margin: 20px auto 10px auto;
   color: #555555;
}

.pp4_headertext
{
   font-size: 1.4rem;
   line-height: 30px;
   text-align: justify;   
   width: 95%;
   margin: 20px auto 10px auto;
   font-weight: bold;
   color: #555555;
}

.pp4_rowtocolumn
{
   display: flex;
   flex-direction: row;
   width: 100%;
   /* padding: 10px; */
   flex-wrap: nowrap;
}

.pp4_rowtocolumn > div
{
   padding: 10px;
}

.pp4_rowtocolumn img
{
   width: 100%;
}

.pp4_wrap
{
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: left;
   width: 100%;
   padding: 10px;
   flex-wrap: wrap;
}

.pp4_wrap > div
{
   padding: 10px;
}


.pp4_select_options
{
   padding: 5px; 
   text-align: left;
}

.pp4_select_options:nth-child(even) {background: #dddddd}
.pp4_select_options:nth-child(odd) {background: #ffffff}

.pp4_select_options .description
{
   display: flex;
   flex-direction: row;
   align-items: center;
}


.pp4_select_options .checked
{
   width: 20px;
   height: 20px;
}

.pp4_select_options .sku
{
   width: 20%;
}

.pp4_select_options .price
{
   padding-left: 40px;
   font-weight: bold;
}

.pp4_catalog_select_item div
{
   padding: 5px;
}

.pp4_catalog_select_item .description a
{
   text-decoration: none;
   line-height: 22px;
   word-spacing: 6px;
}

.pp4_backtoproject img
{
   width: 175px; 
   height: 38px;
}


.purchase_order .rtc
{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: left;
   width: 100%;
   padding: 10px;
}

.purchase_order .po_id
{
   border: 4px solid #d0d0d0;
   background-color: #f0f0f0;
   border-radius: 10px;
   text-align: center;
   font-size: 1.6rem;
   color: #555555;
   padding: 10px;
   margin-top: 20px;
   font-weight: bold;
   font-family: Arial;
}

.purchase_order .header_box
{
   text-align: center;
   font-size: 1rem;
   color: #555555;
   border: 2px solid #8888ff;
   border-radius: 10px;   
   margin: 10px 10px;
   background-color: #f0f0f0;
   padding: 10px;
}

.purchase_order .header_box .h
{
   font-size: 1.4rem;
   color: #5555ff;
   padding: 10px;
   font-weight: bold;
}

.purchase_order .header_box .d
{
   font-size: 1.2rem;
   color: #555555;
   padding: 5px 10px;;
   text-align: center;
}

.purchase_order .header_box .pt
{
   font-size: 1.1rem;
   color: #555555;
   padding: 10px 0px 10px 0px;
   text-align: center;
   font-weight: bold;
}


.purchase_order .header_box .total
{
   font-size: 1.5rem;
   font-weight: bold;
   font-family: Arial;
}

.purchase_order .header_box .subtotal
{
   font-size: 1.2rem;
   font-weight: bold;
   font-family: Arial;
}

.purchase_order .header_box div
{
   padding: 5px;
}

.purchase_order .header_box >div >div
{
   border: 2px solid #d0d0d0;
   font-size: 1.2rem;
   background-color: #fefefe !important;
   border-radius: 10px;
   padding: 5px 20px;
   margin-top: 10px;
}

.purchase_order .header_box .shdr
{
   color: #5555ff;
}


.purchase_order .section
{
   text-align: center;
   font-size: 1rem;
   color: #555555;
   border: 4px solid #d0d0d0;
   border-radius: 10px;   
   margin: 20px 10px;
   background-color: #ffffff;
   padding: 10px;
}

.purchase_order .section > .itemrow:nth-child(even) {background: #ffffff;}
.purchase_order .section > .itemrow:nth-child(odd)  {background: #f0f0f0;}

.purchase_order .section .cntnr
{
   display: flex; 
   flex-direction: row; 
   justify-content: space-between;
}
   
.purchase_order .section .hdr
{
   font-family: Arial; 
   font-size: 1.4rem;
   font-weight: bold;
   color: #5555ff;
   border-bottom: 2px solid #d0d0d0;
   padding: 10px;
   background: #f0f0f0;
}

.purchase_order .section .total
{
   font-family: Arial; 
   font-size: 1.4rem;
   font-weight: bold;
   color: #555555;
   text-align: right;
   padding: 10px;
   border-top: 2px solid #d0d0d0;
}

.purchase_order .section .itemrow
{
   padding: 20px 0px;
}

.purchase_order .section .itemrow .type
{
   font-family: Arial;
   font-size: 1.2rem;
   color: #5555ff;
}

.purchase_order .section .itemrow .typed
{
   font-family: Arial;
   font-size: 1.2rem;
   color: #555555;
   padding-top: 10px;
}

.purchase_order .section .itemrow .subitems
{
   font-family: Arial;
   font-size: 1rem;
   color: #555555;
   display: flex;
   flex-direction: column;
   width: 100%;
}
.purchase_order .section .qty_price
{
   max-width: 400px;
}



.purchase_order .section .itemrow .subitems tr:nth-child(even) {background: #ffffff;}
.purchase_order .section .itemrow .subitems tr:nth-child(odd) {background: #e0e0e0;}
.purchase_order .section .itemrow .subitems tr td
{
   padding: 10px;
}

.purchase_order .section .itemrow .subitems table
{
   min-width: 400px;
}


.purchase_order .section .slist
{
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: left;
   padding: 20px 40px;
   flex-wrap: wrap;
}   

.purchase_order .section .slist .item
{
   min-width: 100px;
   padding: 10px;
}   


.sso_input {
   position:fixed;
   top:25px;
   left:0px;
   z-index:1000;
   padding: 5px;
   background: #ADD8E6;
   height: 580px !important;
   width: 600px !important;
   margin: 0px;
   padding: 0px;
   display: none;
   opacity: .98;
}

.sso_tab 
{
   position:fixed;
   top:0px;
   left:0px;
   z-index:1000;
   max-width: 100px;
   padding: 5px;
   background: #2B60DE;
   color: #ffffff;
   font-family: Arial;
   font-weight: bold;
   font-size: .9rem;
   cursor: pointer;
}

.sso_button
{
   border: 2px solid #e0e0e0;
   padding: 5px;
   font-size: 1.2rem;
   background: #f0f0f0;
   text-decoration: none;
   display: inline-block;
   border-radius: 5px;
   font-family: Arial;
}

.rotate {

  transform: rotate(-180deg);

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-180deg);

  /* Firefox */
  -moz-transform: rotate(-180deg);

  /* IE */
  -ms-transform: rotate(-180deg);

  /* Opera */
  -o-transform: rotate(-180deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}


.confirm_dialog_1
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:2000;
   visibility: hidden;
   opacity: 1;
   background: rgb(5, 5, 5); /* Fallback for older browsers without RGBA-support */
   background: rgba(5, 5, 5, 0.9);
}

.confirm_dialog_1 > div
{
   display: flex;
   flex-direction: column;
   opacity: 1;
   background: #ffffff;
   padding: 20px 30px 20px 30px;
   max-width: 800px;
}

.confirm_dialog_1 > div > div:first-child
{
   display: flex;
   flex-direction: row;
   padding-bottom: 20px;
   border-bottom: 1px solid #e0e0e0;
}

.confirm_dialog_1 > div > div:last-child
{
   display: flex;
   flex-direction: row;
   justify-content: right;
}

.confirm_dialog_1 > div > div:first-child > div:first-child > img
{
   width: 130px;
}

.confirm_dialog_1 > div >  div:first-child > div:last-child
{
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-content: left;
   text-align: left;
   margin: 10px 0px 0px 20px;
}

.confirm_dialog_1 > div >  div:first-child > div:last-child > div:first-child
{
   font-size: 1.4rem;
   font-weight: bold;
   margin-bottom: 20px;
}

.confirm_dialog_1 > div >  div:first-child > div:last-child > div:last-child
{
   font-size: 1.1rem;
   line-height: 1.4;
}

.confirm_dialog_1 > div > div:last-child > div
{
   border: 1px solid #007FFF;
   padding: 5px 25px 5px 25px;
   font-size: 1rem;
   background: #ffffff;
   text-decoration: none;
   display: inline-block;
   margin: 20px 0px 0px 10px;
   border-radius: 3px;
   font-weight: bold;
   color: #007FFF;
   vertical-align: middle;
}

.confirm_dialog_1 > div > div:last-child > div:hover
{
   background: #007FFF;
   color: #ffffff;
   cursor: pointer !important;
}


@media screen and (max-width: 1000px) 
{
   /* stack the logo and menu */
   header div.hbar2
   {
      flex-direction: column;
   }
   

   .confirm_dialog_1 > div
   {
      width: 90%;
   }

   .alert_dialog > div
   {
      width: 90%;
   }

   .notify_dialog > div
   {
      width: 90%;
   }

   .purchase_order .rtc
   {
      flex-direction: column;
   }
   
   .purchase_order .section .itemrow .subitems table .ppimage
   {
      display: none;
   }
   
   .cart_productsection .item_details .ppimage
   {
      display: none;
   }
   
   .purchase_order .section .itemrow .subitems table
   {
      min-width: 250px;
   }
   
   .purchase_order .section .qty_price
   {
      max-width: 1000px;
   }
   
   .purchase_order .section .itemrow .subitems
   {
      font-size: .9rem;
   }
   
   .pp4_title > #sbs
   {
      flex-direction: column;
      justify-content: center;
      align-items: center; 
   }
}   

@media screen and (max-width: 600px) 
{
   .pp4_title > #sbs > #left_box > div:first-child > div:first-child  img
   {
      width: 100%;
   }

   .confirm_dialog_1 > div
   {
      width: 100%;
   }

   .catalog_image_overlay_div .lt
   {
      font-size: 3rem; 
   }

   .catalog_image_overlay_div .st
   {
      font-size: 1.5rem; 
   }

   .cart_productsection .item_details td
   {
      font-size: .8rem;
   }   

   .page_description_header h1
   {
      width: 100%;
      font-size: 1.1rem;
      left: 0px;
   }

   .rowtocolumn
   {
      flex-direction: column;
   }
   
   .pp4_title > div:first-child h1 
   {
      font-size: 1rem;
   }
   
   .pp4_pricedimensions > div
   {
      padding: 5px 10px;   
      font-size: 1rem;
   }
   
   .pp4_option_tiles .header
   {
      text-align: left;
   }
      
   .pp4_option_tiles .tiles
   {
      justify-content: center;
      padding: 0px;
   }      
   
   .pp4_rowtocolumn
   {
      flex-direction: column;
   }
   
   .pp4_select_topbar
   {
      text-align: center;
   }   

   .pp4_select_topbar .backtoproject
   {
      text-align: left;
   }
   
   .pp4_select_topbar img
   {
      max-width: 200px;
   }   
   
   .pp4_select_options .description, .pp4_select_options .sku
   {
      width: 100%;
   }
   
   .pp4_select_options .sku
   {
      padding-left: 40px;
   }
}

.confirm_dialog
{
   background-color:#555555;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:2000;
   display: none;
   text-align: center;
   opacity: 1;
   margin:auto;
   text-align: center;
   background: rgb(5, 5, 5); /* Fallback for older browsers without RGBA-support */
   background: rgba(5, 5, 5, 0.9);
}

.confirm_dialog .box
{
   border: 6px solid #333333;
   border-radius: 10px;
   padding: 20px;
   width: 80%;
   margin: 80px auto;
   background: #f0f0f0;
   opacity: 1;
}

.confirm_dialog .question
{
   font-size: 2rem;
   font-weight: bold;
   color: #555555;
   padding: 20px;
}

.confirm_dialog .btn
{
   border: 4px solid #aaaaaa;
   padding: 20px;
   font-size: 1.6rem;
   font-weight: bold;
   background: #ffffff;
   text-decoration: none;
   display: inline-block;
   border-radius: 10px;
   margin: 20px;
}


.alert_dialog
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:2000;
   visibility: hidden;
   opacity: 1;
   background: rgb(5, 5, 5); /* Fallback for older browsers without RGBA-support */
   background: rgba(5, 5, 5, 0.9);
}

.alert_dialog > div
{
   display: flex;
   flex-direction: column;
   opacity: 1;
   background: #ffffff;
   padding: 20px 30px 20px 30px;
}

.alert_dialog > div > div:first-child
{
   display: flex;
   flex-direction: row;
   padding-bottom: 20px;
   border-bottom: 1px solid #e0e0e0;
}

.alert_dialog > div > div:last-child
{
   display: flex;
   flex-direction: row;
   justify-content: right;
}

.alert_dialog > div > div:first-child > div:first-child > img
{
   width: 130px;
}

.alert_dialog > div >  div:first-child > div:last-child
{
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-content: center;
   text-align: left;
   margin: 10px 0px 0px 20px;
}

.alert_dialog > div >  div:first-child > div:last-child > div
{
   font-size: 1.1rem;
   margin-bottom: 20px;
   line-height: 30px;
   font-weight: bold;
}


.alert_dialog > div > div:last-child > div
{
   border: 1px solid #007FFF;
   padding: 5px 25px 5px 25px;
   font-size: 1rem;
   background: #ffffff;
   text-decoration: none;
   display: inline-block;
   margin: 20px 0px 0px 10px;
   border-radius: 3px;
   font-weight: bold;
   color: #007FFF;
}

.alert_dialog > div > div:last-child > div:hover
{
   background: #007FFF;
   color: #ffffff;
   cursor: pointer !important;
}


.notify_dialog
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:2000;
   visibility: hidden;
   opacity: 1;
   background: rgb(5, 5, 5); /* Fallback for older browsers without RGBA-support */
   background: rgba(5, 5, 5, 0.9);
}

.notify_dialog > div
{
   display: flex;
   flex-direction: column;
   opacity: 1;
   background: #ffffff;
   padding: 20px 30px 20px 30px;
}

.notify_dialog > div > div:first-child
{
   display: flex;
   flex-direction: row;
   padding-bottom: 20px;
   border-bottom: 1px solid #e0e0e0;
}

.notify_dialog > div > div:last-child
{
   display: flex;
   flex-direction: row;
   justify-content: right;
}

.notify_dialog > div > div:first-child > div:first-child > img
{
   width: 130px;
}

.notify_dialog > div >  div:first-child > div:last-child
{
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-content: center;
   text-align: left;
   margin: 10px 0px 0px 20px;
}

.notify_dialog > div >  div:first-child > div:last-child > div
{
   font-size: 1.1rem;
   margin-bottom: 20px;
   line-height: 30px;
   font-weight: bold;
}


.notify_dialog > div > div:last-child > div
{
   border: 1px solid #007FFF;
   padding: 5px 25px 5px 25px;
   font-size: 1rem;
   background: #ffffff;
   text-decoration: none;
   display: inline-block;
   margin: 20px 0px 0px 10px;
   border-radius: 3px;
   font-weight: bold;
   color: #007FFF;
}

.notify_dialog > div > div:last-child > div:hover
{
   background: #007FFF;
   color: #ffffff;
   cursor: pointer !important;
}

.continue_shopping
{
   font-size: 2rem; 
   color: #6666ff; 
   text-decoration: none; 
   padding: 30px; 
   background: #eeeeff;
}

.waiting_overlay {
    width:100%;
    height:100%;
    overflow:hidden;
 }
.waiting_overlay > div {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background-color: black;
  opacity:0.5;
 }

.waiting_overlay > div > img 
{
   width: 20%; 
   position: absolute; 
   left: 40%; 
   top: 40%;
}   


.product_crumbs
{
   width: 100%;
   text-align: left;
}

.product_crumbs > table
{
   font-size: .8rem;
   display: inline-block !important;
}

.product_crumbs > table  td
{
   width: min-content;
   text-align: center;
}

.breadcrumbs
{
   display: flex;
   flex-direction: row;   
   flex-wrap: wrap;
   margin-top: auto;
   margin-bottom: 5px;
   padding: 5px 10px 5px 10px;
   background: rgba(255, 255, 255, 0.8);   
}

.breadcrumbs > div
{
   display: flex;
   flex-direction: row;   
   flex-wrap: wrap; 
}


.breadcrumbs > div > div
{
   margin-right: 3px;
   font-size: 1rem;
   color: #000000;
}

.breadcrumbs > div > div > a
{
   font-size: 1rem;
   color: #000000;
}

@media screen and (max-width: 600px) 
{
   .breadcrumbs
   {
   }

   .breadcrumbs > div > div > a
   {
      font-size: .9rem;
   }
}

.header_reviews
{
   display: flex; 
   flex-direction: column; 
   align-items: center; 
   margin-right: 20px;
   margin-top: 2px;
}

@media screen and (max-width: 650px) 
{
   .header_reviews
   {
      display: none;
   }   
   
}


#back_to_top_button{
  display: none;
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%, -50%);  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #9e6060;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#back_to_top_button:hover {
  background-color: #614a40;
}

#add_frame_sample
{
   display: none;
}


.nl1_inputpair
{
   font-size: 1rem;
   text-align: left;
   border: 2px solid #e0e0e0;
   margin: 10px 10px 10px 0px;
   width: 100%;
   border-radius: 5px;
}

.nl1_inputpair:focus-within
{
   border: 2px solid #0000a0 !important;
}

.nl1_inputdescription
{
   font-size: 1rem;
   color: #222222;
}


.nl1_inputbox
{
   border: 0px solid #e0e0e0;
   font-size: 1.2rem;
   background-color: transparent;
   font-family: Arial;
   color: #555555;
   padding: 5px;
}

.nl1_inputbox:focus { 
    outline: none; 
    background-color: transparent;
 }

/* row to column div */
.nl1_rowtocolumn
{
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: left;
   width: 100%;
}

.nl1_rtc_center
{
   justify-content: center;
   align-items: center;
}

.nl1_rowtocolumn > div
{
   padding: 10px;
}

.nl1_rowtocolumn img
{
   width: 100%;
}

@media screen and (max-width: 1200px) 
{
   .nl1_rowtocolumn
   {
      flex-direction: column;
   }
}


.form_container
{
   width: 100%; 
   text-align: left; 
   margin-left: auto; 
   margin-right: auto;
}   


.rbody
{
   width: 100%;
   /* text-align: center; */
}

.rbody .ebox
{
   text-align: center;
   width: 50%;
   margin: 40px auto 40px auto;
}

.rbody .pp4_ebox
{
   width: 50%;
   margin: 40px auto 40px auto;
}

@media screen and (max-width: 1500px) 
{
   .rbody .pp4_ebox
   {
      width: 70%;
   }      
}

@media screen and (max-width: 1000px) 
{
   .rbody .pp4_ebox
   {
      width: 80%;
   }      
}

@media screen and (max-width: 800px) 
{
   .mat_samples_sticky_header
   {
      flex-direction: column;
   }
   .mat_samples_grid
   {
      grid-template-columns: 16% 16% 16% 16% 16% 16% ;
   }
   
   .mat_samples_grid > div
   {
      padding: 3px;
   }

   .mat_samples_grid > div > div
   {
      overflow: hidden;
   }

   .mat_samples_selected > div
   {
      width: 20px;
      height: 20px;
      min-height: 20px;
   }      

   .rbody .ebox
   {
      width: 90%;
   }      
}

.pw_eye
{
   vertical-align: bottom; 
   width: 30px !important; 
   margin-left: 5px; 
   display: inline-block;
}


.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 600px;
  background-color: #f0f0f0;
  color: #555555;
  text-align: left;
  font-size: 1rem;
  border-radius: 5px;
  padding: 20px;
  position: absolute;
  z-index: 1;
  top: 90%;
  left: -250px;
  line-height: 30px;
  font-family: Roboto;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext:hover{
  visibility: hidden !important;
}


@media screen and (max-width: 600px) 
{
   .tooltip .tooltiptext {
     width: 500px;
     left: -100px;
   }
}


.asap-1001 {
  font-family: "Asap", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.hdr_menu-ff-001, .hdr_wpf-logo-1-002, .hdr_menu-supplies-001, .hdr_menu-mats-001, .hdr_menu-cf-001, 
.hdr_menu-mats-1-002
{ max-width: 100%; background-size: 100%; background-image: url('../site_images/hdr_desktop_sprite_001.webp'); }
.hdr_menu-ff-001 { background-position: 0 0%; background-size: 100%; }
.hdr_wpf-logo-1-002 { background-position: 0 12.335329%; background-size: 101.214575%; }
.hdr_menu-supplies-001 { background-position: 0 21.638924%; background-size: 107.066381%; }
.hdr_menu-mats-001 { background-position: 0 41.285714%; background-size: 166.666667%; }
.hdr_menu-cf-001 { background-position: 0 69.405099%; background-size: 250%; }
.hdr_menu-mats-1-002 { background-position: 0 100%; background-size: 255.102041%; }





.hp_atf_hero-1-002, .hp_atf_hero-2-002, .hp_atf_custom-wood-002, .hp_atf_floaters-002, .hp_atf_mats-002, 
.hp_atf_metal-002
{ max-width: 100%; background-size: 100%; background-image: url('../site_images/hp_atf_desktop_sprite_001.webp'); }
.hp_atf_hero-1-002 { background-position: 0 0%; background-size: 100%; }
.hp_atf_hero-2-002 { background-position: 0 27.189989%; background-size: 167.597765%; }
.hp_atf_custom-wood-002 { background-position: 0 49.895616%; background-size: 300%; }
.hp_atf_floaters-002 { background-position: 0 66.597077%; background-size: 300%; }
.hp_atf_mats-002 { background-position: 0 83.298539%; background-size: 300%; }
.hp_atf_metal-002 { background-position: 0 100%; background-size: 300%; }


.hp_btf_box-5-002, .hp_btf_box-lady-camera-001, .hp_btf_cares-about-artists-002, .hp_btf_man-box-002, .hp_btf_box-4-black-frames-001, 
.hp_btf_box-4-floater-frames-001, .hp_btf_box-4-gold-frames-001, .hp_btf_box-4-white-frames-001, .hp_btf_5-star-red-3d-001, .hp_btf_sadb1-acrylic-glass-001, 
.hp_btf_sadb1-black-frames-001, .hp_btf_sadb1-collage-mats-001, .hp_btf_sadb1-metal-frames-001, .hp_btf_sadb1-picture-mats-001, .hp_btf_sadb1-supplies-001
{ max-width: 100%; background-size: 100%; background-image: url('../site_images/hp_btf_desktop_sprite_001.webp'); }
.hp_btf_box-5-002 { background-position: 0 0%; background-size: 100%; }
.hp_btf_box-lady-camera-001 { background-position: 0 15.231788%; background-size: 100%; }
.hp_btf_cares-about-artists-002 { background-position: 0 30.463576%; background-size: 100%; }
.hp_btf_man-box-002 { background-position: 0 45.695364%; background-size: 100%; }
.hp_btf_box-4-black-frames-001 { background-position: 0 57.5%; background-size: 250%; }
.hp_btf_box-4-floater-frames-001 { background-position: 0 66.25%; background-size: 250%; }
.hp_btf_box-4-gold-frames-001 { background-position: 0 75%; background-size: 250%; }
.hp_btf_box-4-white-frames-001 { background-position: 0 83.75%; background-size: 250%; }
.hp_btf_5-star-red-3d-001 { background-position: 0 86.046512%; background-size: 909.090909%; }
.hp_btf_sadb1-acrylic-glass-001 { background-position: 0 88.235294%; background-size: 1000%; }
.hp_btf_sadb1-black-frames-001 { background-position: 0 90.588235%; background-size: 1000%; }
.hp_btf_sadb1-collage-mats-001 { background-position: 0 92.941176%; background-size: 1000%; }
.hp_btf_sadb1-metal-frames-001 { background-position: 0 95.294118%; background-size: 1000%; }
.hp_btf_sadb1-picture-mats-001 { background-position: 0 97.647059%; background-size: 1000%; }
.hp_btf_sadb1-supplies-001 { background-position: 0 100%; background-size: 1000%; }



.svg_fancy-border-1-001, .svg_caret-down-001, .svg_eye-password-001, .svg_sale-banner-001, .svg_information-001, 
.svg_plus-001, .svg_dlg-green-exclamation-mark-002, .svg_dlg-question-mark-002, .svg_dlg-red-exclamation-mark-002, .svg_dlg-yellow-exclamation-mark-002, 
.svg_green-check-001, .svg_facebook, .svg_google-plus, .svg_pinterest, .svg_red-x-001, 
.svg_caret-down-002, .svg_account, .svg_caret-down-003, .svg_cart, .svg_search
{max-width: 100%;background-size: 100%;background-image: url('../site_images/svg_desktop_sprite_001.webp');}
 
.svg_fancy-border-1-001 { background-position: 0 0%; background-size: 100%; }
.svg_caret-down-001 { background-position: 0 12.586957%; background-size: 327.25%; }
.svg_eye-password-001 { background-position: 0 30.195652%; background-size: 327.25%; }
.svg_sale-banner-001 { background-position: 0 49.216652%; background-size: 370.29703%; }
.svg_information-001 { background-position: 0 61.061431%; background-size: 1022.65625%; }
.svg_plus-001 { background-position: 0 66.232504%; background-size: 1022.65625%; }
.svg_dlg-green-exclamation-mark-002 { background-position: 0 70.784352%; background-size: 1246.666667%; }
.svg_dlg-question-mark-002 {background-position: 0 75.043361%;background-size: 1246.666667%;}
.svg_dlg-red-exclamation-mark-002 { background-position: 0 79.30237%; background-size: 1246.666667%; }
.svg_dlg-yellow-exclamation-mark-002 { background-position: 0 83.56138%; background-size: 1246.666667%; }
.svg_green-check-001 { background-position: 0 86.667935%; background-size: 1843.661972%; }
.svg_facebook { background-position: 0 89.050681%; background-size: 2337.5%; }
.svg_google-plus { background-position: 0 91.357791%; background-size: 2337.5%; }
.svg_pinterest { background-position: 0 93.664902%; background-size: 2337.5%; }
.svg_red-x-001 { background-position: 0 95.845137%; background-size: 2493.333333%; }
.svg_caret-down-002 { background-position: 0 97.924528%; background-size: 2618%; }
.svg_account { background-position: 0 98.513011%; background-size: 13090%; }
.svg_caret-down-003 { background-position: 0 98.886827%; background-size: 13090%; }
.svg_cart { background-position: 0 99.442379%; background-size: 13090%; }
.svg_search { background-position: 0 100%; background-size: 13090%; }

.mmcaret > div
{
   width: 45px;
   height: 26px;
}

.mmcaret > div:hover
{
   cursor: pointer;
}

.hero_box
{
   width: 100%; 
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   max-width: 1700px;
   margin-left: auto;
   margin-right: auto;
   
}

.hero_box > div
{
   display: flex;
   flex-direction: column-reverse;
   margin: .9vw;
   height: 25vw;
}

.hero_box > div:first-child 
{
   width: 60%;
}

.hero_box > div > div
{
   align-self: flex-end;
   margin-right: 40px;
   margin-bottom: 30px;
}
   
.hero_box > div:last-child 
{
   width: 35%;
}

.hero_box > div > div > div:first-child,  .hero_box > div > div > div:first-child > h2
{
   margin-bottom: 10px;
   font-size: 2.8rem;
   font-family: Asap;
   color: #ffffff;
   margin-left: 15px;
   letter-spacing: 2px;
   font-weight: normal;
   display: inline-block;
   font-weight: normal;
   text-shadow: 0px 10px 82px rgba(0, 0, 0, 0.9), 0px 0px 6px rgba(0, 0, 0, 0.9), 0px 0px 18px rgba(0, 0, 0, 0.9);   
}

.hero_box > div > div > div:last-child
{
   text-align: right;
}

.hero_box .hb_button
{
   display: inline-block;
   border: 1px solid #888888;
   padding: 12px 40px 12px 40px;
   background-color: #f0eae5;
   border-radius: 10px;
   text-decoration: none;
   font-size: 1rem;
   font-weight: bold;
   color: #3b292e;
   box-shadow: 2px 2px 9px #27262f;   
   white-space: nowrap;
   letter-spacing: 2px;
}

.hero_box .hb_button:hover
{
   color: #543523;
   background-color: #ccbcb4;
}

.madb_container
{
   width: 100%;
   background-color: #f0eae5;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   padding: 10px;
}

.madb_container > div:nth-child(1)
{
   order: 1;
   margin-top: 20px;
}

.madb_container > div:nth-child(1) > h1
{
   font-family: Asap;
   font-size: 2.6rem;
   font-weigh: 900;
}

.madb_container > div:nth-child(2)
{
   order: 2;
   font-family: Asap;
   font-size: 1.6rem;
   margin: 10px 20px 10px 20px;
}

.madb_container > div:nth-child(2) > a
{
   color: #323131;
   text-decoration: none;
   font-family: Asap;
   font-size: 1.4rem;
   margin-right: 15px;
}

.madb_container > div:nth-child(2) > a:hover
{
   color: #843523;
   text-decoration: underline;
}

.madb_container > div:nth-child(3)
{
   order: 3;
   margin: 10px 30px 10px 30px;
   font-family: Asap;
   font-size: 1.2rem;
   font-weight: 400;
   color: #323131;
   line-height: 25px;
   letter-spacing: 1px;
}

.madb1
{
   order: 4;
   width: 100%; 
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-direction: row;
   margin-top: 10px;
}


.madb1 > div
{
   display: flex;
   justify-content: start;
   align-items: center;
   flex-direction: column;
   overflow: off;
   margin: 15px;
}

.madb1 > div > div
{
   width: 80%;
   text-align: center;
   padding-bottom: 3px;
}

.madb1 .b > a
{
   font-weight: normal;
   width: 100%;
   text-align: center;
   color: #333333;
   display: inline;
   margin: 0px;   
   padding-bottom: 0px;
   text-decoration: none;
   font-family: helvetica; 
   font-size: 2rem; 
   font-weight: bold;   
}

.madb1 .s > a
{
   font-family: Asap;
   font-weight: normal;
   width: 100%;
   text-align: center;
   color: #323131;
   display: inline;
   margin: 0px;   
   padding-bottom: 5px;
   text-decoration: none;
   font-size: 2.2rem; 
   letter-spacing: 3px;
}

.madb1 > div img
{
   display: inline; 
   width: 100%; 
}

.madb1 .mpi
{
   display: flex;
   height: 20vw;
   width: 20vw;
}

.madb1 .mpi a
{
   display: block;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
}   


.mp_quality
{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
   background-color: #757575;
   margin: 0px 0px 0px 0px;
   color: #ffffff;
}

.mp_quality > div
{
   display: flex;
   flex-direction: row;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   margin: 10px 0px 10px 0px;
   text-align: center;
}

.mp_quality > div > div:nth-child(2)
{
   border-right: 1px solid #aaaaaa;
   border-left: 1px solid #aaaaaa;
}

.mp_quality > div > div
{
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: center;
   font-family: Asap;
}

.mp_quality > div > div > div
{
   margin: 5px;
}

.mp_quality > div > div > div:first-child
{
   letter-spacing: 2px;
   font-size: 1.2rem;
}

.mp_quality > div > div > div:last-child
{
   font-size: 1rem;
   font-weight: 700;
}

.mp_box_text_pair
{
   display: flex;
   width: 100%;
   background-color: #323131;
   font-family: Asap;
   flex-direction: row;
}

.mp_box_text_pair > div
{
   width: 50%;
}   

.mp_box_text_pair > div:first-child
{
   min-height: 32vw;
}

.mp_box_text_pair > div:last-child
{
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   font-family: Asap;
   padding: 20px 10px 20px 10px;
}

.mp_box_text_pair > div:last-child > div:first-child
{
   font-weight: 400;
   font-size: 1.75rem;
   letter-spacing: 3px;
   margin: 0px 20px 0px 20px;

}

.mp_box_text_pair > div:last-child > div:last-child
{
   font-weight: 700;
   font-size: 1rem;
   font-family: Asap;
   margin: 20px;
   text-align: left;
   line-height: 28px;
}

.mp_box_text_pair .hb_button
{
   display: inline-block;
   padding: 12px 40px 12px 40px;
   background-color: #9e6060;
   border-radius: 10px;
   text-decoration: none;
   font-size: 1rem;
   font-weight: bold;
   color: #ffffff;
   box-shadow: 2px 2px 9px #27262f;   
   white-space: nowrap;
   letter-spacing: 2px;
}

.mp_box_text_pair .hb_button:hover
{
   background-color: #614a40;
}

.sadb1
{
   width: 100%; 
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-wrap: wrap;   
   text-align: center;
   background-color: #DCD7CE;
   padding: 20px 0px 20px 0px;
}

.sadb1 a
{
   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
   font-weight: 700;
   color: #343434;
   font-family: Asap;
   font-size: 1.25rem;
   letter-spacing: 3px;
   line-height: 30px;
}

.sadb1 > div:first-child
{
   margin: 20px 20px 30px 20px;
   font-weight: 700;
   font-size: 1.75rem;
   font-family: Asap;
   letter-spacing: 3px;
   color: #323131;
}

.sadb1 > div:last-child
{
   width: 100%; 
   display: flex;
   flex: 1;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;   
   text-align: center;
}

.sadb1 > div > div
{
   display: flex;
   justify-content: start;
   flex-direction: column;
   margin: 30px;
   text-align: center;
   max-width: 100px;
}

.sadb1 > div > div > div:first-child
{
   width: 100px;
   height: 100px;
   margin: 0px;
   padding: 0px;
}

.sadb1 > div > div > div:last-child
{
   margin-top: 30px;
}

.sadb1 .black
{
   left: 0px;
}   

.sadb1 .metal
{
   left: 0px;
}   

.sadb1 .collage_mats
{
   left: 0px;
}   

.sadb1 .gallery
{
   left: 0px;
}   

.sadb1 .acrylic
{
   left: 0px;
}   

.sadb1 .panel
{
   left: 0px;
}   

.mp_reviews_container
{
   background-color: #DCD7CE;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   font-family: Asap;
   letter-spacing: 1px;
   color: #323131;
   width: 100%;
}

.mp_reviews_container > div
{
   margin: 40px 20px 40px 20px;
}

.mp_reviews_container > div > div:first-child
{
   font-weight: 700;
   font-size: 2rem;
   margin-top: 25px;
   width: 100%;
   text-align: center;
}

.mp_reviews_container > div > div:nth-child(2)
{
   margin: 20px 5vw 20px 5vw;
   text-align: left;
   line-height: 25px;
   font-weight: 600;
}

.mp_reviews_container > div > div:nth-child(2) > span
{
   font-size: 1.25rem;
}

.mp_reviews_container > div > div:nth-child(3)
{
   margin: 20px 5vw 20px 5vw;
   text-align: left;
   line-height: 25px;
   display: flex;
   justify-content: left;
   align-items: center;
   flex-direction: column;
}

.mp_reviews_container > div > div:nth-child(3) > div
{
   display: flex;
   justify-content: left;
   align-items: left;
   flex-direction: column;
   width: 100%;
   margin: 10px 0px 25px 0px;
}

.mp_reviews_container > div > div:nth-child(3) > div > div:first-child
{
   min-width: 15vw;
   margin-right: 5px;
}

.mp_reviews_container > div > div:nth-child(3) > div > div:last-child
{
   font-style: italic;
}

.mp_reviews_container > div > div:nth-child(4)
{
   text-align: center;
}

.mp_reviews_container > div > div:nth-child(5)
{
   margin: 40px 0px 20px 0px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
}

.mp_reviews_container > div > div:nth-child(5) > div
{
   margin: 0px 5px 0px 5px;
}

.mp_reviews_container > div > div:nth-child(5) > div:first-child
{
   font-weight: 800;
   font-size: 1.75rem;
}

.mp_reviews_container > div > div:nth-child(5) > div:nth-child(3)
{
   font-size: .9rem;
}

.mp_reviews_container .review > div:first-child
{
   margin-bottom: 7px;
   font-weight: 600;
   font-size: 1.2rem;
}

.mp_reviews_container .review_text_hidden
{
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  max-height:  80px;
  min-height: 30px;
  overflow: hidden;
}

.mp_reviews_container .review_text_shown
{
  max-height:  500px;
  overflow: auto;
}



.mp_box_4
{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
   background-color: #757575;
   margin: 0px 0px 0px 0px;
   color: #ffffff;
}

.mp_box_4 > div
{
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: top;
   margin: 10vw 10vw 10vw 10vw;
   text-align: center;
}

.mp_box_4 > div > div:first-child
{
   font-weight: 400;
   font-size: 1.75rem;
   letter-spacing: 3px;
}

.mp_box_4 > div > div:last-child
{
   display: flex;
   flex-direction: row;
   width: 100%;
   align-items: flex-start;
   justify-content: center;
   margin-top: 20px;
}

.mp_box_4 > div > div:last-child > div
{
   margin: 0px 20px 0px 20px;
   width: 20%;
}


.mp_box_4 > div > div:last-child > div a
{
   display: block;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   text-decoration: none;
}

.mp_box_4 > div > div:last-child > div > div:first-child
{
   height: 16vw;
   width: 100%;
   margin: 0px;
   padding: 0px;
}


.mp_box_4 > div > div:last-child > div > div:nth-child(2)
{
   margin-top: 20px;
   font-size: 1.75rem;
   letter-spacing: 3px;
   font-weight: 400;
}

.mp_box_4 > div > div:last-child > div > div:last-child
{
   margin-top: 20px;
   font-size: 1rem;
   letter-spacing: 3px;
   font-weight: 400;
}

.mp_box_4 .black
{
   left: 0px;
}   

.mp_box_4 .gold
{
   left: 0px;
}   

.mp_box_4 .white
{
   left: 0px;
}   

.mp_box_4 .floater
{
   left: 0px;
}   

@media screen and (max-width: 1500px) 
{

   .mp_box_text_pair > div:last-child > div:first-child
   {
      font-size: 1.5rem;
      line-height: 20px;
      margin: 0px 18px 0px 18px;
   }

   .mp_box_text_pair > div:last-child > div:last-child
   {
      font-weight: 400;
      font-size: .9rem;
      line-height: 22px;
      margin: 2vw;
   }
   
   .mp_box_text_pair .hb_button
   {
      font-size: .9rem;
      padding: 10px 30px 10px 30px;
   }
}

@media screen and (max-width: 1350px) 
{
   .mp_box_text_pair > div:last-child > div:first-child
   {
      font-size: 1.2rem;
      line-height: 20px;
   }

   .mp_box_text_pair > div:last-child > div:last-child
   {
      font-size: .8rem;
      line-height: 20px;
   }

   .mp_box_text_pair > div:last-child #hide
   {
      display: none;
   }
   
   .mp_box_text_pair .hb_button
   {
      font-size: .8rem;
      padding: 7px 25px 7px 25px;
   }
}

@media screen and (max-width: 1050px) 
{
   .mp_box_text_pair > div:last-child > div:first-child
   {
      font-size: .9rem;
      line-height: 20px;
      margin: 0px 15px 0px 15px;
   }
}

@media screen and (max-width: 1000px) 
{
   .madb1 .s > a
   {
      font-size: 1.4rem;
   }
   
   .madb_container > div:nth-child(1) > h1
   {
      font-size: 1.8rem;
   }
   
   .madb_container > div:nth-child(2)
   {
      font-size: 1.2rem;
   }
   
   .madb_container > div:nth-child(2) > a
   {
      font-size: 1.2rem;
   }
   
   .sadb1 .s > a
   {
      font-size: 1.4rem;
   }
   
   .mp_box_4 > div > div:last-child > div > div:last-child
   {
      font-size: 1.4rem;
   }
}

@media screen and (max-width: 925px) 
{
   .mp_box_text_pair
   {
      flex-direction: column;
   }
   
   .mp_box_text_pair > div
   {
      width: 100%;
   }   
   
   .mp_box_text_pair > div:first-child
   {
      min-height: 65vw;
   }
   
   .mp_box_4 > div > div:last-child > div > div:last-child
   {
      font-size: 1rem;
   }
   
   .mp_box_text_pair > div:last-child #hide
   {
      display: inherit;
   }
}

@media screen and (max-width: 800px) 
{
   .hero_box
   {
      flex-direction: column;   
   }   
   
   .hero_box > div
   {
      width: 90vw !important;
   }

   .hero_box > div:first-child 
   {
      height: 45vw;
   }   
   
   .hero_box > div:last-child 
   {
      height: 60vw;
   }   
   
   .madb_container > div:nth-child(1) > h1
   {
      font-size: 1.6rem;
   }

   .madb_container > div:nth-child(2) > a:first-child
   {
      display: none;
   }
   .madb_container > div:nth-child(2) > a:nth-child(2)
   {
      display: none;
   }
   .madb_container > div:nth-child(2) > a:nth-child(3)
   {
      display: none;
   }
   
   .hp_atf_custom-wood-002, .hp_atf_floaters-002, .hp_atf_mats-002, .hp_atf_metal-002
   { max-width: 100%; background-size: 100%; background-image: url('../site_images/hp_atf_mobile_sprite_001.webp'); }

   .hp_atf_custom-wood-002 { background-position: 0 0%; background-size: 100%; }
   .hp_atf_floaters-002 { background-position: 0 33.333333%; background-size: 100%; }
   .hp_atf_mats-002 { background-position: 0 66.666667%; background-size: 100%; }
   .hp_atf_metal-002 { background-position: 0 100%; background-size: 100%; }   

   .hp_btf_box-5-002, .hp_btf_box-lady-camera-001, .hp_btf_cares-about-artists-002, .hp_btf_man-box-002, .hp_btf_box-4-black-frames-001, 
   .hp_btf_box-4-floater-frames-001, .hp_btf_box-4-gold-frames-001, .hp_btf_box-4-white-frames-001, .hp_btf_5-star-red-3d-001, .hp_btf_sadb1-acrylic-glass-001, 
   .hp_btf_sadb1-black-frames-001, .hp_btf_sadb1-collage-mats-001, .hp_btf_sadb1-metal-frames-001, .hp_btf_sadb1-picture-mats-001, .hp_btf_sadb1-supplies-001
   { max-width: 100%; background-size: 100%; background-image: url('../site_images/hp_btf_mobile_sprite_001.webp'); }
    
   .hp_btf_box-5-002 { background-position: 0 0%; background-size: 100%; }
   .hp_btf_box-lady-camera-001 { background-position: 0 15.828957%; background-size: 100%; }
   .hp_btf_cares-about-artists-002 { background-position: 0 31.657914%; background-size: 100%; }
   .hp_btf_man-box-002 { background-position: 0 47.486872%; background-size: 100%; }
   .hp_btf_box-4-black-frames-001 { background-position: 0 57.847841%; background-size: 400%; }
   .hp_btf_box-4-floater-frames-001 { background-position: 0 63.673749%; background-size: 400%; }
   .hp_btf_box-4-gold-frames-001 { background-position: 0 69.499657%; background-size: 400%; }
   .hp_btf_box-4-white-frames-001 { background-position: 0 75.325565%; background-size: 400%; }
   .hp_btf_sadb1-acrylic-glass-001 { background-position: 0 79.784367%; background-size: 600%; }
   .hp_btf_sadb1-black-frames-001 { background-position: 0 83.827493%; background-size: 600%; }
   .hp_btf_sadb1-collage-mats-001 { background-position: 0 87.87062%; background-size: 600%; }
   .hp_btf_sadb1-metal-frames-001 { background-position: 0 91.913747%; background-size: 600%; }
   .hp_btf_sadb1-picture-mats-001 { background-position: 0 95.956873%; background-size: 600%; }
   .hp_btf_sadb1-supplies-001 { background-position: 0 100%; background-size: 600%; }
   
}

@media screen and (max-width: 600px) 
{
   
   .mp_quality > div > div > div:first-child
   {
      font-size: 1rem;
   }

   .mp_quality > div > div > div:last-child
   {
      font-size: .8rem;
   }

   .hero_box
   {
      display: none;
   }   

   .madb_container > div:nth-child(1) > h1
   {
      font-size: 1.2rem;
   }
   
   .madb_container > div:nth-child(2)
   {
      order: 5;
      font-size: 1.2rem;
   }

   .madb_container > div:nth-child(3)
   {
      margin: 10px 20px 10px 20px;
      order: 6;
   }
   
   .madb1
   {
      flex-wrap: wrap;
      justify-content: space-between;
   }
   
   .madb1 .mpi
   {
      height: 35vw;
      width: 35vw;
   }
      
   .madb1 > div
   {
      width: 45%;
      margin: 5px;
   }

   .mp_box_4
   {
      display: none;
   }
}


@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font_1.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font_1.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font_1.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font_1.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font_1.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/roboto_font_1.woff2') format('woff2');
}

@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/asap_font_1.woff2') format('woff2');
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../css/asap_font_2.woff2') format('woff2');
}