/*
Theme Name: Southern Cross Brands
Theme URI: http://www.scbrands.com.au
Version: 2016
Author: The Almost Anything Web and Graphic Design Crew
Author URI: http://www.almostanything.com.au
*/

/*
 * RELATIVE EMS: target/context=result
 * So if you want a 24px heading, and the parent element is 15px, you need to specify 1.6ems
 * ie 24/15=1.6
 * Got it yet Stu?
 * Similarly with widths. Elements will be a %age or their parent.
 *
 * THIS IS A MOBILE-FIRST STYLESHEET
 * If you're styling for the desktop you are editing the WRONG FILE
 * Go back, do not pass Go, do not collect $200
 */

/* Resets, Globals */

html {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

    *, *::before, *::after {
        box-sizing: inherit;
    }

div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,select,button,p,table,blockquote,th,td {
    margin:0;
    padding:0;
    line-height:inherit;
}

    dl,ul,ol,h1,h2,h3,h4,h5,h6,form,fieldset,p,blockquote,table {
        margin:1em 0;
    }

        h1,h2,h3,h4,h5,h6 {
            color: #333;
            text-transform:uppercase;
            margin:1em 0 .5em;
            line-height:1.2;
        
            letter-spacing: .08em;
}

            h1 {
                margin:0 0 .5em;
            }

table {
    border-collapse:collapse;
    border-spacing:0;
}

address,caption,cite,code,dfn,var {
    font-style:normal;
    font-weight:normal;
}
 
caption,th {
    text-align:left;
}

sup {
    vertical-align:text-top;
}

sub {
    vertical-align:text-bottom;
}

input,textarea,select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    padding:0 .4em;
    border:1px solid;
}

/* Clearfix */
    
.clearfix:after, header>nav:after {
    content:"";
    display:block;
    clear:both;
}

/* Styles to support our JS scrollbar width calculations */
.scrollbar_measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

/* Accessibility (skip links, screen reader text) */

