@import url("icns.css");
    @import url("slimgrid.css");
    

/* ------------------------------------------------------------------------------------------------------

    Responsive Styles (Mobile First) | Just Love Coffee Roasters
    
    This stylesheet employs Relative Sizing (target * context = result) in EM to allow complete device
    independence without the need of heavy Media Query introduction. The presentation should flex
    naturally with minimal Media Query breakpoints needed.
    
    This stylesheet also employs a Mobile First philosophy so the primary styles are centered on the mobile
    device. Tablet and Desktop style adjustments are incorporated via Media Queries at the bottom of this
    document. Instead of building large to small, this approach builds small to large to retain scale and 
    flexibility in regards to device real estate.
    
    
    00. Site Colors
    
        - #f1efe8 (Tan)
        - #f6f4ee (Light Tan)
        - #e24307 (Red)
        - #fe6918 (Light Red)
        - #bf2d06 (Dark Red)
        - #b8bf0d (Green)
        - #e4e6ba (Light Green-Yellow)
        - #bae6e2 (Blue-green)
        - #512c1e (Brown)
        - #d3ccb9 (Light Brown)
        - #a49483 (Lighter Brown)
        - #75c8b9 (Blue-green)
    
    
    01. CSS Philosophy
    
        - Use child selectors to minimize expense of DOM traversal
        - Use general classes for high-level layout and presentation
        - Follow the general class with a specific class name for locational layout and presentation styles
        - Site heading sizes SHOULD be configured under the global styles section and never over written
        - Use the overflow property with a value of hidden on a container for float clearing when possible
        - Child selectors should only go four selectors deep to avoid unmanageable specificity
        - Use classes at the end of a selector as much as possible to minimize expense of DOM traversal
        - margin spacing for page sections and components should be placed on the bottom of each container
        - CSS Document is broken up by container type with the general container styles located at the top
          followed by specific container rules
        - JQM style overwrites are placed at the bottom of the respective container type section
        - Containers that are not displayed on mobile are collected by selector at the bottom of the Global
          Styles section
        
        - EM Breakpoints
        
            - 20em 		~ 320px
    		- 30em 		~ 480px
    		- 37.5em 	~ 600px
    		- 48em		~ 768px
    		- 56.25em	~ 900px
    		- 65.6em	~ 1050px
    		- 68.75em	~ 1100px
    		- 81.25em	~ 1300px
        
    02. General Classes
        
        - Establishes high-level layout and presentation
        - Followed by a more specific class to address non-standard styles
        - HTML example --- class="btn video" or class="lst comment"
        - CSS example --- .btn.video or .lst.comment
    
        - .pag - general page container
        - .cmp - general component container
        - .btn - general button
        - .blk - general block level container
        - .tbl - general tabular data
        - .lst - general unordered, ordered, or definition list
        - .hdr - general header container
        - .bdy - general body container
        - .ftr - general footer container
        - .pnl - general panel container
        
    03. CSS Sections
    
        A. Basic Reset
        B. Typography
        C. Global Styles
        D. Flebox
        E. Page Containers
        F. Home Page
        G. Shop Product Page
        H. Shop Listing Page
        I. Shop Cart Page
        J. Article Page
        K. Beanificary Page  
        
------------------------------------------------------------------------------------------------------ */


/* A. Basic Reset
------------------------------------------------------------------------------------------------------ */

    *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
	article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,canvas { display:block }
	a img{ border:0 }
	figure { position:relative }
	figure img { width:100% }
	