.screen-reader-text, .skiplink {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

    .skiplink:focus, .screen-reader-text:focus {
        font-weight:bold;
        background:#eee;
        box-shadow:0 0 10px rgba(0,0,0,0.25);
        top:0;
        left:0;
        float:left;
        width: auto;
        height: auto;
        z-index:9999;
        display:block;
        position:fixed;
        z-index: 100000; /* Above WP toolbar. */
        padding:.5em .75em;
        clip: auto !important;
}

/***************************************************************
 *
 * Let's play Tetris!
 * This is basic grid, we're layout out the main semantic blocks
 *
 ***************************************************************/

html, body {
    margin:0;
    padding:0;
    line-height: 1.55;
    background: transparent;
}

    html {
        font-family: Helvetica, sans-serif;
        background-color: #fff;
        background-attachment: fixed;
        background-image: linear-gradient(to bottom, #fff 25%, transparent), url(images/stripe-bg.png);
    }

    body {
        color: #444;
        font-size: 100%; 
    }

.contentbox {
    width: 100%;
    max-width: 1250px;
    margin: auto;
    font-size: 1.25em; /* 20px for normal paragraph text */
}

    .archive.woocommerce .main_wrap .contentbox, .single-product .main_wrap .contentbox {
        font-size: 1.1em;
    }

.main_wrap, .contentbox .sidebar, footer {
    padding:0 3%;
}

    .contentbox .sidebar {
        padding:0;
    }
 
        @media (min-width:751px) and (max-width:1000px) {
            .contentbox .sidebar {
                padding-bottom: 1em;
            } 
        }

    .main_wrap {
        clear:both;
        background:#fff;
        box-shadow: 0 0.6em 0.6em rgba(0,0,0,0.08);
        /* max-width: 1400px; */
    }

    @media (max-width:750px) {
        .main_wrap>.contentbox {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
        }

        .contentbox .sidebar {
            -webkit-box-ordinal-group: -1;
            -moz-box-ordinal-group: -1;
            -ms-flex-order: -1;
            -webkit-order: -1;
            order: 0;
            margin: 1em 0 0;
        }

    }
    
article {
    padding:2em 0;
}

    .home article {
        padding:1px 0 1.5em;
    }

/***************************************************************
 *
 * Header
 *
 ***************************************************************/

.site_header {
    background: #fff;
}

.site_info {
    padding:2em 3%;

    /* Space for shop notice */
    padding: 1.5em 3% 1.5em;
}

    @media (min-width:751px) {
        .site_info .contentbox {
            display:table;
        }
    }

    .site_title {
        text-indent:-9999px;
        width:0;
        height:0;
        margin:0;
    }

    .site_logo, .site_logo:hover, .site_logo img {
        display:block;
        background:none;
        position:relative;
        border:none;
    }

        .site_logo {
            max-width:100%;
        }

    .site_logo, .site_logo:hover, .site_meta {
        display: table-cell;
        vertical-align: middle;
    }

    .site_meta {
        color: #333;
        text-align:right;
    }

        .site_meta .phone_number {
            font-size:1.2em;
        }

            .phone_number a {
                color: inherit;
                text-decoration: none;
            }

        .searchform {
            margin: .5em 0 0;
        }

        .searchform input {
            height: 1.8em;
            line-height: 1.8;
            font-size: .8em;
            border:none;
            display: inline-block;
        }

            .searchform .s {
                border: 1px solid #ccc;
            }

            .searchsubmit {
                margin:0 0 0 .5em;
                padding: 0 .6em;
                background: #dd443c;
                font-weight:bold;
                color: #fff;
            }

    @media (max-width:750px) {

         .site_logo, .site_logo:hover, .site_meta {
            display:block;
            text-align:center;
        }

            .site_logo img {
                margin:0 auto 1em;
            }
    }


/***************************************************************
 *
 * Navigation
 *
 ***************************************************************/

/* Basic list reformatting */
.nav, nav ul, nav li {margin:0;padding:0;list-style:none;}
    .nav ul, .nav li { float:left; }

/* Customise from here... */
header>nav {
    line-height:2;
    padding:0 3%;
}

    @media (min-width:751px) {
        header>nav {
            background:rgba(189, 189, 189, 0.25)
                url(images/southern-cross-brands-mark.png)
                15% -150% / 100% no-repeat fixed;
        }
    }

.nav a {
    color: #333;
    text-decoration: none;
    border:none;
    display:block;

    /* Brandon Grotesque is on the small side */
    font-size:1.1em;
    font-weight: 500;
    letter-spacing:.06em;
    
    /* Preferable to a large line height with no top/bottom padding;
    no top/bottom padding causes links that text-wrap to look the same as a couple of one line links... */
    line-height:1.3;
    padding: .4em 0.6em .2em;
}

    .sub-menu a {
        text-transform:none;
        letter-spacing:normal;
        background: #fff;
    }

    nav a {
        display:inline-block;
        padding:.15em .5em;
    }

.nav a:hover, .nav a:active, .nav a:focus, .nav .sfHover>a {
    background: rgba(255,255,255,0.4);
    color: #222;
}

    .nav .sub-menu a:hover {
        background: #cce6b3;
    }

nav .current_page_item>a, .single-post nav .current_page_parent>a, nav .current_page_ancestor>a, nav .current-menu-item>a, nav .current-menu-parent>a, nav .current-menu-ancestor>a, nav .current-page-ancestor>a {
    font-weight:bold;
}

    .nav .current_page_item>a,
    .single-post .nav .current_page_parent>a,
    .nav .current_page_ancestor>a,
    .nav .current-menu-item>a,
    .nav .current-menu-parent>a,
    .nav .current-menu-ancestor>a,
    .nav .current-page-ancestor>a,
    .woocommerce-page .menu-item-2656>a {
        /* background: #fff; */
        color: #dd443c;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
        position: relative;
    }

        .nav .sub-menu .current_page_item>a,
        .single-post .nav .sub-menu .current_page_parent>a,
        .nav .sub-menu .current_page_ancestor>a,
        .nav .sub-menu .current-menu-item>a,
        .nav .sub-menu .current-menu-parent>a,
        .nav .sub-menu .current-menu-ancestor>a,
        .nav .sub-menu .current-page-ancestor>a {
            /* background: #cce6b3; */
            box-shadow: none;
        }


.contains_submenu>a {
    position:relative;
}

    .show_nav_children {
        position:absolute;
        top:-.25em;
        bottom:-.25em;
        right:-3%;
        line-height:2.5;
        font-weight:bold;
        cursor:pointer;
    }

/* Displays a sub nav immediately after the main (if exists). Here for ease of use on mobile. Hide for desktop and add dropdowns if required */
.mobile_sub_menu {
    padding: 1.5em 3% 0;
    overflow:hidden;
    background:rgba(189, 189, 189, 0.25)
        url(images/southern-cross-brands-mark.png)
        15% -150% / 100% no-repeat fixed;
}

    @media (max-width:750px) {
        .mobile_sub_menu {
            background-position: 15% 100%;
        }
    }

    .mobile_sub_menu>.contentbox>nav {
        display: inline-block;
        padding: 1em 2em 0 999em;
        margin-left: -999em;
        background: #fff;
        box-shadow: -5px -5px 0px 0 #e5eed8;
    }

    .mobile_sub_menu h2 {
        margin:0 0 .5em;
    }

    .mobile_sub_menu .sub-menu, .mobile_sub_menu .children {
        padding: 0 0 0 .75em;
    }

    .mobile_sub_menu nav a {
        padding:0;
        color:#333;
        text-decoration: none;
        position:relative;
    }

        .mobile_sub_menu a:after {
            content:"";
            -moz-transition:all 70ms linear;
            -webkit-transition:all 70ms linear;
            transition:all 70ms linear;
            position:absolute;
            bottom: 0.25em;
            left:0;
            right:0;
            border-top: 1px solid rgba(139, 195, 59, 0.4);
        }

            .mobile_sub_menu a:hover:after {
                border-top:2px solid #333;
                bottom:.15em;
            }

/* This is for the mobile nav icon */
.menu-icon {
    display: none;
}

@media (min-width:751px) {

    /* Basic list reformatting */
    .nav li { position:relative; }
    .nav ul { position:absolute; top:-9999px; left:0; }
    .nav ul, .nav ul li { display:block; }

    .nav li:hover ul, .nav li.sfHover ul { z-index:100; display:block; }
        .nav>li:hover>ul, .nav>li.sfHover>ul { top:2em; box-shadow: -.15em .15em .5em rgba(0,0,0,0.15); }

    .nav ul ul { left:auto; right:-250px; }
        .nav li li:hover ul, .nav li li.sfHover ul { top:0; }

    header .nav ul, header .nav li li {width: 250px;}

    .nav li ul {
        display: none;
    }

/*     .nav .current_page_item>a,
    .single-post .nav .current_page_parent>a,
    .nav .current_page_ancestor>a,
    .nav .current-menu-item>a,
    .nav .current-menu-parent>a,
    .nav .current-menu-ancestor>a,
    .nav .current-page-ancestor>a,
    .woocommerce-page .menu-item-2656>a {
        box-shadow: 0 1px 0 #fff, 1px -1px 0 rgba(0,0,0,0.1), -1px -1px 0 rgba(0,0,0,0.1), -.25em 0 .5em rgba(0,0,0,0.06);
    }

        .nav .sub-menu.sub-menu a {
            box-shadow: none;
        } */

    .contains_submenu>a {
        padding-right:1.5em;
    }

        .show_nav_children {
            padding:0 .75em 0 .5em;
        }

}

/* Squish menu down into a button */
@media (max-width: 750px) {

    header>nav {
        padding:0 3% 4%;
    }

    /* Height is defined so we can confidently set negative margin on the main nav (.nav). See comment further down this @media query. */
    .menu-icon, .menu-icon:hover {
        display: block;
        position:relative;
        height:3em;
        padding:0 .75em;
        line-height: 3;
        text-align: center;
        text-decoration:none;
        font-weight:bold;
        color: #fff;
        background: #dd443c;
        border-radius:3px;
    }

        .menu-icon:after{
            content: " \2193"; /* down arrow */
        }

            .menu-icon.active:after {
                content:"";
            }

    .contains_submenu>a {
        padding-right:2.5em;
    }

        .show_nav_children {
            position:absolute;
            top:-.25em;
            bottom:-.25em;
            right:-3%;
            line-height:2.5;
            z-index:10;
            padding:0 5% 0 .75em;
            padding:0 calc(3% + .5em) 0 .75em;
        }

    .nav ul, .nav li { float:none; }

        .sub-menu, .nav .children {
            padding: 0 0 0 .75em;
        }

    /*
        We're using CSS to show the menu (using IDs, #hash hrefs and the :target pseudo-class).
        To avoid a context-jarring page jump upon clicking #menu-icon, we pull .nav up
        underneath #menu-icon (plus a little extra to simulate to margin on #menu-icon)
    */
    
    .nav { display:none; margin:-3.5em 0 0; padding:4em 0 0; }

        .nav:target {
            display:block !important;
        }

        .nav.closed {
            display:none !important;
        }

}

/***************************************************************
 *
 * Main Content - <article>
 *
 ***************************************************************/

article h1 {
    font-size: 1.8em;
}

article h2 {
    font-size: 1.4em;
}

article h3 {
    font-size: 1.2em;
    color: #333;
    letter-spacing: .03em;
}

article h4, article h5, article h6 {
    font-size: 1em;
    color:#000;
    letter-spacing:0;
}

    article h5, article h6 {
        font-weight:500;
    }

a {
    color:#dd443c;

}

    a:hover {
        color:#222;
    }

article p.intro {
    font-size:1.15em;
}

/* Clear any floated images down near the bottom of posts */
.blog_navigation {
    clear:both;
}

/* the next 3 rules are for the way WP sets its image floats. On skinny screens we'll just centre them all */
article .alignleft, article .alignright, article .aligncenter {
    text-align:center;
    margin:1.5em auto;
    display:block;
}

img {
    max-width:100%;
    height:auto;
}

a img {
    border:none;
}

#colorbox, #colorbox * {
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

    #colorbox img {
        max-width:none;
    }
    
/* These 2 will make image captions look a bit like polaroids */
.wp-caption {
    background:#eee;
    overflow:hidden;
    max-width:100%;
}

    body.attachment .wp-caption {
        background:none;
        overflow: visible;
    }

    .wp-caption.alignnone {
        margin:1.5em 0;
    }

    .wp-caption>a, .wp-caption img {
        display:block;
    }

        .wp-caption img {
            width:100%;
        }

    .wp-caption-text {
        padding:0;
        margin:.75em 1em;
        line-height:1.3;
    }

        body.attachment .wp-caption-text {
            margin:.75em 0;
            font-weight:bold;
        }

        .gallery .wp-caption-text {
            margin:.25em 1em 0 0;
            font-size:.9em;
        }

.gallery .gallery-item {
    float: left;
    margin:0 0 3%;
    word-break:break-word;
}

.gallery a, .gallery img {
    display:block;
}

    .gallery img {
        max-width:95%;
        width:auto;
        height:auto;
    }

@media (max-width: 450px) {

    .gallery dl.gallery-item {
        float: none;
        margin: 0 0 1em;
        width:auto;
        text-align:center;
    }

        .gallery a {
            display:inline-block;
        }

    .gallery .wp-caption-text {
        text-align: center;
        font-size:inherit;
    }

    .gallery br {
        display:none;
    }

}

/*
Image sizes depending on the number of columns
Based on Hybrid theme
*/

.gallery-columns-0 .gallery-item {
    width: 100%;
}
.gallery-columns-1 .gallery-item {
    width: 100%;
}
.gallery-columns-2 .gallery-item {
    width: 50%;
}
.gallery-columns-3 .gallery-item {
    width: 33.33%;
}
.gallery-columns-4 .gallery-item {
    width: 25%;
}
.gallery-columns-5 .gallery-item {
    width: 20%;
}
.gallery-columns-6 .gallery-item {
    width: 16.66%;
}
.gallery-columns-7 .gallery-item {
    width: 14.28%;
}

/* Callouts, pullquotes */
blockquote {
    position:relative;
    padding:0 0 0 3em;
    margin:1.5em 0;
}

blockquote:before, blockquote:after {
    content: "“";
    font-size: 5em;
    position: absolute;
    left: 0;
    top: -.3em;
    color:#333;
}

blockquote:after {
    line-height:0;
    right:0;
    left:auto;
    top:auto;
    bottom:-.1em;
    color:#ddd;
    content:"”";
}

/* Tables */

table, th, td {
    border:none;
    border:1px solid #ddd;
    text-align:left;
    border-collapse:collapse;
}

    table {
        margin:1em 0;
    }

    td, th {
        line-height:1.3;
        padding:.4em .6em;
    }

    @media (max-width:500px) {

        article table {
            border:none;
        }

        article tr, article td, article th {
            display:block;
            border:none;
        }

            article tr {
                margin:0 0 1em;
            }
            
    }

/* CTA Buttons */

.button {
    color:#fff;
    background:#dd443c;
    border:none;
    cursor:pointer;
    font-weight:bold;
    border-radius:3px;
    padding: .5em .75em;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  
    word-break:break-word;
}

    .button:hover {
        color:#fff;
        background:#151515;
    }

    .button.inline {
        display:inline-block;
        padding:.05em .5em .1em;
        line-height:1.3;
        margin:0 .2em;
    }

/* Gravity Forms Style fixes */ 

.gform_wrapper form {
    margin-top:0;
}

article .gform_wrapper textarea, article .gform_wrapper input[type=text], article .gform_wrapper input[type=url], article .gform_wrapper input[type=email], article .gform_wrapper input[type=tel], article .gform_wrapper input[type=number], article .gform_wrapper input[type=password], article .gform_wrapper .ginput_complex label, article .gform_wrapper .gfield_time_hour label, article .gform_wrapper .gfield_time_minute label, article .gform_wrapper .gfield_date_month label, article .gform_wrapper .gfield_date_day label, article .gform_wrapper .gfield_date_year label, article .gform_wrapper .instruction {
    font-size:1em;
}

    article .gform_wrapper textarea, article .gform_wrapper input[type=text], article .gform_wrapper input[type=url], article .gform_wrapper input[type=email], article .gform_wrapper input[type=tel], article .gform_wrapper input[type=number], article .gform_wrapper input[type=password] {
        padding:.3em;
        font-size:.9em;
        max-width:100%;
    }

article .gform_wrapper .gform_footer {
    padding:0;
}

:root .gform_wrapper .top_label .gfield_label {
    margin-bottom:0;
}

/* WooCommerce styles/overrides */

/* Misc styles */

/* I don't know what this is for, but it's appearing at the bottom of pages. */
.woocommerce #jaflightbox {
    display:none;
}

/* Site notice */
:root p.demo_store {
    background: #333;
    padding: .5em 0;
}

/* Variations form */

.variations_form .jpo-input-title {
    font-weight:bold;
    margin:0 0 .25em;
}

/* Why do people still use BRs? */
.variations_form .jpo-single br {
    display:none;
}

/* Spacing we don't need */

:root .woocommerce div.product form.cart .variations {
    margin:0;
}

.woocommerce .variations tr {
    border-top: 2px solid #EBF4DE;
}

    .woocommerce .variations td {
        padding:.6em;
    }

        .woocommerce .variations td.label {
            padding:.4em .6em;
        }

    .woocommerce .reset_variations {
        display:inline-block;
        margin:.5em 0 0;   
        font-size: .8em;
    }

    .woocommerce .variations_button .qty, #coupon_code {
        padding: 0.4em;
        line-height:1;
        margin: 0 .25em 0 0;
    }

        #coupon_code {
            padding:.45em;
        }

:root .woocommerce form .form-row {
    padding:0;
    margin:0 0 .75em;
}

    :root .woocommerce form .form-row label {
        line-height:inherit;
        font-size:.9em;
        font-weight:bold;
        margin:0 0 .1em;
    }

    .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
        padding:.2em .35em;
        font-size:.9em;
    }