/* B. Typography
------------------------------------------------------------------------------------------------------ */

    a { 
        text-decoration: none; color: #e24307; 
        text-decoration: none;
        -o-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -khtml-transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        transition: all 0.3s linear;
        }
    a:active, a:visited {}
    a:focus, a:hover { color: #bf2d06;  
        }
        
    body, input, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, san-serif; color: #512c1e; }
    
	
	h1 { font-size: 2em; color: #e24307; font-weight: normal; margin-bottom: 20px; }
	h2 { font-size: 1.8em; }
	h3 { font-size: 1.6em; font-weight: normal; }
	h4 { font-size: 1.4em; }
	h5 { font-size: 1.2em; }
	h6 { font-size: 1.1em; }
	
	h1, h2, h3, h4, h5, h6 { line-height: 1.2em; }
	
	p, input, label { font-size: 1em; line-height: 1.3em; padding-bottom: 10px; }
    

/* C. Global
------------------------------------------------------------------------------------------------------ */

    body { background-color: #f1efe8; }
    .blk, .lst, .frm, .nav { overflow: hidden; }
    li { list-style: none; }
    
    /* --- Turned off on mobile or controlled by behavior --- */
    
        .blk.user-account, .frm.site-search, [data-role="drawer"], .blk.filters-desktop { display: none; }
    
    
    /* --- Shop Drawer Menu --- */
    
        .drw-menu { display: block; width: 100%; padding: 10px 10px 0 10px; }
        .drw-menu > span { float: right; }
        
        .blk.filters-mobile { margin: 10px; border-top: 1px solid rgba(255,255,255,.1); }
        
            @media only screen and (min-width: 56.25em) { /* ~ 900px */
                .drw-menu, .blk.filters-mobile { display: none; }
                .blk.filters-desktop { display: block; }
                }
    
    
    /* --- Forms --- */
    
        .frm [type="text"], .frm [type="password"], .frm [type="email"], .frm textarea { border: 0 none; padding: 5px 10px; } 
        .frm .tbl [type="text"] { padding: 0 10px; }
        .frm select { padding: 4px 0; font-size: .8em; }
        .frm [type="submit"] { cursor: pointer; }
        .frm label { display: block; padding-bottom: 5px; }
        .frm label > span { color: #e24307; }
        .frm > h3, .frm > .tbl { margin-bottom: 10px; } 
        .frm fieldset { border: 0 none; /* border-bottom: 1px solid #c0b6b2; */ padding-bottom: 20px; margin-bottom: 20px; width: 100%; }
        .frm fieldset legend { color: #e24307; font-size: 1.7em; margin-bottom: 20px; text-align: left; }
        .frm textarea { width: 100%; min-height: 100px; font-size: 1.0em; }
        .frm.comment { padding-bottom: 15px; }
        .frm.comment > label { display: block; width: 100%; margin-bottom: 5px; }
        .frm.comment > textarea { margin-bottom: 10px; }
        .frm.comment > div { overflow: hidden; }
        .frm.comment > div > span { float: left; opacity: 0.5; }
        .frm.comment > div > .btn { float: right; }
        .frm.contact { margin-bottom: 25px; }
        .frm.contact li { margin-bottom: 10px; }
        .frm.signin { text-align: left; }
        .frm.signin li { margin-bottom: 15px; }
        .frm.signin li > input { width: 60%; }
        fieldset legend { color: #e24307; font-size: 1.7em; margin-bottom: 20px; width: 100%; text-align: center; }
        
        
    /* --- Rating Icons --- */
    
        .rating { display: block; background: url('../img/icns-rating.png') no-repeat 0 0 transparent; line-height: 25px; }
        .rating.bean1 {     background-position: 0 -60px; }
        .rating.bean2 {     background-position: 0 -120px; }
        .rating.bean3 {     background-position: 0 -180px; }
        .rating.bean4 {     background-position: 0 -240px; }
        .rating.bean5 {     background-position: 0 -300px; }
        
        .rating.sml {       background-position: 0 -376px; }
        .rating.sml.bean1 { background-position: 0 -416px; }
        .rating.sml.bean2 { background-position: 0 -456px; }
        .rating.sml.bean3 { background-position: 0 -496px; }
        .rating.sml.bean4 { background-position: 0 -536px; }
        .rating.sml.bean5 { background-position: 0 -576px; }
    
    
    /* --- Images --- */
    
        .img { background-color: #ccc; display: block; width: 100%; border: 0 none; margin-bottom: 15px; }
        .img.avatar { width: 60px; height: 60px; }
    
    
    /* --- Social --- */
    
        .lst.social > li { display: inline-block; }
        .lst.social > li > a { display: block; width: 26px; height: 26px; opacity: .8; text-indent: -9999px; }
        .lst.social > li > a:hover { opacity: 1; }
        .icn.facebook, .icn.twitter, .icn.pintrest, .icn.googleplus, .icn.instagram { background: url('../img/icns-social.png') 0 0 no-repeat transparent; }
        .icn.twitter { background-position: 0 -45px; }
        .icn.pintrest { background-position: 0 -90px; }
        .icn.googleplus { background-position: 0 -135px; }
        .icn.instagram { background-position: 0 -180px; }
        
    
    /* --- Buttons --- */
    
        .btn { 
            border: 0 none; background-color: #e24307; display: block; color: #fff; text-align: center; line-height: 30px; padding: 2px 20px; 
            border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
            }
        .btn:hover { color: #fff; }
            
        .btn.grn { background-color: #afbc22; }
        .btn.blu { background-color: #3b5a9a; }
        .btn.red { background-color: #e24307; }
        
        .btn.med { padding: 10px 20px; font-weight: bold; font-size: 1.4em; } 
        .btn.lrg { padding: 20px 20px; font-weight: bold; font-size: 1.7em; } 
        
    
    /* --- Tables --- */
    
        .tbl { font-size: 0.9em; width: 100%; }
        .tbl td { padding: 7px 0; }
        .tbl thead th { font-weight: normal; text-align: left; padding-bottom: 5px; border-bottom: 1px solid #c0b6b2; }
        .tbl tbody { background-color: #fff; }
        .tbl tbody .red { color: #e24307; }
        .tbl tbody .blu { color: #37b0c9; }
        .tbl [type="text"] { width: 50px; }
        
            
    /* --- Components (.cmp) --- */
    
        .cmp { margin: 0 0 25px 0; }
        .cmp > h2 { padding: 10px; background-color: #afbc22; width: 100%; color: #fff !important; font-weight: bold; margin: 0 !important; }
        .cmp > .red { background-color: #bf2d06; }
        .cmp > .blu { background-color: #37b0c9; }
        .cmp > .brn { background-color: #8b5e3b; }
        .cmp > .bdy { background-color: #fff; padding: 15px; }
        .cmp > .bdy textarea,
        .cmp > .bdy [type="text"] { border: 1px solid #e3e3e3; }
        .cmp .frm.comment { border-bottom: 1px solid #c0b6b2; }
        .cmp > .frm [type="submit"] { float: right; }    
        
        .cmp.sidebar-component { padding: 20px; background-color: #dfdbce; margin:0 0 25px; }
        .cmp.sidebar-component.contact { margin:0 25px 25px; }
        .cmp.sidebar-component.contact > p { padding-top: 15px; }
        .cmp.sidebar-component.contact > p > span { color: #e24307; }



        .cmp.sidebar-component.ylw { background-color: #f9eeb5; }
        .cmp.sidebar-component.blu { background-color: #bde5de; }
        .cmp.sidebar-component.grn { background-color: #afbc22; }
        .cmp.sidebar-component.brn { background-color: #f1efe8; }
        .cmp.sidebar-component.alt h3 { font-size: 2.4em; text-align: center; line-height: 0.9em; color: #fff; }
        .cmp.sidebar-component.alt .btn { width: 100%; }
        .cmp.sidebar-component h3 { color: #e24307; font-weight: normal; margin-bottom: 20px; }
        .cmp.sidebar-component .frm { margin-bottom: 15px; }
        .cmp.sidebar-component .frm [type="text"] { width: 100%; }
        .cmp.sidebar-component .frm [type="password"] { width: 100%; }
        .cmp.sidebar-component .frm li { margin-bottom: 10px; }
            .cmp.contact > span { display: block; margin-bottom: 25px; }
        
        .lst.component > li { padding: 10px 0; border-bottom: 1px solid #c0b6b2; }
        .lst.component > li:last-of-type { border: 0 none; }
        .lst.component > li > span { font-weight: bold; display: block; padding-bottom: 5px; }
        .lst.component time,
        .lst.component span > span { color: #e24307; font-style: italic; font-weight: normal; }
        .lst.component > li > .frm.comment { border: 0 none; }
        
        .lst.links { overflow: hidden; margin-bottom: 10px; font-size: 0.8em; }
        .lst.links > li { display: inline; padding: 0 5px; border-right: 1px solid #c0b6b2; }
        .lst.links > li:first-of-type { padding-left: 0; }
        .lst.links > li:last-of-type { border: 0 none; }
        
        .lst.bullet > li { list-style: disc inside; padding-bottom: 10px; }
        
        
    /* --- Modal (.modal) --- */
    
        [data-role="modal"] { background-color: rgba(108,101,79,.7); position: absolute; height: 1500px; width: 100%; display: none; left: 0; top: 0; }
        [data-role="modal-container"] { 
            background-color: #f6f4ee; position: absolute; 
            box-shadow: 0px 0px 25px rgba(0,0,0,.3); 
            border: 5px solid #a89188;
            top: 5%; padding: 20px; width: 93%; max-height: 650px; overflow-y: auto;
            }
        
        [data-role="modal-container"] h1 { font-size: 2em; text-align: center; margin-bottom: 5px; }
        [data-role="modal-container"] h2 { text-align: center; font-size: 1.2em; font-weight: normal; margin-bottom:30px; }
        
        .blk.modal.cart { left: 10px; }
            .tbl.shop-cart-modal tbody { background-color: transparent; }
            .tbl.shop-cart-modal tbody > tr:nth-of-type(2n) { background-color: #dfdbce; }
            .tbl.shop-cart-modal .thumb { width: 10%; padding-right: 10px; }
            .tbl.shop-cart-modal .thumb > img { max-width: 50px; }
            .tbl.shop-cart-modal tfoot > tr > td:first-of-type { padding-right: 20px; }
            .tbl.shop-cart-modal tfoot > tr > td:last-of-type { padding-right: 10px; }
            .tbl.shop-cart-modal tfoot .tfoot-meta > p { width: 100%; font-size: .8em; margin: 15px 0; }
            .tbl.shop-cart-modal tfoot .tfoot-meta > p > span { padding-top: 5px; display: block; }
            .tbl.shop-cart-modal tfoot .tfoot-meta > div { width: 100%; margin-top: 15px; }
            .tbl.shop-cart-modal tfoot .tfoot-meta .subtotal { 
                display: block; padding-bottom: 5px; margin-bottom: 20px; 
                border-bottom: 1px solid #ccc;
                font-weight: bold; font-size: 1.1em; 
                }
            .tbl.shop-cart-modal tfoot .tfoot-meta .subtotal > span { font-weight: normal; }
            .tbl.shop-cart-modal tfoot .tfoot-meta .subtotal .total { font-weight: bold; color: #e24307; }  
            .tbl.shop-cart-modal tfoot .tfoot-meta .lnk { padding-top: 10px; text-align: center; display: block; }  
            
        .blk.modal.search { left: 10px; }

        .blk.modal.terms { left: 10px; width: 75%; max-height: 800px; overflow: auto;}
            #ResultsTable img { max-width: 35px; }
            #FullImage { max-width: 100%; }
            @media only screen and (min-width: 37.5em) { /* ~ 600px */
                .blk.modal.terms { left: 10%; }
                .blk.modal.search { left: 10%; }
                .blk.modal.cart { left: 10%; }
                [data-role="modal-container"] { width: 80%; overflow-y: auto; }
                [data-role="modal-container"] h1 { font-size: 2.8em; }
                .tbl.shop-cart-modal .thumb > img { max-width: 100%; }
                #ResultsTable img { max-width: 60px; }
                }
                
            @media only screen and (min-width: 56.25em) { /* ~ 900px */
                .blk.modal.terms { left: 15%; }
                .blk.modal.search { left: 30%; }
                .blk.modal.cart { left: 30%; }
                [data-role="modal-container"] { width: 55%; }
                .tbl.shop-cart-modal tfoot .tfoot-meta > p { float: left; padding-right: 20px; width: 55%; }
                .tbl.shop-cart-modal tfoot .tfoot-meta > div { width: 40%; float: right; }
                #ResultsTable img { max-width: 125px; }
                }
            
        
    /* --- Sign In --- */
    
        [data-role="signin"] { background-color: rgba(108,101,79,.7); position: absolute; height: 1500px; width: 100%; display: none; left: 0; top: 0; z-index: 1000; }
        [data-role="signin-container"] { 
            background-color: #f6f4ee; position: absolute; 
            box-shadow: 0px 0px 25px rgba(0,0,0,.3); 
            border: 5px solid #a89188;
            top: 5%; padding: 20px;
            }
        
        [data-role="signin-container"] h1 { font-size: 2.8em; text-align: center; margin-bottom: 5px; }
        [data-role="signin-container"] h2 { text-align: center; font-size: 1.2em; font-weight: normal; margin-bottom:30px; }

        .blk.signin { left: 40%; }
        .blk.signin h1 { margin-bottom: 10px; }
        .blk.signin h2 { font-size: 1.3em; font-weight: normal; color: #512c1e; }
        
        .blk.signin-forms { text-align: center; }
        .blk.signin-meta { margin-top: 30px; }
        .blk.signin-meta h2, .blk.signin-meta .lst, .blk.signin-meta p { margin-bottom: 20px; }
        .blk.signin-meta .lst { margin-top: 20px; }
        .blk.signin-meta .lst > li {  }
        .blk.signin-meta p { font-size: .8em; margin-top: 15px; margin-bottom: 0px; }
        .blk.signin-meta p > span { font-weight: bold; color: #1f7670; }
    
    /* --- Global media queries --- */
    
        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .drw-menu { display: none; }
            }
        
            
/* D. Flexbox
------------------------------------------------------------------------------------------------------ */ 

    .lst.shop-carousel-thumbs {
        display: -moz-box; 
        display: -ms-flexbox; 
        display: -webkit-flex; 
        display: flex; 
        flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        }
        
    .lst.shop-carousel-thumbs > li {
        padding-right: 3px;
        } 
            
        
    
    @media only screen and (min-width: 37.5em) { /* ~ 600px */
        
        .lst.shop-product-list {
            display: -moz-box; 
            display: -ms-flexbox; 
            display: -webkit-flex; 
            display: flex; 
            flex-flow: row wrap;
            -webkit-flex-flow: row wrap;
            }
        
        .lst.shop-product-list > li {
            -moz-box-flex: 1 auto;   
            -webkit-flex: 1 auto;         
            -ms-flex: 1 auto;            
            flex-grow: 0;
            -webkit-flex-grow: 0;
            }
        
        }
    
    @media only screen and (min-width: 56.25em) { /* ~ 900px */
    
        .pag.ftr .wrapper, .frm.shop-cart,
        .blk.shop-order-options, .blk.shop-notes, .lst.shop-considerations,
        .blk.signin-forms  {
            display: -moz-box; 
            display: -ms-flexbox; 
            display: -webkit-flex; 
            display: flex; 
            flex-flow: row wrap;
            -webkit-flex-flow: row wrap;
            } 
            
        .pag.ftr span,
        .blk.shop-order-options > .frm, .blk.shop-notes > p, .blk.shop-notes > div,
        .lst.shop-considerations > li, .blk.signin-forms > .frm, .blk.signin-forms > div {
            -moz-box-flex: 1 auto;   
            -webkit-flex: 1 auto;         
            -ms-flex: 1 auto;            
            flex-grow: 0;
            -webkit-flex-grow: 0;
            } 
            
        }
        

/* E. Page Containers
------------------------------------------------------------------------------------------------------ */    
   
    /* --- Page Header (.pag.hdr) --- */
    
        .pag.hdr { position: relative; }
        
        .blk.global-hdr { border-bottom: 10px solid #e24307; }
        .blk.global-hdr, .blk.global-nav { overflow: 100%; }
        .blk.global-nav { background-color: #e24307; } 
        .lst.global-nav { width: 100%; background-color: #e24307; }
        .lst.global-nav > li > a { display: block; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; position: relative; }
        .lst.global-nav .itm.site-search { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .lst.global-nav .frm.site-search { display: block; }
        .frm.site-search .search-btn { width: 31px; height: 31px; position: relative; background-color: #512c1e; float: left; margin-right: 5px; }
        .frm.site-search .search-btn [type="submit"] { border: 0 none; position: absolute; z-index: 2; width: 40px; height: 40px; background: transparent; }
        .frm.site-search .search-btn span { position: absolute; left: 19%; top: 19%; font-size: 1.3em; z-index: 1; color: #fff; }
        .lnk.logo { display: block; text-indent: -9999px; width: 100%; height: 62px; background: url('../img/logo-justlove.png') no-repeat 8% 0 / 125px transparent; margin: 15px 0; }
        .lnk.mobile-menu { float: right; display: block; width: 15%; height: 92px; font-size: 2em; padding: 20px 0; position: relative; }
        .lnk.mobile-menu .icon-user { font-size: .8em; }
        .lnk.mobile-menu span { display: block; width: 50px; height: 50px; position: absolute; top: 33%; left: 15%; }
        .blk.submenu { display: none; }
        
            @media only screen and (min-width: 37.5em) { /* ~ 600px */
                .lnk.logo { background-position: 6% 0; }
                .lnk.mobile-menu { width: 9%; }
                }
            
            @media only screen and (min-width: 56.25em) { /* ~ 900px */
                .blk.global-hdr { border-bottom: 0 none; }
                .blk.user-account { width: 28.5%; display: block; float: right; overflow: hidden; margin: 0 15px 0 0; color: #512c1e; }
                .blk.user-account a { color: #512c1e; }
                .blk.user-account .shop-cart { 
                    float: right; height: 85px; background-color: #d3ccb9; position: relative;
                    border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px;
                    }
                .blk.user-account .shop-cart .lnk.cart { display: block; padding: 10px 10px 0; position: relative; }
                .blk.user-account .shop-cart .lnk.cart .cart-amount,
                .blk.user-account .shop-cart .lnk.cart .cart-amount > span { padding-left: 45px; font-weight: bold; font-size: .7em; }
                .blk.user-account .shop-cart .lnk.cart .cart-amount > span { display: block; font-weight: normal; font-size: 1.1em; }
                .blk.user-account .shop-cart .icon-cart { font-size: 2.2em; position: absolute; }
                .blk.user-account .shop-cart .lnk.checkout { display: block; width: 100%; padding: 10px; position: absolute; bottom: 0; text-align: center; }
                .blk.user-account .view-account { font-size: 0.8em; white-space: nowrap; padding-top: 25px; }
                .blk.user-account .view-account a { font-weight: bold; } 
                .blk.global-hdr .frm.site-search { display: block; float: right; color: #fff; margin: 25px 10% 0; }
                .blk.global-hdr .frm.site-search .user-links { display: block; width: 100%; margin-top: 6px; font-size: .7em; padding-left: 25%; }
                .blk.global-hdr .frm.site-search .user-links a { padding-right: 15px; color: #512c1e; } 
                
                .blk.submenu { background-color: #afbc22; width: 900px; position: absolute; display: none; text-align: left; z-index: 100; }
                .lst.submenu-nav { background-color: #717c02; }
                .lst.submenu-nav > li { display: inline-block; }
                .lst.submenu-nav > li:first-of-type { margin-left: 10px; }
                .lst.submenu-nav > li > a { color: #fff; font-size: .8em; font-weight: bold; padding: 6px 10px; display: block; }
                .blk.submenu-content { padding: 15px 25px; }
                .blk.submenu-content > div { float: left; margin-right: 45px; }
                
                .blk.submenu #Teas-tab,
                .blk.submenu #Brewing-Gear-tab,
                .blk.submenu #Apparel-tab,
                .blk.submenu #Gift-Ideas-tab { display: none; }
                
                .lst.global-nav #shop-submenu:hover > .blk.submenu { display: block; }
                .lst.global-nav { display: table !important; }
                .lst.global-nav > li { display: table-cell; text-align: center; }
                .lst.global-nav > li > a { padding: 5px 10px; }
                .lst.global-nav > li > a:hover { background-color: rgba(255,255,255,.2); }
                
                .lnk.logo { background-size: auto; background-position: 0 0; width: 208px; height: 101px; margin: 15px; }
                .lnk.mobile-menu, .mobile-only, #user-nav { display: none !important; }
                }
            
            @media only screen and (min-width: 65.6em) { /* ~ 1050px */
                .blk.global-hdr, .lst.global-nav, .blk.submenu { width: 1050px; margin: 0 auto; }
                }
                
                
    /* --- Page Body (.pag.bdy) --- */
    
        .blk.mainbar { background-color: #f6f4ee; padding: 20px; }
        .wrapper.tan { background-color: #f6f4ee; }
        .wrapper { padding: 15px; overflow: hidden; }
        .wrapper.full, .wrapper > .full { background-color: #f6f4ee; padding: 20px; }
        .wrapper.full .blk.mainbar, .wrapper.full .blk.sidebar { padding: 0; }
        .pag.bdy.shop .blk.sidebar { /* display: none; */ }

        .pag.bdy .wrapper { position: relative; }
            
            @media only screen and (min-width: 56.25em) { /* ~ 900px */
                .wrapper.full .blk.sidebar { padding-left: 20px !important; }
                .pag.bdy.shop .blk.sidebar { display: block; }
                }
            
            @media only screen and (min-width: 65.6em) { /* ~ 1050px */
                .wrapper { width: 1050px; margin: 10px auto; padding: 0; }
                }
            
                
     /* --- Page Footer (.pag.ftr) --- */
     
        .pag.ftr { background-color: #a49483; color: #fff; padding: 15px 0; }
        .pag.ftr .wrapper { font-size: 0.8em; margin: 0 auto; }
        .pag.ftr .blk { margin-bottom: 15px; width: 50%; } 
        .pag.ftr .blk h4 { font-size: 1.1em; margin-bottom: 4px; }
        .pag.ftr .blk a { color: #fff; opacity: 0.8; }
        .pag.ftr .blk a:hover { opacity: 1; }
        .pag.ftr .blk li { padding: 3px 0; }
        .pag.ftr span { display: block; overflow: hidden; text-align: center; padding: 20px 0; width: 100%; }
        .pag.ftr .wrapper.full { background-color: transparent; }
        
            @media only screen and (min-width: 37.5em) { /* ~ 600px */
                .pag.ftr .blk { width: 25%; float: left; }
                }
                
            @media only screen and (min-width: 65.6em) { /* ~ 1050px */
                .pag.ftr .blk { width: 15%; }
                .pag.ftr span { width: auto; }
                }
    
    
/* F. Home Page
------------------------------------------------------------------------------------------------------ */     
    
    .img.hero { max-width: 1050px; max-height: 375px; }
    .img.cta { max-width: 330px; max-height: 193px; }
    
        @media only screen and (min-width: 37.5em) { /* ~ 600px */
            .img.hero {  }
            .img.cta { float: left; max-width: 45%; margin-right: 16px; }
            } 
            
        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .img.cta { max-width: 330px;  }
            }   
    
    
/* G. Shop Product Page
------------------------------------------------------------------------------------------------------ */   

    .pag.bdy.shop > .wrapper { padding: 0; }
    .blk.shop-filters { margin-bottom: 10px; }
    .blk.shop-filters > h3 { color: #e24307; font-size: 1em; } 
    .blk.shop-filters > h4 { font-size: 0.8em; margin-top: 3px; }  
    .lst.shop-filters { margin-bottom: 10px; }
    .lst.shop-filters a { font-size: 0.8em; padding-left: 15px; color: #512c1e; } 
    .lst.shop-carousel-thumbs .img.shop-carousel-thumb { width: 50px; height: 65px; display: block; }
    .blk.shop-product-info { margin-bottom: 20px; }
    .blk.shop-product-info > h1 { font-size: 2.8em; font-weight: 500; margin-bottom: 10px; }
    .blk.shop-product-info > .rating { padding-left: 140px; font-size: 0.7em; line-height: 1.1em; margin-bottom: 30px; height: 23px; }
    .blk.shop-product-info > .descrip { margin-bottom: 20px; }
    .blk.shop-product-info > .descrip > span { display: block; font-weight: bold; }
    .blk.shop-order-options { width: 100%; overflow: hidden; padding: 15px 0 0; border-top: 1px solid #512c1e; }
    .blk.shop-order-options h2 { font-weight: normal; font-size: 1.3em; margin-bottom: 10px; }
    .blk.shop-order-options .frm ul { overflow: hidden; margin-bottom: 15px; }
    .blk.shop-order-options .frm ul > li { display: block; margin-bottom: 10px; }
    .blk.shop-order-options .frm label { font-size: 0.7em; }
    .blk.shop-order-options .frm .amount { width: 60%; }
    .blk.shop-order-options .frm .quantity { width: 40%; }
    .blk.shop-order-options .frm .grind { width: 65%; }
    .blk.shop-order-options .frm .frequency { width: 35%; }
    .blk.shop-order-options .frm .quantity > [type="text"] { width: 30px; }
    .blk.shop-order-options .frm .btn { width: 100%; }
        .frm.shop-single { margin-bottom: 15px; }
        .frm.shop-single, .frm.shop-subscription { padding: 15px; background-color: #e4e6ba; }
        .frm.shop-subscription { background-color: #bae6e2; }
    
    .lst.shop-meta-links { display: block; width: 100%; margin: 10px 0 30px; border-bottom: 1px solid #512c1e; padding-bottom: 10px; font-size: 0.8em; }
    .blk.shop-notes > .note { font-style: italic; padding-bottom: 30px; }
    .blk.shop-notes > .note > span { display: block; font-weight: bold; font-style: normal; padding-bottom: 4px; }
        .blk.shop-top-review > h3 { font-size: 1em; margin-bottom: 7px; }
        .blk.shop-top-review > .img.avatar { float: left; margin-right: 10px; }
        .blk.shop-top-review > div { float: left; width: 65%; }
        .blk.shop-top-review > div > .author { font-weight: bold; padding-bottom: 5px; display: inline-block; }
        .blk.shop-top-review > div > p { font-style: italic; }
        
    .blk.shop-considerations { padding: 15px; background-color: #eeece6; }
    .blk.shop-considerations > h4 { font-weight: normal; margin-bottom: 15px; }
        .lst.shop-considerations { margin-top: 25px; }
        .lst.shop-considerations > li { margin-bottom: 10px; }
        .lst.shop-considerations > li:first-of-type { padding: 0; }
        .lst.shop-considerations .img { margin: 0; height: 200px; width: auto; }
    
        @media only screen and (min-width: 37.5em) { /* ~ 600px */
            .pag.bdy.shop > .wrapper { padding: 15px; }
            }
            
        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .blk.shop-carousel { float: left; width: 35%; margin-right: 20px; }
            .frm.shop-single, .frm.shop-subscription { float: left; width: 47%; margin-right: 15px; }
            .frm.shop-single { margin-bottom: 0; }
            .frm.shop-subscription { margin-right: 0; }
            .blk.shop-top-review { padding-left: 15px; }
            .lst.shop-considerations > li { padding-left: 10px; margin-bottom: 0; }
            }
            
            
/* H. Shop Listing Page
------------------------------------------------------------------------------------------------------ */                        
            
    .shop-list-hdr { margin: -20px -20px 15px; padding: 0 15px; background-color: #75c8b9; font-size: 1.5em; line-height: 50px; color: #fff; }
    .lst.shop-product-list .rating { display: block; }
    .lst.shop-product-list > li { padding: 0 7px; margin-bottom: 20px; } 
    .lst.shop-product-list > li:nth-of-type(3n) { padding: 0 7px; }
    .lst.shop-product-list > li > .img.thumb { background-color: transparent; height: 225px; max-width: 225px; margin: 0 auto 15px; }                         
    .lst.shop-product-list > li > h2 { font-size: 1.2em; text-align: center; margin-bottom: 10px; } 
    .lst.shop-product-list > li > .rating { padding-left: 150px; font-size: 1em; margin-bottom: 10px; }
    .lst.shop-product-list > li > .btn { margin: 0 50px 7px; padding: 2px; line-height: 20px; font-size: 0.8em; } 
    
        @media only screen and (min-width: 37.5em) { /* ~ 600px */
            .lst.shop-product-list > li { width: 45%; float: left; margin-right: 16px; }
            }
        
        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .lst.shop-product-list > li { width: 33%; margin: 0; }
            } 
            
            
/* I. Shop Cart Page
------------------------------------------------------------------------------------------------------ */ 
    
    .frm.shop-cart .meta { font-size: 0.4em; display: block; margin-top: 5px; width: 100%; color: #512c1e; } 
    .frm.shop-cart a.meta { color: #e24307; } 
    .frm.shop-cart .lst > li { display: block; overflow: hidden; width: 100%; }
    .frm.shop-cart .lst > li [type="text"] { margin-bottom: 10px; width: 100%; }
    .frm.shop-cart .lst > li > select { margin-bottom: 10px; width: 100%; }
    .frm.shop-cart .lst > li .meta { display: block; width: 100%; font-size: 0.7em; margin-bottom: 10px; margin-top: -5px; }
    .frm.shop-cart .lst > .zip { margin-bottom: 10px; }
    .frm.shop-cart .lst > .zip > div, 
    .frm.shop-cart .lst > .expire > div,
    .frm.shop-cart .lst > .gift > div { width: 50%; float: left; }
    .frm.shop-cart .lst > .gift { overflow: hidden; margin-top: 10px; }
    .frm.shop-cart .lst > .gift > div { margin-right: 10px; width: 48%; }
    .frm.shop-cart .lst > .gift > div:last-of-type { margin: 0; }
    .frm.shop-cart .lst > .phone { width: 100%; overflow: hidden; }
    .frm.shop-cart .lst > .phone > div { width: 100%; overflow: hidden; }
    .frm.shop-cart .lst > .phone [type="text"] { width: 25%; float: left; margin-right: 10px; }
    .frm.shop-cart .lst > .phone [type="text"]:last-of-type { width: 70%; margin-right: 0; }
    .frm.shop-cart .lst > .method-title { font-size: 1.1em; color: #e24307; margin-bottom: 10px; }
    .frm.shop-cart .btn { font-size: 1.3em; margin: 20px 0 10px; padding: 10px; }
    .frm.shop-cart .lnk.continue { width: 100%; text-align: center; padding-top: 5px; display: block; }
    
        .blk.shop-cart-order { border: 0 none; }
        .blk.shop-comment { margin-top: 25px; }
        .blk.shop-comment textarea { width: 100%; min-height: 100px; }
        
        .tbl.shop-cart-order .item { width: 70%; }
        .tbl.shop-cart-order thead th { padding: 5px; }
        .tbl.shop-cart-order tbody .item { font-weight: bold; padding-left: 5px; }
        .tbl.shop-cart-order tbody .item span { display: block; font-size: 0.7em; font-weight: normal; }
        .tbl.shop-cart-order tbody tr:last-of-type td,
        .tbl.shop-cart-order tfoot { font-size: 0.9em; }
        .tbl.shop-cart-order tfoot tr:first-of-type td { border-bottom: 1px solid  #c0b6b2; padding-bottom: 10px; }
        .tbl.shop-cart-order tfoot td { padding: 10px; }
        .tbl.shop-cart-order .proceeds > span > span { color: #1cbbb4; }
        .tbl.shop-cart-order .promo { margin-top: 10px; overflow: hidden; }
        .tbl.shop-cart-order .promo > [type="text"] { width: 50%; margin-right: 10px; }
        .tbl.shop-cart-order .totals { white-space: nowrap; vertical-align: top; }
        .tbl.shop-cart-order .totals > span { display: block; width: 100%; text-align: right; margin-bottom: 5px; }
        .tbl.shop-cart-order .totals > span > span,
        .tbl.shop-cart-order .total > span > span { color: #e24307; }
        .tbl.shop-cart-order .total { font-size: 1.3em; font-weight: bold; text-align: right; }
        
    
    /* --- Beanificary Search Modal --- */
    
        .blk.bean-search > div { float: left; width: 50%; text-align: center; }
        .blk.bean-search > div > h3 { font-size: .9em; font-weight: bold; margin-bottom: 10px; }
        .blk.bean-search > div > .btn { margin: 15px auto 0 auto; }
        .blk.bean-search-start {}
        .blk.bean-search-results { margin-top: 25px; }
        .blk.bean-search-results > h1 { font-size: 1.8em; }
        .blk.bean-search-results > h2 { font-size: .9em; }
    
        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .frm.shop-cart .meta { display: inline; }
            .frm.shop-cart .lst > .name { width: 100%; overflow: hidden; }
            .frm.shop-cart .lst > .name > div { float: left; width: 49%; margin-right: 10px; }
            .frm.shop-cart .lst > .name > div:last-of-type { margin-right: 0; }
            .frm.shop-cart .lst > .zip { width: 100%; overflow: hidden; }
            .frm.shop-cart .lst > .zip > div, .frm.shop-cart .lst > .zip > label { width: 30%; float: left; margin-right: 10px; }
            .frm.shop-cart .lst > .zip > label { margin-right: 0; margin-top: 25px; margin-left: 15px; }
            }
            
            
/* J. Article (CMS) Page
------------------------------------------------------------------------------------------------------ */  

    .blk.article h1, .blk.article h2 { color: #e24307; font-weight: normal; }
    .blk.article h1 { margin-bottom: 20px; }
    .blk.article h2 { font-size: 1.2em; margin: 10px 0 5px; }
    
    .blk.article .blk.maps { height: auto; max-width: 100%; }
.blk.maps > img {
    width: 100% !important;
}
    .blk.article .frm.search { overflow: hidden; margin: 25px 0; }
    .blk.article .frm.search > label,
    .blk.article .frm.search > [type="text"],
    .blk.article .frm.search > [type="submit"] { float: left; }
    .blk.article .frm.search > [type="text"] { margin: 0 10px; width: 35%; }
    .blk.article .blk.results > h3 { font-weight: normal; margin: 60px 0 20px; }
    .blk.article .lst.results > li { overflow: hidden; border-bottom: 1px solid  #c0b6b2; margin-bottom: 25px; padding-bottom: 15px; }
    .blk.article .lst.results .img { margin-left: 15px; width: 250px; height: 180px; float: right; }
    .blk.article .lst.results .result-name { display: block; font-size: 1.4em; font-weight: bold; margin-bottom: 15px; }
    .blk.article .lst.results .lst.result-details > li { margin-bottom: 10px; }
    .blk.article .lst.results .lst.result-details > li > span { color: #e24307; }
    
    .blk.article .frm { border-bottom: 1px solid #c0b6b2; border-top: 1px solid #c0b6b2; margin: 25px 0; padding: 35px 0; }
    
    .blk.terms h3, .blk.faq h3 { color: #e24307; font-size: 1.4em; font-weight: normal; margin-bottom: 20px; }
    .lst.terms > li, .lst.faq > li { padding-bottom: 10px; }
    .lst.terms > li > span, .lst.faq > li > span { font-weight: bold; }
    .lst.faq > li > span { display: block; padding-bottom: 5px; }
    
    .blk.article .learn { margin-top: 40px; }
        
        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .lst.gallery > li:nth-of-type(3n) { padding-right: 0; }
            }
        @media only screen and (min-width: 37.5em) { /* ~ 600px */
    .blk.article .blk.maps { height: 350px; background-color: #512c1e; margin-bottom: 20px; }
        }

/* K. Beanificary Pages (Profile and Dashboard)
------------------------------------------------------------------------------------------------------ */

    .blk.bean-raise { overflow: hidden; }
    .blk.bean-raise > h3 { margin-bottom: 30px; font-weight: normal; text-align: center; font-size: 1.8em; }
    .blk.bean-raise > h3 > span { color: #e24307; }
    .blk.bean-raise > .cup { 
        display: block; height: 225px; margin: 20px; color: #fff; position: relative; font-size: 1.1em;
        background: url("../img/bg-mug0.png") 60% 0 / 225px no-repeat transparent;
        }
    
    .blk.bean-raise > .cup.prog-5 {     background-image: url("../img/bg-mug5.png"); }
    .blk.bean-raise > .cup.prog-10 {    background-image: url("../img/bg-mug10.png"); }
    .blk.bean-raise > .cup.prog-15 {    background-image: url("../img/bg-mug15.png"); }
    .blk.bean-raise > .cup.prog-20 {    background-image: url("../img/bg-mug20.png"); }
    .blk.bean-raise > .cup.prog-25 {    background-image: url("../img/bg-mug25.png"); }
    .blk.bean-raise > .cup.prog-30 {    background-image: url("../img/bg-mug30.png"); }
    .blk.bean-raise > .cup.prog-35 {    background-image: url("../img/bg-mug35.png"); }
    .blk.bean-raise > .cup.prog-40 {    background-image: url("../img/bg-mug40.png"); }
    .blk.bean-raise > .cup.prog-45 {    background-image: url("../img/bg-mug45.png"); }
    .blk.bean-raise > .cup.prog-50 {    background-image: url("../img/bg-mug50.png"); }
    .blk.bean-raise > .cup.prog-55 {    background-image: url("../img/bg-mug55.png"); }
    .blk.bean-raise > .cup.prog-60 {    background-image: url("../img/bg-mug60.png"); }
    .blk.bean-raise > .cup.prog-65 {    background-image: url("../img/bg-mug65.png"); }
    .blk.bean-raise > .cup.prog-70 {    background-image: url("../img/bg-mug70.png"); }
    .blk.bean-raise > .cup.prog-75 {    background-image: url("../img/bg-mug75.png"); }
    .blk.bean-raise > .cup.prog-80 {    background-image: url("../img/bg-mug80.png"); }
    .blk.bean-raise > .cup.prog-85 {    background-image: url("../img/bg-mug85.png"); }
    .blk.bean-raise > .cup.prog-90 {    background-image: url("../img/bg-mug90.png"); }
    .blk.bean-raise > .cup.prog-95 {    background-image: url("../img/bg-mug95.png"); }
    .blk.bean-raise > .cup.prog-100 {   background-image: url("../img/bg-mug100.png"); }
    
    .blk.bean-raise > .cup > .perc { position: absolute; top: 120px; left: 45px; line-height: 20px; text-align: center; font-size: 0.8em; color: #afbc22; }
    .blk.bean-raise > .cup.prog-65 > .perc, .blk.bean-raise > .cup.prog-70 > .perc, 
    .blk.bean-raise > .cup.prog-75 > .perc, .blk.bean-raise > .cup.prog-80 > .perc, .blk.bean-raise > .cup.prog-85 > .perc, 
    .blk.bean-raise > .cup.prog-90 > .perc, .blk.bean-raise > .cup.prog-95 > .perc, .blk.bean-raise > .cup.prog-100 > .perc { color: #fff; }
    .blk.bean-raise > .cup > .perc > span { font-weight: bold; font-size: 3.5em; }
    .blk.bean-raise > .btn { margin-bottom: 20px; }
    .blk.bean-raise > .btn.med { margin: 0 40px 20px; }
    
    .tbl.all-orders td:first-of-type { width: 30%; white-space: nowrap; }
    
    .blk.bean-user-info { overflow: hidden; } 
    .blk.bean-user-nameplate { overflow: hidden; width: 100%; margin-bottom: 25px; }
    .blk.bean-user-nameplate > .img { display: none; } 
    .blk.bean-user-nameplate > h1 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #c0b6b2; text-align: left; color: #512c1e; }
    .blk.bean-user-nameplate > h1 > span { color: #e24307; }
    .blk.bean-component > h2 { background-color: #afbc22; padding: 10px; color: #ffffff; }
    .blk.bean-component > h2 > span > a { text-decoration: underline; color: #ffffff; }

    
    .blk.bean-user-meta, .blk.bean-user-progress { width: 100%; }
    .blk.bean-user-meta .meta { font-size: 0.6em; }
        .lst.bean-user-meta { color: #e24307; }
        .lst.bean-user-meta > li { padding-bottom: 5px; }
        .lst.bean-user-meta > li > span { color: #512c1e; }
    
    .blk.contact-info { text-align: center; }
    .lst.contact-info > li { margin-bottom: 15px; }
    .lst.contact-info > li > span { display: block; color: #e24307; }
    
    
        @media only screen and (min-width: 30em) { /* ~ 480 */
            .blk.bean-raise > .cup > .perc { top: 105px; left: 135px; line-height: 25px; font-size: 1em; }

        @media only screen and (min-width: 37.5em) { /* ~ 600px */
            .blk.bean-raise > .cup { height: 275px; }
            .blk.bean-raise > .cup > .perc { top: 105px; left: 35%; line-height: 25px; font-size: 1em; }
            
            .blk.bean-raise > .cup,
            .blk.bean-raise > .cup.prog-5, .blk.bean-raise > .cup.prog-10, .blk.bean-raise > .cup.prog-15,
            .blk.bean-raise > .cup.prog-20, .blk.bean-raise > .cup.prog-25, .blk.bean-raise > .cup.prog-30,
            .blk.bean-raise > .cup.prog-35, .blk.bean-raise > .cup.prog-40, .blk.bean-raise > .cup.prog-45,
            .blk.bean-raise > .cup.prog-50, .blk.bean-raise > .cup.prog-55, .blk.bean-raise > .cup.prog-60, 
            .blk.bean-raise > .cup.prog-65, .blk.bean-raise > .cup.prog-70, .blk.bean-raise > .cup.prog-75,
            .blk.bean-raise > .cup.prog-80, .blk.bean-raise > .cup.prog-85, .blk.bean-raise > .cup.prog-90, 
            .blk.bean-raise > .cup.prog-95, .blk.bean-raise > .cup.prog-100 { background-size: 280px auto; }
            
            .blk.bean-user-nameplate { margin: 0; }
            .blk.bean-user-nameplate > .img { display: block; width: 90px; height: 90px; margin-right: 25px; float: left; } 
            .blk.bean-user-nameplate > h1 { margin-left: 115px; }
            }
    
        @media only screen and (min-width: 48em) { /* ~ 768px */
            .blk.bean-raise > .cup > .perc { top: 105px; left: 45%; line-height: 25px; font-size: 1em; }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .blk.bean-raise > .cup { height: 240px; }
            .blk.bean-raise > .cup > .perc { top: 105px; left: 39%; line-height: 20px; font-size: 0.8em; }
            
            .blk.bean-raise > .cup,
            .blk.bean-raise > .cup.prog-5, .blk.bean-raise > .cup.prog-10, .blk.bean-raise > .cup.prog-15,
            .blk.bean-raise > .cup.prog-20, .blk.bean-raise > .cup.prog-25, .blk.bean-raise > .cup.prog-30,
            .blk.bean-raise > .cup.prog-35, .blk.bean-raise > .cup.prog-40, .blk.bean-raise > .cup.prog-45,
            .blk.bean-raise > .cup.prog-50, .blk.bean-raise > .cup.prog-55, .blk.bean-raise > .cup.prog-60, 
            .blk.bean-raise > .cup.prog-65, .blk.bean-raise > .cup.prog-70, .blk.bean-raise > .cup.prog-75,
            .blk.bean-raise > .cup.prog-80, .blk.bean-raise > .cup.prog-85, .blk.bean-raise > .cup.prog-90, 
            .blk.bean-raise > .cup.prog-95, .blk.bean-raise > .cup.prog-100 { background-size: 250px auto; }
            
            }
    
        @media only screen and (min-width: 65.6em) { /* ~ 1050px */
            .blk.bean-raise > .cup { height: 275px; }
            .blk.bean-raise > .cup > .perc { top: 105px; left: 17%; line-height: 25px; font-size: 1em; }
            
            .blk.bean-raise > .cup,
            .blk.bean-raise > .cup.prog-5, .blk.bean-raise > .cup.prog-10, .blk.bean-raise > .cup.prog-15,
            .blk.bean-raise > .cup.prog-20, .blk.bean-raise > .cup.prog-25, .blk.bean-raise > .cup.prog-30,
            .blk.bean-raise > .cup.prog-35, .blk.bean-raise > .cup.prog-40, .blk.bean-raise > .cup.prog-45,
            .blk.bean-raise > .cup.prog-50, .blk.bean-raise > .cup.prog-55, .blk.bean-raise > .cup.prog-60, 
            .blk.bean-raise > .cup.prog-65, .blk.bean-raise > .cup.prog-70, .blk.bean-raise > .cup.prog-75,
            .blk.bean-raise > .cup.prog-80, .blk.bean-raise > .cup.prog-85, .blk.bean-raise > .cup.prog-90, 
            .blk.bean-raise > .cup.prog-95, .blk.bean-raise > .cup.prog-100 { background-size: 280px auto; }
            
            .blk.bean-user-meta, .blk.bean-user-progress { width: 45%; float: left; margin-right: 30px; }
            .blk.bean-user-progress { margin: 0; width: 50%; float: right; }
            }
    
/* J. Learn Page
------------------------------------------------------------------------------------------------------ */    
    
    .lst.learn { margin-top: 30px; }
    .lst.learn > li { display: block; width: 25%; float: left; }
    .lst.learn > li > a > img { display: block; margin: 0 auto; }
    .lst.learn > li > a > span { display: block; width: 100%; padding: 20px 0 35px; font-size: 1.3em; text-align: center; color: #512c1e; }
    .lst.learn img { width: 200px; height: 260px; background-color: #ccc; }


/* K. Site Messages
------------------------------------------------------------------------------------------------------*/

.message_error { background-color: #e24307; margin: 20px 0px; border-radius: 10px; padding: 15px; font-size: 24px; color: #ffffff; }
.message_success { background-color: #afbc22; margin: 20px 0px; border-radius: 10px; padding: 15px; font-size: 24px; color: #ffffff; }
.message_warning { background-color: #e4e6ba; margin: 20px 0px; border-radius: 10px; padding: 15px; font-size: 24px; color: #ffffff; }
/*.Error { background-color: #e24307; color: #ffffff; }
.frm.shop-cart .lst > li .Error [type="text"] { width: 96%; margin: 2%; }
.frm.shop-cart .lst > li.Error [type="text"] { width: 96%; margin: 2%; }*/
.Error { font-size: 18px; color: #e24307; }

#EarnResults { color: #ffffff; font-size: 1.6em; text-align:center; }
#EarnResults .meta { font-size: .6em; }
#Result { font-weight: bold; font-size: .95em; }

/* L. Gallery
-----------------------------------------------------------------------------------------------------*/

.gallery_edit { overflow-x: auto; overflow-y: hidden; width: 66%; height: 150px; float: left; }
.gallery_unit { float: left; margin-right: 10px; width: 150px; }
.gallery_unit img { float: left; max-height: 100px; }
.gallery_unit a { float: right; }
.gallery_upload { width: 33%; float: right; }
.bdy.GalleryEditor { height: 175px; }

.lst.gallery > li { display: block; float: left; padding: 0 10px 10px 0; }
.lst.gallery > li > a > .img.gallery-thumb { max-width: 90px; max-height: 90px; margin: 0; }
    
.blk.gallery { background-color: #f1efe8; padding: 15px; margin-right: 10px; }
.blk.gallery > h3 { color: #e24307; padding-bottom: 10px; }