/* Messages - tighten spacing */

:root .woocommerce .woocommerce-error,
:root .woocommerce .woocommerce-info,
:root .woocommerce .woocommerce-message {
    padding: 0.5em 2em .5em 3.5em!important;
    margin: 0 0 1em!important;
}

:root .woocommerce .woocommerce-error:before,
:root .woocommerce .woocommerce-info:before,
:root .woocommerce .woocommerce-message:before {
    top: .5em;
}


/* Buttons! */
:root .woocommerce #respond input#submit,
:root .woocommerce a.button,
:root .woocommerce button.button,
:root .woocommerce input.button,
:root .woocommerce #respond input#submit.alt,
:root .woocommerce a.button.alt,
:root .woocommerce button.button.alt,
:root .woocommerce input.button.alt {
    color: #fff;
    background-color: #dd443c;
}

:root .woocommerce #respond input#submit:hover,
:root .woocommerce a.button:hover,
:root .woocommerce button.button:hover,
:root .woocommerce input.button:hover,
:root .woocommerce #respond input#submit.alt:hover,
:root .woocommerce a.button.alt:hover,
:root .woocommerce button.button.alt:hover,
:root .woocommerce input.button.alt:hover {
    background-color: #151515;
    color: #fff;
}

:root .woocommerce#respond input#submit.alt.disabled,
:root .woocommerce#respond input#submit.alt.disabled:hover,
:root .woocommerce#respond input#submit.alt:disabled,
:root .woocommerce#respond input#submit.alt:disabled:hover,
:root .woocommerce#respond input#submit.alt:disabled[disabled],
:root .woocommerce#respond input#submit.alt:disabled[disabled]:hover,
:root .woocommerce a.button.alt.disabled,
:root .woocommerce a.button.alt.disabled:hover,
:root .woocommerce a.button.alt:disabled,
:root .woocommerce a.button.alt:disabled:hover,
:root .woocommerce a.button.alt:disabled[disabled],
:root .woocommerce a.button.alt:disabled[disabled]:hover,
:root .woocommerce button.button.alt.disabled,
:root .woocommerce button.button.alt.disabled:hover,
:root .woocommerce button.button.alt:disabled,
:root .woocommerce button.button.alt:disabled:hover,
:root .woocommerce button.button.alt:disabled[disabled],
:root .woocommerce button.button.alt:disabled[disabled]:hover,
:root .woocommerce input.button.alt.disabled,
:root .woocommerce input.button.alt.disabled:hover,
:root .woocommerce input.button.alt:disabled,
:root .woocommerce input.button.alt:disabled:hover,
:root .woocommerce input.button.alt:disabled[disabled],
:root .woocommerce input.button.alt:disabled[disabled]:hover,
:root .woocommerce#respond input#submit.disabled:hover,
:root .woocommerce#respond input#submit:disabled:hover,
:root .woocommerce#respond input#submit:disabled[disabled]:hover,
:root .woocommerce a.button.disabled:hover,
:root .woocommerce a.button:disabled:hover,
:root .woocommerce a.button:disabled[disabled]:hover,
:root .woocommerce button.button.disabled:hover,
:root .woocommerce button.button:disabled:hover,
:root .woocommerce button.button:disabled[disabled]:hover,
:root .woocommerce input.button.disabled:hover,
:root .woocommerce input.button:disabled:hover,
:root .woocommerce input.button:disabled[disabled]:hover {
    background: #ccc !important;
}


/* Sidebar cart */

.widget_shopping_cart .variation, .widget_shopping_cart .jafdl-var {
    display:none;
}

dl.variation p {
    margin:0;
}

:root .woocommerce ul.cart_list li dl dd,
:root .woocommerce ul.cart_list li dl dt,
:root .woocommerce ul.product_list_widget li dl dd,
:root .woocommerce ul.product_list_widget li dl dt,
:root .woocommerce td.product-name dl.variation dd,
:root .woocommerce td.product-name dl.variation dt
 {
    margin-bottom: 0;
}

:root .woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total {
    border:none;
    padding: 0;
    margin: 1em 0 0;
}

.widget_shopping_cart .buttons {
    margin: .5em 0 0;
}

:root .widget_shopping_cart .button {
    margin: 0 .5em .5em 0;
}

/* Hide empty paragraph tags creating layout space */
.jafdd-var p:empty {
    display:none;
}

/* We can tighten up horizontal spacing between the red cross and actual product info */
:root .woocommerce .widget_shopping_cart .cart_list li, :root .woocommerce.widget_shopping_cart .cart_list li {
    padding-left: 1.6em;
    margin: 0 0 0.5em;
}

:root .woocommerce .widget_shopping_cart .cart_list li a.remove, :root .woocommerce.widget_shopping_cart .cart_list li a.remove {
    left:-.25em;
}

/* Tighten variation information */
:root .woocommerce dl.variation, :root .woocommerce dl.jafdl-var {
    padding:0;
    border:none;
    font-size:.85em;
    line-height: 1.3;
    color: #626a59;
    margin:.5em 0;
}


/* Single Product */

/* Stop the blurriness - enable images to show at their actual size (400px wide) */
:root .woocommerce #content div.product div.images,
:root .woocommerce div.product div.images,
:root .woocommerce-page #content div.product div.images,
:root .woocommerce-page div.product div.images {
    width: 400px;
    max-width:100%;
    margin:0 auto;
}

@media (min-width:769px) {

    :root .woocommerce #content div.product div.summary,
    :root .woocommerce div.product div.summary,
    :root .woocommerce-page #content div.product div.summary,
    :root .woocommerce-page div.product div.summary {
        width: calc(100% - 400px - 1.5em);
    }

    @media (max-width:1150px) {

        :root .woocommerce #content div.product div.images,
        :root .woocommerce div.product div.images,
        :root .woocommerce-page #content div.product div.images,
        :root .woocommerce-page div.product div.images {
            float:none;
        }

        :root .woocommerce #content div.product div.summary,
        :root .woocommerce div.product div.summary,
        :root .woocommerce-page #content div.product div.summary,
        :root .woocommerce-page div.product div.summary {
            width: 100%;
        }

    }

}

/* Fix spacing on attribute table */
:root .woocommerce table.shop_attributes td {
    padding:0 .6em;
}

.single-product .entry-summary {
    font-size:.9em;
}

.product .price {
    margin:0;
}

.product_meta>span {
    border-bottom: 1px solid #e5e5e5;
    background: #f5f5f5;
    padding: .3em .6em;
    display:block;
}
    
    .product_meta>span:last-child {
        border-bottom:none;
    }

    .product_meta strong {
        margin-right:.25em;
    }

:root .woocommerce div.product .woocommerce-tabs .panel {
    margin:0;
}

/* Archive templates */

.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count {
    font-weight:bold;
}

.woocommerce .term-description {
    margin:0 0 2em;
}

:root .woocommerce ul.products li.product h3 {
    padding-bottom:0;
}

:root .woocommerce ul.products li.product a img {
    margin:0;
}

/* Improve pagination and breadcrumb bar display */
:root .woocommerce .woocommerce-breadcrumb {
    padding:.5em;
    margin:0 0 1.5em;
    background:#f5f5f5;
}

.woocommerce nav.woocommerce-pagination {
    margin:1em 0 1.5em;
}

/* We want this button to wrap if the grid width isn't sufficient to display on one line */
.woocommerce ul.products li.product .button {
    white-space:normal;
    font-weight: normal;
    font-size: 0.85em;
}

/* Cart (dedicated page) */

:root .woocommerce table.shop_table {
    border-collapse:collapse;
    margin: 0 0 2em;
}

:root .woocommerce-cart .cart-collaterals .cart_totals table {
    width: 100%;
    border-collapse:collapse;
    border-left: 1px solid #ddd;
}

:root .woocommerce-cart .cart-collaterals .cart_totals table td, :root .woocommerce-cart .cart-collaterals .cart_totals table th {
    padding: .4em .6em;
}

/* Make things prettier within payment box */

.woocommerce-checkout-payment fieldset {
    margin:0;
    padding:0;
    border:none;
}

:root .woocommerce-checkout #payment div.payment_box:after {
    top:0;
    margin-top: -16px;
}

/***************************************************************
 *
 * Sidebar
 *
 ***************************************************************/

.sidebar, .sidebar ul, .sidebar li {
    padding: 0;
    margin: 0;
    list-style: none;
    clear: both;
}

/* Sidebar categories */

.product-categories {
    color:#ccc;
    font-size: .9em;
}

.product-categories>li {
    margin: 0.5em 0;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.product-categories .count {
    padding-right: 0.5em;
    text-align: right;
    position: relative;
    float: right;
}

.product-categories .show_nav_children {
    line-height: inherit;
    z-index:10;
    top: 0;
    right: 2em;
    bottom: 0;
}

.product-categories a {
    color:#444;
    background: #fff;
    text-decoration:none;
    display: inline-block;
    margin: 0 -3em 0 0;
    padding: 0.1em 3.5em 0.1em .6em;
    width: 100%;
    position: relative;
}
    
    .product-categories a:after {
        content:"";
        position:absolute;
        z-index: 1;
        top:0;
        left:0;
        right:0;
        bottom:0;
}

    .product-categories a:hover {
        color:#fff;
        background:#dd443c;
    }

        .product-categories a:hover + .count {
            color:rgba(255,255,255,0.7);
        }

    .product-categories .children a {
        padding-left:1em;
    }

        .product-categories .children .children a {
            padding-left:1.5em;
        }

    .product-categories>li>a {
        font-weight:bold;   
    }

/***************************************************************
 *
 * News and/or blog
 *
 ***************************************************************/
.postdate, .postmetadata {
    font-size:0.8em;
    font-style:italic;
    margin:0;
}

/***************************************************************
 *
 * Search Results
 *
 ***************************************************************/

.search_result {
    margin: 0 0 1.5em;
    padding: 0 0 1em;
    border-bottom: 2px solid #EBF4DE;
}

    .search_result .wp-post-image {
        display:block;
    }

    .search_result .woocommerce-main-image.alignleft {
        margin:0;
        text-align:left;
    }

    .search_result h2 {
        margin:.5em 0;
    }

    .search_result h2 a {
        text-decoration:none;
    }


    @media (min-width:750px) {

        .search_result_product {
            padding-left:170px;
        }

            .search_result_product .woocommerce-main-image.alignleft {
                margin:0 0 0 -170px;
                float:left;
            }

    }

    @media (min-width:1000px) {
        .woocommerce.search a.button.alignright {
            margin:0 0 1em 1.5em;
        }
    }

/***************************************************************
 *
 * Homepage
 *
 ***************************************************************/

:root .home .woocommerce .product {
     margin-bottom:0; 
}

/* !important ahead! Easier to override Woocommerce... */
@media (max-width:768px) {
 
    @media (min-width:601px) {
        
        .home .woocommerce .product {
            width:48% !important;
            margin:0 4% 0 0 !important;
            float:left !important;
            clear:both !important;
        }

            .home .woocommerce .product:nth-child(2n) {
                margin-right:0 !important;
                clear:none !important;
            }
    }

    @media (max-width:600px) {
        .home .woocommerce .product {
            width: 300px !important;
            margin: 0 auto 2em !important;
            float:none !important;
        }

            .home .woocommerce .product.last {
                margin-bottom:0 !important;
            }
    }

}

/***************************************************************
 *
 * Contact Page
 *
 ***************************************************************/

#google_map { /* The outer div */
    margin: 1.5em 0;
}

#google_map #map_canvas { /* the inner container that defines the actual map size */
    width: 95%;
    height: 300px;
    margin: auto;
}

/***************************************************************
 *
 * Footer
 *
 ***************************************************************/

footer {
    font-size:.8em; /* footer has been set to 12.8px */
    clear: both;
}

    footer a {
        color:#dd443c;
    }

        footer a:hover {
            color:#000;
        }

section.credits {
    clear:both;
    color: #333;
    font-size: .9em;
    padding:1.5em 0 0;
    text-align:center;
}

    .credits p {
        margin: .65em 0;
    }

    body .woocommerce span.onsale, .woocommerce span.onsale {
        background: url(images/Sale-Star.png) center center no-repeat !important;
        /* text-indent: -9999px !important; */
        width: 100px !important;
        height: 100px !important;
        display: flex !important;
        border-radius: 0 !important;
        background-size: 100px !important;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
        padding-left: 12px;
        /* text-transform: uppercase; */
        font-size: .8em;
    }
    
    
    /****** WOO COMMERCE OVERWRITES *********/
    
    .tax-product_cat li.product-category {display:none;}
    
    .tax-product_cat ul.products li.first {clear:none!important;}
    
    .tax-product_cat ul.products {
        display:flex; 
        flex-flow:wrap row;
    }
    
    .tax-product_cat ul.products li.product, .tax-product_cat ul.products li.product {
        float:none!important;
    }